janela 0.2.0 → 0.3.1

package/README.md

@@ -18,6 +18,19 @@ janela dev                # build + run with logs in the terminal
 janela build              # .janela/out/my-app  (+ my-app.app on macOS)
 ```
 
+Or start from a frontend framework — any Vite-based one:
+
+```bash
+janela init my-app --template vue     # or react | svelte | solid | vanilla
+cd my-app && npm install
+janela dev                            # Vite dev server + HMR, in a native window
+```
+
+`vanilla` is the default and needs no frontend toolchain at all. With a
+framework, `janela dev` runs your Vite dev server and points the window at it,
+and `janela build` flattens the production bundle into the binary — see
+[docs/frontend.md](../../docs/frontend.md).
+
 Requirements: Node 18+, a C++ compiler (Xcode CLT on macOS; g++ +
 `libwebkit2gtk-4.1-dev` on Linux; see [Windows](#windows) below). A worked
 example lives in [`examples/demo`](examples/demo) — commands, events, and a
@@ -41,9 +54,15 @@ containing `WebView2.h`. No `WebView2Loader.dll` is needed — webview.h has its
 own loader — and end users need only the **WebView2 runtime**, which is
 preinstalled on current Windows 10/11 (it ships with Edge).
 
-Two caveats today: the binary is a console-subsystem app, so a console window
-appears behind the UI (handy for `janela dev`, wrong for shipping), and there
-is no installer step — you get a bare `.exe`, not an MSI.
+`janela build` produces a **GUI-subsystem** `.exe`, so no console window
+appears behind the UI — which also means `console.log` from a command has
+nowhere to go. `janela dev` keeps the console subsystem, so logs are there
+while you work. (scriptc exposes no way to pass `-mwindows` to the linker, so
+janela rewrites the PE `Subsystem` field after linking; see
+[docs/native-shell.md](../../docs/native-shell.md).)
+
+One caveat today: there is no installer step — you get a bare `.exe`, not an
+MSI.
 
 [llvm-mingw]: https://github.com/mstorsjo/llvm-mingw/releases
 
@@ -56,6 +75,10 @@ my-app/
 └── janela.conf.json    name, bundle identifier, version, window
 ```
 
