Kojo.gg•4mo ago

@deno/emit's transpile with JSR

Do I miss something or @deno/emit don't work with JSR? I am trying to do JSX DOM Client Component, hono/jsx/dom, not just hono/jsx which is SSR. I'm also surprise this emit package is not in @std but in a strange @deno, its legit? server.tsx

import { transpile } from "@deno/emit";

const url = new URL("./client.tsx", import.meta.url);
const result = await transpile(url);

import { transpile } from "@deno/emit";

const url = new URL("./client.tsx", import.meta.url);
const result = await transpile(url);

client.tsx

import { render, useState } from "@hono/hono/jsx/dom";

import { render, useState } from "@hono/hono/jsx/dom";

Termial output

Error: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../
    at __wbg_new_28c511d9baebfa89 (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:557:19)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:3275940)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:247440)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:1817650)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:2917318)
    at __wbg_adapter_46 (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:247:6)
    at real (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:231:14)
    at ext:core/01_core.js:308:9
    at eventLoopTick (ext:core/01_core.js:174:7)

Error: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../: Relative import path "@hono/hono/jsx/dom" not prefixed with / or ./ or ../
    at __wbg_new_28c511d9baebfa89 (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:557:19)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:3275940)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:247440)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:1817650)
    at <anonymous> (file:///home/eric/.local/share/deno-wasmbuild/04dbfb768c553d942c8cf19ddaf40bd5fcbdf1051aa008efa8f1839820145853.wasm:1:2917318)
    at __wbg_adapter_46 (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:247:6)
    at real (https://jsr.io/@deno/emit/0.44.0/emit.generated.js:231:14)
    at ext:core/01_core.js:308:9
    at eventLoopTick (ext:core/01_core.js:174:7)

deno.json

{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "@hono/hono/jsx"
  },
  "imports": {
    "@deno/emit": "jsr:@deno/emit@^0.44.0",
    "@hono/hono": "jsr:@hono/hono@^4.5.6"
  },
}

{
  "compilerOptions": {
    "jsx": "precompile",
    "jsxImportSource": "@hono/hono/jsx"
  },
  "imports": {
    "@deno/emit": "jsr:@deno/emit@^0.44.0",
    "@hono/hono": "jsr:@hono/hono@^4.5.6"
  },
}

I need this deno compilerOptions for my hono/jsx SSR config

9 Replies

KyleJune•4mo ago

I'd recommend esbuild with the deno plugin. That is what fresh uses to bundle/transpile preact in their fresh framework. I've been able to use esbuild for react too without issue importing from jsr.

Kojo.ggOP•4mo ago

I would love something on the fly like Fresh used to be, isn’t with the past Deno.emit() call now replaced with package @deno/emit ⬆️

KyleJune•4mo ago

idk what you mean by on the fly like fresh used to be. What is different about it now?

Kojo.ggOP•4mo ago

No build steps

KyleJune•4mo ago

App is slower without a build step. That's because each time the process restarts, it needs to regenerate the build before it can start handling requests for the build artifacts. The documentation says you can make the server command automatically restart itself by adding the --watch flag. The app would still need to be rebuilt for changes. Before it was just hidden because it would generate the build internally when the build files are requested. It's still being built with esbuild. Cold process startups are now quicker because of the build step not needing to run every time.

Kojo.ggOP•4mo ago

I really don’t care it’s slower, 99.99% of application don’t need speed. The only reason I’m on Deno is for no build Do you know how can I manage to do it?

KyleJune•4mo ago

Yea I know how you could but I don't think you understand, "no build" still had to build your app, you just didn't get to see it happening. It happened everytime you start your server. "no build" was more like "build included" since it built the app on every run instead of only when needed. Now it creates the files instead of building them and keeping them in ram.

Kojo.ggOP•4mo ago

Yes I want it in RAM man please 🙏🏾 I really don’t know how to do it with hono. My index.html is loaded from / from static, then it ask for client.js, and this is why I tried to use the @deno/emit’s transpile call. Even better can I just strip the ts stuff without types check

KyleJune•4mo ago

Just create a getBuild function and have it generate the build files to memory. I believe there is a esbuild configuration option for that, which fresh used. Then if a request comes in for one of them, have it wait until the build files were generated by esbuild before responding to requests for the build files. If someone connects before the build finishes, they will just have a longer request time.