react-client 1.0.14 → 1.0.16

package/dist/cli/commands/dev.js

@@ -7,24 +7,24 @@ exports.default = dev;
 const esbuild_1 = __importDefault(require("esbuild"));
 const connect_1 = __importDefault(require("connect"));
 const http_1 = __importDefault(require("http"));
-const ws_1 = require("ws");
 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 loadConfig_1 = require("../../utils/loadConfig");
 const open_1 = __importDefault(require("open"));
 const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
+const loadConfig_1 = require("../../utils/loadConfig");
+const broadcastManager_1 = require("../../server/broadcastManager");
 async function dev() {
     const root = process.cwd();
-    // 🧩 Load config
     const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
     const appRoot = path_1.default.resolve(root, userConfig.root || '.');
     const defaultPort = userConfig.server?.port || 5173;
-    const outDir = path_1.default.join(appRoot, userConfig.build?.outDir || '.react-client/dev');
-    // 🧠 Detect entry (main.tsx / main.jsx)
+    const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
+    await fs_extra_1.default.ensureDir(cacheDir);
+    // Detect entry dynamically (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));
     if (!entry) {
@@ -32,8 +32,7 @@ async function dev() {
         process.exit(1);
     }
     const indexHtml = path_1.default.join(appRoot, 'index.html');
-    await fs_extra_1.default.ensureDir(outDir);
-    // 🧠 Detect available port
+    // Detect open port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -48,122 +47,143 @@ async function dev() {
             process.exit(0);
         }
     }
-    // ⚡ Auto-install + resolve react-refresh runtime
+    // ⚡ React-refresh runtime auto install
     function safeResolveReactRefresh() {
         try {
             return require.resolve('react-refresh/runtime');
         }
         catch {
-            console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — attempting to install...'));
+            console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — installing...'));
+            (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
+                cwd: root,
+                stdio: 'inherit',
+            });
+            return require.resolve('react-refresh/runtime');
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _reactRefreshRuntime = safeResolveReactRefresh();
+    // --- Plugins (core + user)
+    const corePlugins = [
+        {
+            name: 'css-hmr',
+            async onTransform(code, id) {
+                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 && import.meta.hot.accept();
+        `;
+                }
+                return code;
+            },
+        },
+    ];
+    const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
+    const plugins = [...corePlugins, ...userPlugins];
+    // 🧱 Connect app
+    const app = (0, connect_1.default)();
+    const transformCache = new Map();
+    // --- Prebundle persistent deps
+    async function prebundleDeps() {
+        const pkgFile = path_1.default.join(appRoot, 'package.json');
+        if (!fs_extra_1.default.existsSync(pkgFile))
+            return;
+        const pkg = JSON.parse(await fs_extra_1.default.readFile(pkgFile, 'utf8'));
+        const deps = Object.keys(pkg.dependencies || {});
+        if (!deps.length)
+            return;
+        const cached = await fs_extra_1.default.readdir(cacheDir);
+        const missing = deps.filter((d) => !cached.includes(d + '.js'));
+        if (!missing.length)
+            return;
+        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
+        for (const dep of missing) {
             try {
-                (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
-                    cwd: root,
-                    stdio: 'inherit',
+                const entryPath = require.resolve(dep, { paths: [appRoot] });
+                const outFile = path_1.default.join(cacheDir, dep + '.js');
+                await esbuild_1.default.build({
+                    entryPoints: [entryPath],
+                    bundle: true,
+                    platform: 'browser',
+                    format: 'esm',
+                    outfile: outFile,
+                    write: true,
+                    target: 'es2020',
                 });
-                console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
-                return require.resolve('react-refresh/runtime');
+                console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
             catch (err) {
                 const msg = err instanceof Error ? err.message : String(err);
-                console.error(msg);
-                console.error(chalk_1.default.red('❌ Failed to install react-refresh automatically.'));
-                console.error('Please run: npm install react-refresh');
-                process.exit(1);
+                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${msg}`));
             }
         }
     }