+A Vite project adds a `vite.config.js` and a `src/` tree — that config is what
+makes janela build the frontend with Vite instead of inlining `index.html`
+directly.
+
 Frontend API (injected before page load):
 
 ```js
@@ -131,10 +154,14 @@ Errors arrive as values, never throws — `err` carries a Node-shaped message
 (`ENOENT: no such file or directory, open '/x'`). UTF-8 round-trips exactly,
 astral characters included.
 
-The payload still crosses the FFI boundary one byte per call (format 2), which
-costs about **115 ms per MB on the UI thread** — fine for config files and
-documents, wrong for streaming large media. See
-[docs/async.md](../../docs/async.md) for the measurements.
+The payload crosses in a single call (format 3), and the decode that follows is
+spread across turns under a 4 ms budget, so a large read no longer stalls the
+window: a 100 MB file's worst UI pause is ~25 ms (p99 4 ms) rather than ~176 ms,
+at the same throughput. The remaining pause is the one unavoidable copy that
+materialises the string for your callback. See
+[docs/async.md](../../docs/async.md) for the measurements — and note that
+indexing a large string in your own callback (`text.length`, `slice`) is O(n)
+in scriptc and can cost far more than the read did.
 
 **Use `app.sleep`, not `setTimeout`.** scriptc's own event loop is parked for
 as long as the program sits inside the `run()` FFI call, so `setTimeout`,
@@ -152,6 +179,37 @@ The backend is ordinary TypeScript with scriptc's stdlib — including a
 `node:fs` subset — so "read a file" or "call an API" is just code in a
 command handler, no plugin layer needed.
 
+## Native dialogs and window control
+
+```ts
+app.commandAsync("openFile", (_args, resolve) => {
+  app.openFileDialog(
+    { title: "Pick a file", filters: [{ name: "Text", extensions: ["txt", "md"] }] },
+    (paths, err) => {
+      if (paths === null) { resolve({ cancelled: true }); return; }   // cancel
+      app.readFileAsync(paths[0], (rerr, text) => resolve({ path: paths[0], text }));
+    },
+  );
+});
+
+app.saveFileDialog({ defaultName: "untitled.txt" }, (path) => { /* … */ });
+
+app.setTitle("new title");
+app.setSize(720, 480, 0);
+app.setFullscreen(true);
+```
+
+A cancel is `null`, not an error. Options: `title`, `defaultPath`, `filters`,
+plus `multiple` and `directory` for open, and `defaultName` for save.
+`directory: true` is not supported on Windows and reports `ENOTSUP`.
+
+Use `commandAsync` for dialogs — the user may take as long as they like, and
+the window keeps serving other calls meanwhile. The modal itself runs on a
+later UI-thread turn rather than inside the call that requests it, because a
+nested modal loop would otherwise re-enter the host loop underneath a live TS
+frame; [docs/native-shell.md](../../docs/native-shell.md) has the details, the
+per-platform table, and the Windows GUI-subsystem note.
+
 ## Migrating from 0.1.x
 
 Commands used to take and return **JSON text**; they now take and return
@@ -206,12 +264,12 @@ no `-framework` support) and the binary is wrapped into an ad-hoc-signed
 
 ## Status
 
-Early proof of concept, macOS (arm64) and Linux (WebKitGTK). The design
-notes and scriptc findings behind it are in
-[docs/findings.md](docs/findings.md). Not yet: Windows, async commands
-that run in parallel (host code is single-threaded; `commandAsync` interleaves
-instead), native dialogs/tray/menus, multi-window,
-icons/installers/notarization.
+Early proof of concept, on macOS (arm64), Linux (WebKitGTK) and Windows
+(WebView2). The design notes and scriptc findings behind it are in
+[docs/findings.md](../../docs/findings.md). Not yet: async commands that run in
+parallel (host code is single-threaded; `commandAsync` interleaves instead),
+tray icons and menus, multi-window, directory picking on Windows,
+`app.center()`, and icons/installers/notarization.
 
 ## Releasing
 

package/bin/janela.mjs

@@ -10,10 +10,11 @@
 // webview.h, the vendored webview, the scriptc runtime library, the FFI
 // manifest — lives in this package and is assembled into .janela/ at build time.
 
-import { spawnSync } from "node:child_process";
+import { spawn, spawnSync } from "node:child_process";
 import {
-  cpSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync,
+  cpSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync,
 } from "node:fs";
+import { createServer } from "node:net";
 import { createRequire } from "node:module";
 import { dirname, join, relative, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -54,6 +55,149 @@ function loadConf(root) {
   return c;
 }
 
+// ---- frontend: plain HTML, or a Vite app -----------------------------------
+//
+// A project is in "Vite mode" when it has a vite config at its root; otherwise
+// index.html is inlined verbatim, exactly as janela has always done.
+//
+// There is no file server behind the window: the shim hands the webview one
+// HTML document (webview_set_html). So a Vite build is flattened into that one
+// document — JS inlined as a module script, CSS as a <style>, everything else
+// as a data: URI. The alternative designs (embedding the dist tree and serving
+// it from a localhost HTTP server in the shim, or registering a custom URI
+// scheme per platform) each cost a platform-specific implementation in C++ and
+// buy nothing until an app outgrows a single document.
+
+const VITE_CONFIGS = [
+  "vite.config.js", "vite.config.ts", "vite.config.mjs",
+  "vite.config.mts", "vite.config.cjs", "vite.config.cts",
+];
+
+function viteConfigPath(root) {
+  for (const f of VITE_CONFIGS) {
+    const p = join(root, f);
+    if (existsSync(p)) return p;
+  }
+  return null;
+}
+
+function viteBin(root) {
+  const p = join(root, "node_modules", ".bin", process.platform === "win32" ? "vite.cmd" : "vite");
+  if (!existsSync(p)) {
+    fail(
+      "this project has a vite config but no local vite — run your package manager's " +
+        "install first (npm install / pnpm install)",
+    );
+  }
+  return p;
+}
+
+const MIME = {
+  ".css": "text/css", ".js": "text/javascript", ".json": "application/json",
+  ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+  ".gif": "image/gif", ".webp": "image/webp", ".avif": "image/avif",
+  ".svg": "image/svg+xml", ".ico": "image/x-icon",
+  ".woff": "font/woff", ".woff2": "font/woff2", ".ttf": "font/ttf", ".otf": "font/otf",
+  ".mp3": "audio/mpeg", ".mp4": "video/mp4", ".webm": "video/webm",
+};
+
+function mimeFor(p) {
+  const dot = p.lastIndexOf(".");
+  return (dot < 0 ? null : MIME[p.slice(dot).toLowerCase()]) ?? "application/octet-stream";
+}
+
+// A dist-relative reference ("/assets/x.js", "./assets/x.js") → absolute path,
+// or null when it points outside the build (a CDN URL, a data: URI, an anchor).
+function distAsset(distDir, ref) {
+  if (!ref || /^(https?:|data:|blob:|#|mailto:)/i.test(ref)) return null;
+  const clean = ref.split("?")[0].split("#")[0].replace(/^\.?\//, "");
+  if (!clean) return null;
+  const p = join(distDir, clean);
+  return existsSync(p) && statSync(p).isFile() ? p : null;
+}
+
+function dataUri(file) {
+  return `data:${mimeFor(file)};base64,${readFileSync(file).toString("base64")}`;
+}
+
+function attr(tag, name) {
+  const m = tag.match(new RegExp(`\\b${name}\\s*=\\s*["']([^"']*)["']`, "i"));
+  return m ? m[1] : null;
+}
+
+// url(...) inside CSS → data: URIs, so a stylesheet's images and fonts survive
+// the flattening too.
+function inlineCssUrls(css, distDir, cssFile) {
+  return css.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (whole, _q, ref) => {
+    const rel = ref.startsWith("/")
+      ? distAsset(distDir, ref)
+      : distAsset(distDir, relative(distDir, join(dirname(cssFile), ref)));
+    return rel ? `url("${dataUri(rel)}")` : whole;
+  });
+}
+
+// Flatten dist/ into one self-contained HTML document.
+function inlineDist(distDir) {
+  const htmlPath = join(distDir, "index.html");
+  if (!existsSync(htmlPath)) fail(`vite build produced no ${relative(process.cwd(), htmlPath)}`);
+  let html = readFileSync(htmlPath, "utf8");
+
+  // Preloads only matter when there are separate files to fetch.
+  html = html.replace(/<link\b[^>]*\brel\s*=\s*["'](?:modulepreload|preload|prefetch)["'][^>]*>\s*/gi, "");
+
+  html = html.replace(/<script\b([^>]*)><\/script>/gi, (whole, attrs) => {
+    const file = distAsset(distDir, attr(attrs, "src"));
+    if (!file) return whole;
+    const type = /\btype\s*=\s*["']module["']/i.test(attrs) ? ' type="module"' : "";
+    // A literal </script> inside the code would close this tag early.
+    const js = readFileSync(file, "utf8").replace(/<\/script/gi, "<\\/script");
+    return `<script${type}>${js}</script>`;
+  });
+
+  html = html.replace(/<link\b([^>]*)>/gi, (whole, attrs) => {
+    const href = attr(attrs, "href");
+    const file = distAsset(distDir, href);
+    if (!file) return whole;
+    if (/\brel\s*=\s*["']stylesheet["']/i.test(attrs)) {
+      const css = inlineCssUrls(readFileSync(file, "utf8"), distDir, file).replace(/<\/style/gi, "<\\/style");
+      return `<style>${css}</style>`;
+    }
+    return whole.replace(href, dataUri(file));
+  });
+
+  // Anything still pointing at a file in dist (favicons, <img>, <source>).
+  html = html.replace(/\b(src|href)\s*=\s*["']([^"']+)["']/gi, (whole, name, ref) => {
+    const file = distAsset(distDir, ref);
+    return file ? `${name}="${dataUri(file)}"` : whole;
+  });
+
+  return html;
+}
+
+// The document handed to the webview. In dev mode it is a stub that hands the
+// window over to the Vite server: location.replace leaves no history entry, and
+// the janela bootstrap is injected per-document (webview_init), so the served
+// page gets window.janela exactly like an inlined one.
+function frontendHtml(root, conf, devUrl) {
+  if (devUrl) {
+    return `<!doctype html><html><head><meta charset="utf-8"><title>${conf.name}</title></head>` +
+      `<body><script>location.replace(${JSON.stringify(devUrl)});</script></body></html>`;
+  }
+
+  if (viteConfigPath(root)) {
+    console.log("janela: building the frontend with vite");
+    run([viteBin(root), "build"], { cwd: root });
+    const distDir = resolve(root, conf.frontend?.dist ?? "dist");
+    const html = inlineDist(distDir);
+    console.log(`janela: frontend inlined (${(Buffer.byteLength(html) / 1024).toFixed(0)} kB)`);
+    return html;
+  }
+
+  const htmlSrc = join(root, "index.html");
+  if (!existsSync(htmlSrc)) fail("missing index.html");
+  return readFileSync(htmlSrc, "utf8");
+}
+
 // ---- Windows toolchain ------------------------------------------------------
 
 // scriptc's win32 lane is MinGW-shaped twice over: its runtime uses POSIX
@@ -198,17 +342,31 @@ function ffiManifest(shimLib) {
     // async file I/O: the blocking syscall runs on a shim worker thread
     { name: "wvFsRead", symbol: "wv_fs_read", params: ["i32", "string"], returns: "i32" },
     { name: "wvFsWrite", symbol: "wv_fs_write", params: ["i32", "string", "string"], returns: "i32" },
-    { name: "wvFsStatus", symbol: "wv_fs_status", params: ["i32", "i32"], returns: "i32" },
+    // Job accessors, shared by file I/O and dialogs: both are work whose
+    // answer cannot be produced during the FFI call that starts it.
+    { name: "wvJobStatus", symbol: "wv_job_status", params: ["i32", "i32"], returns: "i32" },
+    { name: "wvJobSize", symbol: "wv_job_size", params: ["i32", "i32"], returns: "f64" },
     {
-      name: "wvFsTake", symbol: "wv_fs_take",
+      // One slice per call, so a large payload decodes across several UI turns
+      // instead of stalling on all of it at once. Returns the bytes covered.
+      name: "wvJobTakeAt", symbol: "wv_job_take_at",
       params: [
-        "i32", "i32",
+        "i32", "i32", "f64", "f64",
         { callback: { id: "sink", params: ["string", { context: "sink" }], returns: "void", lifetime: "call" } },
         { context: "sink" },
       ],
+      returns: "f64",
+    },
+    { name: "wvJobFree", symbol: "wv_job_free", params: ["i32", "i32"], returns: "i32" },
+    // Native dialogs: the modal runs on a later UI-thread turn, so asking for
+    // one never blocks the invoke that asked. Options ride as plain params
+    // (kind, flags, title, defaultPath, defaultName, filters).
+    {
+      name: "wvDialog", symbol: "wv_dialog",
+      params: ["i32", "i32", "i32", "string", "string", "string", "string"],
       returns: "i32",
     },
-    { name: "wvFsFree", symbol: "wv_fs_free", params: ["i32", "i32"], returns: "i32" },
+    { name: "wvSetFullscreen", symbol: "wv_set_fullscreen", params: ["i32", "i32"], returns: "i32" },
   ];
 
   if (process.platform === "win32") {
@@ -230,6 +388,8 @@ function ffiManifest(shimLib) {
       system_libraries: [
         "c++", "pthread",
         "ole32", "oleaut32", "shlwapi", "shell32", "user32", "version", "gdi32",
+        // GetOpenFileNameW / GetSaveFileNameW for the native file dialogs.
+        "comdlg32",
       ],
     };
   }
@@ -262,9 +422,55 @@ function ffiManifest(shimLib) {
   };
 }
 
+// ---- Windows subsystem ------------------------------------------------------
+
+// A console-subsystem .exe makes Windows open a console window behind the UI.
+// The fix is normally `-mwindows` at link time, but scriptc exposes no way to
+// pass a linker flag: `system_libraries` entries are validated as bare library
+// names and explicitly rejected if they start with "-", `libraries` entries
+// must resolve to existing files, and no env var is read for extra flags
+// (checked in @scriptc/compiler 0.0.35: backend/cc.js, ffi/profile.js).
+//
+// So the subsystem byte is rewritten in the linked PE instead. The entry point
+// is untouched — MinGW's mainCRTStartup runs either way; the field only tells
+// the loader whether to allocate a console. Every offset is checked before
+// anything is written, and a file that does not look like a console-subsystem
+// PE is left alone.
+const IMAGE_SUBSYSTEM_WINDOWS_GUI = 2;
+const IMAGE_SUBSYSTEM_WINDOWS_CUI = 3;
+
+function makeGuiSubsystem(exePath) {
+  const buf = readFileSync(exePath);
+  if (buf.length < 0x40 || buf.readUInt16LE(0) !== 0x5a4d) {
+    fail(`${exePath} is not a PE image (no MZ header)`);
+  }
+  const peOff = buf.readUInt32LE(0x3c);
+  if (peOff + 24 > buf.length || buf.readUInt32LE(peOff) !== 0x00004550) {
+    fail(`${exePath} has no PE signature at ${peOff}`);
+  }
+  // Optional header starts after the 4-byte signature and 20-byte COFF header;
+  // Subsystem sits at +68 in both PE32 (0x10b) and PE32+ (0x20b).
+  const optOff = peOff + 24;
+  const magic = buf.readUInt16LE(optOff);
+  if (magic !== 0x10b && magic !== 0x20b) {
+    fail(`${exePath} has an unrecognised optional header magic 0x${magic.toString(16)}`);
+  }
+  const subOff = optOff + 68;
+  if (subOff + 2 > buf.length) fail(`${exePath} is truncated before its Subsystem field`);
+  const current = buf.readUInt16LE(subOff);
+  if (current === IMAGE_SUBSYSTEM_WINDOWS_GUI) return;
+  if (current !== IMAGE_SUBSYSTEM_WINDOWS_CUI) {
+    fail(`${exePath} has an unexpected subsystem ${current}; refusing to rewrite it`);
+  }
+  buf.writeUInt16LE(IMAGE_SUBSYSTEM_WINDOWS_GUI, subOff);
+  writeFileSync(exePath, buf);
+}
+
 // ---- build ----------------------------------------------------------------
 
-function build(root) {
+// `devUrl` points the window at a running vite server instead of inlining the
+// frontend; `gui` asks for a GUI-subsystem .exe on Windows (build, not dev).
+function build(root, { devUrl = null, gui = true } = {}) {
   const conf = loadConf(root);
   const buildDir = join(root, ".janela", "build");
   const cacheDir = join(root, ".janela", "cache");
@@ -279,12 +485,10 @@ function build(root) {
   if (!existsSync(mainSrc)) fail("missing src-host/main.ts");
   cpSync(mainSrc, join(buildDir, "main.ts"));
 
-  const htmlSrc = join(root, "index.html");
-  if (!existsSync(htmlSrc)) fail("missing index.html");
-  const html = readFileSync(htmlSrc, "utf8");
+  const html = frontendHtml(root, conf, devUrl);
   writeFileSync(
     join(buildDir, "frontend.ts"),
-    `// Generated by janela from index.html — do not edit.\nexport const INDEX_HTML: string = ${JSON.stringify(html)};\n`,
+    `// Generated by janela — do not edit.\nexport const INDEX_HTML: string = ${JSON.stringify(html)};\n`,
   );
 
   const w = conf.window;
