react-client 1.0.31 → 1.0.33

package/dist/cli/commands/dev.js

@@ -1,13 +1,14 @@
+// src/cli/commands/dev.ts
 /**
- * dev.ts — dev server for react-client
+ * 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
- * - /@source-map returns a snippet for overlay mapping
- * - HMR broadcast via BroadcastManager (ws)
- *
- * Keep this file linted & typed. Avoids manual react-dom/client hacks.
+ * Features:
+ *  - prebundles deps into .react-client/deps (persistent)
+ *  - serves /@modules/<dep> (prebundled or on-demand esbuild bundle)
+ *  - serves /src/* with esbuild transform + inline sourcemap
+ *  - /@source-map returns a snippet for overlay mapping
+ *  - HMR broadcast via BroadcastManager (ws)
+ *  - plugin system: onTransform, onHotUpdate, onServe, onServerStart
  */
 import esbuild from 'esbuild';
 import connect from 'connect';
@@ -22,8 +23,6 @@ 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';
@@ -174,33 +173,32 @@ export default async function dev() {
     const userConfig = (await loadReactClientConfig(root));
     const appRoot = path.resolve(root, userConfig.root || '.');
     const defaultPort = userConfig.server?.port ?? 2202;
-    // cache dir for prebundled deps
     const cacheDir = path.join(appRoot, '.react-client', 'deps');
     await 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));
+    const possibleEntries = ['src/main.tsx', 'src/main.jsx'].map((p) => path.join(appRoot, p));
+    const entry = possibleEntries.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
+    // Port
     const availablePort = await detectPort(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
-        const response = await prompts({
+        const res = await prompts({
             type: 'confirm',
             name: 'useNewPort',
             message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
             initial: true,
         });
-        if (!response.useNewPort) {
+        if (!res.useNewPort) {
             console.log('🛑 Dev server cancelled.');
             process.exit(0);
         }
     }
-    // Ensure react-refresh runtime available (used by many templates)
+    // ensure react-refresh runtime exists (templates often import it)
     try {
         require.resolve('react-refresh/runtime');
     }
@@ -213,10 +211,10 @@ export default async function dev() {
             });
         }
         catch {
-            console.warn(chalk.yellow('⚠️ automatic install of react-refresh failed; continuing without it.'));
+            console.warn(chalk.yellow('⚠️ auto-install failed — please install react-refresh manually.'));
         }
     }
-    // Plugin system (core + user)
+    // Core plugins
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -225,10 +223,10 @@ export default 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?.accept();
+            if (import.meta.hot) import.meta.hot.accept();
           `;
                 }
                 return code;
@@ -260,30 +258,31 @@ export default async function dev() {
                     await analyzeGraph(resolved, seen);
                 }
                 catch {
-                    // bare dependency (node_modules) - track name
+                    // bare dependency
                     seen.add(dep);
                 }
             }
         }
         catch {
-            // ignore unreadable files
+            // ignore unreadable
         }
         return seen;
     }
-    // Prebundle dependencies into cache dir (parallel)
+    // --- Prebundle missing deps (parallel)
     async function prebundleDeps(deps) {
         if (!deps.size)
             return;
-        const existingFiles = await fs.readdir(cacheDir);
-        const existing = new Set(existingFiles.map((f) => f.replace(/\.js$/, '')));
-        const missing = [...deps].filter((d) => !existing.has(d));
-        if (!missing.length)
+        const cached = new Set((await fs.readdir(cacheDir)).map((f) => f.replace(/\.js$/, '')));
+        const missing = [...deps].filter((d) => !cached.has(d.replace(/\//g, '_')));
+        if (!missing.length) {
+            console.log(chalk.green('✅ All dependencies prebundled.'));
             return;
+        }
         console.log(chalk.cyan('📦 Prebundling:'), missing.join(', '));
         await Promise.all(missing.map(async (dep) => {
             try {
                 const entryPoint = require.resolve(dep, { paths: [appRoot] });
-                const outFile = path.join(cacheDir, normalizeCacheKey(dep) + '.js');
+                const outFile = path.join(cacheDir, dep.replace(/\//g, '_') + '.js');
                 await esbuild.build({
                     entryPoints: [entryPoint],
                     bundle: true,
@@ -300,10 +299,10 @@ export default async function dev() {
             }
         }));
     }
-    // Build initial prebundle graph from entry
+    // initial prebundle
     const depsSet = await analyzeGraph(entry);
     await prebundleDeps(depsSet);
-    // Watch package.json for changes to re-prebundle
+    // re-prebundle on package.json changes
     const pkgPath = path.join(appRoot, 'package.json');
     if (await fs.pathExists(pkgPath)) {
         chokidar.watch(pkgPath).on('change', async () => {
@@ -430,10 +429,10 @@ const overlayId = "__rc_error_overlay__";
         if (!url.startsWith('/@source-map'))
             return next();
         try {
-            const parsed = new URL(req.url ?? '', `http://localhost:${port}`);
+            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;
+            const lineNum = Number(parsed.searchParams.get('line') ?? '0') || 0;
             if (!file) {
                 res.writeHead(400);
                 return res.end('{}');
@@ -464,39 +463,45 @@ const overlayId = "__rc_error_overlay__";
             res.end(JSON.stringify({ error: err.message }));
         }
     }));
