mono-jsx-dom 0.1.3 → 0.1.5

package/bin/build.mjs

@@ -60,11 +60,11 @@ async function run() {
   const flags = parseFlags();
   const start = performance.now();
   const runtime = flags.node ?? "fetch-server";
-  await build({ runtime });
+  await build({ serverType: 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 +159,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 +175,10 @@ 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 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,7 +187,7 @@ 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 = [
@@ -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,

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,49 @@ 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.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 +216,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

@@ -9,11 +9,74 @@ import { argv, exit, stdin, stdout } from "node:process";
 import { access, mkdir } from "node:fs/promises";
 import { createInterface } from "node:readline/promises";
 async function input(prompt, placeholder = "") {
+  const hint = `\x1B[34m?\x1B[0m ${prompt}:`;
+  if (stdin.isTTY && stdout.isTTY) {
+    let text = "";
+    const render = () => {
+      stdout.write(`\r\x1B[2K${hint} `);
+      if (text) {
+        stdout.write(text);
+      } else if (placeholder) {
+        stdout.write(`\x1B[90m${placeholder}\x1B[0m`);
+        stdout.write(`\x1B[${placeholder.length}D`);
+      }
+    };
+    render();
+    const wasRaw = stdin.isRaw;
+    stdin.setRawMode(true);
+    stdin.resume();
+    try {
+      text = await new Promise((resolve) => {
+        const decoder = new TextDecoder("utf8");
+        const onData = (buf) => {
+          const chars = typeof buf === "string" ? buf : decoder.decode(buf);
+          switch (chars) {
+            case "":
+              stdout.write("\x1B[999C\n\x1B[90mcancelled\x1B[0m\n");
+              exit(130);
+              return;
+            case "\r":
+            case "\n":
+              stdin.off("data", onData);
+              resolve(text.trim() || placeholder);
+              return;
+            case "\x7F":
+            case "\b":
+              text = text.slice(0, -1);
+              render();
+              return;
+            case "":
+              text = "";
+              render();
+              return;
+            case "	":
+              if (!text && placeholder) {
+                text = placeholder;
+                render();
+              }
+              return;
+          }
+          if (chars.startsWith("\x1B")) {
+            return;
+          }
+          text += chars;
+          render();
+        };
+        stdin.on("data", onData);
+      });
+      stdout.write(`\r\x1B[2K${hint} \x1B[32m${text}\x1B[0m
+`);
+      return text;
+    } finally {
+      stdin.setRawMode(wasRaw ?? false);
+      stdin.pause();
+    }
+  }
   const rl = createInterface({ input: stdin, output: stdout });
   try {
-    const line = await rl.question("\x1B[34m?\x1B[0m " + prompt + ":" + (placeholder ? " \x1B[90m" + placeholder + "\x1B[0m" : ""));
+    const line = await rl.question(hint + (placeholder ? " \x1B[90m" + placeholder + "\x1B[0m" : ""));
     if (stdout.isTTY) {
-      stdout.write(`\x1B[1A\r\x1B[34m?\x1B[0m ${prompt} "\x1B[32m${line.trim()}\x1B[0m"\x1B[K
+      stdout.write(`\x1B[1A\r\x1B[34m?\x1B[0m ${prompt} \x1B[32m${line.trim()}\x1B[0m\x1B[K
 `);
     }
     return line.trim() || placeholder;
@@ -27,12 +90,14 @@ 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) => {
           const c = typeof buf === "string" ? buf.charCodeAt(0) : buf[0];
           switch (c) {
             case 3:
+              stdout.write("\x1B[999C\n\x1B[90mcancelled\x1B[0m\n");
               exit(130);
               break;
             case 89:
@@ -54,6 +119,7 @@ async function confirm(prompt) {
       return yes;
     } finally {
       stdin.setRawMode(wasRaw ?? false);
+      stdin.pause();
     }
   }
   const rl = createInterface({ input: stdin, output: stdout });
@@ -101,8 +167,8 @@ var template = {
       version: "0.0.0",
       private: true,
       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"
       }
     },
@@ -158,18 +224,41 @@ 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 appName = argv2[3] ?? await input("Enter the name of the app", "mono-app");
+  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} dev${bun ? "    " : ""}    \x1B[90m# start the app in development mode.\x1B[0m`);
+  if (wrangler) {
+    console.log(`${npmCmd}${bun ? " run" : ""} deploy \x1B[90m# deploy the app to Cloudflare Workers.\x1B[0m`);
+  } else {
+    console.log(`${npmCmd}${bun ? " run" : ""} build  \x1B[90m# build the app for production.\x1B[0m`);
+    console.log(`${npmCmd} start${bun ? "    " : ""}  \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",
@@ -188,17 +277,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;
@@ -214,7 +303,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 {
   }
@@ -226,44 +315,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.3",
+  "version": "0.1.5",
   "description": "A JSX runtime for browsers.",
   "keywords": [
     "jsx",

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) => {