react-client 1.0.10 → 1.0.12

package/dist/cli/commands/dev.js

@@ -13,26 +13,27 @@ const detect_port_1 = __importDefault(require("detect-port"));
 const prompts_1 = __importDefault(require("prompts"));
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
-const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const loadConfig_1 = require("../../utils/loadConfig");
 const open_1 = __importDefault(require("open"));
 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;
     const outDir = path_1.default.join(appRoot, userConfig.build?.outDir || '.react-client/dev');
-    const entry = path_1.default.join(appRoot, 'src', 'main.tsx');
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
-    if (!fs_extra_1.default.existsSync(entry)) {
-        console.error(chalk_1.default.red('❌ Entry not found: src/main.tsx'));
+    // ✅ Dynamically 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);
     }
+    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) {
@@ -72,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,
@@ -80,14 +81,14 @@ async function dev() {
         outdir: outDir,
         define: { 'process.env.NODE_ENV': '"development"' },
         loader: { '.ts': 'ts', '.tsx': 'tsx', '.js': 'jsx', '.jsx': 'jsx' },
-        entryNames: '[name]', // ✅ output main.js (not src/main.js)
+        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
+    // 🌐 Connect server setup
     const app = (0, connect_1.default)();
     // 🛡 Security headers
     app.use((_req, res, next) => {
@@ -95,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;
@@ -108,67 +110,73 @@ async function dev() {
         res.setHeader('Content-Type', 'application/javascript');
         res.end(shim + '\n' + runtime);
     });
-    // 2️⃣ Serve PrismJS for code highlighting (overlay)
-    app.use('/@prismjs', async (_req, res) => {
-        const prismPath = require.resolve('prismjs/prism.js');
-        const css = await fs_extra_1.default.readFile(require.resolve('prismjs/themes/prism-tomorrow.css'), 'utf8');
-        const js = await fs_extra_1.default.readFile(prismPath, 'utf8');
-        res.setHeader('Content-Type', 'application/javascript');
-        res.end(`
-      (function(){
-        const style = document.createElement('style');
-        style.textContent = \`${css}\`;
-        document.head.appendChild(style);
-        ${js}
-      })();
-    `);
-    });
-    // 3️⃣ Source map resolver (for overlay stack trace)
-    app.use('/@source-map', async (req, res) => {
-        const url = new URL(req.url ?? '', `http://localhost:${port}`);
-        const file = url.searchParams.get('file');
-        const line = Number(url.searchParams.get('line'));
-        const column = Number(url.searchParams.get('column'));
-        if (!file) {
-            res.writeHead(400);
-            res.end('Missing ?file parameter');
+    // 2️⃣ Bare module resolver with memory cache
+    app.use('/@modules/', async (req, res, next) => {
+        const 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;
         }
-        const mapPath = path_1.default.join(outDir, file + '.map');
-        if (!fs_extra_1.default.existsSync(mapPath)) {
-            res.writeHead(404);
-            res.end('Map not found');
-            return;
+        try {
+            const entryPath = require.resolve(id, { paths: [appRoot] });
+            const out = await esbuild_1.default.build({
+                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(code);
+        }
+        catch (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 + bare import rewrite
+    app.use(async (req, res, next) => {
+        if (!req.url || !req.url.startsWith('/src/'))
+            return next();
         try {
-            const mapJson = JSON.parse(await fs_extra_1.default.readFile(mapPath, 'utf8'));
-            const traceMap = new trace_mapping_1.TraceMap(mapJson);
-            const pos = (0, trace_mapping_1.originalPositionFor)(traceMap, { line, column });
-            if (!pos.source) {
-                res.writeHead(404);
-                res.end('Source not found');
-                return;
-            }
-            const absSource = path_1.default.resolve(outDir, '../', pos.source);
-            let snippet = '';
-            if (await fs_extra_1.default.pathExists(absSource)) {
-                const lines = (await fs_extra_1.default.readFile(absSource, 'utf8')).split('\n');
-                const start = Math.max((pos.line || 1) - 3, 0);
-                const end = Math.min(lines.length, (pos.line || 1) + 2);
-                snippet = lines
-                    .slice(start, end)
-                    .map((l, i) => `<span class="line-number">${start + i + 1}</span> ${l
-                    .replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;')}`)
-                    .join('\\n');
-            }
-            res.setHeader('Content-Type', 'application/json');
-            res.end(JSON.stringify({ ...pos, snippet }));
+            const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
+            if (!(await fs_extra_1.default.pathExists(filePath)))
+                return next();
+            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
+            const ext = path_1.default.extname(filePath).toLowerCase();
+            // 🪄 Rewrite bare imports → /@modules/
+            code = code.replace(/from\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`);
+            let loader = 'js';
+            if (ext === '.ts')
+                loader = 'ts';
+            else if (ext === '.tsx')
+                loader = 'tsx';
+            else if (ext === '.jsx')
+                loader = 'jsx';
+            const transformed = await esbuild_1.default.transform(code, {
+                loader,
+                sourcemap: 'inline',
+                sourcefile: req.url,
+                target: 'es2020',
+                jsxFactory: 'React.createElement',
+                jsxFragment: 'React.Fragment',
+            });
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(transformed.code);
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
+            console.error('Error serving /src file:', msg);
             res.writeHead(500);
-            res.end(JSON.stringify({ error: msg }));
+            res.end(`// Error: ${msg}`);
         }
     });
     // 4️⃣ Serve index.html with injected refresh + HMR
@@ -183,7 +191,6 @@ async function dev() {
             html = html.replace('</body>', `
         <script type="module">
           import "/@react-refresh";
-          import "/@prismjs";
           const ws = new WebSocket("ws://" + location.host);
           ws.onmessage = async (e) => {
             const msg = JSON.parse(e.data);
@@ -208,7 +215,6 @@ async function dev() {
             res.end(html);
         }
         else {
-            // ✅ Serve compiled output files
             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);
@@ -219,6 +225,7 @@ async function dev() {
                 next();
         }
     });
+    // 🔁 HMR WebSocket server
     const server = http_1.default.createServer(app);
     const wss = new ws_1.WebSocketServer({ server });
     const broadcast = (data) => {
@@ -240,11 +247,12 @@ async function dev() {
             }
         }
     });
+    // 🟢 Start server
     server.listen(port, async () => {
         const url = `http://localhost:${port}`;
-        console.log(chalk_1.default.green(`\n⚡ Dev Server running at ${url}`));
-        if (port !== defaultPort)
-            console.log(chalk_1.default.yellow(`⚠️ Using alternate port (default ${defaultPort} was occupied).`));
+        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 () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-client",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",
@@ -94,7 +94,6 @@
     ]
   },
   "dependencies": {
-    "@jridgewell/trace-mapping": "^0.3.31",
     "chalk": "^4.1.2",
     "chokidar": "^4.0.3",
     "commander": "^14.0.2",