Ooker
Ooker
DDeno
Created by Ooker on 12/9/2024 in #help
error: deno task couldn't find deno.json(c) on GitHub Action
This GitHub workflow:
name: Chạy định kỳ
on:
workflow_dispatch:
schedule:
# - cron: "0 0 * * 0"
- cron: "*/5 * * * *"
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: denoland/setup-deno@v2
with:
deno-version: vx.x.x
- name: deno task start
run: deno task start
name: Chạy định kỳ
on:
workflow_dispatch:
schedule:
# - cron: "0 0 * * 0"
- cron: "*/5 * * * *"
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: denoland/setup-deno@v2
with:
deno-version: vx.x.x
- name: deno task start
run: deno task start
yields this error:
error: deno task couldn't find deno.json(c). See https://docs.deno.com/go/config
Error: Process completed with exit code 1.
error: deno task couldn't find deno.json(c). See https://docs.deno.com/go/config
Error: Process completed with exit code 1.
Of course there is one. It works on local. Do you have any idea? Here is the repo: https://github.com/QuaCau-TheSphere/meetup-ticketbox-to-google-calendar/actions/runs/12230615347/job/34112217356
2 replies
DDeno
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
No description
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