EGamalielGZ Posts

EGamalielGZ

•Created by EGamalielGZ on 10/13/2024 in #help

document is not defined error while testing preact hooks

Currently I'm developing a preact hooks library. When I try to run a simple test using deno test, it throws me the next error:

error: ReferenceError: document is not defined

error: ReferenceError: document is not defined

Here is the code of the test I'm doing and the deno.json at root and workspace Code:

import { renderHook } from "@testing-library/preact";
import { useFetch } from "@/hooks/use-fetch.ts";
import { expect } from "@std/expect";

Deno.test("Use fetch", () => {
    const { result } = renderHook(()=> useFetch("https://jsonplaceholder.typicode.com/todos/1"))
    expect(result.current.data).not.toEqual(null);
});

import { renderHook } from "@testing-library/preact";
import { useFetch } from "@/hooks/use-fetch.ts";
import { expect } from "@std/expect";

Deno.test("Use fetch", () => {
    const { result } = renderHook(()=> useFetch("https://jsonplaceholder.typicode.com/todos/1"))
    expect(result.current.data).not.toEqual(null);
});

deno.json (root)

{
  "workspace": [
    "./packages/pretch-core",
    "./packages/pretch-preact",
    "./packages/pretch-react"
  ],
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "lint": {
    "rules": {
      "include": [
        "no-console",
        "ban-types",
        "camelcase",
        "verbatim-module-syntax"
      ]
    }
  },
  "exclude": [
    ".git",
    ".vscode"
  ],
  "imports": {
    "@std/expect": "jsr:@std/expect@^1.0.5",
    "@testing-library/dom": "npm:@testing-library/dom@^10.4.0"
  }
}

{
  "workspace": [
    "./packages/pretch-core",
    "./packages/pretch-preact",
    "./packages/pretch-react"
  ],
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "lint": {
    "rules": {
      "include": [
        "no-console",
        "ban-types",
        "camelcase",
        "verbatim-module-syntax"
      ]
    }
  },
  "exclude": [
    ".git",
    ".vscode"
  ],
  "imports": {
    "@std/expect": "jsr:@std/expect@^1.0.5",
    "@testing-library/dom": "npm:@testing-library/dom@^10.4.0"
  }
}

deno.json (workspace)

{
  "name": "@prefetch/preact",
  "version": "0.1.2",
  "tasks": {
    "doc": "deno doc --html --name='Pretch' src"
  },
  "imports": {
    "@preact/signals": "npm:@preact/signals@^1.3.0",
    "@std/assert": "jsr:@std/assert@1",
    "preact": "npm:preact@^10.24.1",
    "@/": "./",
    "@std/expect": "jsr:@std/expect@^1.0.5",
    "@testing-library/preact": "npm:@testing-library/preact@^3.2.4"
  },
  "exports": {
    ".": "./mod.ts"
  }
}

{
  "name": "@prefetch/preact",
  "version": "0.1.2",
  "tasks": {
    "doc": "deno doc --html --name='Pretch' src"
  },
  "imports": {
    "@preact/signals": "npm:@preact/signals@^1.3.0",
    "@std/assert": "jsr:@std/assert@1",
    "preact": "npm:preact@^10.24.1",
    "@/": "./",
    "@std/expect": "jsr:@std/expect@^1.0.5",
    "@testing-library/preact": "npm:@testing-library/preact@^3.2.4"
  },
  "exports": {
    ".": "./mod.ts"
  }
}

7 replies

DDeno

•Created by EGamalielGZ on 10/7/2024 in #help

How to publish in JSR a library with workspaces?

I'm developing a hooks library from preact and react which a have a "common"/core library. I want to know how to publish the preact and react library in jsr.

10 replies

DDeno

•Created by EGamalielGZ on 4/17/2024 in #help

How to install a local jsr library on deno and nodejs?

I'm developing a JSR library, but I want to taste it locally on a web framework

2 replies

DDeno

•Created by EGamalielGZ on 10/6/2023 in #help

Error only happens when I'm on deno deploy

