react-client 1.0.28 → 1.0.30

package/dist/cli/commands/dev.js

@@ -1,6 +1,5 @@
-"use strict";
 /**
- * dev.ts — Vite-like dev server for react-client
+ * dev.ts — dev server for react-client
  *
  * - prebundles deps into .react-client/deps
  * - serves /@modules/<dep>
@@ -10,434 +9,548 @@
  *
  * Keep this file linted & typed. Avoids manual react-dom/client hacks.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = dev;
-const esbuild_1 = __importDefault(require("esbuild"));
-const connect_1 = __importDefault(require("connect"));
-const http_1 = __importDefault(require("http"));
-const chokidar_1 = __importDefault(require("chokidar"));
-const detect_port_1 = __importDefault(require("detect-port"));
-const prompts_1 = __importDefault(require("prompts"));
-const path_1 = __importDefault(require("path"));
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const open_1 = __importDefault(require("open"));
-const chalk_1 = __importDefault(require("chalk"));
-const child_process_1 = require("child_process");
-const loadConfig_1 = require("../../utils/loadConfig");
-const broadcastManager_1 = require("../../server/broadcastManager");
-async function dev() {
-    const root = process.cwd();
-    const userConfig = (await (0, loadConfig_1.loadReactClientConfig)(root));
-    const appRoot = path_1.default.resolve(root, userConfig.root || '.');
-    const defaultPort = userConfig.server?.port ?? 2202;
-    // cache dir for prebundled deps
-    const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
-    await fs_extra_1.default.ensureDir(cacheDir);
-    // Detect entry (main.tsx / main.jsx)
-    const possible = ['src/main.tsx', 'src/main.jsx'].map((p) => path_1.default.join(appRoot, p));
-    const entry = possible.find((p) => fs_extra_1.default.existsSync(p));
-    if (!entry) {
-        console.error(chalk_1.default.red('❌ Entry not found: src/main.tsx or src/main.jsx'));
-        process.exit(1);
-    }
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
-    // Select port
-    const availablePort = await (0, detect_port_1.default)(defaultPort);
-    const port = availablePort;
-    if (availablePort !== defaultPort) {
-        const response = await (0, prompts_1.default)({
-            type: 'confirm',
-            name: 'useNewPort',
-            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
-            initial: true,
-        });
-        if (!response.useNewPort) {
-            console.log('🛑 Dev server cancelled.');
-            process.exit(0);
+import esbuild from 'esbuild';
+import connect from 'connect';
+import http from 'http';
+import chokidar from 'chokidar';
+import detectPort from 'detect-port';
+import prompts from 'prompts';
+import path from 'path';
+import fs from 'fs-extra';
+import open from 'open';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import { loadReactClientConfig } from '../../utils/loadConfig';
+import { BroadcastManager } from '../../server/broadcastManager';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const RUNTIME_OVERLAY_ROUTE = '/@runtime/overlay';
+function jsContentType() {
+    return 'application/javascript; charset=utf-8';
+}
+/**
+ * Resolve any bare import id robustly:
+ * 1. try require.resolve(id)
+ * 2. try require.resolve(`${pkg}/${subpath}`)
+ * 3. try package.json exports field
+ * 4. try common fallback candidates
+ */
+function resolveModuleEntry(id, root) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // quick resolution
+        try {
+            return require.resolve(id, { paths: [root] });
         }
