react-client 1.0.13 → 1.0.15

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 user 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');
-    // ✅ Dynamically detect entry (main.tsx or 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 open port
+    // Detect open port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -48,117 +47,138 @@ 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();
-    // 🏗️ Create esbuild context
-    const ctx = await esbuild_1.default.context({
-        entryPoints: [entry],
-        bundle: true,
-        sourcemap: true,
-        outdir: outDir,
-        define: { 'process.env.NODE_ENV': '"development"' },
-        loader: { '.ts': 'ts', '.tsx': 'tsx', '.js': 'jsx', '.jsx': 'jsx' },
-        entryNames: '[name]',
-        assetNames: 'assets/[name]',
-    });
-    await ctx.watch();
-    console.log(chalk_1.default.gray('📦 Watching and building dev bundle...'));
-    console.log(chalk_1.default.gray('   Output dir:'), chalk_1.default.blue(outDir));
-    console.log(chalk_1.default.gray('   Entry file:'), chalk_1.default.yellow(entry));
-    // 🌐 Connect server setup
-    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();
-    });
-    // 🧠 In-memory cache for /@modules
-    const moduleCache = new Map();
-    // 1️⃣ Serve react-refresh runtime with safe 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️⃣ Bare module resolver with memory cache
+    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();
-        // 🧩 Normalize: remove leading slashes that may appear (e.g. "/react")
-        id = id.replace(/^\/+/, '');
-        if (!id)
-            return next();
-        if (moduleCache.has(id)) {
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(moduleCache.get(id));
-            return;
-        }
         try {
+            const cacheFile = path_1.default.join(cacheDir, id.replace(/\//g, '_') + '.js');
+            if (await fs_extra_1.default.pathExists(cacheFile)) {
+                res.setHeader('Content-Type', 'application/javascript');
+                return res.end(await fs_extra_1.default.readFile(cacheFile));
+            }
             const entryPath = require.resolve(id, { paths: [appRoot] });
-            const out = await esbuild_1.default.build({
+            const result = await esbuild_1.default.build({
                 entryPoints: [entryPath],
                 bundle: true,
-                write: false,
                 platform: 'browser',
                 format: 'esm',
                 target: 'es2020',
+                write: false,
             });
-            const code = out.outputFiles[0].text;
-            moduleCache.set(id, code); // ✅ cache module
+            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(code);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
-            console.error(chalk_1.default.red(`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 — on-the-fly transform + bare import rewrite
+    // --- 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 filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
-            if (!(await fs_extra_1.default.pathExists(filePath)))
-                return next();
+            if (transformCache.has(filePath)) {
+                res.setHeader('Content-Type', 'application/javascript');
+                return res.end(transformCache.get(filePath));
+            }
             let code = await fs_extra_1.default.readFile(filePath, 'utf8');
-            const ext = path_1.default.extname(filePath).toLowerCase();
-            // 🪄 Rewrite bare imports → /@modules/
-            // 🧩 Rewrite *only bare imports* like "react", not "./" or "/" or "../"
-            code = code.replace(/from\s+['"]((?![\.\/])[a-zA-Z0-9@/_-]+)['"]/g, (_match, dep) => `from "/@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';
@@ -166,104 +186,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(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 with injected refresh + HMR
+    // --- 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 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 (msg.type === "reload") location.reload();
-          };
-        </script>
-        </body>`);
-            res.setHeader('Content-Type', 'text/html');
-            res.end(html);
+        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');
         }
-        else {
-            const filePath = path_1.default.join(outDir, req.url || '');
-            if (await fs_extra_1.default.pathExists(filePath)) {
-                const content = await fs_extra_1.default.readFile(filePath);
-                res.setHeader('Content-Type', 'application/javascript');
-                res.end(content);
+        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;
             }
-            else
-                next();
-        }
+          \`;
+          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;
+          };
+          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 WebSocket server
+    // --- 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) => {
-        try {
-            console.log(`🔄 Rebuilding: ${file}`);
-            await ctx.rebuild();
-            broadcast({ type: 'update', path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/') });
-        }
-        catch (err) {
-            if (err instanceof Error) {
-                broadcast({ type: 'error', message: err.message, stack: err.stack });
-            }
-            else {
-                broadcast({ type: 'error', message: String(err) });
-            }
+        console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
+        transformCache.delete(file);
+        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, '/'),
+        });
     });
-    // 🟢 Start server
+    // 🚀 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.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 });
     });
-    process.on('SIGINT', async () => {
+    process.on('SIGINT', () => {
         console.log(chalk_1.default.red('\n🛑 Shutting down...'));
-        await ctx.dispose();
-        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.13",
+  "version": "1.0.15",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",