react-client 1.0.16 → 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);
-    // Detect entry dynamically (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');
-    // Detect open port
+    // Detect port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -47,23 +48,19 @@ async function dev() {
             process.exit(0);
         }
     }
-    // ⚡ 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 — 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.'));
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _reactRefreshRuntime = safeResolveReactRefresh();
-    // --- Plugins (core + user)
+    // Core plugin: CSS HMR
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -71,12 +68,12 @@ async function dev() {
                 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();
-        `;
+            const css = ${escaped};
+            const style = document.createElement('style');
+            style.textContent = css;
+            document.head.appendChild(style);
+            import.meta.hot && import.meta.hot.accept();
+          `;
                 }
                 return code;
             },
@@ -84,24 +81,32 @@ async function dev() {
     ];
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
-    // 🧱 Connect app
+    // 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');
@@ -117,15 +122,23 @@ async function dev() {
                 console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
             catch (err) {
-                const msg = err instanceof Error ? err.message : String(err);
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${msg}`));
+                const e = err;
+                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
             }
-        }
+        }));
     }
-    await prebundleDeps();
-    // --- Serve prebundled modules
+    // 🧩 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 {
@@ -134,7 +147,18 @@ async function dev() {
                 res.setHeader('Content-Type', 'application/javascript');
                 return res.end(await fs_extra_1.default.readFile(cacheFile));
             }
-            const entryPath = require.resolve(id, { paths: [appRoot] });
+            let entryPath = null;
+            try {
+                entryPath = require.resolve(id, { paths: [path_1.default.join(appRoot, 'node_modules')] });
+            }
+            catch {
+                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(`Module ${id} not found.`);
             const result = await esbuild_1.default.build({
                 entryPoints: [entryPath],
                 bundle: true,
@@ -144,6 +168,7 @@ async function dev() {
                 write: false,
             });
             let code = result.outputFiles[0].text;
+            // Fix for react-dom/client exports
             if (id === 'react-dom/client') {
                 code += `
           import * as ReactDOMClient from '/@modules/react-dom';
@@ -156,33 +181,35 @@ async function dev() {
             res.end(code);
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
+            const e = err;
+            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${e.message}`));
             res.writeHead(500);
-            res.end(`// Failed to resolve module ${id}: ${msg}`);
+            res.end(`// Failed to resolve module ${id}: ${e.message}`);
         }
     });
-    // --- Serve /src files dynamically
+    // --- Serve src files + HMR
     app.use(async (req, res, next) => {
         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]));
+        const rawPath = decodeURIComponent(req.url.split('?')[0]);
+        let filePath = path_1.default.join(appRoot, rawPath);
+        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
+        for (const ext of possibleExts) {
+            if (await fs_extra_1.default.pathExists(filePath + ext)) {
+                filePath += ext;
+                break;
+            }
+        }
         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 (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) {
+            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')
@@ -201,12 +228,13 @@ async function dev() {
             res.end(result.code);
         }
         catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
+            const e = err;
+            console.error(chalk_1.default.red(`⚠️ Transform failed: ${e.message}`));
             res.writeHead(500);
-            res.end(`// Error: ${msg}`);
+            res.end(`// Error: ${e.message}`);
         }
     });
-    // --- Serve index.html with overlay + HMR client
+    // --- index.html + overlay
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
@@ -254,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) {
-            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, '/'),
         });
     });
-    // 🚀 Launch
     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.16",
+  "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",