janela 0.3.1 → 0.4.0

package/README.md

@@ -70,7 +70,7 @@ MSI.
 
 ```
 my-app/
-├── index.html          frontend — any HTML/JS; calls janela.invoke() / janela.listen()
+├── index.html          frontend — any HTML/JS/TS; calls invoke() / listen()
 ├── src-host/main.ts    backend — exports setup(app), registers commands
 └── janela.conf.json    name, bundle identifier, version, window
 ```
@@ -79,17 +79,42 @@ 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):
+Frontend API — import it, and your editor and `tsc` know the shapes:
+
+```ts
+import { invoke, listen } from "janela/api";
+
+const sum = await invoke<number>("add", { a: 2, b: 40 }); // call a backend command
+listen<number>("added", (payload) => { ... });            // backend-fired events
+```
+
+`janela` is already a devDependency of a scaffolded project, so there is
+nothing extra to install. The generic is what the host command returns —
+values cross the boundary as values, so there is no JSON to parse.
+
+<details>
+<summary>No bundler? Use the injected global instead</summary>
+
+janela injects the same two functions as `window.janela` before every document
+loads, which is what the `vanilla` template uses — it needs no `npm install` at
+all:
 
 ```js
-const sum = await janela.invoke("add", { a: 2, b: 40 }); // call a backend command
-janela.listen("added", (payload) => { ... });            // backend-fired events
+const sum = await janela.invoke("add", { a: 2, b: 40 });
+janela.listen("added", (payload) => { ... });
 ```
 
-Backend API (`src-host/main.ts`):
+TypeScript users on this path can pull in the ambient types with
+`/// <reference types="janela/global" />`, or by adding `"janela/global"` to
+`compilerOptions.types`. With a bundler, prefer the import — it needs no
+ambient declaration.
+
+</details>
+
+Backend API (`src-host/main.ts`) — also typed, from the same package:
 
 ```ts
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {              // values in, values out
@@ -210,11 +235,48 @@ 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.3.x
+
+Nothing breaks: the injected `janela` global still works exactly as before.
+What changed is the recommendation — the frontend now has a real module, so
+editors and `tsc` can see it:
+
+```ts
+// 0.3.x — an untyped global, invisible to tsc and ESLint
+const sum = await janela.invoke("add", { a: 2, b: 40 });
+
+// 0.4.x — typed, resolvable, and generic over what the command returns
+import { invoke } from "janela/api";
+const sum = await invoke<number>("add", { a: 2, b: 40 });
+```
+
+The host side had the same problem and gets the same fix. `src-host/main.ts`
+used to import `JanelaApp` from `"./janela"` — a path that only exists inside
+`.janela/build/`, so an editor could never resolve it and the whole `app.*`
+API was untyped:
+
+```ts
+// 0.3.x — unresolved in the editor; JanelaApp was effectively `any`
+import type { JanelaApp } from "./janela";
+
+// 0.4.x — resolves against the installed package
+import type { JanelaApp } from "janela/host";
+```
+
+`janela build` rewrites that specifier to the local runtime copy while
+assembling the compile unit, so the build stays fully static and a project
+with no `node_modules` at all still compiles.
+
+The framework templates (`vue`, `react`, `svelte`, `solid`) are TypeScript now
+and scaffold with a `typecheck` script that covers `src/` and `src-host/`
+alike. `vanilla` stays plain JavaScript on the global, so it still needs no
+`npm install` before the first build.
+
 ## Migrating from 0.1.x
 
 Commands used to take and return **JSON text**; they now take and return
 **values**, with the runtime handling serialisation. The page-side API
-(`janela.invoke` / `janela.listen`) is unchanged.
+(`invoke` / `listen`) is unchanged.
 
 ```ts
 // 0.1.x