-    }
-    // Ensure react-refresh runtime available (used by many templates)
-    try {
-        require.resolve('react-refresh/runtime');
-    }
-    catch {
-        console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — installing react-refresh...'));
-        (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
-            cwd: appRoot,
-            stdio: 'inherit',
-        });
-    }
-    // Plugin system (core + user)
-    const corePlugins = [
-        {
-            name: 'css-hmr',
-            async onTransform(code, id) {
-                if (id.endsWith('.css')) {
-                    const escaped = JSON.stringify(code);
-                    return `
+        catch (_a) {
+            // continue
+        }
+        // split package root and subpath
+        const parts = id.split('/');
+        const pkgRoot = parts[0].startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
+        const subPath = parts.slice(pkgRoot.startsWith('@') ? 2 : 1).join('/');
+        let pkgJsonPath;
+        try {
+            pkgJsonPath = require.resolve(`${pkgRoot}/package.json`, { paths: [root] });
+        }
+        catch (_b) {
+            // No need to keep unused variable 'err'
+            throw new Error(`Package not found: ${pkgRoot}`);
+        }
+        const pkgDir = path.dirname(pkgJsonPath);
+        // Explicitly type pkgJson to avoid 'any'
+        let pkgJson = {};
+        try {
+            const pkgContent = yield fs.readFile(pkgJsonPath, 'utf8');
+            pkgJson = JSON.parse(pkgContent);
+        }
+        catch (_c) {
+            // ignore parse or read errors gracefully
+        }
+        // If exports field exists, try to look up subpath (type-safe, supports conditional exports)
+        if (pkgJson.exports) {
+            const exportsField = pkgJson.exports;
+            // If exports is a plain string -> it's the entry
+            if (typeof exportsField === 'string') {
+                if (!subPath)
+                    return path.resolve(pkgDir, exportsField);
+            }
+            else if (exportsField && typeof exportsField === 'object') {
+                // Normalize to a record so we can index it safely
+                const exportsMap = exportsField;
+                // Try candidates in order: explicit subpath, index, fallback
+                const keyCandidates = [];
+                if (subPath) {
+                    keyCandidates.push(`./${subPath}`, `./${subPath}.js`, `./${subPath}.mjs`);
+                }
+                keyCandidates.push('.', './index.js', './index.mjs');
+                for (const key of keyCandidates) {
+                    if (!(key in exportsMap))
+                        continue;
+                    const entry = exportsMap[key];
+                    // entry may be string or object like { import: "...", require: "..." }
+                    let target;
+                    if (typeof entry === 'string') {
+                        target = entry;
+                    }
+                    else if (entry && typeof entry === 'object') {
+                        const entryObj = entry;
+                        // Prefer "import" field for ESM consumers, then "default", then any string-ish value
+                        if (typeof entryObj.import === 'string')
+                            target = entryObj.import;
+                        else if (typeof entryObj.default === 'string')
+                            target = entryObj.default;
+                        else {
+                            // If the entry object itself is a conditional map (like {"node": "...", "browser": "..."}),
+                            // attempt to pick any string value present.
+                            for (const k of Object.keys(entryObj)) {
+                                if (typeof entryObj[k] === 'string') {
+                                    target = entryObj[k];
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (!target || typeof target !== 'string')
+                        continue;
+                    // Normalize relative paths in exports (remove leading ./)
+                    const normalized = target.replace(/^\.\//, '');
+                    const abs = path.isAbsolute(normalized)
+                        ? normalized
+                        : path.resolve(pkgDir, normalized);
+                    if (yield fs.pathExists(abs)) {
+                        return abs;
+                    }
+                }
+            }
+        }
+        // Try resolved subpath directly (pkg/subpath)
+        if (subPath) {
+            try {
+                const candidate = require.resolve(`${pkgRoot}/${subPath}`, { paths: [root] });
+                return candidate;
+            }
+            catch (_d) {
+                // fallback to searching common candidates under package dir
+                const candPaths = [
+                    path.join(pkgDir, subPath),
+                    path.join(pkgDir, subPath + '.js'),
+                    path.join(pkgDir, subPath + '.mjs'),
+                    path.join(pkgDir, subPath, 'index.js'),
+                    path.join(pkgDir, subPath, 'index.mjs'),
+                ];
+                for (const c of candPaths) {
+                    if (yield fs.pathExists(c))
+                        return c;
+                }
+            }
+        }
+        // Try package's main/module/browser fields safely (typed as string)
+        const candidateFields = [
+            typeof pkgJson.module === 'string' ? pkgJson.module : undefined,
+            typeof pkgJson.browser === 'string' ? pkgJson.browser : undefined,
+            typeof pkgJson.main === 'string' ? pkgJson.main : undefined,
+        ];
+        for (const field of candidateFields) {
+            if (!field)
+                continue;
+            const abs = path.isAbsolute(field) ? field : path.resolve(pkgDir, field);
+            if (yield fs.pathExists(abs))
+                return abs;
+        }
+        throw new Error(`Could not resolve module entry for ${id}`);
+    });
+}
+/**
+ * Wrap the built module for subpath imports:
+ * For requests like "/@modules/react-dom/client" — we bundle the resolved file
+ * and return it. If the user requested the package root instead, the resolved
+ * bundle is returned directly.
+ *
+ * No hardcoded special cases.
+ */
+function normalizeCacheKey(id) {
+    return id.replace(/[\\/]/g, '_');
+}
+export default function dev() {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        const root = process.cwd();
+        const userConfig = (yield loadReactClientConfig(root));
+        const appRoot = path.resolve(root, userConfig.root || '.');
+        const defaultPort = (_b = (_a = userConfig.server) === null || _a === void 0 ? void 0 : _a.port) !== null && _b !== void 0 ? _b : 2202;
+        // cache dir for prebundled deps
+        const cacheDir = path.join(appRoot, '.react-client', 'deps');
+        yield fs.ensureDir(cacheDir);
+        // Detect entry (main.tsx / main.jsx)
+        const possible = ['src/main.tsx', 'src/main.jsx'].map((p) => path.join(appRoot, p));
+        const entry = possible.find((p) => fs.existsSync(p));
+        if (!entry) {
+            console.error(chalk.red('❌ Entry not found: src/main.tsx or src/main.jsx'));
+            process.exit(1);
+        }
+        const indexHtml = path.join(appRoot, 'index.html');
+        // Select port
+        const availablePort = yield detectPort(defaultPort);
+        const port = availablePort;
+        if (availablePort !== defaultPort) {
+            const response = yield prompts({
+                type: 'confirm',
+                name: 'useNewPort',
+                message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
+                initial: true,
+            });
+            if (!response.useNewPort) {
+                console.log('🛑 Dev server cancelled.');
+                process.exit(0);
+            }
+        }
+        // Ensure react-refresh runtime available (used by many templates)
+        try {
+            require.resolve('react-refresh/runtime');
+        }
+        catch (_c) {
+            console.warn(chalk.yellow('⚠️ react-refresh not found — installing react-refresh...'));
+            try {
+                execSync('npm install react-refresh --no-audit --no-fund --silent', {
+                    cwd: appRoot,
+                    stdio: 'inherit',
+                });
+            }
+            catch (_d) {
+                console.warn(chalk.yellow('⚠️ automatic install of react-refresh failed; continuing without it.'));
+            }
+        }
+        // Plugin system (core + user)
+        const corePlugins = [
+            {
+                name: 'css-hmr',
+                onTransform(code, id) {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        if (id.endsWith('.css')) {
+                            const escaped = JSON.stringify(code);
+                            return `
             const css = ${escaped};
             const style = document.createElement("style");
             style.textContent = css;
             document.head.appendChild(style);
             import.meta.hot?.accept();
           `;
-                }
-                return code;
+                        }
+                        return code;
+                    });
+                },
             },
-        },
-    ];
-    const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
-    const plugins = [...corePlugins, ...userPlugins];
-    // App + caches
-    const app = (0, connect_1.default)();
-    const transformCache = new Map();
-    // Helper: recursively analyze dependency graph for prebundling (bare imports)
-    async function analyzeGraph(file, seen = new Set()) {
-        if (seen.has(file))
-            return seen;
-        seen.add(file);
-        try {
-            const code = await fs_extra_1.default.readFile(file, 'utf8');
-            const matches = [
-                ...code.matchAll(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g),
-                ...code.matchAll(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g),
-            ];
-            for (const m of matches) {
-                const dep = m[1];
-                if (!dep || dep.startsWith('.') || dep.startsWith('/'))
-                    continue;
+        ];
+        const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
+        const plugins = [...corePlugins, ...userPlugins];
+        // App + caches
+        const app = connect();
+        const transformCache = new Map();
+        // Helper: recursively analyze dependency graph for prebundling (bare imports)
+        function analyzeGraph(file_1) {
+            return __awaiter(this, arguments, void 0, function* (file, seen = new Set()) {
+                if (seen.has(file))
+                    return seen;
+                seen.add(file);
                 try {
-                    const resolved = require.resolve(dep, { paths: [appRoot] });
-                    await analyzeGraph(resolved, seen);
+                    const code = yield fs.readFile(file, 'utf8');
+                    const matches = [
+                        ...code.matchAll(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g),
+                        ...code.matchAll(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g),
+                    ];
+                    for (const m of matches) {
+                        const dep = m[1];
+                        if (!dep || dep.startsWith('.') || dep.startsWith('/'))
+                            continue;
+                        try {
+                            const resolved = require.resolve(dep, { paths: [appRoot] });
+                            yield analyzeGraph(resolved, seen);
+                        }
+                        catch (_a) {
+                            // bare dependency (node_modules) - track name
+                            seen.add(dep);
+                        }
+                    }
                 }
-                catch {
-                    // bare dependency (node_modules) - track name
-                    seen.add(dep);
+                catch (_b) {
+                    // ignore unreadable files
                 }
-            }
+                return seen;
+            });
         }
-        catch {
-            // ignore unreadable files
+        // Prebundle dependencies into cache dir (parallel)
+        function prebundleDeps(deps) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (!deps.size)
+                    return;
+                const existingFiles = yield fs.readdir(cacheDir);
+                const existing = new Set(existingFiles.map((f) => f.replace(/\.js$/, '')));
+                const missing = [...deps].filter((d) => !existing.has(d));
+                if (!missing.length)
+                    return;
+                console.log(chalk.cyan('📦 Prebundling:'), missing.join(', '));
+                yield Promise.all(missing.map((dep) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const entryPoint = require.resolve(dep, { paths: [appRoot] });
+                        const outFile = path.join(cacheDir, normalizeCacheKey(dep) + '.js');
+                        yield esbuild.build({
+                            entryPoints: [entryPoint],
+                            bundle: true,
+                            platform: 'browser',
+                            format: 'esm',
+                            outfile: outFile,
+                            write: true,
+                            target: ['es2020'],
+                        });
+                        console.log(chalk.green(`✅ Cached ${dep}`));
+                    }
+                    catch (err) {
+                        console.warn(chalk.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
+                    }
+                })));
+            });
         }
-        return seen;
-    }
-    // Prebundle dependencies into cache dir (parallel)
-    async function prebundleDeps(deps) {
-        if (!deps.size)
-            return;
-        const existingFiles = await fs_extra_1.default.readdir(cacheDir);
-        const existing = new Set(existingFiles.map((f) => f.replace(/\.js$/, '')));
-        const missing = [...deps].filter((d) => !existing.has(d));
-        if (!missing.length)
-            return;
-        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
-        await Promise.all(missing.map(async (dep) => {
+        // Build initial prebundle graph from entry
+        const depsSet = yield analyzeGraph(entry);
+        yield prebundleDeps(depsSet);
+        // Watch package.json for changes to re-prebundle
+        const pkgPath = path.join(appRoot, 'package.json');
+        if (yield fs.pathExists(pkgPath)) {
+            chokidar.watch(pkgPath).on('change', () => __awaiter(this, void 0, void 0, function* () {
+                console.log(chalk.yellow('📦 package.json changed — rebuilding prebundle...'));
+                const newDeps = yield analyzeGraph(entry);
+                yield prebundleDeps(newDeps);
+            }));
+        }
+        // --- Serve /@modules/<dep> (prebundled or on-demand esbuild bundle)
+        app.use(((req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const url = (_a = req.url) !== null && _a !== void 0 ? _a : '';
+            if (!url.startsWith('/@modules/'))
+                return next();
+            const id = url.replace(/^\/@modules\//, '');
+            if (!id) {
+                res.writeHead(400);
+                return res.end('// invalid module');
+            }
             try {
-                const entryPoint = require.resolve(dep, { paths: [appRoot] });
-                const outFile = path_1.default.join(cacheDir, dep.replace(/\//g, '_') + '.js');
-                await esbuild_1.default.build({
-                    entryPoints: [entryPoint],
+                const cacheFile = path.join(cacheDir, normalizeCacheKey(id) + '.js');
+                if (yield fs.pathExists(cacheFile)) {
+                    res.setHeader('Content-Type', jsContentType());
+                    return res.end(yield fs.readFile(cacheFile, 'utf8'));
+                }
+                // Resolve the actual entry file (handles subpaths & package exports)
+                const entryFile = yield resolveModuleEntry(id, appRoot);
+                const result = yield esbuild.build({
+                    entryPoints: [entryFile],
                     bundle: true,
                     platform: 'browser',
                     format: 'esm',
-                    outfile: outFile,
-                    write: true,
+                    write: false,
                     target: ['es2020'],
                 });
-                console.log(chalk_1.default.green(`✅ Cached ${dep}`));
+                const output = (_d = (_c = (_b = result.outputFiles) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : '';
+                // Write cache and respond
+                yield fs.writeFile(cacheFile, output, 'utf8');
+                res.setHeader('Content-Type', jsContentType());
+                res.end(output);
             }
             catch (err) {
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
-            }
-        }));
-    }
-    // Build initial prebundle graph from entry
-    const depsSet = await analyzeGraph(entry);
-    await prebundleDeps(depsSet);
-    // Watch package.json for changes to re-prebundle
-    const pkgPath = path_1.default.join(appRoot, 'package.json');
-    if (await fs_extra_1.default.pathExists(pkgPath)) {
-        chokidar_1.default.watch(pkgPath).on('change', async () => {
-            console.log(chalk_1.default.yellow('📦 package.json changed — rebuilding prebundle...'));
-            const newDeps = await analyzeGraph(entry);
-            await prebundleDeps(newDeps);
-        });
-    }
-    // --- Serve /@modules/<dep> (prebundled or on-demand esbuild bundle)
-    app.use(async (req, res, next) => {
-        const url = req.url ?? '';
-        if (!url.startsWith('/@modules/'))
-            return next();
-        const id = url.replace(/^\/@modules\//, '');
-        if (!id) {
-            res.writeHead(400);
-            return res.end('// invalid module');
-        }
-        try {
-            const cacheFile = path_1.default.join(cacheDir, id.replace(/[\\/]/g, '_') + '.js');
-            if (await fs_extra_1.default.pathExists(cacheFile)) {
-                res.setHeader('Content-Type', 'application/javascript');
-                return res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
-            }
-            // 🧠 Handle subpath imports correctly (like react-dom/client)
-            let entryFile = null;
-            try {
-                entryFile = require.resolve(id, { paths: [appRoot] });
-            }
-            catch {
-                const parts = id.split('/');
-                const pkgRoot = parts[0].startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
-                const subPath = parts.slice(pkgRoot.startsWith('@') ? 2 : 1).join('/');
-                const pkgJsonPath = require.resolve(`${pkgRoot}/package.json`, { paths: [appRoot] });
-                const pkgDir = path_1.default.dirname(pkgJsonPath);
-                // Special case: react-dom/client
-                if (pkgRoot === 'react-dom' && subPath === 'client') {
-                    entryFile = path_1.default.join(pkgDir, 'client.js');
-                }
-                else {
-                    const candidates = [
-                        path_1.default.join(pkgDir, subPath),
-                        path_1.default.join(pkgDir, subPath, 'index.js'),
-                        path_1.default.join(pkgDir, subPath + '.js'),
-                        path_1.default.join(pkgDir, subPath + '.mjs'),
-                    ];
-                    for (const f of candidates) {
-                        if (await fs_extra_1.default.pathExists(f)) {
-                            entryFile = f;
-                            break;
-                        }
-                    }
-                }
+                res.writeHead(500);
+                res.end(`// Failed to resolve module ${id}: ${err.message}`);
             }
-            if (!entryFile)
-                throw new Error(`Cannot resolve module: ${id}`);
-            const result = await esbuild_1.default.build({
-                entryPoints: [entryFile],
-                bundle: true,
-                platform: 'browser',
-                format: 'esm',
-                write: false,
-                target: ['es2020'],
-            });
-            const output = result.outputFiles?.[0]?.text ?? '';
-            await fs_extra_1.default.writeFile(cacheFile, output, 'utf8');
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(output);
-        }
-        catch (err) {
-            res.writeHead(500);
-            res.end(`// Failed to resolve module ${id}: ${err.message}`);
-        }
-    });
-    // --- Serve runtime overlay (inline, no external dependencies)
-    const OVERLAY_RUNTIME = `
+        })));
+        // --- Serve runtime overlay (inline, no external dependencies)
+        const OVERLAY_RUNTIME = `
+/* inline overlay runtime - served at ${RUNTIME_OVERLAY_ROUTE} */
+${(() => {
+            // small helper — embed as a string
+            return `
 const overlayId = "__rc_error_overlay__";
+(function(){ 
+  const style = document.createElement("style");
+  style.textContent = \`
+    #\${overlayId}{position:fixed;inset:0;background:rgba(0,0,0,0.9);color:#fff;font-family:Menlo,Consolas,monospace;font-size:14px;z-index:999999;overflow:auto;padding:24px;}
+    #\${overlayId} h2{color:#ff6b6b;margin-bottom:16px;}
+    #\${overlayId} pre{background:rgba(255,255,255,0.06);padding:12px;border-radius:6px;overflow:auto;}
+    .frame-file{color:#ffa500;cursor:pointer;font-weight:bold;margin-bottom:4px;}
+    .line-number{opacity:0.6;margin-right:10px;display:inline-block;width:2em;text-align:right;}
+  \`;
+  document.head.appendChild(style);
 
-const style = document.createElement("style");
-style.textContent = \`
-  #\${overlayId} {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.9);
-    color: #fff;
-    font-family: Menlo, Consolas, monospace;
-    font-size: 14px;
-    z-index: 999999;
-    overflow: auto;
-    padding: 24px;
-    animation: fadeIn 0.2s ease-out;
+  async function mapStackFrame(frame){
+    const m = frame.match(/(\\/src\\/[^\s:]+):(\\d+):(\\d+)/);
+    if(!m) return frame;
+    const [,file,line,col] = m;
+    try{
+      const resp = await fetch(\`/@source-map?file=\${file}&line=\${line}&column=\${col}\`);
+      if(!resp.ok) return frame;
+      const pos = await resp.json();
+      if(pos.source) return pos;
+    }catch(e){}
+    return frame;
   }
-  @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
-  #\${overlayId} h2 { color: #ff6b6b; margin-bottom: 16px; }
-  #\${overlayId} pre { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 6px; overflow-x: auto; }
-  #\${overlayId} a { color: #9cf; text-decoration: underline; }
-  #\${overlayId} .frame { margin: 12px 0; }
-  #\${overlayId} .frame-file { color: #ffa500; cursor: pointer; font-weight: bold; margin-bottom: 4px; }
-  .line-number { opacity: 0.5; margin-right: 10px; display: inline-block; width: 2em; text-align: right; }
-\`;
-document.head.appendChild(style);
 
-async function mapStackFrame(frame) {
-  const m = frame.match(/(\\/src\\/[^\s:]+):(\\d+):(\\d+)/);
-  if (!m) return frame;
-  const [, file, line, col] = m;
-  const resp = await fetch(\`/@source-map?file=\${file}&line=\${line}&column=\${col}\`);
-  if (!resp.ok) return frame;
-  const pos = await resp.json();
-  if (pos.source) {
-    return {
-      file: pos.source,
-      line: pos.line,
-      column: pos.column,
-      snippet: pos.snippet || ""
-    };
+  function highlightSimple(s){
+    return s.replace(/(const|let|var|function|return|import|from|export|class|new|await|async|if|else|for|while|try|catch|throw)/g,'<span style="color:#ffb86c">$1</span>');
   }
-  return frame;
-}
-
-// 🔹 minimal inline syntax highlighting (keywords only)
-function highlightJS(code) {
-  return code
-    .replace(/(const|let|var|function|return|import|from|export|class|new|await|async|if|else|for|while|try|catch|throw)/g, '<span style="color:#ffb86c;">$1</span>')
-    .replace(/("[^"]*"|'[^']*')/g, '<span style="color:#8be9fd;">$1</span>')
-    .replace(/(\\/\\/.*)/g, '<span style="opacity:0.6;">$1</span>');
-}
-
-async function renderOverlay(err) {
-  const overlay =
-    document.getElementById(overlayId) ||
-    document.body.appendChild(Object.assign(document.createElement("div"), { id: overlayId }));
-  overlay.innerHTML = "";
-  const title = document.createElement("h2");
-  title.textContent = "🔥 " + (err.message || "Error");
-  overlay.appendChild(title);
 
-  const frames = (err.stack || "").split("\\n").filter(l => /src\\//.test(l));
-  for (const frame of frames) {
-    const mapped = await mapStackFrame(frame);
-    if (typeof mapped === "string") continue;
-    const frameEl = document.createElement("div");
-    frameEl.className = "frame";
-
-    const link = document.createElement("div");
-    link.className = "frame-file";
-    link.textContent = \`\${mapped.file}:\${mapped.line}:\${mapped.column}\`;
-    link.onclick = () =>
-      window.open("vscode://file/" + location.origin.replace("http://", "") + mapped.file + ":" + mapped.line);
-    frameEl.appendChild(link);
-
-    if (mapped.snippet) {
-      const pre = document.createElement("pre");
-      pre.innerHTML = highlightJS(mapped.snippet);
-      frameEl.appendChild(pre);
+  async function renderOverlay(err){
+    const overlay = document.getElementById(overlayId) || document.body.appendChild(Object.assign(document.createElement("div"),{id:overlayId}));
+    overlay.innerHTML = "";
+    const title = document.createElement("h2");
+    title.textContent = "🔥 " + (err.message || "Error");
+    overlay.appendChild(title);
+    const frames = (err.stack||"").split("\\n").filter(l => /src\\//.test(l));
+    for(const frame of frames){
+      const mapped = await mapStackFrame(frame);
+      if(typeof mapped === "string") continue;
+      const frameEl = document.createElement("div");
+      const link = document.createElement("div");
+      link.className = "frame-file";
+      link.textContent = \`\${mapped.source||mapped.file}:\${mapped.line}:\${mapped.column}\`;
+      link.onclick = ()=>window.open("vscode://file/"+(mapped.source||mapped.file)+":"+mapped.line);
+      frameEl.appendChild(link);
+      if(mapped.snippet){
+        const pre = document.createElement("pre");
+        pre.innerHTML = highlightSimple(mapped.snippet);
+        frameEl.appendChild(pre);
+      }
+      overlay.appendChild(frameEl);
     }
-
-    overlay.appendChild(frameEl);
   }
-}
 
-window.showErrorOverlay = (err) => renderOverlay(err);
-window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
+  window.showErrorOverlay = (err)=>renderOverlay(err);
+  window.clearErrorOverlay = ()=>document.getElementById(overlayId)?.remove();
+  window.addEventListener("error", e => window.showErrorOverlay?.(e.error || e));
+  window.addEventListener("unhandledrejection", e => window.showErrorOverlay?.(e.reason || e));
+})();
 `;
-    app.use(async (req, res, next) => {
-        if (req.url === '/@runtime/overlay') {
-            res.setHeader('Content-Type', 'application/javascript');
-            return res.end(OVERLAY_RUNTIME);
-        }
-        next();
-    });
-    // --- minimal /@source-map: return snippet around requested line of original source file
-    app.use((async (req, res, next) => {
-        const url = req.url ?? '';
-        if (!url.startsWith('/@source-map'))
-            return next();
-        // expected query: ?file=/src/xyz.tsx&line=12&column=3
-        try {
-            const full = req.url ?? '';
-            const parsed = new URL(full, `http://localhost:${port}`);
-            const file = parsed.searchParams.get('file') ?? '';
-            const lineStr = parsed.searchParams.get('line') ?? '0';
-            const lineNum = Number(lineStr) || 0;
-            if (!file) {
-                res.writeHead(400);
-                return res.end('{}');
+        })()}
+`;
+        app.use((req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            if (req.url === RUNTIME_OVERLAY_ROUTE) {
+                res.setHeader('Content-Type', jsContentType());
+                return res.end(OVERLAY_RUNTIME);
             }
-            const filePath = path_1.default.join(appRoot, file.startsWith('/') ? file.slice(1) : file);
-            if (!(await fs_extra_1.default.pathExists(filePath))) {
-                res.writeHead(404);
-                return res.end('{}');
+            next();
+        }));
+        // --- minimal /@source-map: return snippet around requested line of original source file
+        app.use(((req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const url = (_a = req.url) !== null && _a !== void 0 ? _a : '';
+            if (!url.startsWith('/@source-map'))
+                return next();
+            try {
+                const parsed = new URL((_b = req.url) !== null && _b !== void 0 ? _b : '', `http://localhost:${port}`);
+                const file = (_c = parsed.searchParams.get('file')) !== null && _c !== void 0 ? _c : '';
+                const lineStr = (_d = parsed.searchParams.get('line')) !== null && _d !== void 0 ? _d : '0';
+                const lineNum = Number(lineStr) || 0;
+                if (!file) {
+                    res.writeHead(400);
+                    return res.end('{}');
+                }
+                const filePath = path.join(appRoot, file.startsWith('/') ? file.slice(1) : file);
+                if (!(yield fs.pathExists(filePath))) {
+                    res.writeHead(404);
+                    return res.end('{}');
+                }
+                const src = yield fs.readFile(filePath, 'utf8');
+                const lines = src.split(/\r?\n/);
+                const start = Math.max(0, lineNum - 3 - 1);
+                const end = Math.min(lines.length, lineNum + 2);
+                const snippet = lines
+                    .slice(start, end)
+                    .map((l, i) => {
+                    const ln = start + i + 1;
+                    return `<span class="line-number">${ln}</span> ${l
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')}`;
+                })
+                    .join('\n');
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({ source: file, line: lineNum, column: 0, snippet }));
             }
-            const src = await fs_extra_1.default.readFile(filePath, 'utf8');
-            const lines = src.split(/\r?\n/);
-            const start = Math.max(0, lineNum - 3 - 1);
-            const end = Math.min(lines.length, lineNum + 2);
-            const snippet = lines
-                .slice(start, end)
-                .map((l, i) => {
-                const ln = start + i + 1;
-                return `<span class="line-number">${ln}</span> ${l
-                    .replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;')}`;
-            })
-                .join('\n');
-            res.setHeader('Content-Type', 'application/json');
-            res.end(JSON.stringify({ source: file, line: lineNum, column: 0, snippet }));
-        }
-        catch (err) {
-            res.writeHead(500);
-            res.end(JSON.stringify({ error: err.message }));
-        }
-    }));
-    // --- Serve /src/* files (on-the-fly transform + bare import rewrite)
-    app.use((async (req, res, next) => {
-        const url = req.url ?? '';
-        if (!url.startsWith('/src/') && !url.endsWith('.css'))
-            return next();
-        const raw = decodeURIComponent((req.url ?? '').split('?')[0]);
-        const filePath = path_1.default.join(appRoot, raw.replace(/^\//, ''));
-        // Try file extensions if not exact file
-        const exts = ['', '.tsx', '.ts', '.jsx', '.js', '.css'];
-        let found = '';
-        for (const ext of exts) {
-            if (await fs_extra_1.default.pathExists(filePath + ext)) {
-                found = filePath + ext;
-                break;
+            catch (err) {
+                res.writeHead(500);
+                res.end(JSON.stringify({ error: err.message }));
             }
-        }
-        if (!found)
-            return next();
-        try {
-            let code = await fs_extra_1.default.readFile(found, 'utf8');
-            // rewrite bare imports -> /@modules/<dep>
-            code = code
-                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
-                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
-            // run plugin transforms
-            for (const p of plugins) {
-                if (p.onTransform) {
-                    // plugin may return transformed code
-                    // keep typed as string
-                    // eslint-disable-next-line no-await-in-loop
-                    const out = await p.onTransform(code, found);
-                    if (typeof out === 'string')
-                        code = out;
+        })));
+        // --- Serve /src/* files (on-the-fly transform + bare import rewrite)
+        app.use(((req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const url = (_a = req.url) !== null && _a !== void 0 ? _a : '';
+            if (!url.startsWith('/src/') && !url.endsWith('.css'))
+                return next();
+            const raw = decodeURIComponent(((_b = req.url) !== null && _b !== void 0 ? _b : '').split('?')[0]);
+            const filePath = path.join(appRoot, raw.replace(/^\//, ''));
+            // Try file extensions if not exact file
+            const exts = ['', '.tsx', '.ts', '.jsx', '.js', '.css'];
+            let found = '';
+            for (const ext of exts) {
+                if (yield fs.pathExists(filePath + ext)) {
+                    found = filePath + ext;
+                    break;
                 }
             }
-            // choose loader by extension
-            const ext = path_1.default.extname(found).toLowerCase();
-            const loader = ext === '.ts' ? 'ts' : ext === '.tsx' ? 'tsx' : ext === '.jsx' ? 'jsx' : 'js';
-            const result = await esbuild_1.default.transform(code, {
-                loader,
-                sourcemap: 'inline',
-                target: ['es2020'],
-            });
-            transformCache.set(found, result.code);
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(result.code);
-        }
-        catch (err) {
-            const e = err;
-            res.writeHead(500);
-            res.end(`// transform error: ${e.message}`);
-        }
-    }));
-    // --- Serve index.html with overlay + HMR client injection
-    app.use((async (req, res, next) => {
-        const url = req.url ?? '';
-        if (url !== '/' && url !== '/index.html')
-            return next();
-        if (!(await fs_extra_1.default.pathExists(indexHtml))) {
-            res.writeHead(404);
-            return res.end('index.html not found');
-        }
-        try {
-            let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
-            // inject overlay runtime and HMR client if not already present
-            if (!html.includes('/@runtime/overlay')) {
-                html = html.replace('</body>', `\n<script type="module" src="/@runtime/overlay"></script>\n<script type="module">
+            if (!found)
+                return next();
+            try {
+                let code = yield fs.readFile(found, 'utf8');
+                // rewrite bare imports -> /@modules/<dep>
+                code = code
+                    .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
+                    .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
+                // run plugin transforms
+                for (const p of plugins) {
+                    if (p.onTransform) {
+                        const out = yield p.onTransform(code, found);
+                        if (typeof out === 'string')
+                            code = out;
+                    }
+                }
+                // choose loader by extension
+                const ext = path.extname(found).toLowerCase();
+                const loader = ext === '.ts' ? 'ts' : ext === '.tsx' ? 'tsx' : ext === '.jsx' ? 'jsx' : 'js';
+                const result = yield esbuild.transform(code, {
+                    loader,
+                    sourcemap: 'inline',
+                    target: ['es2020'],
+                });
+                transformCache.set(found, result.code);
+                res.setHeader('Content-Type', jsContentType());
+                res.end(result.code);
+            }
+            catch (err) {
+                const e = err;
+                res.writeHead(500);
+                res.end(`// transform error: ${e.message}`);
+            }
+        })));
+        // --- Serve index.html with overlay + HMR client injection
+        app.use(((req, res, next) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const url = (_a = req.url) !== null && _a !== void 0 ? _a : '';
+            if (url !== '/' && url !== '/index.html')
+                return next();
+            if (!(yield fs.pathExists(indexHtml))) {
+                res.writeHead(404);
+                return res.end('index.html not found');
+            }
+            try {
+                let html = yield fs.readFile(indexHtml, 'utf8');
+                // inject overlay runtime and HMR client if not already present
+                if (!html.includes(RUNTIME_OVERLAY_ROUTE)) {
+                    html = html.replace('</body>', `\n<script type="module" src="${RUNTIME_OVERLAY_ROUTE}"></script>\n<script type="module">
   const ws = new WebSocket("ws://" + location.host);
   ws.onmessage = (e) => {
     const msg = JSON.parse(e.data);
@@ -449,70 +562,66 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
     }
   };
 </script>\n</body>`);
+                }
+                res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                res.end(html);
             }
-            res.setHeader('Content-Type', 'text/html');
-            res.end(html);
-        }
-        catch (err) {
-            res.writeHead(500);
-            res.end(`// html read error: ${err.message}`);
-        }
-    }));
-    // --- HMR WebSocket server
-    const server = http_1.default.createServer(app);
-    const broadcaster = new broadcastManager_1.BroadcastManager(server);
-    // Watch files and trigger plugin onHotUpdate + broadcast HMR message
-    const watcher = chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true });
-    watcher.on('change', async (file) => {
-        transformCache.delete(file);
-        // plugin hook onHotUpdate optionally
-        for (const p of plugins) {
-            if (p.onHotUpdate) {
+            catch (err) {
+                res.writeHead(500);
+                res.end(`// html read error: ${err.message}`);
+            }
+        })));
+        // --- HMR WebSocket server
+        const server = http.createServer(app);
+        const broadcaster = new BroadcastManager(server);
+        // Watch files and trigger plugin onHotUpdate + broadcast HMR message
+        const watcher = chokidar.watch(path.join(appRoot, 'src'), { ignoreInitial: true });
+        watcher.on('change', (file) => __awaiter(this, void 0, void 0, function* () {
+            transformCache.delete(file);
+            // plugin hook onHotUpdate optionally
+            for (const p of plugins) {
+                if (p.onHotUpdate) {
+                    try {
+                        yield p.onHotUpdate(file, {
+                            // plugin only needs broadcast in most cases
+                            broadcast: (msg) => {
+                                broadcaster.broadcast(msg);
+                            },
+                        });
+                    }
+                    catch (err) {
+                        console.warn('plugin onHotUpdate error:', err.message);
+                    }
+                }
+            }
+            // default: broadcast update for changed file
+            broadcaster.broadcast({
+                type: 'update',
+                path: '/' + path.relative(appRoot, file).replace(/\\/g, '/'),
+            });
+        }));
+        // start server
+        server.listen(port, () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const url = `http://localhost:${port}`;
+            console.log(chalk.cyan.bold('\n🚀 React Client Dev Server'));
+            console.log(chalk.green(`⚡ Running at: ${url}`));
+            if (((_a = userConfig.server) === null || _a === void 0 ? void 0 : _a.open) !== false) {
                 try {
-                    // allow plugin to broadcast via a simple function
-                    // plugin gets { broadcast }
-                    // plugin signature: onHotUpdate(file, { broadcast })
-                    // eslint-disable-next-line no-await-in-loop
-                    await p.onHotUpdate(file, {
-                        broadcast: (msg) => {
-                            broadcaster.broadcast(msg);
-                        },
-                    });
+                    yield open(url);
                 }
-                catch (err) {
-                    // plugin errors shouldn't crash server
-                    // eslint-disable-next-line no-console
-                    console.warn('plugin onHotUpdate error:', err.message);
+                catch (_b) {
+                    // ignore open errors
                 }
             }
-        }
-        // default: broadcast update for changed file
-        broadcaster.broadcast({
-            type: 'update',
-            path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
-        });
-    });
-    // start server
-    server.listen(port, async () => {
-        const url = `http://localhost:${port}`;
-        console.log(chalk_1.default.cyan.bold('\n🚀 React Client Dev Server'));
-        console.log(chalk_1.default.green(`⚡ Running at: ${url}`));
-        if (userConfig.server?.open !== false) {
-            // open default browser
-            try {
-                await (0, open_1.default)(url);
-            }
-            catch {
-                // ignore open errors
-            }
-        }
-    });
-    // graceful shutdown
-    process.on('SIGINT', async () => {
-        console.log(chalk_1.default.red('\n🛑 Shutting down...'));
-        watcher.close();
-        broadcaster.close();
-        server.close();
-        process.exit(0);
+        }));
+        // graceful shutdown
+        process.on('SIGINT', () => __awaiter(this, void 0, void 0, function* () {
+            console.log(chalk.red('\n🛑 Shutting down...'));
+            yield watcher.close();
+            broadcaster.close();
+            server.close();
+            process.exit(0);
+        }));
     });
 }