mono-jsx-dom 0.1.4 → 0.1.6

package/bin/build.mjs

@@ -56,15 +56,8 @@ async function ensureDir(path) {
 }
 
 // bin/build.ts
-async function run() {
-  const flags = parseFlags();
-  const start = performance.now();
-  const runtime = flags.node ?? "fetch-server";
-  await build({ runtime });
-  console.log("\x1B[32m\u2728 Build completed.\x1B[0m", "\x1B[90m(%d ms)\x1B[0m", performance.now() - start);
-}
 async function build(options) {
-  const workDir = join(cwd(), options?.dir ?? ".");
+  const workDir = join(cwd(), options?.appName ?? ".");
   const outdir = join(workDir, options?.outdir ?? "dist");
   if (!await exists(join(workDir, "index.html"))) {
     console.error("index.html not found");
@@ -159,7 +152,9 @@ async function build(options) {
   for (const file of outputFiles) {
     const contentType = file.path.endsWith(".js") ? "application/javascript" : "text/css";
     const filename = relative(outdir, file.path);
-    vfs[filename] = await createVFile(indexHTML, filename, file.text, contentType);
+    if (filename !== tw?.entryCSS) {
+      vfs[filename] = await createVFile(indexHTML, filename, file.text, contentType);
+    }
   }
   if (tw) {
     const css = await tw.build();
@@ -173,10 +168,17 @@ async function build(options) {
     'import buildJSON$ from "./build.json" with { type: "json" };',
     "server$.setVFS(new Map(Object.entries(buildJSON$)));"
   ].join("");
-  await buildServerJS(workDir, outdir, options?.runtime, extraJS);
+  await buildServerJS(workDir, outdir, options?.serverType, extraJS);
   await dispose();
 }
-async function buildServerJS(workDir, outdir, runtime = "fetch-server", extraJS, watch) {
+async function run() {
+  const flags = parseFlags();
+  const start = performance.now();
+  const serverType = flags.node ? "node" : "fetch-server";
+  await build({ serverType });
+  console.log("\x1B[32m\u2728 Build completed.\x1B[0m", "\x1B[90m(" + Math.ceil(performance.now() - start) + " ms)\x1B[0m");
+}
+async function buildServerJS(workDir, outdir, serverType = "fetch-server", extraJS, watch) {
   const stdin2 = {
     sourcefile: join(workDir, "server.js"),
     contents: 'import server from "mono-jsx-dom/server;export default server;',
@@ -185,11 +187,11 @@ async function buildServerJS(workDir, outdir, runtime = "fetch-server", extraJS,
   for (const loader of ["ts", "tsx", "js", "jsx"]) {
     const sourcefile = join(workDir, "server." + loader);
     if (await exists(sourcefile)) {
-      if (runtime === "node") {
+      if (serverType === "node") {
         stdin2.sourcefile = join(workDir, "server-node.mjs");
         stdin2.resolveDir = workDir;
         stdin2.contents = [
-          'import { serve$ } from "mono-jsx-dom/server/node-fetch-server";',
+          'import { serve as serve$ } from "mono-jsx-dom/node-fetch-server";',
           'import server$ from "./server.' + loader + '";',
           "serve$(server$);"
         ].join("\n");
@@ -213,7 +215,7 @@ async function buildServerJS(workDir, outdir, runtime = "fetch-server", extraJS,
     platform: "node",
     format: "esm",
     target: "es2024",
-    external: ["mono-jsx-dom/server", "mono-jsx-dom/server/node-fetch-server"]
+    external: ["mono-jsx-dom/server", "mono-jsx-dom/node-fetch-server"]
   };
   if (extraJS) {
     esbOptions.banner = { js: extraJS };
@@ -235,6 +237,7 @@ async function buildServerJS(workDir, outdir, runtime = "fetch-server", extraJS,
   } else {
     await ctx.rebuild();
     await ctx.dispose();
+    await esbuild.stop();
   }
 }
 function initTailwindBuilder(workDir, entryCSS) {
@@ -297,7 +300,7 @@ async function paseIndexHtml(workDir) {
     }
     const relativePath = relative(workDir, join(workDir, href));
     entryPoints[relativePath] = relativePath;
-    return `<link${attrs} href="/${relativePath}">`;
+    return `<link${attrs}href="/${relativePath}">`;
   });
   content = content.replace(/<script(\s[^>]*?)src="([^"]+\.(ts|tsx|js|jsx|mjs))"\s*>/g, (tag, attrs, src) => {
     if (isUrl(src)) {
@@ -306,7 +309,7 @@ async function paseIndexHtml(workDir) {
     const relativePath = relative(workDir, join(workDir, src));
     const resolvedPath = relativePath.slice(0, relativePath.lastIndexOf(".")) + ".js";
     entryPoints[relativePath] = resolvedPath;
-    return `<script${attrs} src="/${resolvedPath}">`;
+    return `<script${attrs}src="/${resolvedPath}">`;
   });
   return { content, entryPoints };
 }
@@ -318,7 +321,7 @@ async function createVFile(indexHTML, filename, content, contentType) {
     if (ext !== ".css" && ext !== ".js") {
       filename = filename.slice(0, -ext.length) + ".js";
     }
-    indexHTML.content = indexHTML.content.replace('"/' + filename + '"', '"/' + filename + "?hash=" + hash.slice(0, 8) + '"');
+    indexHTML.content = indexHTML.content.replace('"/' + filename + '"', '"/' + filename + "?hash=" + contentHash.slice(0, 8) + '"');
   }
   return {
     content,
@@ -332,6 +335,5 @@ function isUrl(url) {
 }
 export {
   build,
-  buildServerJS,
   run
 };

package/bin/cli

@@ -10,7 +10,7 @@ switch (argv[2]) {
     import("./dev.mjs").then(command => command.run())
     break;
   case "build": {
-    import("./build.mjs").then(command => command.run( ))
+    import("./build.mjs").then(command => command.run())
     break;
   }
   default:

package/bin/dev.mjs

@@ -50,9 +50,9 @@ async function exists(filename) {
 // bin/dev.ts
 import { build } from "./build.mjs";
 async function dev(options) {
-  const ac = new AbortController();
-  const isBun = "Bun" in globalThis;
-  const workDir = join(cwd(), options?.dir ?? ".");
+  const runtime = "Deno" in globalThis ? "deno" : "Bun" in globalThis ? "bun" : "node";
+  const ac = options?.ac ?? new AbortController();
+  const workDir = join(cwd(), options?.appName ?? ".");
   const outdir = join(workDir, options?.outdir ?? "dist");
   const port = options?.port ?? 3e3;
   const devServerPort = 8798;
@@ -77,8 +77,11 @@ async function dev(options) {
     });
     await serve({
       port: devServerPort,
+      hostname: "localhost",
       idleTimeout: 32,
       // 32 seconds
+      onListen: (_localAddress) => {
+      },
       fetch: async (req) => {
         const { pathname } = new URL(req.url);
         if (pathname === "/__dev_vfs.json") {
@@ -162,30 +165,50 @@ async function dev(options) {
       }
     });
     const serverScript = await resolveModule(join(workDir, "server"), [".ts", ".mjs", ".js"]) ?? join(workDir, "node_modules/mono-jsx-dom/server/index.mjs");
+    const args = ["--watch", serverScript];
+    if (runtime === "node") {
+      args.unshift("--import", "mono-jsx-dom/node-server-hooks");
+      args.push("--port", port.toString());
+    } else {
+      args.unshift("--port", port.toString());
+    }
+    if (runtime === "deno") {
+      args.unshift("serve", "-A");
+    }
     const serverProcess = spawn(
-      isBun ? "bun" : "node",
-      ["--watch", serverScript, "--port", port.toString()],
+      runtime,
+      args,
       {
         cwd: workDir,
         env: { ...env, DEV_SERVER: devServerUrl },
         stdio: "inherit"
       }
     );
-    serverProcess.on("close", () => ac.abort());
+    const onClose = () => ac.abort();
+    serverProcess.on("close", onClose);
+    ac.signal.addEventListener("abort", () => {
+      serverProcess.off("close", onClose);
+      serverProcess.kill();
+    });
   };
   const onError = (error) => {
     console.error(error);
     ac.abort();
   };
-  if (!isBun) {
+  if (runtime === "node") {
     const [major, minor] = versions.node.split(".").map(Number);
     if (major < 22 || major === 22 && minor < 18) {
       console.error("Node.js version 22.18.0 or higher is required to use the dev command.");
       exit2(1);
     }
   }
+  process.on("SIGINT", () => {
+    console.log("\x1B[90mShutting down dev server...\x1B[0m");
+    ac.abort();
+    exit2(0);
+  });
   await build({
-    dir: options?.dir,
+    appName: options?.appName,
     outdir: options?.outdir,
     dev: {
       signal: ac.signal,
@@ -194,9 +217,23 @@ async function dev(options) {
   }).catch(onError);
 }
 async function serve(options) {
-  const serve2 = globalThis.Bun?.serve;
-  if (serve2) {
-    const server = serve2(options);
+  const denoServe = globalThis.Deno?.serve;
+  const bunServe = globalThis.Bun?.serve;
+  if (denoServe) {
+    const { fetch, port, signal, hostname, onListen } = options;
+    denoServe(
+      {
+        port,
+        signal,
+        hostname,
+        onListen: onListen ?? ((localAddress) => {
+          console.log(`Server is running on http://${hostname ?? "localhost"}:${localAddress.port}`);
+        })
+      },
+      fetch
+    );
+  } else if (bunServe) {
+    const server = bunServe(options);
     options.signal?.addEventListener("abort", () => server.stop());
   } else {
     await import("../server/node-fetch-server.mjs").then((m) => m.serve(options));

package/bin/init.mjs

@@ -69,6 +69,7 @@ async function input(prompt, placeholder = "") {
       return text;
     } finally {
       stdin.setRawMode(wasRaw ?? false);
+      stdin.pause();
     }
   }
   const rl = createInterface({ input: stdin, output: stdout });
@@ -89,6 +90,7 @@ async function confirm(prompt) {
     stdout.write(hint);
     const wasRaw = stdin.isRaw;
     stdin.setRawMode(true);
+    stdin.resume();
     try {
       const yes = await new Promise((resolve) => {
         stdin.once("data", (buf) => {
@@ -117,6 +119,7 @@ async function confirm(prompt) {
       return yes;
     } finally {
       stdin.setRawMode(wasRaw ?? false);
+      stdin.pause();
     }
   }
   const rl = createInterface({ input: stdin, output: stdout });
@@ -163,9 +166,10 @@ var template = {
       name: "mono-app",
       version: "0.0.0",
       private: true,
+      type: "module",
       scripts: {
-        dev: (bun ? "bun --bun" : "") + " mono-jsx-dom dev",
-        build: (bun ? "bun --bun" : "") + " mono-jsx-dom build",
+        dev: (bun ? "bun --bun " : "") + "mono-jsx-dom dev",
+        build: (bun ? "bun --bun " : "") + "mono-jsx-dom build",
         start: bun ? "bun --bun mono-jsx-dom build && bun dist/server.mjs" : "mono-jsx-dom build --node && node dist/server.mjs"
       }
     },
@@ -222,17 +226,40 @@ export default {
 };
 async function run() {
   const appName = argv2[3] ?? await input("Enter the name of the app", "mono-app");
-  return init(appName);
-}
-async function init(appName) {
-  const appDir = join(cwd(), appName);
-  if (await exists(appDir) && !await confirm(`Directory ${appName} already exists. Overwrite?`)) {
+  const dir = join(cwd(), appName);
+  if (await exists(dir) && !await confirm(`Directory ${appName} already exists. Overwrite?`)) {
     return;
   }
+  const tailwindCSS = await confirm("Use TailwindCSS for styling?");
+  const wrangler = await confirm("Add Cloudflare Workers integration?");
+  const npmCmd = bun ? "bun" : "npm";
+  await init({
+    dir,
+    appName,
+    tailwindCSS,
+    wrangler,
+    onInstall: () => {
+      console.log("\x1B[90mInstalling dependencies...\x1B[0m");
+    }
+  });
+  console.log("");
+  console.log("\u2728 \x1B[32mSetup completed.\x1B[0m");
+  console.log("You can now start or build the app with the following commands:");
+  console.log("");
+  console.log(`cd ${appName}`);
+  console.log(`${npmCmd} run dev    \x1B[90m# start the app in development mode.\x1B[0m`);
+  if (wrangler) {
+    console.log(`${npmCmd} run deploy \x1B[90m# deploy the app to Cloudflare Workers.\x1B[0m`);
+  } else {
+    console.log(`${npmCmd} run build  \x1B[90m# build the app for production.\x1B[0m`);
+    console.log(`${npmCmd} run start  \x1B[90m# build and start the app in production mode.\x1B[0m`);
+  }
+  console.log("");
+}
+async function init(options) {
+  const { dir, appName, tailwindCSS, wrangler } = options;
   const scaffold = { ...template };
-  const withTailwind = await confirm("Use TailwindCSS for styling?");
-  const withWrangler = await confirm("Add Cloudflare Workers integration?");
-  if (withWrangler) {
+  if (wrangler) {
     scaffold["wrangler.jsonc"] = JSON.stringify(
       {
         $schema: "./node_modules/wrangler/config-schema.json",
@@ -251,17 +278,17 @@ async function init(appName) {
       2
     );
   }
-  if (!withTailwind) {
+  if (!tailwindCSS) {
     scaffold["app/style.css"] = "/* app styles */\n";
   }
-  await ensureDir(appDir);
+  await ensureDir(dir);
   await Promise.all(
     Object.entries(scaffold).map(async ([filename, content]) => {
-      const filepath = join(appDir, filename);
+      const filepath = join(dir, filename);
       if (filename === "package.json") {
         const pkg = JSON.parse(content);
         pkg.name = appName;
-        if (withWrangler) {
+        if (wrangler) {
           pkg.scripts.dev = "wrangler dev";
           pkg.scripts.deploy = "wrangler deploy";
           delete pkg.scripts.build;
@@ -277,7 +304,7 @@ async function init(appName) {
   );
   let tsConfig = /* @__PURE__ */ Object.create(null);
   try {
-    const data = await readFile(join(appDir, "tsconfig.json"), "utf8");
+    const data = await readFile(join(dir, "tsconfig.json"), "utf8");
     tsConfig = JSON.parse(data);
   } catch {
   }
@@ -289,44 +316,40 @@ async function init(appName) {
   compilerOptions.noEmit ??= true;
   compilerOptions.jsx = "react-jsx";
   compilerOptions.jsxImportSource = "mono-jsx-dom";
-  await writeFile(join(appDir, "tsconfig.json"), JSON.stringify(tsConfig, null, 2));
-  console.log("\x1B[90mInstalling dependencies...\x1B[0m");
-  const cmd = install(appDir, withTailwind, withWrangler);
-  const isBun = cmd === "bun";
-  console.log("");
-  console.log("\u2728 \x1B[32mSetup completed.\x1B[0m");
-  console.log("You can now start or build the app with the following commands:");
-  console.log("");
-  console.log(`cd ${appName}`);
-  console.log(`${cmd} dev${isBun ? "    " : ""}    \x1B[90m# start the app in development mode.\x1B[0m`);
-  if (withWrangler) {
-    console.log(`${cmd}${isBun ? " run" : ""} deploy \x1B[90m# deploy the app to Cloudflare Workers.\x1B[0m`);
-  } else {
-    console.log(`${cmd}${isBun ? " run" : ""} build  \x1B[90m# build the app for production.\x1B[0m`);
-    console.log(`${cmd} start${isBun ? "    " : ""}  \x1B[90m# build and start the app in production mode.\x1B[0m`);
-  }
-  console.log("");
+  await writeFile(join(dir, "tsconfig.json"), JSON.stringify(tsConfig, null, 2));
+  const depsOptions = { tailwindCSS, wrangler };
+  options.onInstall?.(depsOptions);
+  installDependencies(dir, depsOptions);
 }
-function install(cwd2, withTailwind, withWrangler) {
-  let cmd = "npm";
-  if (bun) {
-    cmd = "bun";
-  }
-  spawnSync(cmd, ["add", "mono-jsx-dom"], { cwd: cwd2 });
+function installDependencies(cwd2, options) {
+  const { tailwindCSS, wrangler, extraDependencies, extraDevDependencies } = options;
+  const npmCmd = bun ? "bun" : "npm";
+  const deps = ["mono-jsx-dom"];
   const devDeps = ["esbuild"];
-  if (withTailwind) {
+  if (tailwindCSS) {
     devDeps.push("tailwindcss", "oxide-wasm");
   }
-  if (withWrangler) {
+  if (wrangler) {
     devDeps.push("wrangler");
   }
-  spawnSync(cmd, ["add", "-D", ...devDeps], { cwd: cwd2 });
-  if (withWrangler) {
-    spawnSync(cmd, ["wrangler", "types"], { cwd: cwd2 });
+  if (extraDependencies) {
+    deps.push(...extraDependencies);
+  }
+  if (extraDevDependencies) {
+    devDeps.push(...extraDevDependencies);
+  }
+  spawnSync(npmCmd, ["add", ...deps], { cwd: cwd2 });
+  spawnSync(npmCmd, ["add", "-D", ...devDeps], { cwd: cwd2 });
+  if (wrangler) {
+    if (npmCmd === "bun") {
+      spawnSync(npmCmd, ["--bun", "wrangler", "types"], { cwd: cwd2 });
+    } else {
+      spawnSync(npmCmd, ["wrangler", "types"], { cwd: cwd2 });
+    }
   }
-  return cmd;
 }
 export {
   init,
+  installDependencies,
   run
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx-dom",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A JSX runtime for browsers.",
   "keywords": [
     "jsx",
@@ -35,9 +35,13 @@
       "node": "./server/index.mjs",
       "import": "./server/index.mjs"
     },
-    "./server/node-fetch-server": {
+    "./node-fetch-server": {
       "node": "./server/node-fetch-server.mjs",
       "import": "./server/node-fetch-server.mjs"
+    },
+    "./node-server-hooks": {
+      "node": "./server/node-server-hooks.mjs",
+      "import": "./server/node-server-hooks.mjs"
     }
   },
   "scripts": {

package/server/node-fetch-server.mjs

@@ -115,12 +115,16 @@ async function sendResponse(res, response) {
   res.end();
 }
 function serve(options) {
-  const port = options?.port ?? getDefaultPort();
-  const server = createServer(createRequestListener(options.fetch, options));
+  const { port = getDefaultPort(), hostname, signal, fetch, onListen } = options;
+  const server = createServer(createRequestListener(fetch, options));
   server.listen(port, options?.hostname, () => {
-    console.log(`Server is running on http://${options?.hostname ?? "localhost"}:${port}`);
+    if (onListen) {
+      onListen({ port });
+    } else {
+      console.log(`Server is running on http://${hostname ?? "localhost"}:${port}`);
+    }
   });
-  options?.signal?.addEventListener("abort", () => {
+  signal?.addEventListener("abort", () => {
     server.close();
   });
   return new Promise((resolve, reject) => {

package/server/node-server-hooks.mjs

@@ -0,0 +1,17 @@
+// server/node-server-hooks.ts
+import { argv } from "node:process";
+import { registerHooks } from "node:module";
+var serverHook = `
+import { serve as serve$ } from "mono-jsx-dom/node-fetch-server";
+import(import.meta.url).then(m => serve$(m.default));
+`;
+registerHooks({
+  load(url, context, nextLoad) {
+    const result = nextLoad(url, context);
+    if (result.source && "file://" + argv[1] === url) {
+      const source = typeof result.source === "string" ? result.source : new TextDecoder().decode(result.source);
+      return { ...result, source: source + serverHook };
+    }
+    return result;
+  }
+});