react-client 1.0.23 → 1.0.24

package/dist/cli/commands/dev.js

@@ -1,4 +1,16 @@
 "use strict";
+/**
+ * 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 };
 };
@@ -13,54 +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 child_process_1 = require("child_process");
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
+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');
     await fs_extra_1.default.ensureDir(cacheDir);
-    // ✅ Detect entry (main.tsx or main.jsx)
-    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);
     }
     const indexHtml = path_1.default.join(appRoot, 'index.html');
-    // ✅ Detect open port
+    // Select port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
-        const res = await (0, prompts_1.default)({
+        const response = await (0, prompts_1.default)({
             type: 'confirm',
             name: 'useNewPort',
             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 installed
+    // 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...'));
+        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: root,
+            cwd: appRoot,
             stdio: 'inherit',
         });
-        console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
     }
-    // ✅ Core + User Plugins
+    // Plugin system (core + user)
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -69,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;
@@ -81,203 +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 transformCache = new Map();
-    // ✅ Analyze dependency graph recursively
+    // 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);
-        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 {
-                seen.add(dep);
+        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;
     }
-    // ✅ Smart prebundling cache
+    // Prebundle dependencies into cache dir (parallel)
     async function prebundleDeps(deps) {
         if (!deps.size)
             return;
-        const cached = (await fs_extra_1.default.readdir(cacheDir)).map((f) => f.replace('.js', ''));
-        const missing = [...deps].filter((d) => !cached.includes(d));
-        if (!missing.length) {
-            console.log(chalk_1.default.green('✅ All dependencies already prebundled.'));
+        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) => {
             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',
                     outfile: outFile,
                     write: true,
-                    target: 'es2020',
+                    target: ['es2020'],
                 });
                 console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
             catch (err) {
-                const e = err;
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
+                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
             }
         }));
     }
-    // ✅ Initial dependency prebundle
-    const deps = await analyzeGraph(entry);
-    await prebundleDeps(deps);
-    // ✅ Auto re-prebundle when package.json changes
-    chokidar_1.default.watch(pkgFile).on('change', async () => {
-        console.log(chalk_1.default.yellow('📦 package.json changed — rebuilding prebundle cache...'));
-        const newDeps = await analyzeGraph(entry);
-        await prebundleDeps(newDeps);
-    });
-    // ✅ 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 (err) {
-            const e = err;
-            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${e.message}`));
             res.writeHead(500);
-            res.end(`// Failed to resolve module ${id}: ${e.message}`);
+            res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
-    });
-    // ✅ Serve /src 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 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();
-        const rawPath = decodeURIComponent(req.url.split('?')[0]);
-        let filePath = path_1.default.join(appRoot, rawPath);
-        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
-        for (const ext of possibleExts) {
+        // 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 }));
+        }
+        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)) {
-                filePath += ext;
+                found = filePath + ext;
                 break;
             }
         }
-        if (!(await fs_extra_1.default.pathExists(filePath)))
+        if (!found)
             return next();
         try {
-            let code = await fs_extra_1.default.readFile(filePath, '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, filePath);
-            const ext = path_1.default.extname(filePath);
-            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(filePath, result.code);
+            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 index.html + overlay + runtime
-    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 (!fs_extra_1.default.existsSync(indexHtml)) {
+        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="/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);
-    });
-    // ✅ WebSocket + HMR
+        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);
-    chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', async (file) => {
-        console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
+    // 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);
-        for (const p of plugins)
-            await p.onHotUpdate?.(file, { broadcast: (msg) => broadcaster.broadcast(msg) });
+        // 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, '/'),
         });
     });
+    // 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.23",
+  "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",