extrojs 0.1.0 → 0.3.0

package/README.md

@@ -16,11 +16,11 @@ pnpm add react react-dom
 ## Quick start
 
 ```bash
-extro dev      # dev server with HMR, writes .output/chrome-mv3-dev/
-extro build    # production build to .output/chrome-mv3-prod/
+extro dev      # dev server with HMR, writes output/chrome-mv3-dev/
+extro build    # production build to output/chrome-mv3-prod/
 ```
 
-Load `.output/chrome-mv3-dev/` (or `.output/chrome-mv3-prod/`) in Chrome via **Load Unpacked**.
+Load `output/chrome-mv3-dev/` (or `output/chrome-mv3-prod/`) in Chrome via **Load Unpacked**.
 
 ## Docs and source
 

package/client.d.ts

@@ -0,0 +1,8 @@
+// Ambient types for Extro's env, for code that imports nothing else from the
+// framework (a bare background or content script). Opt in once:
+//   /// <reference types="extrojs/client" />
+// The single source of the env shape is src/react/env.ts (ADR 0002); this
+// re-surfaces that one declaration for the explicit-reference path, so the two
+// opt-in routes never declare ImportMetaEnv twice. EXTRO_PUBLIC_* is inlined
+// into every surface via import.meta.env.
+/// <reference path="./dist/react/env.d.ts" />

package/dist/cli.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @describe Parses argv and dispatches. cac itself prints --help/--version
+ * during parse() (scoped to the matched command), so we only handle the
+ * fallback: bare `extro` and unknown commands print top-level help (exit 0
+ * when bare, exit 1 when the command was unknown).
+ */
+export declare const run: () => Promise<void>;

package/dist/cli.js

@@ -0,0 +1,27 @@
+import { cac } from "cac";
+import { pkg } from "./pkg.js";
+import { dev } from "./commands/dev.js";
+import { build } from "./commands/build.js";
+const cli = cac("extro");
+cli.command("dev", "Start the dev server with HMR").action(dev);
+cli.command("build", "Build a production extension bundle").action(build);
+cli.help();
+cli.version(pkg.version);
+/**
+ * @describe Parses argv and dispatches. cac itself prints --help/--version
+ * during parse() (scoped to the matched command), so we only handle the
+ * fallback: bare `extro` and unknown commands print top-level help (exit 0
+ * when bare, exit 1 when the command was unknown).
+ */
+export const run = async () => {
+    const parsed = cli.parse(process.argv, { run: false });
+    // cac has already printed help/version to stdout at this point.
+    if (parsed.options.help || parsed.options.version)
+        return;
+    if (!cli.matchedCommand) {
+        cli.outputHelp();
+        process.exitCode = process.argv.slice(2).length > 0 ? 1 : 0;
+        return;
+    }
+    await cli.runMatchedCommand();
+};

package/dist/commands/build.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @describe Produces a standalone production bundle in
+ * <outDir>/chrome-mv3-prod/: manifest, HTML shells, and script bundles.
+ */
+export declare const build: () => Promise<void>;

package/dist/commands/build.js

@@ -0,0 +1,26 @@
+import { build as viteBuild } from "vite";
+import { extro } from "../plugin/index.js";
+import react from "@vitejs/plugin-react";
+import { loadConfig } from "../load-config.js";
+import { loadEnvIntoProcess } from "../env.js";
+import { outputDir } from "../paths.js";
+import { createViteLogger, log } from "../logger.js";
+/**
+ * @describe Produces a standalone production bundle in
+ * <outDir>/chrome-mv3-prod/: manifest, HTML shells, and script bundles.
+ */
+export const build = async () => {
+    const root = process.cwd();
+    log.info("Building extension for production...");
+    loadEnvIntoProcess(root, "production");
+    const config = await loadConfig(root);
+    const prodOutDir = outputDir(root, config, "prod");
+    await viteBuild({
+        root,
+        plugins: [react(), extro({ root, config })],
+        build: { outDir: prodOutDir },
+        customLogger: createViteLogger(),
+    });
+    log.success("Build complete");
+    log.info(`Unpacked extension: ${prodOutDir}`);
+};