Please can someone explain why with my web application when deployed in deno deploy I get this response and error when trying to login but not when I login locally? Response: Response { body: ReadableStream { locked: false }, bodyUsed: false, headers: Headers { "content-length": "98", "content-type": "text/plain; charset=utf-8", date: "Fri, 06 Oct 2023 03:51:17 GMT", server: "deno/gcp-us-south1", via: "http/1.1 edgeproxy" }, ok: false, redirected: false, status: 508, statusText: "Loop Detected", url: "https://roomhome.deno.dev/api/auth/client/login" } Error: An error occurred during route handling or page rendering. SyntaxError: Unexpected non-whitespace character after JSON at position 3 (line 1 column 4) at parse (<anonymous>) at packageData (ext:deno_fetch/22_body.js:369:14) at consumeBody (ext:deno_fetch/22_body.js:246:12) at eventLoopTick (ext:core/01_core.js:183:11) at async POST (file:///src/routes/login.tsx:40:32) at async handler (file:///src/routes/_middleware.ts:32:14) at async handler (https://deno.land/x/fresh@1.4. Repo: https://github.com/EGAMAGZ/RoomHome

15 replies

DDeno

•Created by EGamalielGZ on 10/3/2023 in #help

How to avoid the method POST to executed in the URL I am redirected to?

3 replies

DDeno

•Created by EGamalielGZ on 10/3/2023 in #help

Help, does the middleware example in the Deno Fresh documentation not work for anyone else?

I tried to follow the example in Deno Fresh about middlewares, but it doesn't work, the content ctx.state.data doesn't appears to be undefined whatever I do

3 replies

DDeno

•Created by EGamalielGZ on 9/25/2023 in #help

Is there any way to define a signal inside a route component?

Is there any way to define a signal inside a route component? I am trying to do it but an error raises Error:

An error occurred during route handling or page rendering.

Error: Hook can only be invoked from render methods.
    at Object.i.__h (https://esm.sh/stable/preact@10.15.1/denonext/debug.js:39:147)
    at l (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:168)
    at T (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:1458)
    at E (https://esm.sh/v114/@preact/signals@1.1.3/X-ZS8q/deno/signals.mjs:2:2347)
    at DinosaurPage (file:///C:/Users/user/projects/RoomHome/routes/dinosaur.tsx:32:21)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async render (https://deno.land/x/fresh@1.4.3/src/server/render.ts:216:19)
    at async https://deno.land/x/fresh@1.4.3/src/server/context.ts:794:24
    at async handler (https://deno.land/x/fresh@1.4.3/src/server/context.ts:508:14)
    at async ext:deno_http/00_serve.js:442:22

An error occurred during route handling or page rendering.

Error: Hook can only be invoked from render methods.
    at Object.i.__h (https://esm.sh/stable/preact@10.15.1/denonext/debug.js:39:147)
    at l (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:168)
    at T (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:1458)
    at E (https://esm.sh/v114/@preact/signals@1.1.3/X-ZS8q/deno/signals.mjs:2:2347)
    at DinosaurPage (file:///C:/Users/user/projects/RoomHome/routes/dinosaur.tsx:32:21)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async render (https://deno.land/x/fresh@1.4.3/src/server/render.ts:216:19)
    at async https://deno.land/x/fresh@1.4.3/src/server/context.ts:794:24
    at async handler (https://deno.land/x/fresh@1.4.3/src/server/context.ts:508:14)
    at async ext:deno_http/00_serve.js:442:22

Code:

export default async function DinosaurPage(_req: Request, ctx: RouteContext) {
  const res = await fetch(new URL(`${ctx.url.origin}/api/dinosaur`));

  if (!(res.status === 200)) {
    return (
      <div>
        Error
      </div>
    );
  }

  const { data } = await res.json() as { data: Dinosaur[] };

  const dinosaurs = useSignal<Dinosaur[]>(data);
  const total = useComputed(() => dinosaurs.value.length);

  return (
    <>
      <div class="p-4">
        <h1 class="text-4xl pb-4 font-semibold">
          Mis dinosaurios favoritos :D - Total: {total}
        </h1>
        <div class="flex flex-col gap-4">
          {dinosaurs.value.map((dinosaur: Dinosaur, index: number) => (
            <DinosaurCard dinosaur={dinosaur} />
          ))}
        </div>
      </div>
    </>
  );
}

export default async function DinosaurPage(_req: Request, ctx: RouteContext) {
  const res = await fetch(new URL(`${ctx.url.origin}/api/dinosaur`));

  if (!(res.status === 200)) {
    return (
      <div>
        Error
      </div>
    );
  }

  const { data } = await res.json() as { data: Dinosaur[] };

  const dinosaurs = useSignal<Dinosaur[]>(data);
  const total = useComputed(() => dinosaurs.value.length);

  return (
    <>
      <div class="p-4">
        <h1 class="text-4xl pb-4 font-semibold">
          Mis dinosaurios favoritos :D - Total: {total}
        </h1>
        <div class="flex flex-col gap-4">
          {dinosaurs.value.map((dinosaur: Dinosaur, index: number) => (
            <DinosaurCard dinosaur={dinosaur} />
          ))}
        </div>
      </div>
    </>
  );
}

4 replies

DDeno

•Created by EGamalielGZ on 4/5/2023 in #help

Twind intellisense stop working

8 replies

DDeno

•Created by EGamalielGZ on 3/31/2023 in #help

How to setup deno for Lunarvim?

I've followed the steps to install the LSP for deno, but the completion and formatter doesn't work https://lunarvim.org/docs/languages/typescript

4 replies