react-client 1.0.22 → 1.0.24

package/dist/cli/commands/dev.js

@@ -1,13 +1,15 @@
 "use strict";
 /**
- * 🚀 React Client Dev Server — Final Version
- * ------------------------------------------
- * ✅ Local overlay-runtime.js (Prism + stack mapping)
- * ✅ Dynamic /@runtime/overlay-runtime.js alias
- * ✅ Automatic HTML injection for overlay + HMR
- * ✅ Prebundle cache (.react-client/deps)
- * ✅ CSS HMR, relative & bare import handling
- * ✅ Favicon & public assets serving
+ * dev.ts — Vite-like dev server for react-client
+ *
+ * - prebundles deps into .react-client/deps
+ * - serves /@modules/<dep>
+ * - serves /src/* with esbuild transform & inline sourcemap
+ * - serves /@runtime/overlay -> src/runtime/overlay-runtime.js
+ * - /@source-map returns a snippet for overlay mapping
+ * - HMR broadcast via BroadcastManager (ws)
+ *
+ * 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 };
@@ -23,69 +25,54 @@ 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 child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
-const zlib_1 = __importDefault(require("zlib"));
-const crypto_1 = __importDefault(require("crypto"));
+const child_process_1 = require("child_process");
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
-const computeHash = (content) => crypto_1.default.createHash('sha1').update(content).digest('hex');
-const getMimeType = (file) => {
-    const ext = path_1.default.extname(file).toLowerCase();
-    const mime = {
-        '.ico': 'image/x-icon',
-        '.png': 'image/png',
-        '.jpg': 'image/jpeg',
-        '.jpeg': 'image/jpeg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.webp': 'image/webp',
-        '.json': 'application/json',
-        '.txt': 'text/plain',
-        '.js': 'application/javascript',
-        '.mjs': 'application/javascript',
-        '.css': 'text/css',
-        '.html': 'text/html',
-    };
-    return mime[ext] || 'application/octet-stream';
-};
+const RUNTIME_OVERLAY = '/src/runtime/overlay-runtime.js';
 async function dev() {
     const root = process.cwd();
-    const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
+    const userConfig = (await (0, loadConfig_1.loadReactClientConfig)(root));
     const appRoot = path_1.default.resolve(root, userConfig.root || '.');
-    const defaultPort = userConfig.server?.port || 5173;
+    const defaultPort = userConfig.server?.port ?? 2202;
+    // cache dir for prebundled deps
     const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
-    const pkgFile = path_1.default.join(appRoot, 'package.json');
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
     await fs_extra_1.default.ensureDir(cacheDir);
-    // ✅ Detect entry
-    const possibleEntries = ['src/main.tsx', 'src/main.jsx'];
-    const entry = possibleEntries.map((p) => path_1.default.join(appRoot, p)).find((p) => fs_extra_1.default.existsSync(p));
+    // 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('❌ No entry found: src/main.tsx or src/main.jsx'));
+        console.error(chalk_1.default.red('❌ Entry not found: src/main.tsx or src/main.jsx'));
         process.exit(1);
     }
-    // ✅ Detect free port
-    const port = await (0, detect_port_1.default)(defaultPort);
-    if (port !== defaultPort) {
-        const res = await (0, prompts_1.default)({
+    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 ${port} instead?`,
+            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
             initial: true,
         });
-        if (!res.useNewPort)
+        if (!response.useNewPort) {
+            console.log('🛑 Dev server cancelled.');
             process.exit(0);
+        }
     }
-    // ✅ Ensure react-refresh
+    // Ensure react-refresh runtime available (used by many templates)
     try {
         require.resolve('react-refresh/runtime');
     }
     catch {
-        console.log(chalk_1.default.yellow('Installing react-refresh...'));
-        (0, child_process_1.execSync)('npm i react-refresh --silent', { cwd: root, stdio: 'inherit' });
+        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',
+        });
     }
-    // ✅ Core + user plugins
+    // Plugin system (core + user)
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -94,10 +81,10 @@ async function dev() {
                     const escaped = JSON.stringify(code);
                     return `
             const css = ${escaped};
-            const style = document.createElement('style');
+            const style = document.createElement("style");
             style.textContent = css;
             document.head.appendChild(style);
-            import.meta.hot && import.meta.hot.accept();
+            import.meta.hot?.accept();
           `;
                 }
                 return code;
@@ -106,230 +93,316 @@ async function dev() {
     ];
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
+    // App + caches
     const app = (0, connect_1.default)();
-    const server = http_1.default.createServer(app);
-    const broadcaster = new broadcastManager_1.BroadcastManager(server);
     const transformCache = new Map();
-    // 🧱 Persistent prebundle cache
-    async function prebundleDeps() {
-        if (!(await fs_extra_1.default.pathExists(pkgFile)))
-            return;
-        const pkg = JSON.parse(await fs_extra_1.default.readFile(pkgFile, 'utf8'));
-        const deps = Object.keys(pkg.dependencies || {});
-        if (!deps.length)
+    // 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;
+                try {
+                    const resolved = require.resolve(dep, { paths: [appRoot] });
+                    await analyzeGraph(resolved, seen);
+                }
+                catch {
+                    // bare dependency (node_modules) - track name
+                    seen.add(dep);
+                }
+            }
+        }
+        catch {
+            // ignore unreadable files
+        }
+        return seen;
+    }
+    // Prebundle dependencies into cache dir (parallel)
+    async function prebundleDeps(deps) {
+        if (!deps.size)
             return;
-        const hash = computeHash(JSON.stringify(deps));
-        const metaFile = path_1.default.join(cacheDir, '_meta.json');
-        let prevHash = null;
-        if (await fs_extra_1.default.pathExists(metaFile))
-            prevHash = (await fs_extra_1.default.readJSON(metaFile)).hash;
-        if (prevHash === hash)
+        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('📦 Rebuilding prebundle cache...'));
-        await Promise.all(deps.map(async (dep) => {
+        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
+        await Promise.all(missing.map(async (dep) => {
             try {
-                const entryPath = require.resolve(dep, { paths: [appRoot] });
-                const outFile = path_1.default.join(cacheDir, dep + '.js');
+                const entryPoint = require.resolve(dep, { paths: [appRoot] });
+                const outFile = path_1.default.join(cacheDir, dep.replace(/\//g, '_') + '.js');
                 await esbuild_1.default.build({
-                    entryPoints: [entryPath],
+                    entryPoints: [entryPoint],
                     bundle: true,
                     platform: 'browser',
                     format: 'esm',
-                    target: 'es2020',
                     outfile: outFile,
                     write: true,
+                    target: ['es2020'],
                 });
-                const content = await fs_extra_1.default.readFile(outFile);
-                await fs_extra_1.default.writeFile(outFile + '.gz', zlib_1.default.gzipSync(content));
-                await fs_extra_1.default.writeFile(outFile + '.br', zlib_1.default.brotliCompressSync(content));
                 console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
-            catch (e) {
-                const err = e;
+            catch (err) {
                 console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
             }
         }));
-        await fs_extra_1.default.writeJSON(metaFile, { hash });
     }
-    await prebundleDeps();
-    chokidar_1.default.watch(pkgFile).on('change', prebundleDeps);
-    // 🧩 Serve local overlay runtime
-    app.use('/@runtime/overlay-runtime.js', async (req, res) => {
-        const overlayPath = path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js');
-        try {
-            if (!(await fs_extra_1.default.pathExists(overlayPath))) {
-                res.writeHead(404);
-                return res.end(`// Overlay runtime not found: ${overlayPath}`);
-            }
-            let code = await fs_extra_1.default.readFile(overlayPath, 'utf8');
-            // Transform bare imports → /@modules/*
-            code = code
-                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
-                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
-            const result = await esbuild_1.default.transform(code, {
-                loader: 'js',
-                sourcemap: 'inline',
-                target: 'es2020',
-            });
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(result.code);
-        }
-        catch (err) {
-            const e = err;
-            console.error(chalk_1.default.red(`❌ Failed to load overlay runtime: ${e.message}`));
-            res.writeHead(500);
-            res.end(`// Failed to load overlay runtime: ${e.message}`);
-        }
-    });
-    // 🧠 Serve /@modules/
-    app.use('/@modules/', async (req, res, next) => {
-        const id = req.url?.replace(/^\/(@modules\/)?/, '');
-        if (!id)
+    // 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');
+            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));
+                res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
+                return;
             }
-            const entryPath = require.resolve(id, { paths: [appRoot] });
+            // Resolve and bundle on-demand
+            const entryResolved = require.resolve(id, { paths: [appRoot] });
             const result = await esbuild_1.default.build({
-                entryPoints: [entryPath],
+                entryPoints: [entryResolved],
                 bundle: true,
+                write: false,
                 platform: 'browser',
                 format: 'esm',
-                target: 'es2020',
-                write: false,
+                target: ['es2020'],
             });
-            const code = result.outputFiles[0].text;
-            await fs_extra_1.default.writeFile(cacheFile, code, 'utf8');
+            const output = result.outputFiles?.[0]?.text ?? '';
+            // Persist to cache so next request is faster
+            await fs_extra_1.default.writeFile(cacheFile, output, 'utf8');
             res.setHeader('Content-Type', 'application/javascript');
-            res.end(code);
+            res.end(output);
         }
-        catch (e) {
-            const err = e;
-            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${err.message}`));
+        catch (err) {
             res.writeHead(500);
             res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
-    });
-    // 🧩 Serve /src/ and .css files dynamically
-    app.use(async (req, res, next) => {
-        if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
+    }));
+    // --- Serve runtime overlay (local file) so overlay-runtime.js is loaded automatically
+    app.use((async (req, res, next) => {
+        const url = req.url ?? '';
+        if (url !== '/@runtime/overlay')
             return next();
-        const rawPath = decodeURIComponent(req.url.split('?')[0]);
-        const filePath = path_1.default.join(appRoot, rawPath);
-        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
-        let resolvedPath = null;
-        for (const ext of possibleExts) {
-            const candidate = filePath + ext;
-            if (await fs_extra_1.default.pathExists(candidate)) {
-                resolvedPath = candidate;
-                break;
+        const overlayPath = path_1.default.join(appRoot, RUNTIME_OVERLAY);
+        if (!(await fs_extra_1.default.pathExists(overlayPath))) {
+            res.writeHead(404);
+            return res.end('// overlay-runtime not found');
+        }
+        res.setHeader('Content-Type', 'application/javascript');
+        res.end(await fs_extra_1.default.readFile(overlayPath, 'utf8'));
+    }));
+    // --- 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('{}');
             }
+            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('{}');
+            }
+            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 }));
         }
-        if (!resolvedPath) {
-            res.writeHead(404);
-            return res.end(`// File not found: ${filePath}`);
+        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;
+            }
+        }
+        if (!found)
+            return next();
         try {
-            let code = await fs_extra_1.default.readFile(resolvedPath, 'utf8');
-            // Rewrite bare imports → /@modules/*
+            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}")`);
-            for (const p of plugins)
-                if (p.onTransform)
-                    code = await p.onTransform(code, resolvedPath);
-            const ext = path_1.default.extname(resolvedPath);
-            let loader = 'js';
-            if (ext === '.ts')
-                loader = 'ts';
-            else if (ext === '.tsx')
-                loader = 'tsx';
-            else if (ext === '.jsx')
-                loader = 'jsx';
+            // 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;
+                }
+            }
+            // 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',
+                target: ['es2020'],
             });
+            transformCache.set(found, result.code);
             res.setHeader('Content-Type', 'application/javascript');
             res.end(result.code);
         }
         catch (err) {
             const e = err;
-            console.error(chalk_1.default.red(`⚠️ Transform failed: ${e.message}`));
             res.writeHead(500);
-            res.end(`// Error: ${e.message}`);
+            res.end(`// transform error: ${e.message}`);
         }
-    });
-    // 🖼️ Serve static assets (favicon + public)
-    app.use(async (req, res, next) => {
-        if (!req.url)
-            return next();
-        const publicDir = path_1.default.join(appRoot, 'public');
-        const targetFile = path_1.default.join(publicDir, decodeURIComponent(req.url.split('?')[0]));
-        if (!(await fs_extra_1.default.pathExists(targetFile)))
-            return next();
-        const stat = await fs_extra_1.default.stat(targetFile);
-        if (!stat.isFile())
-            return next();
-        res.setHeader('Content-Type', getMimeType(targetFile));
-        fs_extra_1.default.createReadStream(targetFile).pipe(res);
-    });
-    // 🧩 Serve index.html + overlay + HMR
-    app.use(async (req, res, next) => {
-        if (req.url !== '/' && req.url !== '/index.html')
+    }));
+    // --- 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');
         }
-        let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
-        html = html.replace('</body>', `
-      <script type="module" src="/@runtime/overlay-runtime.js"></script>
-      <script type="module">
-        const ws = new WebSocket("ws://" + location.host);
-        ws.onmessage = (e) => {
-          const msg = JSON.parse(e.data);
-          if (msg.type === "reload") location.reload();
-          if (msg.type === "error") return window.showErrorOverlay?.(msg);
-          if (msg.type === "update") {
-            window.clearErrorOverlay?.();
-            import(msg.path + "?t=" + Date.now());
-          }
-        };
-      </script>
-      </body>`);
-        res.setHeader('Content-Type', 'text/html');
-        res.end(html);
-    });
-    // ♻️ Watchers
-    chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', (file) => {
-        console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
+        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">
+  const ws = new WebSocket("ws://" + location.host);
+  ws.onmessage = (e) => {
+    const msg = JSON.parse(e.data);
+    if (msg.type === "reload") location.reload();
+    if (msg.type === "error") window.showErrorOverlay?.(msg);
+    if (msg.type === "update") {
+      window.clearErrorOverlay?.();
+      import(msg.path + "?t=" + Date.now());
+    }
+  };
+</script>\n</body>`);
+            }
+            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) {
+                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);
+                        },
+                    });
+                }
+                catch (err) {
+                    // plugin errors shouldn't crash server
+                    // eslint-disable-next-line no-console
+                    console.warn('plugin onHotUpdate error:', err.message);
+                }
+            }
+        }
+        // default: broadcast update for changed file
         broadcaster.broadcast({
             type: 'update',
             path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
         });
     });
-    chokidar_1.default
-        .watch(path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js'), { ignoreInitial: true })
-        .on('change', () => {
-        console.log(chalk_1.default.magenta('♻️ Overlay runtime updated — reloading browser...'));
-        broadcaster.broadcast({ type: 'reload' });
-    });
+    // 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.gray('──────────────────────────────'));
         console.log(chalk_1.default.green(`⚡ Running at: ${url}`));
-        await (0, open_1.default)(url, { newInstance: true });
+        if (userConfig.server?.open !== false) {
+            // open default browser
+            try {
+                await (0, open_1.default)(url);
+            }
+            catch {
+                // ignore open errors
+            }
+        }
     });
-    process.on('SIGINT', () => {
+    // graceful shutdown
+    process.on('SIGINT', async () => {
         console.log(chalk_1.default.red('\n🛑 Shutting down...'));
+        watcher.close();
         broadcaster.close();
+        server.close();
         process.exit(0);
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-client",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",