create-mirinjs 0.0.1-alpha.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "create-mirinjs",
+  "version": "0.0.1-alpha.0",
+  "description": "Scaffold a new mirin desktop app: bun create mirinjs",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/Netko-Labs/mirin#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Netko-Labs/mirin.git",
+    "directory": "packages/create-mirinjs"
+  },
+  "bugs": "https://github.com/Netko-Labs/mirin/issues",
+  "keywords": [
+    "mirinjs",
+    "create",
+    "scaffold",
+    "desktop",
+    "bun"
+  ],
+  "bin": {
+    "create-mirinjs": "./src/index.ts"
+  },
+  "exports": {
+    ".": "./src/scaffold.ts"
+  },
+  "files": [
+    "src",
+    "template"
+  ],
+  "engines": {
+    "bun": ">=1.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+#!/usr/bin/env bun
+/**
+ * `bun create mirinjs [dir]` — scaffold a new mirin app.
+ */
+
+import { resolve } from "node:path";
+import { scaffold } from "./scaffold.ts";
+
+const target = Bun.argv[2] ?? "my-mirin-app";
+const targetDir = resolve(process.cwd(), target);
+
+try {
+  const name = scaffold(targetDir);
+  console.log(`\n✓ Created ${name} in ${target}\n`);
+  console.log("Next steps:");
+  console.log(`  cd ${target}`);
+  console.log("  bun install");
+  console.log("  bun run dev     # launches a native window with HMR + typed RPC");
+  console.log("  bun run build   # packages a standalone .app\n");
+  console.log("Requires macOS arm64, Bun, and the Xcode command-line tools.");
+} catch (err) {
+  console.error(`create-mirinjs: ${err instanceof Error ? err.message : err}`);
+  process.exit(1);
+}

package/src/scaffold.ts

@@ -0,0 +1,82 @@
+/**
+ * Copy the starter template into a target directory, substituting the app name,
+ * id, and the mirin version. Shared by `bun create mirinjs` and `mirin init`.
+ */
+
+import {
+  cpSync,
+  existsSync,
+  readFileSync,
+  readdirSync,
+  renameSync,
+  statSync,
+  writeFileSync,
+} from "node:fs";
+import { join } from "node:path";
+
+const TEMPLATE_DIR = join(import.meta.dir, "..", "template");
+
+export interface ScaffoldOptions {
+  /** App / package name (kebab-case). Defaults to the directory name. */
+  name?: string;
+}
+
+/** Scaffold a new mirin app into `targetDir`. Returns the resolved app name. */
+export function scaffold(targetDir: string, options: ScaffoldOptions = {}): string {
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    throw new Error(`target directory "${targetDir}" already exists and is not empty.`);
+  }
+  const appName = (options.name ?? basename(targetDir)).trim() || "mirin-app";
+  const appId = `dev.local.${appName.replace(/[^a-z0-9]+/gi, "").toLowerCase() || "app"}`;
+  const version = mirinVersion();
+
+  cpSync(TEMPLATE_DIR, targetDir, { recursive: true });
+
+  // npm strips a literal .gitignore from published packages; ship it as
+  // `_gitignore` and restore the name on scaffold.
+  const ignore = join(targetDir, "_gitignore");
+  if (existsSync(ignore)) renameSync(ignore, join(targetDir, ".gitignore"));
+
+  const replacements: Record<string, string> = {
+    __APP_NAME__: appName,
+    __APP_ID__: appId,
+    __MIRIN_VERSION__: version,
+  };
+  for (const file of walk(targetDir)) applyReplacements(file, replacements);
+
+  return appName;
+}
+
+function applyReplacements(file: string, replacements: Record<string, string>): void {
+  let text: string;
+  try {
+    text = readFileSync(file, "utf8");
+  } catch {
+    return; // skip binary/unreadable files
+  }
+  let changed = text;
+  for (const [from, to] of Object.entries(replacements)) {
+    changed = changed.split(from).join(to);
+  }
+  if (changed !== text) writeFileSync(file, changed);
+}
+
+function walk(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) out.push(...walk(full));
+    else out.push(full);
+  }
+  return out;
+}
+
+function basename(path: string): string {
+  return path.replace(/\/+$/, "").split("/").pop() ?? "";
+}
+
+/** The version of this create-mirin package, pinned into the scaffold. */
+function mirinVersion(): string {
+  const pkg = JSON.parse(readFileSync(join(import.meta.dir, "..", "package.json"), "utf8"));
+  return `^${pkg.version}`;
+}

