react-client 1.0.17 → 1.0.18

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
     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 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');
     }
-    void safeResolveReactRefresh();
-    // 🧩 Core + user plugins
+    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.'));
+    }
+    // Core plugin: CSS HMR
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -83,24 +81,32 @@ async function dev() {
     ];
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
-    // 🌐 Connect app + caches
+    // 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 || {});
+    // 🧠 Prewarm: analyze imports before first run
+    async function analyzeImports(entryFile) {
+        const entryCode = await fs_extra_1.default.readFile(entryFile, 'utf8');
+        const importMatches = [
+            ...entryCode.matchAll(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g),
+            ...entryCode.matchAll(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g),
+        ];
+        const deps = [...new Set(importMatches.map((m) => m[1]))];
+        console.log(chalk_1.default.gray(`🧩 Found ${deps.length} direct imports:`), deps.join(', '));
+        return deps;
+    }
+    // 📦 Smart prebundle cache
+    async function prebundleDeps(deps) {
         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)
+        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 +125,20 @@ async function dev() {
                 const e = err;
                 console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
             }
-        }
+        }));
     }
-    await prebundleDeps();
-    // --- Serve prebundled modules (fixed resolver)
+    // 🧩 Smart rebuild trigger when package.json changes
+    chokidar_1.default.watch(pkgFile).on('change', async () => {
+        console.log(chalk_1.default.yellow('📦 Detected package.json change — rebuilding prebundles...'));
+        const deps = await analyzeImports(entry);
+        await prebundleDeps(deps);
+    });
+    // Initial prewarm
+    const initialDeps = await analyzeImports(entry);
+    await prebundleDeps(initialDeps);
+    // --- Serve prebundled / node_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 {
@@ -138,18 +152,13 @@ async function dev() {
                 entryPath = require.resolve(id, { paths: [path_1.default.join(appRoot, 'node_modules')] });
             }
             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,7 +168,7 @@ async function dev() {
                 write: false,
             });
             let code = result.outputFiles[0].text;
-            // ✅ Fix for react-dom/client exports
+            // Fix for react-dom/client exports
             if (id === 'react-dom/client') {
                 code += `
           import * as ReactDOMClient from '/@modules/react-dom';
@@ -178,7 +187,7 @@ async function dev() {
             res.end(`// Failed to resolve module ${id}: ${e.message}`);
         }
     });
-    // --- Serve /src files dynamically (auto extension fallback)
+    // --- Serve src files + HMR
     app.use(async (req, res, next) => {
         if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
             return next();
@@ -194,12 +203,7 @@ 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
                 .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`)
                 .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_match, dep) => `import("/@modules/${dep}")`);
@@ -230,7 +234,7 @@ async function dev() {
             res.end(`// Error: ${e.message}`);
         }
     });
-    // --- Serve index.html + overlay + HMR client
+    // --- index.html + overlay
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
@@ -278,23 +282,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/package.json

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