react-client 1.0.11 → 1.0.13

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,7 +19,7 @@ const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
 async function dev() {
     const root = process.cwd();
-    // 🧩 Load config
+    // 🧩 Load user config
     const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
     const appRoot = path_1.default.resolve(root, userConfig.root || '.');
     const defaultPort = userConfig.server?.port || 5173;
@@ -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 open port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -73,7 +73,7 @@ async function dev() {
         }
     }
     const reactRefreshRuntime = safeResolveReactRefresh();
-    // 🏗️ esbuild context
+    // 🏗️ Create esbuild context
     const ctx = await esbuild_1.default.context({
         entryPoints: [entry],
         bundle: true,
@@ -88,7 +88,7 @@ async function dev() {
     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
+    // 🌐 Connect server setup
     const app = (0, connect_1.default)();
     // 🛡 Security headers
     app.use((_req, res, next) => {
@@ -96,11 +96,12 @@ 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
     app.use('/@react-refresh', async (_req, res) => {
         const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
         const shim = `
-      // React Refresh browser shims
       window.process = window.process || { env: { NODE_ENV: 'development' } };
       window.module = { exports: {} };
       window.global = window;
@@ -109,31 +110,43 @@ async function dev() {
         res.setHeader('Content-Type', 'application/javascript');
         res.end(shim + '\n' + runtime);
     });
-    // 2️⃣ Minimal bare import resolver (/@modules/)
+    // 2️⃣ Bare module resolver with memory cache
     app.use('/@modules/', async (req, res, next) => {
-        const id = req.url?.replace(/^\/@modules\//, '');
+        let id = req.url?.replace(/^\/@modules\//, '');
         if (!id)
             return next();
+        // 🧩 Normalize: remove leading slashes that may appear (e.g. "/react")
+        id = id.replace(/^\/+/, '');
+        if (!id)
+            return next();
+        if (moduleCache.has(id)) {
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(moduleCache.get(id));
+            return;
+        }
         try {
-            const entry = require.resolve(id, { paths: [appRoot] });
+            const entryPath = require.resolve(id, { paths: [appRoot] });
             const out = await esbuild_1.default.build({
-                entryPoints: [entry],
+                entryPoints: [entryPath],
                 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(out.outputFiles[0].text);
+            res.end(code);
         }
         catch (err) {
-            console.error('Failed to resolve module', id, err);
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error(chalk_1.default.red(`Failed to resolve module ${id}: ${msg}`));
             res.writeHead(500);
             res.end(`// Could not resolve module ${id}`);
         }
     });
-    // 3️⃣ Serve /src/* files (on-the-fly transform)
+    // 3️⃣ Serve /src/* files — on-the-fly transform + bare import rewrite
     app.use(async (req, res, next) => {
         if (!req.url || !req.url.startsWith('/src/'))
             return next();
@@ -141,8 +154,11 @@ async function dev() {
             const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
             if (!(await fs_extra_1.default.pathExists(filePath)))
                 return next();
-            const code = await fs_extra_1.default.readFile(filePath, 'utf8');
+            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
             const ext = path_1.default.extname(filePath).toLowerCase();
+            // 🪄 Rewrite bare imports → /@modules/
+            // 🧩 Rewrite *only bare imports* like "react", not "./" or "/" or "../"
+            code = code.replace(/from\s+['"]((?![\.\/])[a-zA-Z0-9@/_-]+)['"]/g, (_match, dep) => `from "/@modules/${dep}"`);
             let loader = 'js';
             if (ext === '.ts')
                 loader = 'ts';
@@ -163,7 +179,7 @@ async function dev() {
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
-            console.error('Error serving src file:', msg);
+            console.error('Error serving /src file:', msg);
             res.writeHead(500);
             res.end(`// Error: ${msg}`);
         }
@@ -214,7 +230,7 @@ async function dev() {
                 next();
         }
     });
-    // 🔁 HMR via WebSocket
+    // 🔁 HMR WebSocket server
     const server = http_1.default.createServer(app);
     const wss = new ws_1.WebSocketServer({ server });
     const broadcast = (data) => {
@@ -236,6 +252,7 @@ async function dev() {
             }
         }
     });
+    // 🟢 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.11",
+  "version": "1.0.13",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",