package/dist/commands/dev.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @describe Starts the Extro dev server: a Vite server for routable surfaces, a
+ * signal WS the extension's BG SW connects to, and a build-watch sidecar for
+ * background + content scripts. Writes the dev manifest/HTML into the dev
+ * output dir and wires SIGINT/SIGTERM to a clean shutdown.
+ */
+export declare const dev: () => Promise<void>;

package/dist/commands/dev.js

@@ -0,0 +1,156 @@
+import { createServer, build as viteBuild } from "vite";
+import { WebSocketServer } from "ws";
+import { extro } from "../plugin/index.js";
+import react from "@vitejs/plugin-react";
+import { scanAppTree, classifyScriptChange, mergeDirty, resolveFlush, } from "../plugin/internal.js";
+import { loadConfig } from "../load-config.js";
+import { loadEnvIntoProcess } from "../env.js";
+import { outputDir } from "../paths.js";
+import { writeDevAssets } from "../dev-assets.js";
+import { pkg } from "../pkg.js";
+import { banner, createViteLogger, log } from "../logger.js";
+const once = (emitter, event) => new Promise((resolve) => emitter.once(event, () => resolve()));
+/**
+ * @describe Throws a helpful error when the user's src/app has no entrypoints,
+ * so `extro dev` fails fast with guidance instead of starting an empty server.
+ */
+const validateTree = (tree) => {
+    const empty = Object.keys(tree.scripts).length === 0 &&
+        Object.keys(tree.surfaces).length === 0;
+    if (!empty)
+        return;
+    throw new Error("Extro: No extension entrypoints found.\n\nExpected files like:\n  src/app/popup/page.tsx\n  src/app/options/page.tsx\n  src/app/sidepanel/page.tsx\n  src/app/background/index.ts\n  src/app/content/index.ts");
+};
+/**
+ * @describe Starts the Extro dev server: a Vite server for routable surfaces, a
+ * signal WS the extension's BG SW connects to, and a build-watch sidecar for
+ * background + content scripts. Writes the dev manifest/HTML into the dev
+ * output dir and wires SIGINT/SIGTERM to a clean shutdown.
+ */
+export const dev = async () => {
+    const root = process.cwd();
+    loadEnvIntoProcess(root, "development");
+    const config = await loadConfig(root);
+    // Separate output dirs let dev artifacts (with the bridge installed) persist
+    // across `extro dev` sessions without needing a prod-restore on shutdown.
+    const devOutDir = outputDir(root, config, "dev");
+    // 1. Scan once up front so we can decide what to start.
+    const tree = await scanAppTree(root);
+    validateTree(tree);
+    // 2. Signal WS — the dev bridge in the extension's BG SW connects here.
+    //    Fixed port (not :0) so the port baked into a previously-loaded BG SW
+    //    keeps working across `extro dev` restarts — otherwise users have to
+    //    refresh the extension every time to pick up a new random port.
+    const signalPort = config.dev?.bridgePort ?? 9012;
+    const wss = new WebSocketServer({ port: signalPort });
+    wss.on("error", (err) => {
+        if (err.code === "EADDRINUSE") {
+            log.error(`Signal port ${signalPort} is in use. Is another \`extro dev\` already running?`);
+            process.exit(1);
+        }
+        throw err;
+    });
+    await once(wss, "listening");
+    const broadcast = (msg) => {
+        const payload = JSON.stringify(msg);
+        for (const client of wss.clients) {
+            if (client.readyState === 1)
+                client.send(payload);
+        }
+    };
+    // 3. Vite dev server for routable surfaces.
+    //    `broadcastHmr` lets the plugin push HMR updates over our signal WS —
+    //    we can't piggy-back on Vite's own HMR WS because its origin check
+    //    rejects chrome-extension:// service workers.
+    const viteLogger = createViteLogger();
+    const server = await createServer({
+        root,
+        plugins: [
+            react(),
+            extro({
+                root,
+                config,
+                broadcastHmr: (payload) => broadcast({ kind: "vite-hmr", payload }),
+            }),
+        ],
+        server: { cors: true, port: config.dev?.port, strictPort: config.dev?.strictPort },
+        // Keep the user's scrollback + our banner; Vite clears the terminal by
+        // default on start and on each HMR.
+        clearScreen: false,
+        customLogger: viteLogger,
+    });
+    await server.listen();
+    const addr = server.httpServer?.address();
+    const port = addr && typeof addr === "object"
+        ? addr.port
+        : server.config.server.port ?? 5173;
+    // 4. Dev manifest + HTML + icons.
+    await writeDevAssets({ tree, root, outDir: devOutDir, port, signalPort, config });
+    // 5. Build-watch sidecar for background + content. Always runs in dev so
+    //    the dev bridge gets bundled into background.js (even if the user has
+    //    no BG of their own).
+    const watcher = await viteBuild({
+        root,
+        // Same mode as the dev server (createServer defaults to development) so
+        // background/content resolve the same .env set as the routables. Without
+        // this the sidecar defaults to production and the scripts would load
+        // .env.production while the popup loads .env.development. See ADR 0002.
+        mode: "development",
+        plugins: [extro({ root, config, scriptsOnly: true, devBridge: { signalPort, vitePort: port } })],
+        // emptyOutDir: false so the watcher doesn't wipe the manifest / HTML /
+        // icons that writeDevAssets just put down.
+        build: { watch: {}, emptyOutDir: false, outDir: devOutDir },
+        logLevel: "error",
+    });
+    // The watcher is a RollupWatcher. We split the rebuild signal by which
+    // entry changed: a background-only edit must not reload tabs / remount CSUI,
+    // and a content-only edit must not reload the extension. `change` events
+    // accumulate the Dev reaction until the next `BUNDLE_END`; the classify and
+    // flush rules (incl. shared-code-dirties-both) live in `dev-reactions.ts`.
+    if (watcher && typeof watcher.on === "function") {
+        const w = watcher;
+        let dirty = { background: false, content: false };
+        w.on("change", (id) => {
+            dirty = mergeDirty(dirty, classifyScriptChange(String(id)));
+        });
+        w.on("event", (event) => {
+            if (event.code !== "BUNDLE_END")
+                return;
+            const { background, content } = resolveFlush(dirty);
+            dirty = { background: false, content: false };
+            if (background)
+                broadcast({ kind: "bg-rebuilt" });
+            if (content)
+                broadcast({ kind: "cs-rebuilt" });
+        });
+    }
+    banner({
+        mode: "dev",
+        version: pkg.version,
+        rows: [
+            { label: "Server", value: `http://localhost:${port}` },
+            { label: "Unpacked", value: devOutDir },
+        ],
+        hint: 'Load the unpacked dir in Chrome via "Load Unpacked".',
+    });
+    let shuttingDown = false;
+    const shutdown = async () => {
+        if (shuttingDown)
+            return;
+        shuttingDown = true;
+        process.off("SIGINT", shutdown);
+        process.off("SIGTERM", shutdown);
+        log.info("Shutting down dev server...");
+        if (watcher && typeof watcher.close === "function") {
+            await watcher.close();
+        }
+        wss.close();
+        await server.close();
+        // No prod-restore: dev artifacts live in their own output/chrome-mv3-dev
+        // dir so the loaded extension stays untouched. Run `extro build` for a
+        // standalone prod bundle in output/chrome-mv3-prod.
+        process.exit(0);
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+};

package/dist/config.d.ts

@@ -1,3 +1,3 @@
-import type { ExtroConfig } from "@extrojs/types";
-export type { ExtroConfig } from "@extrojs/types";
+import type { ExtroConfig } from "./types/index.js";
+export type { ExtroConfig } from "./types/index.js";
 export declare const defineConfig: (config: ExtroConfig) => ExtroConfig;

package/dist/core/asset.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Resolve a public asset to its extension URL. Works in every surface (popup,
+ * options, sidepanel, background, content), unlike a root-relative `/logo.svg`
+ * which resolves against a content script's host-page origin.
+ *
+ * @example
+ * import { asset } from "extrojs/asset"
+ * <img src={asset("logo.svg")} />
+ */
+export declare const asset: (path: string) => string;

package/dist/core/asset.js

@@ -0,0 +1,10 @@
+/**
+ * Resolve a public asset to its extension URL. Works in every surface (popup,
+ * options, sidepanel, background, content), unlike a root-relative `/logo.svg`
+ * which resolves against a content script's host-page origin.
+ *
+ * @example
+ * import { asset } from "extrojs/asset"
+ * <img src={asset("logo.svg")} />
+ */
+export const asset = (path) => chrome.runtime.getURL(path);

package/dist/dev-assets.d.ts

@@ -1,5 +1,5 @@
-import type { ExtroConfig } from "@extrojs/types";
-import { type AppTree } from "@extrojs/vite-plugin/internal";
+import type { ExtroConfig } from "./types/index.js";
+import { type AppTree } from "./plugin/internal.js";
 interface WriteDevAssetsOptions {
     tree: AppTree;
     root: string;
@@ -12,7 +12,7 @@ interface WriteDevAssetsOptions {
  * @describe Writes the dev manifest + HTML shells + icons to disk so Chrome
  * can load the unpacked extension while the Vite dev server serves modules
  * over HTTP. Background/content scripts are written by the build-watch
- * sidecar (a Vite watch-mode build) — not here.
+ * sidecar (a Vite watch-mode build), not here.
  */
 export declare const writeDevAssets: ({ tree, root, outDir, port, signalPort, config, }: WriteDevAssetsOptions) => Promise<void>;
 export {};

package/dist/dev-assets.js

@@ -1,26 +1,47 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { emitAssets, } from "@extrojs/vite-plugin/internal";
+import { emitAssets, discoverAssets, } from "./plugin/internal.js";
 /**
  * @describe Writes the dev manifest + HTML shells + icons to disk so Chrome
  * can load the unpacked extension while the Vite dev server serves modules
  * over HTTP. Background/content scripts are written by the build-watch
- * sidecar (a Vite watch-mode build) — not here.
+ * sidecar (a Vite watch-mode build), not here.
  */
 export const writeDevAssets = async ({ tree, root, outDir, port, signalPort, config, }) => {
     await fs.mkdir(outDir, { recursive: true });
     const pkgRaw = await fs.readFile(path.join(root, "package.json"), "utf8").catch(() => "{}");
     const pkg = JSON.parse(pkgRaw);
-    await emitAssets({ tree, root, pkg, config, dev: { port, signalPort } }, (fileName, source) => fs.writeFile(path.join(outDir, fileName), source));
-    await copyIcons(root, outDir);
+    // One discovery pass for the dev manifest, the icon copy, and the public
+    // copy, mirroring the prod path. See the Asset inventory.
+    const inventory = discoverAssets(root, tree);
+    await emitAssets({ tree, inventory, pkg, config, dev: { port, signalPort } }, (fileName, source) => fs.writeFile(path.join(outDir, fileName), source));
+    await copyIcons(root, outDir, inventory.icons);
+    await copyPublic(root, outDir, inventory.public);
 };
-const copyIcons = async (root, outDir) => {
-    const srcDir = path.join(root, "icons");
-    const exists = await fs.stat(srcDir).then((s) => s.isDirectory()).catch(() => false);
-    if (!exists)
+const copyIcons = async (root, outDir, icons) => {
+    if (!icons)
         return;
-    const dstDir = path.join(outDir, "icons");
-    await fs.mkdir(dstDir, { recursive: true });
-    const files = await fs.readdir(srcDir);
-    await Promise.all(files.map((f) => fs.copyFile(path.join(srcDir, f), path.join(dstDir, f))));
+    const entries = Object.values(icons);
+    if (entries.length === 0)
+        return;
+    await fs.mkdir(path.join(outDir, "icons"), { recursive: true });
+    await Promise.all(entries.map((rel) => fs.copyFile(path.join(root, rel), path.join(outDir, rel))));
+};
+/**
+ * @describe Copies Public assets into the dev output dir so they resolve at
+ * the extension origin in dev exactly as in prod (chrome.runtime.getURL, or a
+ * root-relative ref on a routable surface). Mirrors copyIcons; the collision
+ * guard from the Asset inventory keeps a stray file from shadowing a
+ * generated output.
+ */
+const copyPublic = async (root, outDir, publicAssets) => {
+    const { files, conflicts } = publicAssets;
+    for (const conflict of conflicts) {
+        console.warn(`[extro] public/${conflict} collides with a generated output; skipping. Rename it to ship it.`);
+    }
+    await Promise.all(files.map(async (rel) => {
+        const dst = path.join(outDir, rel);
+        await fs.mkdir(path.dirname(dst), { recursive: true });
+        await fs.copyFile(path.join(root, "public", rel), dst);
+    }));
 };

package/dist/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @describe Loads `.env` files into `process.env` before config is read, so
+ * `extro.config.ts` and manifest generation (the build-time env tier) can see
+ * them. Uses Vite's own `loadEnv` with an empty prefix (all vars, same
+ * stacking as `import.meta.env`), and does NOT override existing keys, so real
+ * process env (CI) wins over `.env` files. The public tier (`EXTRO_PUBLIC_*`
+ * via `import.meta.env`) is handled separately by Vite's `envPrefix`. See ADR
+ * 0002.
+ */
+export declare const loadEnvIntoProcess: (root: string, mode: "development" | "production") => void;

package/dist/env.js

@@ -0,0 +1,18 @@
+import { loadEnv } from "vite";
+/**
+ * @describe Loads `.env` files into `process.env` before config is read, so
+ * `extro.config.ts` and manifest generation (the build-time env tier) can see
+ * them. Uses Vite's own `loadEnv` with an empty prefix (all vars, same
+ * stacking as `import.meta.env`), and does NOT override existing keys, so real
+ * process env (CI) wins over `.env` files. The public tier (`EXTRO_PUBLIC_*`
+ * via `import.meta.env`) is handled separately by Vite's `envPrefix`. See ADR
+ * 0002.
+ */
+export const loadEnvIntoProcess = (root, mode) => {
+    const env = loadEnv(mode, root, "");
+    for (const [key, value] of Object.entries(env)) {
+        if (process.env[key] === undefined) {
+            process.env[key] = value;
+        }
+    }
+};

package/dist/exports/asset.d.ts

@@ -0,0 +1 @@
+export { asset } from "../core/asset.js";

package/dist/exports/asset.js

@@ -0,0 +1 @@
+export { asset } from "../core/asset.js";

package/dist/exports/link.d.ts

@@ -0,0 +1 @@
+export { Link } from "../router/index.js";

package/dist/exports/link.js

@@ -0,0 +1 @@
+export { Link } from "../router/index.js";

package/dist/exports/navigation.d.ts

@@ -0,0 +1,2 @@
+export { useLocation, useParams, useRouter, useSearchParams, } from "../router/index.js";
+export type { ErrorProps, LayoutProps, PageProps, Router } from "../router/index.js";

package/dist/exports/navigation.js

@@ -0,0 +1 @@
+export { useLocation, useParams, useRouter, useSearchParams, } from "../router/index.js";

package/dist/exports/runtime.d.ts

@@ -0,0 +1,2 @@
+export { createExtroRouter, matchRoutes } from "../router/index.js";
+export type { CreateRouterOptions, DynamicRoute, ExtroRouterHandle, Route, RouteMatch, StaticRoute, } from "../router/index.js";

package/dist/exports/runtime.js

@@ -0,0 +1,3 @@
+// Internal subpath. Emitted by the generated Runtime module
+// (`virtual:extro/runtime/<surface>`), not for direct user import.
+export { createExtroRouter, matchRoutes } from "../router/index.js";

package/dist/index.js

@@ -1,137 +1,6 @@
 #!/usr/bin/env node
-import path from "node:path";
-import { createServer, build as viteBuild } from "vite";
-import { WebSocketServer } from "ws";
-import { extro } from "@extrojs/vite-plugin";
-import react from "@vitejs/plugin-react";
-import { scanAppTree } from "@extrojs/vite-plugin/internal";
-import { loadConfig } from "./load-config.js";
-import { writeDevAssets } from "./dev-assets.js";
-const command = process.argv[2];
-const root = process.cwd();
-// Separate output dirs let dev artifacts (with the bridge installed) persist
-// across `extro dev` sessions without needing a prod-restore on shutdown.
-const devOutDir = path.join(root, ".output", "chrome-mv3-dev");
-const prodOutDir = path.join(root, ".output", "chrome-mv3-prod");
-const dev = async () => {
-    const config = await loadConfig(root);
-    // 1. Scan once up front so we can decide what to start.
-    const tree = await scanAppTree(root);
-    validateTree(tree);
-    // 2. Signal WS — the dev bridge in the extension's BG SW connects here.
-    //    Fixed port (not :0) so the port baked into a previously-loaded BG SW
-    //    keeps working across `extro dev` restarts — otherwise users have to
-    //    refresh the extension every time to pick up a new random port.
-    const signalPort = 9012;
-    const wss = new WebSocketServer({ port: signalPort });
-    wss.on("error", (err) => {
-        if (err.code === "EADDRINUSE") {
-            console.error(`\n[extro] Signal port ${signalPort} is in use — is another \`extro dev\` already running?\n`);
-            process.exit(1);
-        }
-        throw err;
-    });
-    await once(wss, "listening");
-    const broadcast = (msg) => {
-        const payload = JSON.stringify(msg);
-        for (const client of wss.clients) {
-            if (client.readyState === 1)
-                client.send(payload);
-        }
-    };
-    // 3. Vite dev server for routable surfaces.
-    //    `broadcastHmr` lets the plugin push HMR updates over our signal WS —
-    //    we can't piggy-back on Vite's own HMR WS because its origin check
-    //    rejects chrome-extension:// service workers.
-    const server = await createServer({
-        root,
-        plugins: [
-            react(),
-            extro({
-                root,
-                config,
-                broadcastHmr: (payload) => broadcast({ kind: "vite-hmr", payload }),
-            }),
-        ],
-        server: { cors: true },
-    });
-    await server.listen();
-    const addr = server.httpServer?.address();
-    const port = addr && typeof addr === "object" ? addr.port : server.config.server.port ?? 5173;
-    // 4. Dev manifest + HTML + icons.
-    await writeDevAssets({ tree, root, outDir: devOutDir, port, signalPort, config });
-    // 5. Build-watch sidecar for background + content. Always runs in dev so
-    //    the dev bridge gets bundled into background.js (even if the user has
-    //    no BG of their own).
-    const watcher = await viteBuild({
-        root,
-        plugins: [extro({ root, config, scriptsOnly: true, devBridge: { signalPort } })],
-        // emptyOutDir: false so the watcher doesn't wipe the manifest / HTML /
-        // icons that writeDevAssets just put down.
-        build: { watch: {}, emptyOutDir: false, outDir: devOutDir },
-        logLevel: "error",
-    });
-    // The watcher is a RollupWatcher; bundle events fire on every rebuild
-    // (including the first one). Broadcast on each so the bridge reloads.
-    if (watcher && typeof watcher.on === "function") {
-        ;
-        watcher.on("event", (event) => {
-            if (event.code === "BUNDLE_END") {
-                broadcast({ kind: "scripts-rebuilt" });
-            }
-        });
-    }
-    console.log(`\nExtro dev server: http://localhost:${port}`);
-    console.log(`Load unpacked extension from: ${devOutDir}\n`);
-    let shuttingDown = false;
-    const shutdown = async () => {
-        if (shuttingDown) {
-            console.log("\nAlready shutting down, please wait...");
-            return;
-        }
-        shuttingDown = true;
-        console.log("\nShutting down dev server...");
-        if (watcher && typeof watcher.close === "function") {
-            await watcher.close();
-        }
-        wss.close();
-        await server.close();
-        // No prod-restore: dev artifacts live in their own .output/chrome-mv3-dev
-        // dir so the loaded extension stays untouched. Run `extro build` for a
-        // standalone prod bundle in .output/chrome-mv3-prod.
-        process.exit(0);
-    };
-    process.on("SIGINT", shutdown);
-    process.on("SIGTERM", shutdown);
-};
-const validateTree = (tree) => {
-    const empty = Object.keys(tree.scripts).length === 0 &&
-        Object.keys(tree.surfaces).length === 0;
-    if (!empty)
-        return;
-    throw new Error("Extro: No extension entrypoints found.\n\nExpected files like:\n  src/app/popup/page.tsx\n  src/app/options/page.tsx\n  src/app/sidepanel/page.tsx\n  src/app/background/index.ts\n  src/app/content/index.ts");
-};
-const once = (emitter, event) => new Promise((resolve) => emitter.once(event, () => resolve()));
-const build = async () => {
-    console.log("Building extension...");
-    const config = await loadConfig(root);
-    await viteBuild({
-        root,
-        plugins: [react(), extro({ root, config })],
-        build: { outDir: prodOutDir },
-    });
-    console.log(`Build complete. Load unpacked extension from: ${prodOutDir}`);
-};
-switch (command) {
-    case "dev":
-        await dev();
-        break;
-    case "build":
-        await build();
-        break;
-    case "init":
-        console.log("Initializing Extro project...");
-        break;
-    default:
-        console.log("Extro CLI");
-}
+import { run } from "./cli.js";
+run().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/load-config.d.ts

@@ -1,2 +1,2 @@
-import type { ExtroConfig } from "@extrojs/types";
+import type { ExtroConfig } from "./types/index.js";
 export declare const loadConfig: (root: string) => Promise<ExtroConfig>;

package/dist/logger.d.ts

@@ -0,0 +1,34 @@
+import { type Logger } from "vite";
+interface BannerRow {
+    label: string;
+    value: string;
+}
+interface BannerOptions {
+    mode: string;
+    version: string;
+    rows: BannerRow[];
+    hint?: string;
+}
+export declare const log: {
+    success: (msg: string) => void;
+    info: (msg: string) => void;
+    warn: (msg: string) => void;
+    error: (msg: string) => void;
+    /** Low-key line for frequent, low-importance output (e.g. HMR updates).
+     *  Multi-line input is prefixed per line so the `›` rail stays continuous. */
+    muted: (msg: string) => void;
+};
+/**
+ * @describe A Vite `customLogger` that rebadges Vite's own info chatter
+ * (HMR updates, page reloads, dep optimization, "building for production",
+ * bundle sizes, etc.) as Extro `›` muted lines. Warnings + errors still
+ * pass through Vite's logger untouched so they keep their semantics.
+ */
+export declare const createViteLogger: () => Logger;
+/**
+ * @describe Prints the grouped startup banner: a brand tag with version/mode,
+ * then aligned label/value rows and an optional dimmed hint. Mirrors Vite's
+ * own startup idiom so the two read as a coherent stack.
+ */
+export declare const banner: ({ mode, version, rows, hint }: BannerOptions) => void;
+export {};