-    const reactRefreshRuntime = safeResolveReactRefresh();
-    // 🧠 Dependency Graph + Transform Cache
-    const deps = new Map(); // dependency → importers
-    const transformCache = new Map();
-    async function resolveFile(basePath) {
-        if (await fs_extra_1.default.pathExists(basePath))
-            return basePath;
-        const exts = ['.tsx', '.ts', '.jsx', '.js'];
-        for (const ext of exts) {
-            const candidate = basePath + ext;
-            if (await fs_extra_1.default.pathExists(candidate))
-                return candidate;
-        }
-        return null;
-    }
-    // 🌐 connect server
-    const app = (0, connect_1.default)();
-    // 🛡 Security headers
-    app.use((_req, res, next) => {
-        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
-        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
-        next();
-    });
-    // 1️⃣ Serve react-refresh runtime with browser shim
-    app.use('/@react-refresh', async (_req, res) => {
-        const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
-        const shim = `
-      window.process = window.process || { env: { NODE_ENV: 'development' } };
-      window.module = { exports: {} };
-      window.global = window;
-      window.require = () => window.module.exports;
-    `;
-        res.setHeader('Content-Type', 'application/javascript');
-        res.end(shim + '\n' + runtime);
-    });
-    // 2️⃣ Serve bare modules dynamically (/@modules/)
+    await prebundleDeps();
+    // --- Serve prebundled modules
     app.use('/@modules/', async (req, res, next) => {
-        let id = req.url?.replace(/^\/@modules\//, '');
+        const id = req.url?.replace(/^\/@modules\//, '');
         if (!id)
             return next();
-        id = id.replace(/^\/+/, ''); // normalize
         try {
-            const entry = require.resolve(id, { paths: [appRoot] });
-            const out = await esbuild_1.default.build({
-                entryPoints: [entry],
+            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));
+            }
+            const entryPath = require.resolve(id, { paths: [appRoot] });
+            const result = await esbuild_1.default.build({
+                entryPoints: [entryPath],
                 bundle: true,
-                write: false,
                 platform: 'browser',
                 format: 'esm',
                 target: 'es2020',
+                write: false,
             });
+            let code = result.outputFiles[0].text;
+            if (id === 'react-dom/client') {
+                code += `
+          import * as ReactDOMClient from '/@modules/react-dom';
+          export const createRoot = ReactDOMClient.createRoot || ReactDOMClient.default?.createRoot;
+          export default ReactDOMClient.default || ReactDOMClient;
+        `;
+            }
+            await fs_extra_1.default.writeFile(cacheFile, code, 'utf8');
             res.setHeader('Content-Type', 'application/javascript');
-            res.end(out.outputFiles[0].text);
+            res.end(code);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
-            console.error(`Failed to resolve module ${id}:`, msg);
             res.writeHead(500);
-            res.end(`// Could not resolve module ${id}`);
+            res.end(`// Failed to resolve module ${id}: ${msg}`);
         }
     });
-    // 3️⃣ Serve /src/* files — with caching, deps tracking, and HMR
+    // --- Serve /src files dynamically
     app.use(async (req, res, next) => {
-        if (!req.url || !req.url.startsWith('/src/'))
+        if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
+            return next();
+        const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
+        if (!(await fs_extra_1.default.pathExists(filePath)))
             return next();
         try {
-            const requestPath = decodeURIComponent(req.url.split('?')[0]);
-            const filePath = path_1.default.join(appRoot, requestPath);
-            const resolvedFile = await resolveFile(filePath);
-            if (!resolvedFile)
-                return next();
-            if (transformCache.has(resolvedFile)) {
+            if (transformCache.has(filePath)) {
                 res.setHeader('Content-Type', 'application/javascript');
-                res.end(transformCache.get(resolvedFile));
-                return;
+                return res.end(transformCache.get(filePath));
             }
-            let code = await fs_extra_1.default.readFile(resolvedFile, 'utf8');
-            const ext = path_1.default.extname(resolvedFile).toLowerCase();
-            // 🪄 Rewrite bare imports → /@modules/
-            code = code.replace(/from\s+['"]((?![\.\/])[a-zA-Z0-9@/_-]+)['"]/g, (_m, dep) => `from "/@modules/${dep}"`);
-            // 🧩 Track dependencies (relative imports)
-            const importRegex = /from\s+['"](\.\/[^'"]+|\.{2}\/[^'"]+)['"]/g;
-            let match;
-            while ((match = importRegex.exec(code)) !== null) {
-                const rel = match[1];
-                const importer = path_1.default.relative(appRoot, resolvedFile);
-                const importedFile = path_1.default.resolve(path_1.default.dirname(resolvedFile), rel);
-                const depFile = (await resolveFile(importedFile)) ?? importedFile;
-                if (!deps.has(depFile))
-                    deps.set(depFile, new Set());
-                deps.get(depFile).add(importer);
+            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
+            // 🧩 Rewrite bare imports (react, react-dom, etc.) to /@modules/*
+            code = code
+                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`)
+                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_match, dep) => `import("/@modules/${dep}")`);
+            // Run plugin transforms
+            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';
@@ -171,146 +191,96 @@ async function dev() {
                 loader = 'tsx';
             else if (ext === '.jsx')
                 loader = 'jsx';
-            const transformed = await esbuild_1.default.transform(code, {
+            const result = await esbuild_1.default.transform(code, {
                 loader,
                 sourcemap: 'inline',
-                sourcefile: req.url,
                 target: 'es2020',
-                jsxFactory: 'React.createElement',
-                jsxFragment: 'React.Fragment',
             });
-            transformCache.set(resolvedFile, transformed.code);
+            transformCache.set(filePath, result.code);
             res.setHeader('Content-Type', 'application/javascript');
-            res.end(transformed.code);
+            res.end(result.code);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
-            console.error('Error serving /src file:', msg);
             res.writeHead(500);
             res.end(`// Error: ${msg}`);
         }
     });
-    // 4️⃣ Serve index.html (inject React Refresh + HMR client + overlay)
+    // --- Serve index.html with overlay + HMR client
     app.use(async (req, res, next) => {
-        if (req.url === '/' || req.url === '/index.html') {
-            if (!fs_extra_1.default.existsSync(indexHtml)) {
-                res.writeHead(404);
-                res.end('index.html not found');
-                return;
-            }
-            let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
-            html = html.replace('</body>', `
-        <script>
-          // 🧩 Lightweight Error Overlay
-          (() => {
-            const style = document.createElement('style');
-            style.textContent = \`
-              .rc-overlay {
-                position: fixed;
-                top: 0; left: 0;
-                width: 100vw; height: 100vh;
-                background: rgba(0, 0, 0, 0.92);
-                color: #ff5555;
-                font-family: monospace;
-                padding: 2rem;
-                overflow: auto;
-                z-index: 999999;
-                white-space: pre-wrap;
-              }
-              .rc-overlay h2 {
-                color: #ff7575;
-                font-size: 1.2rem;
-                margin-bottom: 1rem;
-              }
-            \`;
-            document.head.appendChild(style);
-
-            window.showErrorOverlay = (err) => {
-              window.clearErrorOverlay?.();
-              const overlay = document.createElement('div');
-              overlay.className = 'rc-overlay';
-              overlay.innerHTML = '<h2>🚨 React Client Error</h2>' + 
-                (err.message || err.error || err) + '\\n\\n' + (err.stack || '');
-              document.body.appendChild(overlay);
-              window.__reactClientOverlay = overlay;
-            };
-
-            window.clearErrorOverlay = () => {
-              const overlay = window.__reactClientOverlay;
-              if (overlay) overlay.remove();
-              window.__reactClientOverlay = null;
-            };
-          })();
-        </script>
-
-        <script type="module">
-          import "/@react-refresh";
-          const ws = new WebSocket("ws://" + location.host);
-          ws.onmessage = async (e) => {
-            const msg = JSON.parse(e.data);
-            if (msg.type === "error") {
-              console.error(msg);
-              return window.showErrorOverlay?.(msg);
-            }
-            if (msg.type === "update") {
-              try {
-                await import(msg.path + "?t=" + Date.now());
-                window.clearErrorOverlay?.();
-                window.$RefreshRuntime?.performReactRefresh?.();
-              } catch (err) {
-                window.showErrorOverlay?.(err);
-              }
+        if (req.url !== '/' && req.url !== '/index.html')
+            return next();
+        if (!fs_extra_1.default.existsSync(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>
+        (() => {
+          const style = document.createElement('style');
+          style.textContent = \`
+            .rc-overlay {
+              position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+              background: rgba(0,0,0,0.9); color: #ff5555;
+              font-family: monospace; padding: 2rem; overflow:auto; z-index: 999999;
             }
-            if (msg.type === "reload") location.reload();
+          \`;
+          document.head.appendChild(style);
+          window.showErrorOverlay = (err) => {
+            window.clearErrorOverlay?.();
+            const el = document.createElement('div');
+            el.className = 'rc-overlay';
+            el.innerHTML = '<h2>🚨 Error</h2><pre>' + (err.message || err) + '</pre>';
+            document.body.appendChild(el);
+            window.__overlay = el;
           };
-        </script>
-        </body>`);
-            res.setHeader('Content-Type', 'text/html');
-            res.end(html);
-        }
-        else
-            next();
+          window.clearErrorOverlay = () => window.__overlay?.remove();
+        })();
+      </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);
     });
-    // 🔁 HMR with dependency graph
+    // --- WebSocket + HMR via BroadcastManager
     const server = http_1.default.createServer(app);
-    const wss = new ws_1.WebSocketServer({ server });
-    const broadcast = (data) => {
-        const json = JSON.stringify(data);
-        wss.clients.forEach((c) => c.readyState === 1 && c.send(json));
-    };
+    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(`🔄 File changed: ${file}`);
+        console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
         transformCache.delete(file);
-        broadcast({ type: 'update', path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/') });
-        // Propagate updates to dependents
-        const visited = new Set();
-        const queue = [file];
-        while (queue.length > 0) {
-            const dep = queue.pop();
-            const importers = deps.get(dep);
-            if (!importers)
-                continue;
-            for (const importer of importers) {
-                if (visited.has(importer))
-                    continue;
-                visited.add(importer);
-                console.log(chalk_1.default.yellow(`↪️  Updating importer: ${importer}`));
-                transformCache.delete(path_1.default.join(appRoot, importer));
-                broadcast({ type: 'update', path: '/' + importer.replace(/\\/g, '/') });
-                queue.push(path_1.default.join(appRoot, importer));
-            }
+        for (const p of plugins) {
+            p.onHotUpdate?.(file, {
+                broadcast: (msg) => broadcaster.broadcast(msg),
+            });
         }
+        broadcaster.broadcast({
+            type: 'update',
+            path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
+        });
     });
+    // 🚀 Launch
     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.gray('──────────────────────────────'));
         console.log(chalk_1.default.green(`⚡ Running at: ${url}`));
         await (0, open_1.default)(url, { newInstance: true });
     });
