Ooker Posts

Ooker

•Created by Ooker on 11/12/2024 in #help

What makes a selector being clickable on browser, but not on runtime?

I'm trying to click the "What's on your mind" input on a Facebook user profile. I can do that in the browser:

const whatsOnYourMind = document.querySelector("#mount_0_0_Xr > div > div > div:nth-child(1) > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div.x78zum5.xdt5ytf.x1t2pt76.x1n2onr6.x1ja2u2z.x10cihs4 > div.x78zum5.xdt5ytf.x1t2pt76 > div > div > div.x6s0dn4.x78zum5.xdt5ytf.x193iq5w > div.x9f619.x193iq5w.x1talbiv.x1sltb1f.x3fxtfs.x1swvt13.x1pi30zi.xw7yly9 > div > div.x9f619.x1n2onr6.x1ja2u2z.xeuugli.xs83m0k.xjl7jj.x1xmf6yo.x1emribx.x1e56ztr.x1i64zmx.x19h7ccj.xu9j1y6.x7ep2pv > div:nth-child(1) > div > div > div > div > div.x1cy8zhl.x78zum5.x1iyjqo2.xh8yej3 > div > div.x1ey2m1c.xds687c.x17qophe.xg01cxk.x47corl.x10l6tqk.x13vifvy.x1ebt8du.x19991ni.x1dhq9h.x1o1ewxj.x3x9cwd.x1e5q0jg.x13rtm0m")
whatsOnYourMind.click()

const whatsOnYourMind = document.querySelector("#mount_0_0_Xr > div > div > div:nth-child(1) > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div.x78zum5.xdt5ytf.x1t2pt76.x1n2onr6.x1ja2u2z.x10cihs4 > div.x78zum5.xdt5ytf.x1t2pt76 > div > div > div.x6s0dn4.x78zum5.xdt5ytf.x193iq5w > div.x9f619.x193iq5w.x1talbiv.x1sltb1f.x3fxtfs.x1swvt13.x1pi30zi.xw7yly9 > div > div.x9f619.x1n2onr6.x1ja2u2z.xeuugli.xs83m0k.xjl7jj.x1xmf6yo.x1emribx.x1e56ztr.x1i64zmx.x19h7ccj.xu9j1y6.x7ep2pv > div:nth-child(1) > div > div > div > div > div.x1cy8zhl.x78zum5.x1iyjqo2.xh8yej3 > div > div.x1ey2m1c.xds687c.x17qophe.xg01cxk.x47corl.x10l6tqk.x13vifvy.x1ebt8du.x19991ni.x1dhq9h.x1o1ewxj.x3x9cwd.x1e5q0jg.x13rtm0m")
whatsOnYourMind.click()

However, the element returns null when I use @astral/astral on Deno (the browser is logged in already):

import { launch } from "jsr:@astral/astral";
const browser = await launch({ headless: false });
const page = await browser.newPage("https://www.facebook.com/my_own_profile");
const whatsOnYourMind = await page.$("#mount_0_0_Xr > div > div > div:nth-child(1) > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div.x78zum5.xdt5ytf.x1t2pt76.x1n2onr6.x1ja2u2z.x10cihs4 > div.x78zum5.xdt5ytf.x1t2pt76 > div > div > div.x6s0dn4.x78zum5.xdt5ytf.x193iq5w > div.x9f619.x193iq5w.x1talbiv.x1sltb1f.x3fxtfs.x1swvt13.x1pi30zi.xw7yly9 > div > div.x9f619.x1n2onr6.x1ja2u2z.xeuugli.xs83m0k.xjl7jj.x1xmf6yo.x1emribx.x1e56ztr.x1i64zmx.x19h7ccj.xu9j1y6.x7ep2pv > div:nth-child(1) > div > div > div > div > div.x1cy8zhl.x78zum5.x1iyjqo2.xh8yej3 > div > div.x1ey2m1c.xds687c.x17qophe.xg01cxk.x47corl.x10l6tqk.x13vifvy.x1ebt8du.x19991ni.x1dhq9h.x1o1ewxj.x3x9cwd.x1e5q0jg.x13rtm0m");
whatsOnYourMind.click()