package/template/README.md

@@ -0,0 +1,16 @@
+# __APP_NAME__
+
+A desktop app built with [mirin](https://github.com/Netko-Labs/mirin) — Bun +
+TypeScript + Chromium.
+
+```bash
+bun install
+bun run dev     # native window with Vite HMR + typed RPC
+bun run build   # standalone .app in ./build
+```
+
+- `mirin.config.ts` — the app manifest (windows, ids).
+- `main/` — the Bun main process (RPC handlers, app lifecycle).
+- `ui/` — the React UI, served via the `app://` scheme in builds.
+
+Requires macOS arm64, Bun, and the Xcode command-line tools.

package/template/_gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+build/
+.mirin/
+.DS_Store

package/template/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/ui/main.tsx"></script>
+  </body>
+</html>

package/template/main/main.ts

@@ -0,0 +1,16 @@
+import { app } from "mirinjs";
+import { router } from "./rpc.ts";
+
+const mirin = app.serve(router);
+
+app.on("ready", () => {
+  // Push a typed tick to every webview once a second.
+  let count = 0;
+  setInterval(() => {
+    mirin.rpc.tick.broadcast({ count: ++count });
+  }, 1000);
+});
+
+app.on("window-all-closed", () => {
+  app.quit();
+});

package/template/main/rpc.ts

@@ -0,0 +1,14 @@
+import { rpc } from "mirinjs/rpc";
+
+/** The app's RPC surface — imported by the main process (handlers) and, as a
+ *  type only, by the UI (`mirin/client`). */
+export const router = rpc.router({
+  greet: rpc.query(async (name: string, ctx) => {
+    return `Hello, ${name}! (from webview #${ctx.webview}, Bun ${Bun.version})`;
+  }),
+
+  // main -> UI push
+  tick: rpc.event<{ count: number }>(),
+});
+
+export type Router = typeof router;

package/template/mirin.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "mirinjs/config";
+
+export default defineConfig({
+  id: "__APP_ID__",
+  name: "__APP_NAME__",
+  main: "main/main.ts",
+
+  windows: {
+    main: {
+      title: "__APP_NAME__",
+      width: 960,
+      height: 700,
+      url: "app://ui/index.html",
+      show: "ready",
+    },
+  },
+});

package/template/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "mirin dev",
+    "build": "mirin build"
+  },
+  "dependencies": {
+    "mirinjs": "__MIRIN_VERSION__",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@mirinjs/cli": "__MIRIN_VERSION__",
+    "vite": "npm:rolldown-vite@^7.3.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/bun": "^1.2.0",
+    "typescript": "^5.8.0"
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "types": ["bun"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
+  },
+  "include": ["mirin.config.ts", "main", "ui", "vite.config.ts"]
+}

package/template/ui/App.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { api } from "./api.ts";
+
+export function App() {
+  const [greeting, setGreeting] = useState("…");
+  const [name, setName] = useState("world");
+  const [ticks, setTicks] = useState(0);
+
+  useEffect(() => {
+    api.greet(name).then(setGreeting);
+  }, [name]);
+
+  useEffect(() => api.tick.on(({ count }) => setTicks(count)), []);
+
+  return (
+    <main
+      style={{
+        fontFamily: "system-ui, sans-serif",
+        padding: "3rem",
+        maxWidth: 560,
+        margin: "0 auto",
+        color: "#1a1a2e",
+      }}
+    >
+      <h1>__APP_NAME__</h1>
+      <p style={{ color: "#6b7280" }}>
+        Bun main process · CEF webview · typed RPC over a localhost socket.
+      </p>
+
+      <p style={{ fontSize: 18 }}>{greeting}</p>
+      <input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="your name"
+        style={{ padding: "8px 10px", borderRadius: 8, border: "1px solid #d1d5db" }}
+      />
+
+      <p style={{ fontSize: 28, marginTop: 24 }}>tick #{ticks}</p>
+    </main>
+  );
+}

package/template/ui/api.ts

@@ -0,0 +1,5 @@
+import { client } from "mirinjs/client";
+import type { Router } from "../main/rpc.ts";
+
+/** Typed RPC client — full inference from the main-process router, no codegen. */
+export const api = client<Router>();

package/template/ui/main.tsx

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

package/template/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  root: ".",
+  base: "./",
+  server: { port: 5173, strictPort: true },
+  plugins: [react()],
+});