react-client 1.0.22 → 1.0.23

package/dist/cli/commands/dev.js

@@ -1,14 +1,4 @@
 "use strict";
-/**
- * 🚀 React Client Dev Server — Final Version
- * ------------------------------------------
- * ✅ Local overlay-runtime.js (Prism + stack mapping)
- * ✅ Dynamic /@runtime/overlay-runtime.js alias
- * ✅ Automatic HTML injection for overlay + HMR
- * ✅ Prebundle cache (.react-client/deps)
- * ✅ CSS HMR, relative & bare import handling
- * ✅ Favicon & public assets serving
- */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -25,30 +15,8 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const open_1 = __importDefault(require("open"));
 const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
-const zlib_1 = __importDefault(require("zlib"));
-const crypto_1 = __importDefault(require("crypto"));
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
-const computeHash = (content) => crypto_1.default.createHash('sha1').update(content).digest('hex');
-const getMimeType = (file) => {
-    const ext = path_1.default.extname(file).toLowerCase();
-    const mime = {
-        '.ico': 'image/x-icon',
-        '.png': 'image/png',
-        '.jpg': 'image/jpeg',
-        '.jpeg': 'image/jpeg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.webp': 'image/webp',
-        '.json': 'application/json',
-        '.txt': 'text/plain',
-        '.js': 'application/javascript',
-        '.mjs': 'application/javascript',
-        '.css': 'text/css',
-        '.html': 'text/html',
-    };
-    return mime[ext] || 'application/octet-stream';
-};
 async function dev() {
     const root = process.cwd();
     const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
@@ -56,36 +24,43 @@ async function dev() {
     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');
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
     await fs_extra_1.default.ensureDir(cacheDir);
-    // ✅ Detect entry
+    // ✅ Detect entry (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) {
         console.error(chalk_1.default.red('❌ No entry found: src/main.tsx or src/main.jsx'));
         process.exit(1);
     }
-    // ✅ Detect free port
-    const port = await (0, detect_port_1.default)(defaultPort);
-    if (port !== defaultPort) {
+    const indexHtml = path_1.default.join(appRoot, 'index.html');
+    // ✅ Detect open port
+    const availablePort = await (0, detect_port_1.default)(defaultPort);
+    const port = availablePort;
+    if (availablePort !== defaultPort) {
         const res = await (0, prompts_1.default)({
             type: 'confirm',
             name: 'useNewPort',
-            message: `Port ${defaultPort} is occupied. Use ${port} instead?`,
+            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
             initial: true,
         });
-        if (!res.useNewPort)
+        if (!res.useNewPort) {
+            console.log('🛑 Dev server cancelled.');
             process.exit(0);
+        }
     }
-    // ✅ Ensure react-refresh
+    // ✅ Ensure react-refresh installed
     try {
         require.resolve('react-refresh/runtime');
     }
     catch {
-        console.log(chalk_1.default.yellow('Installing react-refresh...'));
-        (0, child_process_1.execSync)('npm i react-refresh --silent', { cwd: root, stdio: 'inherit' });
+        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 + user plugins
+    // ✅ Core + User Plugins
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -107,26 +82,43 @@ async function dev() {
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
     const app = (0, connect_1.default)();
-    const server = http_1.default.createServer(app);
-    const broadcaster = new broadcastManager_1.BroadcastManager(server);
     const transformCache = new Map();
-    // 🧱 Persistent prebundle cache
-    async function prebundleDeps() {
-        if (!(await fs_extra_1.default.pathExists(pkgFile)))
-            return;
-        const pkg = JSON.parse(await fs_extra_1.default.readFile(pkgFile, 'utf8'));
-        const deps = Object.keys(pkg.dependencies || {});
-        if (!deps.length)
+    // ✅ Analyze dependency graph recursively
+    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);
+            }
+        }
+        return seen;
+    }
+    // ✅ Smart prebundling cache
+    async function prebundleDeps(deps) {
+        if (!deps.size)
             return;
-        const hash = computeHash(JSON.stringify(deps));
-        const metaFile = path_1.default.join(cacheDir, '_meta.json');
-        let prevHash = null;
-        if (await fs_extra_1.default.pathExists(metaFile))
-            prevHash = (await fs_extra_1.default.readJSON(metaFile)).hash;
-        if (prevHash === hash)
+        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('📦 Rebuilding prebundle cache...'));
-        await Promise.all(deps.map(async (dep) => {
+        }
+        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
+        await Promise.all(missing.map(async (dep) => {
             try {
                 const entryPath = require.resolve(dep, { paths: [appRoot] });
                 const outFile = path_1.default.join(cacheDir, dep + '.js');
@@ -135,53 +127,28 @@ async function dev() {
                     bundle: true,
                     platform: 'browser',
                     format: 'esm',
-                    target: 'es2020',
                     outfile: outFile,
                     write: true,
+                    target: 'es2020',
                 });
-                const content = await fs_extra_1.default.readFile(outFile);
-                await fs_extra_1.default.writeFile(outFile + '.gz', zlib_1.default.gzipSync(content));
-                await fs_extra_1.default.writeFile(outFile + '.br', zlib_1.default.brotliCompressSync(content));
                 console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
-            catch (e) {
-                const err = e;
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
+            catch (err) {
+                const e = err;
+                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
             }
         }));
-        await fs_extra_1.default.writeJSON(metaFile, { hash });
     }
-    await prebundleDeps();
-    chokidar_1.default.watch(pkgFile).on('change', prebundleDeps);
-    // 🧩 Serve local overlay runtime
-    app.use('/@runtime/overlay-runtime.js', async (req, res) => {
-        const overlayPath = path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js');
-        try {
-            if (!(await fs_extra_1.default.pathExists(overlayPath))) {
-                res.writeHead(404);
-                return res.end(`// Overlay runtime not found: ${overlayPath}`);
-            }
-            let code = await fs_extra_1.default.readFile(overlayPath, 'utf8');
-            // Transform bare imports → /@modules/*
-            code = code
-                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
-                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
-            const result = await esbuild_1.default.transform(code, {
-                loader: 'js',
-                sourcemap: 'inline',
-                target: 'es2020',
-            });
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(result.code);
-        }
-        catch (err) {
-            const e = err;
-            console.error(chalk_1.default.red(`❌ Failed to load overlay runtime: ${e.message}`));
-            res.writeHead(500);
-            res.end(`// Failed to load overlay runtime: ${e.message}`);
-        }
+    // ✅ Initial dependency prebundle
+    const deps = await analyzeGraph(entry);
+    await prebundleDeps(deps);
+    // ✅ Auto re-prebundle when package.json changes
+    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/
+    // ✅ Serve /@modules/
     app.use('/@modules/', async (req, res, next) => {
         const id = req.url?.replace(/^\/(@modules\/)?/, '');
         if (!id)
@@ -206,42 +173,38 @@ async function dev() {
             res.setHeader('Content-Type', 'application/javascript');
             res.end(code);
         }
-        catch (e) {
-            const err = e;
-            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${err.message}`));
+        catch (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}: ${err.message}`);
+            res.end(`// Failed to resolve module ${id}: ${e.message}`);
         }
     });
-    // 🧩 Serve /src/ and .css files dynamically
+    // ✅ Serve /src files dynamically
     app.use(async (req, res, next) => {
         if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
             return next();
         const rawPath = decodeURIComponent(req.url.split('?')[0]);
-        const filePath = path_1.default.join(appRoot, rawPath);
+        let filePath = path_1.default.join(appRoot, rawPath);
         const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
-        let resolvedPath = null;
         for (const ext of possibleExts) {
-            const candidate = filePath + ext;
-            if (await fs_extra_1.default.pathExists(candidate)) {
-                resolvedPath = candidate;
+            if (await fs_extra_1.default.pathExists(filePath + ext)) {
+                filePath += ext;
                 break;
             }
         }
-        if (!resolvedPath) {
-            res.writeHead(404);
-            return res.end(`// File not found: ${filePath}`);
-        }
+        if (!(await fs_extra_1.default.pathExists(filePath)))
+            return next();
         try {
-            let code = await fs_extra_1.default.readFile(resolvedPath, 'utf8');
+            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
             // Rewrite bare imports → /@modules/*
             code = code
                 .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
                 .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
             for (const p of plugins)
                 if (p.onTransform)
-                    code = await p.onTransform(code, resolvedPath);
-            const ext = path_1.default.extname(resolvedPath);
+                    code = await p.onTransform(code, filePath);
+            const ext = path_1.default.extname(filePath);
             let loader = 'js';
             if (ext === '.ts')
                 loader = 'ts';
@@ -254,6 +217,7 @@ async function dev() {
                 sourcemap: 'inline',
                 target: 'es2020',
             });
+            transformCache.set(filePath, result.code);
             res.setHeader('Content-Type', 'application/javascript');
             res.end(result.code);
         }
@@ -264,31 +228,17 @@ async function dev() {
             res.end(`// Error: ${e.message}`);
         }
     });
-    // 🖼️ Serve static assets (favicon + public)
-    app.use(async (req, res, next) => {
-        if (!req.url)
-            return next();
-        const publicDir = path_1.default.join(appRoot, 'public');
-        const targetFile = path_1.default.join(publicDir, decodeURIComponent(req.url.split('?')[0]));
-        if (!(await fs_extra_1.default.pathExists(targetFile)))
-            return next();
-        const stat = await fs_extra_1.default.stat(targetFile);
-        if (!stat.isFile())
-            return next();
-        res.setHeader('Content-Type', getMimeType(targetFile));
-        fs_extra_1.default.createReadStream(targetFile).pipe(res);
-    });
-    // 🧩 Serve index.html + overlay + HMR
+    // ✅ Serve index.html + overlay + runtime
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
-        if (!(await fs_extra_1.default.pathExists(indexHtml))) {
+        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 type="module" src="/@runtime/overlay-runtime.js"></script>
+      <script type="module" src="/src/runtime/overlay-runtime.js"></script>
       <script type="module">
         const ws = new WebSocket("ws://" + location.host);
         ws.onmessage = (e) => {
@@ -305,21 +255,19 @@ async function dev() {
         res.setHeader('Content-Type', 'text/html');
         res.end(html);
     });
-    // ♻️ Watchers
-    chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', (file) => {
+    // ✅ 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) });
         broadcaster.broadcast({
             type: 'update',
             path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
         });
     });
-    chokidar_1.default
-        .watch(path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js'), { ignoreInitial: true })
-        .on('change', () => {
-        console.log(chalk_1.default.magenta('♻️ Overlay runtime updated — reloading browser...'));
-        broadcaster.broadcast({ type: 'reload' });
-    });
     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.22",
+  "version": "1.0.23",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",