-    // --- Serve /src/* files (on-the-fly transform + bare import rewrite)
+    // Serve /src/* files (transform on the fly)
     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.join(appRoot, raw.replace(/^\//, ''));
-        // Try file extensions if not exact file
+        const filePathBase = path.join(appRoot, raw.replace(/^\//, ''));
         const exts = ['', '.tsx', '.ts', '.jsx', '.js', '.css'];
         let found = '';
         for (const ext of exts) {
-            if (await fs.pathExists(filePath + ext)) {
-                found = filePath + ext;
+            if (await fs.pathExists(filePathBase + ext)) {
+                found = filePathBase + ext;
                 break;
             }
         }
         if (!found)
             return next();
         try {
+            // serve cached transform if present
+            if (transformCache.has(found)) {
+                res.setHeader('Content-Type', 'application/javascript');
+                res.end(transformCache.get(found));
+                return;
+            }
             let code = await fs.readFile(found, 'utf8');
-            // rewrite bare imports -> /@modules/<dep>
+            // rewrite bare imports to /@modules/*
             code = code
                 .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
                 .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
-            // run plugin transforms
+            // plugin transforms
             for (const p of plugins) {
                 if (p.onTransform) {
+                    // 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
+            // choose loader by ext
             const ext = path.extname(found).toLowerCase();
             const loader = ext === '.ts' ? 'ts' : ext === '.tsx' ? 'tsx' : ext === '.jsx' ? 'jsx' : 'js';
             const result = await esbuild.transform(code, {
@@ -514,7 +519,7 @@ const overlayId = "__rc_error_overlay__";
             res.end(`// transform error: ${e.message}`);
         }
     }));
-    // --- Serve index.html with overlay + HMR client injection
+    // Serve index.html with HMR + overlay injection
     app.use((async (req, res, next) => {
         const url = req.url ?? '';
         if (url !== '/' && url !== '/index.html')
@@ -525,7 +530,7 @@ const overlayId = "__rc_error_overlay__";
         }
         try {
             let html = await fs.readFile(indexHtml, 'utf8');
-            // inject overlay runtime and HMR client if not already present
+            // inject runtime overlay and HMR client if not 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);
@@ -548,30 +553,29 @@ const overlayId = "__rc_error_overlay__";
             res.end(`// html read error: ${err.message}`);
         }
     }));
-    // --- HMR WebSocket server
+    // HMR WebSocket
     const server = http.createServer(app);
     const broadcaster = new BroadcastManager(server);
-    // Watch files and trigger plugin onHotUpdate + broadcast HMR message
+    // Watcher: src
     const watcher = chokidar.watch(path.join(appRoot, 'src'), { ignoreInitial: true });
     watcher.on('change', async (file) => {
         transformCache.delete(file);
-        // plugin hook onHotUpdate optionally
+        // plugin hook onHotUpdate
         for (const p of plugins) {
             if (p.onHotUpdate) {
                 try {
+                    // eslint-disable-next-line no-await-in-loop
                     await p.onHotUpdate(file, {
-                        // plugin only needs broadcast in most cases
-                        broadcast: (msg) => {
-                            broadcaster.broadcast(msg);
-                        },
+                        broadcast: (m) => broadcaster.broadcast(m),
                     });
                 }
                 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.relative(appRoot, file).replace(/\\/g, '/'),
@@ -581,20 +585,39 @@ const overlayId = "__rc_error_overlay__";
     server.listen(port, async () => {
         const url = `http://localhost:${port}`;
         console.log(chalk.cyan.bold('\n🚀 React Client Dev Server'));
+        console.log(chalk.gray('──────────────────────────────'));
         console.log(chalk.green(`⚡ Running at: ${url}`));
+        // open if not explicitly disabled
         if (userConfig.server?.open !== false) {
             try {
                 await open(url);
             }
             catch {
-                // ignore open errors
+                /* ignore */
+            }
+        }
+        const ctx = {
+            root: appRoot,
+            outDir: cacheDir,
+            app,
+            wss: broadcaster.wss,
+            httpServer: server,
+            broadcast: (m) => broadcaster.broadcast(m),
+        };
+        // plugin onServe / onServerStart hooks
+        for (const p of plugins) {
+            if (p.onServe) {
+                await p.onServe(ctx);
+            }
+            if (p.onServerStart) {
+                await p.onServerStart(ctx);
             }
         }
     });
     // graceful shutdown
     process.on('SIGINT', async () => {
         console.log(chalk.red('\n🛑 Shutting down...'));
-        await watcher.close();
+        watcher.close();
         broadcaster.close();
         server.close();
         process.exit(0);

package/dist/server/broadcastManager.js

@@ -1,8 +1,9 @@
-import { WebSocketServer, WebSocket as NodeWebSocket } from 'ws';
+// src/server/broadcastManager.ts
+import { WebSocketServer, WebSocket } from 'ws';
 import chalk from 'chalk';
 /**
- * BroadcastManager — Shared WebSocket utility for dev, preview, and SSR servers.
- * Generic over message type T which defaults to HMRMessage.
+ * BroadcastManager — shared WebSocket utility for dev/preview/ssr servers.
+ * Uses `ws` WebSocket instances (Node) — not DOM WebSocket.
  */
 export class BroadcastManager {
     constructor(server) {
@@ -10,39 +11,58 @@ export class BroadcastManager {
         this.wss = new WebSocketServer({ server });
         this.wss.on('connection', (ws) => {
             this.clients.add(ws);
+            console.log(chalk.gray('🔌 HMR client connected'));
             ws.on('close', () => {
                 this.clients.delete(ws);
+                console.log(chalk.gray('❎ HMR client disconnected'));
             });
             ws.on('error', (err) => {
-                console.error(chalk.red('⚠️ WebSocket error:'), err.message);
+                console.error(chalk.red('⚠️ WebSocket error:'), err?.message ?? err);
             });
         });
     }
+    /**
+     * Broadcast a message to all connected clients.
+     */
     broadcast(msg) {
         const data = JSON.stringify(msg);
         for (const client of this.clients) {
-            if (client.readyState === NodeWebSocket.OPEN) {
-                client.send(data);
+            // ws.OPEN === 1
+            if (client.readyState === WebSocket.OPEN) {
+                try {
+                    client.send(data);
+                }
+                catch {
+                    // ignore send errors per-client
+                }
             }
         }
     }
+    /**
+     * Send a message to a single client (ws instance from 'ws').
+     */
     send(ws, msg) {
-        if (ws.readyState === NodeWebSocket.OPEN) {
+        if (ws.readyState === WebSocket.OPEN) {
             ws.send(JSON.stringify(msg));
         }
     }
-    getClientCount() {
-        return this.clients.size;
-    }
+    /**
+     * Close all WebSocket connections and server.
+     */
     close() {
-        console.log(chalk.red('🛑 Closing WebSocket connections...'));
-        this.wss.close();
+        try {
+            console.log(chalk.red('🛑 Closing WebSocket connections...'));
+            this.wss.close();
+        }
+        catch {
+            /* ignore */
+        }
         for (const ws of this.clients) {
             try {
                 ws.close();
             }
             catch {
-                // ignore
+                // ignore per-client close errors
             }
         }
         this.clients.clear();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-client",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "files": [
-    "dist",
+    "dist/**/*",
     "templates"
   ],
   "workspaces": [