react-client 1.0.24 → 1.0.26

package/dist/cli/commands/dev.js

@@ -5,7 +5,6 @@
  * - prebundles deps into .react-client/deps
  * - serves /@modules/<dep>
  * - serves /src/* with esbuild transform & inline sourcemap
- * - serves /@runtime/overlay -> src/runtime/overlay-runtime.js
  * - /@source-map returns a snippet for overlay mapping
  * - HMR broadcast via BroadcastManager (ws)
  *
@@ -29,7 +28,6 @@ const chalk_1 = __importDefault(require("chalk"));
 const child_process_1 = require("child_process");
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
-const RUNTIME_OVERLAY = '/src/runtime/overlay-runtime.js';
 async function dev() {
     const root = process.cwd();
     const userConfig = (await (0, loadConfig_1.loadReactClientConfig)(root));
@@ -169,7 +167,7 @@ async function dev() {
         });
     }
     // --- Serve /@modules/<dep> (prebundled or on-demand esbuild bundle)
-    app.use((async (req, res, next) => {
+    app.use(async (req, res, next) => {
         const url = req.url ?? '';
         if (!url.startsWith('/@modules/'))
             return next();
@@ -182,21 +180,45 @@ async function dev() {
             const cacheFile = path_1.default.join(cacheDir, id.replace(/[\\/]/g, '_') + '.js');
             if (await fs_extra_1.default.pathExists(cacheFile)) {
                 res.setHeader('Content-Type', 'application/javascript');
-                res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
-                return;
+                return res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
+            }
+            // 🧠 Smart module resolver: handles subpaths like react-dom/client, react/jsx-runtime, etc.
+            let entryFile = null;
+            try {
+                // Try direct require.resolve first (works for most)
+                entryFile = require.resolve(id, { paths: [appRoot] });
+            }
+            catch {
+                // Handle subpath imports
+                const parts = id.split('/');
+                const pkgRoot = parts[0].startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
+                const subPath = parts.slice(pkgRoot.startsWith('@') ? 2 : 1).join('/');
+                const pkgJson = require.resolve(`${pkgRoot}/package.json`, { paths: [appRoot] });
+                const pkgDir = path_1.default.dirname(pkgJson);
+                const tryFiles = [
+                    path_1.default.join(pkgDir, subPath),
+                    path_1.default.join(pkgDir, subPath, 'index.js'),
+                    path_1.default.join(pkgDir, subPath + '.js'),
+                    path_1.default.join(pkgDir, subPath + '.mjs'),
+                ];
+                for (const f of tryFiles) {
+                    if (await fs_extra_1.default.pathExists(f)) {
+                        entryFile = f;
+                        break;
+                    }
+                }
             }
-            // Resolve and bundle on-demand
-            const entryResolved = require.resolve(id, { paths: [appRoot] });
+            if (!entryFile)
+                throw new Error(`Cannot resolve module: ${id}`);
             const result = await esbuild_1.default.build({
-                entryPoints: [entryResolved],
+                entryPoints: [entryFile],
                 bundle: true,
-                write: false,
                 platform: 'browser',
                 format: 'esm',
+                write: false,
                 target: ['es2020'],
             });
             const output = result.outputFiles?.[0]?.text ?? '';
-            // Persist to cache so next request is faster
             await fs_extra_1.default.writeFile(cacheFile, output, 'utf8');
             res.setHeader('Content-Type', 'application/javascript');
             res.end(output);
@@ -205,20 +227,100 @@ async function dev() {
             res.writeHead(500);
             res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
-    }));
+    });
     // --- Serve runtime overlay (local file) so overlay-runtime.js is loaded automatically
-    app.use((async (req, res, next) => {
-        const url = req.url ?? '';
-        if (url !== '/@runtime/overlay')
-            return next();
-        const overlayPath = path_1.default.join(appRoot, RUNTIME_OVERLAY);
-        if (!(await fs_extra_1.default.pathExists(overlayPath))) {
-            res.writeHead(404);
-            return res.end('// overlay-runtime not found');
+    // --- Serve runtime overlay (inline in dev server)
+    const OVERLAY_RUNTIME = `
+import "/@prismjs";
+
+const overlayId = "__rc_error_overlay__";
+
+const style = document.createElement("style");
+style.textContent = \`
+  #\${overlayId} {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    color: #fff;
+    font-family: Menlo, Consolas, monospace;
+    font-size: 14px;
+    z-index: 999999;
+    overflow: auto;
+    padding: 24px;
+    animation: fadeIn 0.2s ease-out;
+  }
+  @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
+  #\${overlayId} h2 { color: #ff6b6b; margin-bottom: 16px; }
+  #\${overlayId} pre { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 6px; }
+  #\${overlayId} a { color: #9cf; text-decoration: underline; }
+  #\${overlayId} .frame { margin: 12px 0; }
+  #\${overlayId} .frame-file { color: #ffa500; cursor: pointer; font-weight: bold; margin-bottom: 4px; }
+  .line-number { opacity: 0.5; margin-right: 10px; }
+\`;
+document.head.appendChild(style);
+
+async function mapStackFrame(frame) {
+  const m = frame.match(/(\\/src\\/[^\s:]+):(\\d+):(\\d+)/);
+  if (!m) return frame;
+  const [, file, line, col] = m;
+  const resp = await fetch(\`/@source-map?file=\${file}&line=\${line}&column=\${col}\`);
+  if (!resp.ok) return frame;
+  const pos = await resp.json();
+  if (pos.source) {
+    return {
+      file: pos.source,
+      line: pos.line,
+      column: pos.column,
+      snippet: pos.snippet || ""
+    };
+  }
+  return frame;
+}
+
+async function renderOverlay(err) {
+  const overlay =
+    document.getElementById(overlayId) ||
+    document.body.appendChild(Object.assign(document.createElement("div"), { id: overlayId }));
+  overlay.innerHTML = "";
+  const title = document.createElement("h2");
+  title.textContent = "🔥 " + (err.message || "Error");
+  overlay.appendChild(title);
+
+  const frames = (err.stack || "").split("\\n").filter(l => /src\\//.test(l));
+  for (const frame of frames) {
+    const mapped = await mapStackFrame(frame);
+    if (typeof mapped === "string") continue;
+    const frameEl = document.createElement("div");
+    frameEl.className = "frame";
+
+    const link = document.createElement("div");
+    link.className = "frame-file";
+    link.textContent = \`\${mapped.file}:\${mapped.line}:\${mapped.column}\`;
+    link.onclick = () =>
+      window.open("vscode://file/" + location.origin.replace("http://", "") + mapped.file + ":" + mapped.line);
+    frameEl.appendChild(link);
+
+    if (mapped.snippet) {
+      const pre = document.createElement("pre");
+      pre.classList.add("language-jsx");
+      pre.innerHTML = Prism.highlight(mapped.snippet, Prism.languages.jsx, "jsx");
+      frameEl.appendChild(pre);
+    }
+
+    overlay.appendChild(frameEl);
+  }
+}
+
+window.showErrorOverlay = (err) => renderOverlay(err);
+window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
+`;
+    app.use(async (req, res, next) => {
+        if (req.url === '/@runtime/overlay') {
+            res.setHeader('Content-Type', 'application/javascript');
+            return res.end(OVERLAY_RUNTIME);
         }
-        res.setHeader('Content-Type', 'application/javascript');
-        res.end(await fs_extra_1.default.readFile(overlayPath, 'utf8'));
-    }));
+        next();
+    });
     // --- minimal /@source-map: return snippet around requested line of original source file
     app.use((async (req, res, next) => {
         const url = req.url ?? '';

package/package.json

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