react-client 1.0.17 → 1.0.19

package/dist/cli/commands/dev.js

@@ -23,8 +23,9 @@ async function dev() {
     const appRoot = path_1.default.resolve(root, userConfig.root || '.');
     const defaultPort = userConfig.server?.port || 5173;
     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);
-    // 🔍 Dynamically detect entry (main.tsx or main.jsx)
+    // Detect entry file
     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,7 +33,7 @@ async function dev() {
         process.exit(1);
     }
     const indexHtml = path_1.default.join(appRoot, 'index.html');
-    // 🧭 Port selection
+    // Detect open port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -47,22 +48,19 @@ async function dev() {
             process.exit(0);
         }
     }
-    // ⚡ Ensure react-refresh runtime installed
-    function safeResolveReactRefresh() {
-        try {
-            return require.resolve('react-refresh/runtime');
-        }
-        catch {
-            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');
-        }
+    // Ensure react-refresh installed
+    try {
+        require.resolve('react-refresh/runtime');
+    }
+    catch {
+        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',
+        });
+        console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
     }
-    void safeResolveReactRefresh();
-    // 🧩 Core + user plugins
+    // --- Plugins
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -83,24 +81,44 @@ async function dev() {
     ];
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
-    // 🌐 Connect app + caches
     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)
+    // 🧠 Deep dependency graph analyzer
+    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); // bare dependency
+            }
+        }
+        return seen;
+    }
+    // 📦 Smart prebundle cache (parallelized)
+    async function prebundleDeps(deps) {
+        if (!deps.size)
             return;
-        const cached = await fs_extra_1.default.readdir(cacheDir);
-        const missing = deps.filter((d) => !cached.includes(d + '.js'));
-        if (!missing.length)
+        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.'));
             return;
+        }
         console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
-        for (const dep of missing) {
+        await Promise.all(missing.map(async (dep) => {
             try {
                 const entryPath = require.resolve(dep, { paths: [appRoot] });
                 const outFile = path_1.default.join(cacheDir, dep + '.js');
@@ -119,12 +137,20 @@ async function dev() {
                 const e = err;
                 console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
             }
-        }
+        }));
     }
-    await prebundleDeps();
-    // --- Serve prebundled modules (fixed resolver)
+    // 🧩 Prewarm Graph
+    const deps = await analyzeGraph(entry);
+    await prebundleDeps(deps);
+    // Auto rebuild on package.json change
+    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\//, '');
+        const id = req.url?.replace(/^\/(@modules\/)?/, '');
         if (!id)
             return next();
         try {
@@ -135,21 +161,16 @@ async function dev() {
             }
             let entryPath = null;
             try {
-                entryPath = require.resolve(id, { paths: [path_1.default.join(appRoot, 'node_modules')] });
+                entryPath = require.resolve(id, { paths: [appRoot] });
             }
             catch {
-                try {
-                    entryPath = require.resolve(id, { paths: [root] });
-                }
-                catch {
-                    if (id === 'react')
-                        entryPath = require.resolve('react');
-                    else if (id === 'react-dom' || id === 'react-dom/client')
-                        entryPath = require.resolve('react-dom');
-                }
+                if (id === 'react')
+                    entryPath = require.resolve('react');
+                else if (id === 'react-dom' || id === 'react-dom/client')
+                    entryPath = require.resolve('react-dom');
             }
             if (!entryPath)
-                throw new Error(`Could not resolve ${id}`);
+                throw new Error(`Module ${id} not found.`);
             const result = await esbuild_1.default.build({
                 entryPoints: [entryPath],
                 bundle: true,
@@ -159,12 +180,19 @@ async function dev() {
                 write: false,
             });
             let code = result.outputFiles[0].text;
-            // ✅ Fix for react-dom/client exports
+            // 🩹 Fixed react-dom/client shim (no duplicate export)
             if (id === 'react-dom/client') {
                 code += `
+          // React Client auto-shim for React 18+
           import * as ReactDOMClient from '/@modules/react-dom';
-          export const createRoot = ReactDOMClient.createRoot || ReactDOMClient.default?.createRoot;
-          export default ReactDOMClient.default || ReactDOMClient;
+          if (!('createRoot' in ReactDOMClient) && ReactDOMClient.default) {
+            Object.assign(ReactDOMClient, ReactDOMClient.default);
+          }
+          export const createRoot =
+            ReactDOMClient.createRoot ||
+            ReactDOMClient.default?.createRoot ||
+            (() => { throw new Error('ReactDOM.createRoot not found'); });
+          export default ReactDOMClient;
         `;
             }
             await fs_extra_1.default.writeFile(cacheFile, code, 'utf8');
@@ -178,7 +206,7 @@ async function dev() {
             res.end(`// Failed to resolve module ${id}: ${e.message}`);
         }
     });
-    // --- Serve /src files dynamically (auto extension fallback)
+    // --- Serve /src files dynamically
     app.use(async (req, res, next) => {
         if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
             return next();
@@ -194,10 +222,6 @@ async function dev() {
         if (!(await fs_extra_1.default.pathExists(filePath)))
             return next();
         try {
-            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');
             // Rewrite bare imports → /@modules/*
             code = code
@@ -230,7 +254,7 @@ async function dev() {
             res.end(`// Error: ${e.message}`);
         }
     });
-    // --- Serve index.html + overlay + HMR client
+    // --- Serve index.html + overlay + HMR
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
@@ -278,23 +302,20 @@ async function dev() {
         res.setHeader('Content-Type', 'text/html');
         res.end(html);
     });
-    // --- WebSocket + HMR via BroadcastManager
+    // --- WebSocket + HMR
     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}`));
         transformCache.delete(file);
         for (const p of plugins) {
-            await p.onHotUpdate?.(file, {
-                broadcast: (msg) => broadcaster.broadcast(msg),
-            });
+            await p.onHotUpdate?.(file, { broadcast: (msg) => broadcaster.broadcast(msg) });
         }
         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'));

package/dist/server/broadcastManager.js

@@ -16,10 +16,8 @@ class BroadcastManager {
         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);

package/package.json

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