import { launch } from "jsr:@astral/astral";
const browser = await launch({ headless: false });
const page = await browser.newPage("https://www.facebook.com/my_own_profile");
const whatsOnYourMind = await page.$("#mount_0_0_Xr > div > div > div:nth-child(1) > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div.x78zum5.xdt5ytf.x1t2pt76.x1n2onr6.x1ja2u2z.x10cihs4 > div.x78zum5.xdt5ytf.x1t2pt76 > div > div > div.x6s0dn4.x78zum5.xdt5ytf.x193iq5w > div.x9f619.x193iq5w.x1talbiv.x1sltb1f.x3fxtfs.x1swvt13.x1pi30zi.xw7yly9 > div > div.x9f619.x1n2onr6.x1ja2u2z.xeuugli.xs83m0k.xjl7jj.x1xmf6yo.x1emribx.x1e56ztr.x1i64zmx.x19h7ccj.xu9j1y6.x7ep2pv > div:nth-child(1) > div > div > div > div > div.x1cy8zhl.x78zum5.x1iyjqo2.xh8yej3 > div > div.x1ey2m1c.xds687c.x17qophe.xg01cxk.x47corl.x10l6tqk.x13vifvy.x1ebt8du.x19991ni.x1dhq9h.x1o1ewxj.x3x9cwd.x1e5q0jg.x13rtm0m");
whatsOnYourMind.click()

Why is that?

2 replies

DDeno

•Created by Ooker on 4/4/2024 in #help

Why does `res.text()` not work inside `useEffect()`?

On islands/test.tsx I have:

import { useEffect } from "preact/hooks";
export default function Test(){ 
    fetch('https://example.com')
    .then(res => res.text())
    .then(d => console.log(d))
    
    useEffect(() => {        
        fetch('https://example.com')
        .then(res => res.text())
        .then(d => console.log(d))     
    })
    return 'hi'
}

import { useEffect } from "preact/hooks";
export default function Test(){ 
    fetch('https://example.com')
    .then(res => res.text())
    .then(d => console.log(d))
    
    useEffect(() => {        
        fetch('https://example.com')
        .then(res => res.text())
        .then(d => console.log(d))     
    })
    return 'hi'
}

The data returns fine in the server's console (the part outside the useEffect() hook), but it doesn't show up in the client's console. However if I change the fetch function to:

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(d => console.log(d))

fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(d => console.log(d))

then it shows on both sides. Why is that the case? (Also asked on Stack Overflow).

7 replies

DDeno

•Created by Ooker on 1/16/2024 in #help

The deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../

When deploying I get this error:

Deploying... (100.0%)
Error: The deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../

Deploying... (100.0%)
Error: The deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../

A person who had the same error on their machine solves this by adding this to the import map:

  "deno.importMap": "./import_map.json"

  "deno.importMap": "./import_map.json"

This doesn't work on my case. In my understanding this shouldn't be an issue at all. Do you know why is that? Background My fresh project is under some sub-folder from the root. The structure is like this:

.
├── .github
├── .git
└── deno.json/
    └── 1/
        └── Web/
            ├── main.ts
            └── dev.ts

.
├── .github
├── .git
└── deno.json/
    └── 1/
        └── Web/
            ├── main.ts
            └── dev.ts

deno.json

{
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
    "manifest": "deno task cli manifest $(pwd)",
    "start": "deno run -A --watch=static/,routes/ './1/Web/dev.ts'",
    "build": "deno run -A './1/Web/dev.ts' build",
    "preview": "deno run -A ./1/Web/main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
...
  "exclude": [
    "**/_fresh/*"
  ],
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "$std/": "https://deno.land/std@0.208.0/",
    "daisyui": "npm:daisyui@4.4.19"
  },
...

{
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
    "manifest": "deno task cli manifest $(pwd)",
    "start": "deno run -A --watch=static/,routes/ './1/Web/dev.ts'",
    "build": "deno run -A './1/Web/dev.ts' build",
    "preview": "deno run -A ./1/Web/main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
...
  "exclude": [
    "**/_fresh/*"
  ],
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "$std/": "https://deno.land/std@0.208.0/",
    "daisyui": "npm:daisyui@4.4.19"
  },
...

7 replies

DDeno

•Created by Ooker on 1/14/2024 in #help

How to send data from a child component to its sibling?

I want create an app with two forms, each form in its own component. Users type in form 1, then the data will be passed to component 2. In there it will join the data of what they type in form 2. How can I do this? Below is the code on my machine, taken from the answer from the same question in Stack Overflow. It works when using React on Stackblitz but I don't get why it's not in my machine: index.jsx

import Form1 from "../islands/Form1.tsx";
import Form2 from "../islands/Form2.tsx";
import { Form1Provider } from "../islands/Context.tsx";

function App() {
  return (
    <Form1Provider>
      <Form1 />
      <Form2 />
    </Form1Provider>
  );
}

