react-client 1.0.12 → 1.0.14

package/README.md

@@ -35,7 +35,7 @@ npm install
 npm run dev
 ```
 
-This launches the **custom dev server** — not Vite — built on **Connect + WebSocket + esbuild**, featuring:
+This launches the **custom dev server** — built on **Connect + WebSocket + esbuild**, featuring:
 - Instant rebuilds  
 - React Fast Refresh (HMR)  
 - Auto port detection & confirmation prompt  
@@ -85,9 +85,9 @@ Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
 
 ## 💎 Core Features
 
-- ⚡ **Custom Dev Server (no Vite)** — Connect + WebSocket + esbuild  
+- ⚡ **Custom Dev Server** — Connect + WebSocket + esbuild  
 - 🔁 **React Fast Refresh (HMR)** — State-preserving reloads  
-- 💥 **Vite-style Overlay** — Syntax-highlighted stack frames, clickable file links (`vscode://file`)  
+- 💥 **Overlay** — Syntax-highlighted stack frames, clickable file links (`vscode://file`)  
 - 🔍 **Source Map Stack Mapping** — Maps runtime errors to original TS/JS source lines  
 - 💬 **Auto Port Detection** — Prompts when default port 5173 is occupied  
 - 🧠 **Smart Config Loader** — Detects project root, compiles `.ts` configs dynamically  

package/dist/cli/commands/dev.js

@@ -19,12 +19,12 @@ const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
 async function dev() {
     const root = process.cwd();
-    // 🧩 Load user config
+    // 🧩 Load 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)
+    // 🧠 Detect entry (main.tsx / 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) {
@@ -33,7 +33,7 @@ async function dev() {
     }
     const indexHtml = path_1.default.join(appRoot, 'index.html');
     await fs_extra_1.default.ensureDir(outDir);
-    // ⚙️ Detect open port
+    // 🧠 Detect available port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -73,22 +73,21 @@ async function dev() {
         }
     }
     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