@@ -322,6 +526,14 @@ function build(root) {
   // inside the .exe rather than a side-by-side .pdb, so Windows benefits too.)
   run(["strip", bin]);
 
+  // `janela dev` keeps the console subsystem so console.log from a command is
+  // visible in the terminal; a shipped `janela build` must not flash a console
+  // window behind the UI, and loses stdout as the price.
+  if (process.platform === "win32" && gui) {
+    makeGuiSubsystem(bin);
+    console.log("janela: linked as a GUI-subsystem .exe (no console window)");
+  }
+
   if (process.platform === "darwin") {
     const bundle = join(outDir, `${conf.name}.app`);
     mkdirSync(join(bundle, "Contents", "MacOS"), { recursive: true });
@@ -354,8 +566,25 @@ function build(root) {
 
 // ---- init -----------------------------------------------------------------
 
-function init(name) {
-  if (!name || !/^[a-z][a-z0-9-]*$/.test(name)) fail("usage: janela init <name> (lowercase, digits, dashes)");
+const TEMPLATES = ["vanilla", "vue", "react", "svelte", "solid"];
+
+// Copy a template tree, substituting the project name in text files.
+function copyTemplate(from, to, name) {
+  for (const entry of readdirSync(from, { withFileTypes: true })) {
+    const src = join(from, entry.name);
+    const dst = join(to, entry.name);
+    if (entry.isDirectory()) {
+      mkdirSync(dst, { recursive: true });
+      copyTemplate(src, dst, name);
+    } else {
+      writeFileSync(dst, readFileSync(src, "utf8").replaceAll("__NAME__", name));
+    }
+  }
+}
+
+function init(name, template) {
+  if (!name || !/^[a-z][a-z0-9-]*$/.test(name)) fail("usage: janela init <name> [--template <t>] (lowercase, digits, dashes)");
+  if (!TEMPLATES.includes(template)) fail(`unknown template '${template}' (${TEMPLATES.join(", ")})`);
   const dir = resolve(process.cwd(), name);
   if (existsSync(dir)) fail(`${name}/ already exists`);
   mkdirSync(join(dir, "src-host"), { recursive: true });
@@ -367,44 +596,130 @@ function init(name) {
     ? `^${kitPkg.version}`
     : `file:${relative(dir, KIT) || "."}`;
 
-  const t = (f) => readFileSync(join(KIT, "templates", f), "utf8").replaceAll("__NAME__", name);
-  writeFileSync(join(dir, "index.html"), t("index.html"));
-  writeFileSync(join(dir, "src-host", "main.ts"), t("main.ts"));
-  writeFileSync(join(dir, "janela.conf.json"), t("janela.conf.json"));
-  writeFileSync(join(dir, ".gitignore"), ".janela/\nnode_modules/\n");
-  writeFileSync(
-    join(dir, "package.json"),
-    JSON.stringify(
-      {
-        name,
-        private: true,
-        scripts: { dev: "janela dev", build: "janela build" },
-        devDependencies: { janela: janelaDep },
-      },
-      null,
-      2,
-    ) + "\n",
-  );
-  console.log(`janela: created ${name}/ — next: cd ${name} && janela dev`);
+  const pkg = {
+    name,
+    private: true,
+    scripts: { dev: "janela dev", build: "janela build" },
+    devDependencies: { janela: janelaDep },
+  };
+
+  if (template === "vanilla") {
+    // The zero-dependency shape janela has always scaffolded: no frontend
+    // toolchain, no npm install needed before the first build.
+    const t = (f) => readFileSync(join(KIT, "templates", f), "utf8").replaceAll("__NAME__", name);
+    writeFileSync(join(dir, "index.html"), t("index.html"));
+    writeFileSync(join(dir, "src-host", "main.ts"), t("main.ts"));
+    writeFileSync(join(dir, "janela.conf.json"), t("janela.conf.json"));
+  } else {
+    const tdir = join(KIT, "templates", template);
+    copyTemplate(join(tdir, "files"), dir, name);
+    const extra = JSON.parse(readFileSync(join(tdir, "deps.json"), "utf8"));
+    pkg.type = "module";
+    Object.assign(pkg.devDependencies, extra.devDependencies ?? {});
+    if (extra.dependencies) pkg.dependencies = extra.dependencies;
+  }
+
+  writeFileSync(join(dir, ".gitignore"), ".janela/\nnode_modules/\ndist/\n");
+  writeFileSync(join(dir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
+
+  const install = template === "vanilla" ? "" : "npm install && ";
+  console.log(`janela: created ${name}/ (${template}) — next: cd ${name} && ${install}janela dev`);
+}
+
+// ---- dev --------------------------------------------------------------------
+
+function freePort() {
+  return new Promise((ok, no) => {
+    const s = createServer();
+    s.on("error", no);
+    s.listen(0, "127.0.0.1", () => {
+      const { port } = s.address();
+      s.close(() => ok(port));
+    });
+  });
+}
+
+async function waitForServer(url, child, timeoutMs = 30000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (child.exitCode !== null) fail(`the vite dev server exited (code ${child.exitCode})`);
+    try {
+      const r = await fetch(url, { signal: AbortSignal.timeout(1000) });
+      if (r.ok || r.status === 404) return;
+    } catch {
+      // not listening yet
+    }
+    await new Promise((ok) => setTimeout(ok, 150));
+  }
+  fail(`the vite dev server did not answer at ${url} within ${timeoutMs / 1000}s`);
+}
+
+async function dev(root) {
+  let vite = null;
+  let devUrl = null;
+
+  if (viteConfigPath(root)) {
+    const port = await freePort();
+    devUrl = `http://localhost:${port}/`;
+    console.log(`janela: starting the vite dev server on ${devUrl}`);
+    vite = spawn(viteBin(root), ["--port", String(port), "--strictPort"], {
+      cwd: root,
+      stdio: "inherit",
+      // Windows resolves .cmd shims through the shell.
+      shell: process.platform === "win32",
+    });
+    const stop = () => { if (vite && vite.exitCode === null) vite.kill(); };
+    process.on("exit", stop);
+    process.on("SIGINT", () => { stop(); process.exit(130); });
+    await waitForServer(devUrl, vite);
+  }
+
+  // Console subsystem on Windows: dev is where you want the logs.
+  const bin = build(root, { devUrl, gui: false });
+  console.log("janela: running (close the window or Ctrl-C to stop)");
+  // The frontend hot-reloads through vite; host changes need another `dev`.
+  run([bin]);
+  if (vite && vite.exitCode === null) vite.kill();
 }
 
 // ---- main -----------------------------------------------------------------
 
-const [cmd, arg] = process.argv.slice(2);
+const argv = process.argv.slice(2);
+const cmd = argv[0];
+
+function flag(name, fallback) {
+  const eq = argv.find((a) => a.startsWith(`--${name}=`));
+  if (eq) return eq.slice(name.length + 3);
+  const i = argv.indexOf(`--${name}`);
+  if (i >= 0 && argv[i + 1] && !argv[i + 1].startsWith("--")) return argv[i + 1];
+  return fallback;
+}
+
+// Everything after the subcommand that is neither a flag nor a flag's value.
+function positionals() {
+  const out = [];
+  for (let i = 1; i < argv.length; i++) {
+    const a = argv[i];
+    if (!a.startsWith("--")) { out.push(a); continue; }
+    if (!a.includes("=") && argv[i + 1] && !argv[i + 1].startsWith("--")) i++;
+  }
+  return out;
+}
+
 switch (cmd) {
   case "init":
-    init(arg);
+    init(positionals()[0], flag("template", "vanilla"));
     break;
   case "build":
     build(process.cwd());
     break;
-  case "dev": {
-    const bin = build(process.cwd());
-    console.log("janela: running (close the window or Ctrl-C to stop)");
-    run([bin]);
+  case "dev":
+    await dev(process.cwd());
     break;
-  }
   default:
-    console.log("usage: janela init <name> | janela build | janela dev");
+    console.log(
+      "usage: janela init <name> [--template vanilla|vue|react|svelte|solid]\n" +
+        "       janela build | janela dev",
+    );
     process.exit(cmd ? 1 : 0);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "janela",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Desktop apps in pure TypeScript, compiled to native. No Rust, no Node, no Electron.",
   "type": "module",
   "bin": {