import Form1 from "../islands/Form1.tsx";
import Form2 from "../islands/Form2.tsx";
import { Form1Provider } from "../islands/Context.tsx";

function App() {
  return (
    <Form1Provider>
      <Form1 />
      <Form2 />
    </Form1Provider>
  );
}

Context.js

import { createContext } from 'preact'
import { useContext, useState } from "preact/hooks";

export const Form1Context = createContext(null);

export function Form1Provider({ children }) {
  const form1State = useState('Form 1 placeholder');
  return (
    <Form1Context.Provider value={form1State}>{children}</Form1Context.Provider>
  );
}

import { createContext } from 'preact'
import { useContext, useState } from "preact/hooks";

export const Form1Context = createContext(null);

export function Form1Provider({ children }) {
  const form1State = useState('Form 1 placeholder');
  return (
    <Form1Context.Provider value={form1State}>{children}</Form1Context.Provider>
  );
}

Form1.jsx

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form1() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
    
  return (
    <textarea 
    value = {form1Data} 
    onInput={(event) => setForm1Data(event.target.value)}
    />
  );
}

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form1() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
    
  return (
    <textarea 
    value = {form1Data} 
    onInput={(event) => setForm1Data(event.target.value)}
    />
  );
}

Form2.jsx

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form2() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
  const [form2Data, setForm2Data] = useState('Form 2 placeholder')
    
  return (
    <>
        <textarea 
            value = {form2Data} 
            onInput={(event) => setForm2Data(event.target.value)}
        />
        <p>The value is {form1Data} + {form2Data}</p>
    </>
  );
}

import { useContext, useState } from "preact/hooks";
import { Form1Context } from './Context.tsx';

export default function Form2() {
  const [form1Data, setForm1Data] = useContext(Form1Context)
  const [form2Data, setForm2Data] = useState('Form 2 placeholder')
    
  return (
    <>
        <textarea 
            value = {form2Data} 
            onInput={(event) => setForm2Data(event.target.value)}
        />
        <p>The value is {form1Data} + {form2Data}</p>
    </>
  );
}

The app compiles fine, but the actual result is empty.

7 replies

DDeno

•Created by Ooker on 1/11/2024 in #help

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements'

I have a core program, and from that I have auxiliary components: test, web app, cli app. Initially I worked on the core + cli app + test, then recently I work on the web app with Fresh. At first I separate the project to learn the framework easier, but now I want to join them together, so that I can debug the core easier. Now every component has this problem:

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)

I've tried restarted VS Code but it doesn't help. Here are some related files: .vscode/setting.json

{
    "debug.focusEditorOnBreak": false,
    "debug.focusWindowOnBreak": false,
    "deno.enable": true,
    "deno.unstable": true,
    "deno.codeLens.test": true,
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false,
    "deno.lint": true,
    "python.analysis.typeCheckingMode": "basic",
    "editor.defaultFormatter": "denoland.vscode-deno",
    "[typescriptreact]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
    }
}

{
    "debug.focusEditorOnBreak": false,
    "debug.focusWindowOnBreak": false,
    "deno.enable": true,
    "deno.unstable": true,
    "deno.codeLens.test": true,
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false,
    "deno.lint": true,
    "python.analysis.typeCheckingMode": "basic",
    "editor.defaultFormatter": "denoland.vscode-deno",
    "[typescriptreact]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
    }
}

aux/web/deno.json

{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "yaml_to_ts": "https://deno.land/x/yaml_to_ts@v0.1.0/mod.ts"
  },
  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
  "exclude": ["**/_fresh/*"]
}

{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "yaml_to_ts": "https://deno.land/x/yaml_to_ts@v0.1.0/mod.ts"
  },
  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
  "exclude": ["**/_fresh/*"]
}

9 replies

DDeno

•Created by Ooker on 1/10/2024 in #help

How to pass value from one form to another?

I want to design a form which has two input text field. What users type in field 1 will be passed to field 2. How can I do this in Deno Fresh? Here is the current code, suggested from https://discord.com/channels/684898665143206084/991511118524715139/1194335634228256828 routes/index.tsx:

import FormIsland from "../islands/form.tsx";

export default function Home() {

  return (
    <div> 
      <FormIsland />
    </div>
  );
}

import FormIsland from "../islands/form.tsx";

export default function Home() {

  return (
    <div> 
      <FormIsland />
    </div>
  );
}

islands/form.tsx:

import { useState } from "preact/hooks";