package/api/global.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Types for the injected `janela` global, for pages that use it directly
+ * rather than importing `janela/api` — a plain `<script>` with no bundler,
+ * typically. Pull them in from a TypeScript project with:
+ *
+ * ```ts
+ * /// <reference types="janela/global" />
+ * ```
+ *
+ * or by adding `"janela/global"` to `compilerOptions.types` in tsconfig.json.
+ *
+ * If you have a bundler, prefer `import { invoke, listen } from "janela/api"` —
+ * it needs no ambient declaration and is what the templates use.
+ */
+
+import type { JanelaBridge } from "./index.js";
+
+declare global {
+  /** The host bridge janela injects before the document loads. */
+  const janela: JanelaBridge;
+
+  interface Window {
+    janela: JanelaBridge;
+  }
+}
+
+export {};

package/api/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The janela frontend API.
+ *
+ * Values cross the boundary as values — janela owns the JSON at the edge — so
+ * the generic parameter is what the host command returns, not a string to
+ * parse.
+ */
+
+/** The bridge janela injects as `window.janela` before each document loads. */
+export interface JanelaBridge {
+  invoke<T = unknown>(cmd: string, args?: unknown): Promise<T>;
+  listen<T = unknown>(event: string, cb: (payload: T) => void): void;
+}
+
+/**
+ * Call a command the host registered with `app.command` / `app.commandAsync`.
+ *
+ * ```ts
+ * const sum = await invoke<number>("add", { a: 2, b: 40 });
+ * ```
+ *
+ * Rejects if the command is unknown, if the handler rejected, or if the page
+ * is not running inside a janela window.
+ */
+export declare function invoke<T = unknown>(cmd: string, args?: unknown): Promise<T>;
+
+/**
+ * Subscribe to an event the host sends with `app.emit`.
+ *
+ * ```ts
+ * listen<number>("added", (sum) => console.log(sum));
+ * ```
+ */
+export declare function listen<T = unknown>(
+  event: string,
+  cb: (payload: T) => void,
+): void;

package/api/index.js

@@ -0,0 +1,35 @@
+// The janela frontend API — `import { invoke, listen } from "janela/api"`.
+//
+// janela injects a bridge as `window.janela` into every document before it
+// loads, so this module is a thin wrapper over that global rather than a
+// transport of its own. Importing it is the recommended style: bundlers
+// resolve it, editors complete it, and `tsc` checks it. The global stays
+// available unchanged for pages with no build step.
+
+function bridge() {
+  const found = typeof globalThis === "undefined" ? undefined : globalThis.janela;
+  if (!found || typeof found.invoke !== "function") {
+    throw new Error(
+      "janela: no host bridge on this page (window.janela is undefined). " +
+        "The page is not running inside a janela window — run the app with " +
+        "`janela dev`, or `janela build` and launch the binary. Opening the " +
+        "page in a browser, or serving it with plain `vite`, leaves no host " +
+        "to talk to.",
+    );
+  }
+  return found;
+}
+
+/**
+ * Call a command the host registered with `app.command` / `app.commandAsync`.
+ * Arguments and the resolved value are ordinary values; janela owns the
+ * serialisation at the boundary.
+ */
+export async function invoke(cmd, args) {
+  return bridge().invoke(cmd, args);
+}
+
+/** Subscribe to an event the host sends with `app.emit`. */
+export function listen(event, cb) {
+  bridge().listen(event, cb);
+}

package/bin/janela.mjs