+    // 🧠 Dependency Graph + Transform Cache
+    const deps = new Map(); // dependency → importers
+    const transformCache = new Map();
+    async function resolveFile(basePath) {
+        if (await fs_extra_1.default.pathExists(basePath))
+            return basePath;
+        const exts = ['.tsx', '.ts', '.jsx', '.js'];
+        for (const ext of exts) {
+            const candidate = basePath + ext;
+            if (await fs_extra_1.default.pathExists(candidate))
+                return candidate;
+        }
+        return null;
+    }
+    // 🌐 connect server
     const app = (0, connect_1.default)();
     // 🛡 Security headers
     app.use((_req, res, next) => {
@@ -96,9 +95,7 @@ async function dev() {
         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
+    // 1️⃣ Serve react-refresh runtime with browser shim
     app.use('/@react-refresh', async (_req, res) => {
         const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
         const shim = `
@@ -110,50 +107,63 @@ async function dev() {
         res.setHeader('Content-Type', 'application/javascript');
         res.end(shim + '\n' + runtime);
     });
-    // 2️⃣ Bare module resolver with memory cache
+    // 2️⃣ Serve bare modules dynamically (/@modules/)
     app.use('/@modules/', async (req, res, next) => {
-        const id = req.url?.replace(/^\/@modules\//, '');
+        let id = req.url?.replace(/^\/@modules\//, '');
         if (!id)
             return next();
-        if (moduleCache.has(id)) {
-            res.setHeader('Content-Type', 'application/javascript');
-            res.end(moduleCache.get(id));
-            return;
-        }
+        id = id.replace(/^\/+/, ''); // normalize
         try {
-            const entryPath = require.resolve(id, { paths: [appRoot] });
+            const entry = require.resolve(id, { paths: [appRoot] });
             const out = await esbuild_1.default.build({
-                entryPoints: [entryPath],
+                entryPoints: [entry],
                 bundle: true,
                 write: false,
                 platform: 'browser',
                 format: 'esm',
                 target: 'es2020',
             });
-            const code = out.outputFiles[0].text;
-            moduleCache.set(id, code); // ✅ cache module
             res.setHeader('Content-Type', 'application/javascript');
-            res.end(code);
+            res.end(out.outputFiles[0].text);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
-            console.error(chalk_1.default.red(`Failed to resolve module ${id}: ${msg}`));
+            console.error(`Failed to resolve module ${id}:`, msg);
             res.writeHead(500);
             res.end(`// Could not resolve module ${id}`);
         }
     });
-    // 3️⃣ Serve /src/* files — on-the-fly transform + bare import rewrite
+    // 3️⃣ Serve /src/* files — with caching, deps tracking, and HMR
     app.use(async (req, res, next) => {
         if (!req.url || !req.url.startsWith('/src/'))
             return next();
         try {
-            const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
-            if (!(await fs_extra_1.default.pathExists(filePath)))
+            const requestPath = decodeURIComponent(req.url.split('?')[0]);
+            const filePath = path_1.default.join(appRoot, requestPath);
+            const resolvedFile = await resolveFile(filePath);
+            if (!resolvedFile)
                 return next();
-            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
-            const ext = path_1.default.extname(filePath).toLowerCase();
+            if (transformCache.has(resolvedFile)) {
+                res.setHeader('Content-Type', 'application/javascript');
+                res.end(transformCache.get(resolvedFile));
+                return;
+            }
+            let code = await fs_extra_1.default.readFile(resolvedFile, 'utf8');
+            const ext = path_1.default.extname(resolvedFile).toLowerCase();
             // 🪄 Rewrite bare imports → /@modules/
-            code = code.replace(/from\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`);
+            code = code.replace(/from\s+['"]((?![\.\/])[a-zA-Z0-9@/_-]+)['"]/g, (_m, dep) => `from "/@modules/${dep}"`);
+            // 🧩 Track dependencies (relative imports)
+            const importRegex = /from\s+['"](\.\/[^'"]+|\.{2}\/[^'"]+)['"]/g;
+            let match;
+            while ((match = importRegex.exec(code)) !== null) {
+                const rel = match[1];
+                const importer = path_1.default.relative(appRoot, resolvedFile);
+                const importedFile = path_1.default.resolve(path_1.default.dirname(resolvedFile), rel);
+                const depFile = (await resolveFile(importedFile)) ?? importedFile;
+                if (!deps.has(depFile))
+                    deps.set(depFile, new Set());
+                deps.get(depFile).add(importer);
+            }
             let loader = 'js';
             if (ext === '.ts')
                 loader = 'ts';
@@ -169,6 +179,7 @@ async function dev() {
                 jsxFactory: 'React.createElement',
                 jsxFragment: 'React.Fragment',
             });
+            transformCache.set(resolvedFile, transformed.code);
             res.setHeader('Content-Type', 'application/javascript');
             res.end(transformed.code);
         }
@@ -179,7 +190,7 @@ async function dev() {
             res.end(`// Error: ${msg}`);
         }
     });
-    // 4️⃣ Serve index.html with injected refresh + HMR
+    // 4️⃣ Serve index.html (inject React Refresh + HMR client + overlay)
     app.use(async (req, res, next) => {
         if (req.url === '/' || req.url === '/index.html') {
             if (!fs_extra_1.default.existsSync(indexHtml)) {
@@ -189,6 +200,49 @@ async function dev() {
             }
             let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
             html = html.replace('</body>', `
+        <script>
+          // 🧩 Lightweight Error Overlay
+          (() => {
+            const style = document.createElement('style');
+            style.textContent = \`
+              .rc-overlay {
+                position: fixed;
+                top: 0; left: 0;
+                width: 100vw; height: 100vh;
+                background: rgba(0, 0, 0, 0.92);
+                color: #ff5555;
+                font-family: monospace;
+                padding: 2rem;
+                overflow: auto;
+                z-index: 999999;
+                white-space: pre-wrap;
+              }
+              .rc-overlay h2 {
+                color: #ff7575;
+                font-size: 1.2rem;
+                margin-bottom: 1rem;
+              }
+            \`;
+            document.head.appendChild(style);
+
+            window.showErrorOverlay = (err) => {
+              window.clearErrorOverlay?.();
+              const overlay = document.createElement('div');
+              overlay.className = 'rc-overlay';
+              overlay.innerHTML = '<h2>🚨 React Client Error</h2>' + 
+                (err.message || err.error || err) + '\\n\\n' + (err.stack || '');
+              document.body.appendChild(overlay);
+              window.__reactClientOverlay = overlay;
+            };
+
+            window.clearErrorOverlay = () => {
+              const overlay = window.__reactClientOverlay;
+              if (overlay) overlay.remove();
+              window.__reactClientOverlay = null;
+            };
+          })();
+        </script>
+
         <script type="module">
           import "/@react-refresh";
           const ws = new WebSocket("ws://" + location.host);
@@ -214,18 +268,10 @@ async function dev() {
             res.setHeader('Content-Type', 'text/html');
             res.end(html);
         }
-        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);
-            }
-            else
-                next();
-        }
+        else
+            next();
     });
-    // 🔁 HMR WebSocket server
+    // 🔁 HMR with dependency graph
     const server = http_1.default.createServer(app);
     const wss = new ws_1.WebSocketServer({ server });
     const broadcast = (data) => {
@@ -233,31 +279,37 @@ async function dev() {
         wss.clients.forEach((c) => c.readyState === 1 && c.send(json));
     };
     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(`🔄 File changed: ${file}`);
+        transformCache.delete(file);
+        broadcast({ type: 'update', path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/') });
+        // Propagate updates to dependents
+        const visited = new Set();
+        const queue = [file];
+        while (queue.length > 0) {
+            const dep = queue.pop();
+            const importers = deps.get(dep);
+            if (!importers)
+                continue;
+            for (const importer of importers) {
+                if (visited.has(importer))
+                    continue;
+                visited.add(importer);
+                console.log(chalk_1.default.yellow(`↪️  Updating importer: ${importer}`));
+                transformCache.delete(path_1.default.join(appRoot, importer));
+                broadcast({ type: 'update', path: '/' + importer.replace(/\\/g, '/') });
+                queue.push(path_1.default.join(appRoot, importer));
             }
         }
     });
-    // 🟢 Start server
     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.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 () => {
         console.log(chalk_1.default.red('\n🛑 Shutting down...'));
-        await ctx.dispose();
         server.close();
         process.exit(0);
     });

package/package.json

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