export default function FormIsland() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        name="Field 1"
        type="text"
        onInput={e => setInput(e.target.value)}
      />
      <input
        name="Field 2"
        type="text"
        value={input}
      />
    </div>
  );
}

import { useState } from "preact/hooks";

export default function FormIsland() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        name="Field 1"
        type="text"
        onInput={e => setInput(e.target.value)}
      />
      <input
        name="Field 2"
        type="text"
        value={input}
      />
    </div>
  );
}

It returns empty to me. Any idea?

3 replies

DDeno

•Created by Ooker on 1/8/2024 in #help

Slow loading time on localhost

20 replies

DDeno

•Created by Ooker on 1/3/2024 in #help

How does form submission work?

I'm following the tutorial: https://fresh.deno.dev/docs/getting-started/form-submissions It says:

When the user submits the form, the browser will navigate to /search with the query set as the q query parameter in the URL. The GET handler will then filter the names array based on the query, and pass it to the page component for rendering.

26 replies

DDeno

•Created by Ooker on 1/2/2024 in #help

Connection refused when creating a local API server

I'm following Simple API server | Deno Docs: 1. Create server.ts:

const kv = await Deno.openKv();

Deno.serve(async (request: Request) => {
  // Create short links
  if (request.method == "POST") {
    const body = await request.text();
    const { slug, url } = JSON.parse(body);
    const result = await kv.set(["links", slug], url);
    return new Response(JSON.stringify(result));
  }

  // Redirect short links
  const slug = request.url.split("/").pop() || "";
  const url = (await kv.get(["links", slug])).value as string;
  if (url) {
    return Response.redirect(url, 301);
  } else {
    const m = !slug ? "Please provide a slug." : `Slug "${slug}" not found`;
    return new Response(m, { status: 404 });
  }
});

const kv = await Deno.openKv();

Deno.serve(async (request: Request) => {
  // Create short links
  if (request.method == "POST") {
    const body = await request.text();
    const { slug, url } = JSON.parse(body);
    const result = await kv.set(["links", slug], url);
    return new Response(JSON.stringify(result));
  }

  // Redirect short links
  const slug = request.url.split("/").pop() || "";
  const url = (await kv.get(["links", slug])).value as string;
  if (url) {
    return Response.redirect(url, 301);
  } else {
    const m = !slug ? "Please provide a slug." : `Slug "${slug}" not found`;
    return new Response(m, { status: 404 });
  }
});

2. Run deno run -A --unstable server.ts. The site says "Please provide a slug" 3. Run:

curl --header "Content-Type: application/json" --request POST --data '{"url":"https://docs.deno.com/runtime/manual","slug":"denodocs"}' http://localhost:8000/

curl --header "Content-Type: application/json" --request POST --data '{"url":"https://docs.deno.com/runtime/manual","slug":"denodocs"}' http://localhost:8000/

I get this error:

curl: (7) Failed to connect to localhost port 8000 after 0 ms: Connection refused

curl: (7) Failed to connect to localhost port 8000 after 0 ms: Connection refused

Searching for the error, I think I need to replace localhost with 127.0.0.1:

curl --header "Content-Type: application/json"   --request POST   --data '{"url":"https://docs.deno.com/runtime/manual","slug":"denodocs"}'   http://127.0.0.1:8000/

curl --header "Content-Type: application/json"   --request POST   --data '{"url":"https://docs.deno.com/runtime/manual","slug":"denodocs"}'   http://127.0.0.1:8000/

This doesn't help either. In my understanding, it should return

{ "ok": true, "versionstamp": "00000000000000060000" }

{ "ok": true, "versionstamp": "00000000000000060000" }

Do you know what goes wrong? (Also asked on Stack OVerflow)

7 replies

DDeno

•Created by Ooker on 8/7/2023 in #help

VS Code's debugger terminates before finished

I notice that occasionally the debugger terminates at the middle of the running, or at least doesn't print out the rest of the log. It happens even with breakpoint. Is there any reason for this?

3 replies

DDeno

•Created by Ooker on 7/31/2023 in #help

How to ignore ts error when bundling?

I run

deno bundle '.main.ts' fibery.js

deno bundle '.main.ts' fibery.js

and it refuses to work due to 41 errors. Mostly they are any type error. When debugging they run fine. Is there a way to force bundling? I add the //@ts-ignore at the top of the file but it doesn't work

11 replies

DDeno

•Created by Ooker on 7/22/2023 in #help

Bundle without export

Is it possible to have the output not having export... line?

7 replies