@@ -481,9 +481,22 @@ function build(root, { devUrl = null, gui = true } = {}) {
 
   // Assemble the compile unit: runtime + user's commands + generated modules.
   cpSync(join(KIT, "runtime", "janela.ts"), join(buildDir, "janela.ts"));
+  cpSync(join(KIT, "runtime", "types.ts"), join(buildDir, "types.ts"));
   const mainSrc = join(root, "src-host", "main.ts");
   if (!existsSync(mainSrc)) fail("missing src-host/main.ts");
-  cpSync(mainSrc, join(buildDir, "main.ts"));
+  // A project's main.ts imports from "janela/host" so that it resolves in the
+  // editor against the installed package. Here it is compiled next to the
+  // runtime instead, so the specifier is rewritten to that local copy: the
+  // build never resolves through node_modules, which keeps it static and will
+  // keep working when "janela/host" starts exporting values (not just types)
+  // as well.
+  writeFileSync(
+    join(buildDir, "main.ts"),
+    readFileSync(mainSrc, "utf8").replace(
+      /(\bfrom\s*)(['"])janela\/host\2/g,
+      "$1$2./janela$2",
+    ),
+  );
 
   const html = frontendHtml(root, conf, devUrl);
   writeFileSync(
@@ -616,6 +629,7 @@ function init(name, template) {
     const extra = JSON.parse(readFileSync(join(tdir, "deps.json"), "utf8"));
     pkg.type = "module";
     Object.assign(pkg.devDependencies, extra.devDependencies ?? {});
+    Object.assign(pkg.scripts, extra.scripts ?? {});
     if (extra.dependencies) pkg.dependencies = extra.dependencies;
   }
 

package/package.json

@@ -1,12 +1,25 @@
 {
   "name": "janela",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Desktop apps in pure TypeScript, compiled to native. No Rust, no Node, no Electron.",
   "type": "module",
   "bin": {
     "janela": "bin/janela.mjs",
     "jn": "bin/janela.mjs"
   },
+  "exports": {
+    "./api": {
+      "types": "./api/index.d.ts",
+      "default": "./api/index.js"
+    },
+    "./host": {
+      "types": "./runtime/types.ts"
+    },
+    "./global": {
+      "types": "./api/global.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "dependencies": {
     "scriptc": "0.0.35"
   },
@@ -33,6 +46,7 @@
     "node": ">=24"
   },
   "files": [
+    "api/",
     "bin/",
     "runtime/",
     "shim/",

package/runtime/janela.ts

@@ -74,124 +74,30 @@ const BOOTSTRAP =
   "  for (var i = 0; i < cbs.length; i++) cbs[i](payload);" +
   "};";
 
-// Handlers take the invoked arguments as a value and return a value; the
-// runtime owns JSON at the boundary. `args` is whatever the page passed to
-// janela.invoke(name, args) — cast it to the shape you expect. The return
-// value is what the page's promise resolves with.
-//
-// Throwing is not supported by scriptc across the FFI boundary. Use
-// commandAsync's `reject` to fail a call, or return an error value.
-export type CommandHandler = (args: unknown) => unknown;
-
-/**
- * An async command: return immediately, answer later. `resolve`/`reject` take
- * a value and settle the page's `await janela.invoke(...)` promise whenever
- * they are called — from a later defer()/sleep() turn, or from another
- * command. The window stays responsive for as long as the call is pending.
- */
-export type AsyncCommandHandler = (
-  args: unknown,
-  resolve: (value: unknown) => void,
-  reject: (reason: unknown) => void,
-) => void;
-
-/**
- * Completion of an async file operation. `err` is null on success; on failure
- * it carries a Node-shaped message ("ENOENT: no such file or directory, open
- * '/x'") and `text` is empty. Errors arrive as values, never as throws —
- * scriptc cannot propagate an exception across the FFI boundary.
- */
-export type FsCallback = (err: string | null, text: string) => void;
-
-/** A named group of extensions offered in a dialog's file-type popup. */
-export interface DialogFilter {
-  name: string;
-  /** Bare extensions, no dot and no glob: ["png", "jpg"]. */
-  extensions: string[];
-}
-
-export interface OpenDialogOptions {
-  title?: string;
-  /** Directory the dialog opens in. */
-  defaultPath?: string;
-  /** Allow picking more than one entry. */
-  multiple?: boolean;
-  /** Pick directories instead of files. Not supported on Windows. */
-  directory?: boolean;
-  filters?: DialogFilter[];
-}
-
-export interface SaveDialogOptions {
-  title?: string;
-  defaultPath?: string;
-  /** Filename pre-filled in the name field. */
-  defaultName?: string;
-  filters?: DialogFilter[];
-}
-
-export interface WindowConfig {
-  title: string;
-  width: number;
-  height: number;
-}
-
-export interface JanelaApp {
-  handle: number;
-  names: string[];
-  handlers: CommandHandler[];
-  /** Register a named command, callable from the page as janela.invoke(name, args). */
-  command: (name: string, h: CommandHandler) => void;
-  /** Register a command that answers later; see AsyncCommandHandler. */
-  commandAsync: (name: string, h: AsyncCommandHandler) => void;
-  /** Run fn on the next turn of the host loop — the way to slice long work. */
-  defer: (fn: () => void) => void;
-  /** Run fn after at least ms. The host loop's timer; scriptc's setTimeout
-   *  cannot fire while the window is open (its loop is parked inside run()). */
-  sleep: (ms: number, fn: () => void) => void;
-  /**
-   * Read a file without blocking the window. The syscall runs on a shim
-   * worker thread; the callback lands on the UI thread on a later turn.
-   * Prefer this over node:fs readFileSync inside a command — that one blocks
-   * the loop, and with it the whole window.
-   */
-  readFileAsync: (path: string, cb: FsCallback) => void;
-  /** Write a file without blocking the window; cb(null) on success. */
-  writeFileAsync: (
-    path: string,
-    data: string,
-    cb: (err: string | null) => void,
-  ) => void;
-  /**
-   * Show the native "open" dialog. `cb` gets the chosen paths, or null if the
-   * user cancelled. The modal runs on a later turn of the UI thread, so
-   * calling this from inside a command does not block that command's reply —
-   * pair it with commandAsync when the page is waiting for the result.
-   */
-  openFileDialog: (
-    options: OpenDialogOptions,
-    cb: (paths: string[] | null, err?: string) => void,
-  ) => void;
-  /** Show the native "save" dialog; cb gets the path, or null on cancel. */
-  saveFileDialog: (
-    options: SaveDialogOptions,
-    cb: (path: string | null, err?: string) => void,
-  ) => void;
-  /** Change the window title at any time, not just at startup. */
-  setTitle: (title: string) => void;
-  /**
-   * Resize the window. `hint` is webview's sizing hint: 0 none, 1 minimum,
-   * 2 maximum, 3 fixed.
-   */
-  setSize: (width: number, height: number, hint?: number) => void;
-  /** Enter or leave fullscreen. */
-  setFullscreen: (on: boolean) => void;
-  /** Fire an event into the page; the payload is delivered as a value. */
-  emit: (event: string, payload: unknown) => void;
-  /** Close the window and make run() return. */
-  quit: () => void;
-  /** Show the page and block until the window closes. Returns the run status. */
-  run: (html: string) => number;
-}
+// The public host types live in ./types (shipped as `janela/host` too, so a
+// user's editor can see them). Re-exported here because the compiled build
+// resolves them through this module — see the specifier rewrite in the CLI.
+export type {
+  AsyncCommandHandler,
+  CommandHandler,
+  DialogFilter,
+  FsCallback,
+  JanelaApp,
+  OpenDialogOptions,
+  SaveDialogOptions,
+  WindowConfig,
+} from "./types";
+
+import type {
+  AsyncCommandHandler,
+  CommandHandler,
+  DialogFilter,
+  FsCallback,
+  JanelaApp,
+  OpenDialogOptions,
+  SaveDialogOptions,
+  WindowConfig,
+} from "./types";
 
 // JSON.stringify yields undefined for undefined; the wire always needs a
 // value, and a command that returns nothing should read as null in the page.

package/runtime/types.ts

@@ -0,0 +1,131 @@
+/**
+ * Public host-side types for a janela app — the shapes `src-host/main.ts`
+ * works with.
+ *
+ * This file is the single definition of those types. It is both:
+ *   - what `import type { JanelaApp } from "janela/host"` resolves to in an
+ *     editor, via the package's exports map; and
+ *   - re-exported by runtime/janela.ts, which is what the compiled build
+ *     actually links against (the CLI copies both files into .janela/build/).
+ *
+ * Keep it declaration-only: no runtime code lives here.
+ */
+
+// Handlers take the invoked arguments as a value and return a value; the
+// runtime owns JSON at the boundary. `args` is whatever the page passed to
+// janela.invoke(name, args) — cast it to the shape you expect. The return
+// value is what the page's promise resolves with.
+//
+// Throwing is not supported by scriptc across the FFI boundary. Use
+// commandAsync's `reject` to fail a call, or return an error value.
+export type CommandHandler = (args: unknown) => unknown;
+
+/**
+ * An async command: return immediately, answer later. `resolve`/`reject` take
+ * a value and settle the page's `await janela.invoke(...)` promise whenever
+ * they are called — from a later defer()/sleep() turn, or from another
+ * command. The window stays responsive for as long as the call is pending.
+ */
+export type AsyncCommandHandler = (
+  args: unknown,
+  resolve: (value: unknown) => void,
+  reject: (reason: unknown) => void,
+) => void;
+
+/**
+ * Completion of an async file operation. `err` is null on success; on failure
+ * it carries a Node-shaped message ("ENOENT: no such file or directory, open
+ * '/x'") and `text` is empty. Errors arrive as values, never as throws —
+ * scriptc cannot propagate an exception across the FFI boundary.
+ */
+export type FsCallback = (err: string | null, text: string) => void;
+
+/** A named group of extensions offered in a dialog's file-type popup. */
+export interface DialogFilter {
+  name: string;
+  /** Bare extensions, no dot and no glob: ["png", "jpg"]. */
+  extensions: string[];
+}
+
+export interface OpenDialogOptions {
+  title?: string;
+  /** Directory the dialog opens in. */
+  defaultPath?: string;
+  /** Allow picking more than one entry. */
+  multiple?: boolean;
+  /** Pick directories instead of files. Not supported on Windows. */
+  directory?: boolean;
+  filters?: DialogFilter[];
+}
+
+export interface SaveDialogOptions {
+  title?: string;
+  defaultPath?: string;
+  /** Filename pre-filled in the name field. */
+  defaultName?: string;
+  filters?: DialogFilter[];
+}
+
+export interface WindowConfig {
+  title: string;
+  width: number;
+  height: number;
+}
+
+export interface JanelaApp {
+  handle: number;
+  names: string[];
+  handlers: CommandHandler[];
+  /** Register a named command, callable from the page as janela.invoke(name, args). */
+  command: (name: string, h: CommandHandler) => void;
+  /** Register a command that answers later; see AsyncCommandHandler. */
+  commandAsync: (name: string, h: AsyncCommandHandler) => void;
+  /** Run fn on the next turn of the host loop — the way to slice long work. */
+  defer: (fn: () => void) => void;
+  /** Run fn after at least ms. The host loop's timer; scriptc's setTimeout
+   *  cannot fire while the window is open (its loop is parked inside run()). */
+  sleep: (ms: number, fn: () => void) => void;
+  /**
+   * Read a file without blocking the window. The syscall runs on a shim
+   * worker thread; the callback lands on the UI thread on a later turn.
+   * Prefer this over node:fs readFileSync inside a command — that one blocks
+   * the loop, and with it the whole window.
+   */
+  readFileAsync: (path: string, cb: FsCallback) => void;
+  /** Write a file without blocking the window; cb(null) on success. */
+  writeFileAsync: (
+    path: string,
+    data: string,
+    cb: (err: string | null) => void,
+  ) => void;
+  /**
+   * Show the native "open" dialog. `cb` gets the chosen paths, or null if the
+   * user cancelled. The modal runs on a later turn of the UI thread, so
+   * calling this from inside a command does not block that command's reply —
+   * pair it with commandAsync when the page is waiting for the result.
+   */
+  openFileDialog: (
+    options: OpenDialogOptions,
+    cb: (paths: string[] | null, err?: string) => void,
+  ) => void;
+  /** Show the native "save" dialog; cb gets the path, or null on cancel. */
+  saveFileDialog: (
+    options: SaveDialogOptions,
+    cb: (path: string | null, err?: string) => void,
+  ) => void;
+  /** Change the window title at any time, not just at startup. */
+  setTitle: (title: string) => void;
+  /**
+   * Resize the window. `hint` is webview's sizing hint: 0 none, 1 minimum,
+   * 2 maximum, 3 fixed.
+   */
+  setSize: (width: number, height: number, hint?: number) => void;
+  /** Enter or leave fullscreen. */
+  setFullscreen: (on: boolean) => void;
+  /** Fire an event into the page; the payload is delivered as a value. */
+  emit: (event: string, payload: unknown) => void;
+  /** Close the window and make run() return. */
+  quit: () => void;
+  /** Show the page and block until the window closes. Returns the run status. */
+  run: (html: string) => number;
+}

package/templates/index.html

@@ -30,8 +30,10 @@
     <ul id="events"></ul>
 
     <script>
-      // `janela.invoke(name, args)` and `janela.listen(event, cb)` are injected by
-      // janela before the page loads — the Tauri-shaped frontend API.
+      // This template has no bundler, so it uses the `janela` global that the
+      // host injects before the page loads. Projects with a build step should
+      // `import { invoke, listen } from "janela/api"` instead — same functions,
+      // but typed and resolvable by the bundler.
       window.onload = async () => {
         const out = document.getElementById("out");
         const events = document.getElementById("events");

package/templates/main.ts

@@ -8,7 +8,7 @@
 // complete variable initializer — wrap it in any expression (`+ 0`). Plain
 // TypeScript like everything in this file is unaffected.
 
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {

package/templates/react/deps.json

@@ -1,4 +1,16 @@
 {
-  "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0" },
-  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.7" }
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
 }

package/templates/react/files/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/templates/react/files/src/{App.jsx → App.tsx}

@@ -1,30 +1,41 @@
 import { useEffect, useState } from "react";
+import { invoke, listen } from "janela/api";
 import "./App.css";
 
 export default function App() {
   const [greeting, setGreeting] = useState("…");
   const [a, setA] = useState(2);
   const [b, setB] = useState(40);
-  const [sum, setSum] = useState(null);
-  const [events, setEvents] = useState([]);
+  const [sum, setSum] = useState<number | null>(null);
+  const [events, setEvents] = useState<string[]>([]);
 
   useEffect(() => {
-    // Backend→frontend events. The payload arrives as a value.
-    janela.listen("added", (value) =>
+    // Backend→frontend events. The payload arrives as a value, and the
+    // generic says which value.
+    listen<number>("added", (value) =>
       setEvents((prev) => [`host emitted: ${value}`, ...prev]),
     );
-    janela.invoke("greet", { name: "__NAME__" }).then(setGreeting);
+    invoke<string>("greet", { name: "__NAME__" }).then(setGreeting);
   }, []);
 
   const add = async () =>
-    setSum(await janela.invoke("add", { a: Number(a), b: Number(b) }));
+    setSum(await invoke<number>("add", { a, b }));
 
   return (
     <>
       <h1>{greeting}</h1>
       <p>
-        <input type="number" value={a} onChange={(e) => setA(e.target.value)} /> +
-        <input type="number" value={b} onChange={(e) => setB(e.target.value)} />
+        <input
+          type="number"
+          value={a}
+          onChange={(e) => setA(Number(e.target.value))}
+        />{" "}
+        +
+        <input
+          type="number"
+          value={b}
+          onChange={(e) => setB(Number(e.target.value))}
+        />
         <button onClick={add}>add</button>
         {sum !== null && <span> = {sum}</span>}
       </p>

package/templates/react/files/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("index.html is missing #root");
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react/files/src-host/main.ts

@@ -8,7 +8,7 @@
 // complete variable initializer — wrap it in any expression (`+ 0`). Plain
 // TypeScript like everything in this file is unaffected.
 
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {

package/templates/react/files/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src-host/**/*.ts"
+  ]
+}

package/templates/solid/deps.json

@@ -1,4 +1,13 @@
 {
-  "dependencies": { "solid-js": "^1.9.4" },
-  "devDependencies": { "vite": "^6.0.7", "vite-plugin-solid": "^2.11.0" }
+  "dependencies": {
+    "solid-js": "^1.9.4"
+  },
+  "devDependencies": {
+    "vite": "^6.0.7",
+    "vite-plugin-solid": "^2.11.0",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
 }

package/templates/solid/files/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/templates/solid/files/src/App.tsx

@@ -0,0 +1,50 @@
+import { createSignal, onMount, For, Show } from "solid-js";
+import { invoke, listen } from "janela/api";
+import "./App.css";
+
+export default function App() {
+  const [greeting, setGreeting] = createSignal("…");
+  const [a, setA] = createSignal(2);
+  const [b, setB] = createSignal(40);
+  const [sum, setSum] = createSignal<number | null>(null);
+  const [events, setEvents] = createSignal<string[]>([]);
+
+  // Backend→frontend events. The payload arrives as a value, and the generic
+  // says which value.
+  listen<number>("added", (value) =>
+    setEvents((prev) => [`host emitted: ${value}`, ...prev]),
+  );
+
+  onMount(async () =>
+    setGreeting(await invoke<string>("greet", { name: "__NAME__" })),
+  );
+
+  const add = async () =>
+    setSum(await invoke<number>("add", { a: a(), b: b() }));
+
+  return (
+    <>
+      <h1>{greeting()}</h1>
+      <p>
+        <input
+          type="number"
+          value={a()}
+          onInput={(e) => setA(Number(e.currentTarget.value))}
+        />{" "}
+        +
+        <input
+          type="number"
+          value={b()}
+          onInput={(e) => setB(Number(e.currentTarget.value))}
+        />
+        <button onClick={add}>add</button>
+        <Show when={sum() !== null}>
+          <span> = {sum()}</span>
+        </Show>
+      </p>
+      <ul>
+        <For each={events()}>{(e) => <li>{e}</li>}</For>
+      </ul>
+    </>
+  );
+}

package/templates/solid/files/src/main.tsx

@@ -0,0 +1,7 @@
+import { render } from "solid-js/web";
+import App from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("index.html is missing #root");
+
+render(() => <App />, root);

package/templates/solid/files/src-host/main.ts

@@ -8,7 +8,7 @@
 // complete variable initializer — wrap it in any expression (`+ 0`). Plain
 // TypeScript like everything in this file is unaffected.
 
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {

package/templates/solid/files/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src-host/**/*.ts"
+  ]
+}

package/templates/svelte/deps.json

@@ -2,6 +2,11 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "svelte": "^5.16.0",
-    "vite": "^6.0.7"
+    "vite": "^6.0.7",
+    "svelte-check": "^4.1.4",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   }
 }

package/templates/svelte/files/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/templates/svelte/files/src/App.svelte

@@ -1,17 +1,20 @@
-<script>
+<script lang="ts">
+  import { invoke, listen } from "janela/api";
+
   let greeting = $state("…");
   let a = $state(2);
   let b = $state(40);
-  let sum = $state(null);
-  let events = $state([]);
+  let sum = $state<number | null>(null);
+  let events = $state<string[]>([]);
 
-  // Backend→frontend events. The payload arrives as a value.
-  janela.listen("added", (value) => (events = [`host emitted: ${value}`, ...events]));
+  // Backend→frontend events. The payload arrives as a value, and the generic
+  // says which value.
+  listen<number>("added", (value) => (events = [`host emitted: ${value}`, ...events]));
 
-  janela.invoke("greet", { name: "__NAME__" }).then((g) => (greeting = g));
+  invoke<string>("greet", { name: "__NAME__" }).then((g) => (greeting = g));
 
   async function add() {
-    sum = await janela.invoke("add", { a: Number(a), b: Number(b) });
+    sum = await invoke<number>("add", { a: Number(a), b: Number(b) });
   }
 </script>
 

package/templates/svelte/files/src/main.ts

@@ -0,0 +1,7 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const target = document.getElementById("app");
+if (!target) throw new Error("index.html is missing #app");
+
+mount(App, { target });

package/templates/svelte/files/src-host/main.ts

@@ -8,7 +8,7 @@
 // complete variable initializer — wrap it in any expression (`+ 0`). Plain
 // TypeScript like everything in this file is unaffected.
 
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {

package/templates/svelte/files/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.svelte",
+    "src-host/**/*.ts"
+  ]
+}

package/templates/vue/deps.json

@@ -1,4 +1,14 @@
 {
-  "dependencies": { "vue": "^3.5.13" },
-  "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", "vite": "^6.0.7" }
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.7",
+    "typescript": "^5.7.3",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit"
+  }
 }

package/templates/vue/files/index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/templates/vue/files/src/App.vue

@@ -1,21 +1,23 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { invoke, listen } from "janela/api";
 
 const greeting = ref("…");
 const a = ref(2);
 const b = ref(40);
-const sum = ref(null);
-const events = ref([]);
+const sum = ref<number | null>(null);
+const events = ref<string[]>([]);
 
-// Backend→frontend events. The payload arrives as a value, not a JSON string.
-janela.listen("added", (value) => events.value.unshift(`host emitted: ${value}`));
+// Backend→frontend events. The payload arrives as a value, not a JSON string,
+// and the generic says which value.
+listen<number>("added", (value) => events.value.unshift(`host emitted: ${value}`));
 
 onMounted(async () => {
-  greeting.value = await janela.invoke("greet", { name: "__NAME__" });
+  greeting.value = await invoke<string>("greet", { name: "__NAME__" });
 });
 
 async function add() {
-  sum.value = await janela.invoke("add", { a: Number(a.value), b: Number(b.value) });
+  sum.value = await invoke<number>("add", { a: Number(a.value), b: Number(b.value) });
 }
 </script>
 

package/templates/vue/files/src-host/main.ts

@@ -8,7 +8,7 @@
 // complete variable initializer — wrap it in any expression (`+ 0`). Plain
 // TypeScript like everything in this file is unaffected.
 
-import type { JanelaApp } from "./janela";
+import type { JanelaApp } from "janela/host";
 
 export function setup(app: JanelaApp): void {
   app.command("add", (args) => {

package/templates/vue/files/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src-host/**/*.ts"
+  ]
+}

package/templates/react/files/src/main.jsx

@@ -1,9 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
-
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

package/templates/solid/files/src/App.jsx

@@ -1,35 +0,0 @@
-import { createSignal, onMount, For, Show } from "solid-js";
-import "./App.css";
-
-export default function App() {
-  const [greeting, setGreeting] = createSignal("…");
-  const [a, setA] = createSignal(2);
-  const [b, setB] = createSignal(40);
-  const [sum, setSum] = createSignal(null);
-  const [events, setEvents] = createSignal([]);
-
-  // Backend→frontend events. The payload arrives as a value.
-  janela.listen("added", (value) =>
-    setEvents((prev) => [`host emitted: ${value}`, ...prev]),
-  );
-
-  onMount(async () => setGreeting(await janela.invoke("greet", { name: "__NAME__" })));
-
-  const add = async () =>
-    setSum(await janela.invoke("add", { a: Number(a()), b: Number(b()) }));
-
-  return (
-    <>
-      <h1>{greeting()}</h1>
-      <p>
-        <input type="number" value={a()} onInput={(e) => setA(e.currentTarget.value)} /> +
-        <input type="number" value={b()} onInput={(e) => setB(e.currentTarget.value)} />
-        <button onClick={add}>add</button>
-        <Show when={sum() !== null}><span> = {sum()}</span></Show>
-      </p>
-      <ul>
-        <For each={events()}>{(e) => <li>{e}</li>}</For>
-      </ul>
-    </>
-  );
-}

package/templates/solid/files/src/main.jsx

@@ -1,4 +0,0 @@
-import { render } from "solid-js/web";
-import App from "./App.jsx";
-
-render(() => <App />, document.getElementById("root"));

package/templates/svelte/files/src/main.js

@@ -1,4 +0,0 @@
-import { mount } from "svelte";
-import App from "./App.svelte";
-
-mount(App, { target: document.getElementById("app") });