-    process.on('SIGINT', async () => {
+    process.on('SIGINT', () => {
         console.log(chalk_1.default.red('\n🛑 Shutting down...'));
-        server.close();
+        broadcaster.close();
         process.exit(0);
     });
 }

package/dist/server/broadcastManager.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BroadcastManager = void 0;
+const ws_1 = require("ws");
+const chalk_1 = __importDefault(require("chalk"));
+/**
+ * BroadcastManager — Shared WebSocket utility for dev, preview, and SSR servers.
+ * Generic over message type T which defaults to HMRMessage.
+ */
+class BroadcastManager {
+    constructor(server) {
+        this.clients = new Set();
+        this.wss = new ws_1.WebSocketServer({ server });
+        this.wss.on('connection', (ws) => {
+            this.clients.add(ws);
+            console.log(chalk_1.default.gray('🔌 Client connected'));
+            ws.on('close', () => {
+                this.clients.delete(ws);
+                console.log(chalk_1.default.gray('❎ Client disconnected'));
+            });
+            ws.on('error', (err) => {
+                console.error(chalk_1.default.red('⚠️ WebSocket error:'), err.message);
+            });
+        });
+    }
+    broadcast(msg) {
+        const data = JSON.stringify(msg);
+        for (const client of this.clients) {
+            if (client.readyState === ws_1.WebSocket.OPEN) {
+                client.send(data);
+            }
+        }
+    }
+    send(ws, msg) {
+        if (ws.readyState === ws_1.WebSocket.OPEN) {
+            ws.send(JSON.stringify(msg));
+        }
+    }
+    getClientCount() {
+        return this.clients.size;
+    }
+    close() {
+        console.log(chalk_1.default.red('🛑 Closing WebSocket connections...'));
+        this.wss.close();
+        for (const ws of this.clients) {
+            try {
+                ws.close();
+            }
+            catch {
+                // ignore
+            }
+        }
+        this.clients.clear();
+    }
+}
+exports.BroadcastManager = BroadcastManager;

package/package.json

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