react-client 1.0.26 → 1.0.28

package/README.md

@@ -91,7 +91,6 @@ Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
 - 🔍 **Source Map Stack Mapping** — Maps runtime errors to original TS/JS source lines  
 - 💬 **Auto Port Detection** — Prompts when default port 2202 is occupied  
 - 🧠 **Smart Config Loader** — Detects project root, compiles `.ts` configs dynamically  
-- 🎨 **PrismJS Highlighting** — For pretty overlay code frames  
 - 🔌 **Plugin Hook System** — Extendable with `configResolved`, `transform`, `buildEnd`  
 
 ---
@@ -104,7 +103,6 @@ Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
 2. **Connect** serves files and APIs (React Refresh runtime, overlay, source-map).  
 3. **WebSocket** pushes HMR updates and overlay messages.  
 4. **Chokidar** watches `/src` for changes and triggers rebuilds.  
-5. **Overlay UI** (via PrismJS) displays mapped stack frames with syntax highlighting.
 
 ---
 

package/dist/cli/commands/dev.js

@@ -182,29 +182,33 @@ async function dev() {
                 res.setHeader('Content-Type', 'application/javascript');
                 return res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
             }
-            // 🧠 Smart module resolver: handles subpaths like react-dom/client, react/jsx-runtime, etc.
+            // 🧠 Handle subpath imports correctly (like react-dom/client)
             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;
+                const pkgJsonPath = require.resolve(`${pkgRoot}/package.json`, { paths: [appRoot] });
+                const pkgDir = path_1.default.dirname(pkgJsonPath);
+                // Special case: react-dom/client
+                if (pkgRoot === 'react-dom' && subPath === 'client') {
+                    entryFile = path_1.default.join(pkgDir, 'client.js');
+                }
+                else {
+                    const candidates = [
+                        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 candidates) {
+                        if (await fs_extra_1.default.pathExists(f)) {
+                            entryFile = f;
+                            break;
+                        }
                     }
                 }
             }
@@ -228,11 +232,8 @@ async function dev() {
             res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
     });
-    // --- Serve runtime overlay (local file) so overlay-runtime.js is loaded automatically
-    // --- Serve runtime overlay (inline in dev server)
+    // --- Serve runtime overlay (inline, no external dependencies)
     const OVERLAY_RUNTIME = `
-import "/@prismjs";
-
 const overlayId = "__rc_error_overlay__";
 
 const style = document.createElement("style");
@@ -251,11 +252,11 @@ style.textContent = \`
   }
   @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} pre { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 6px; overflow-x: auto; }
   #\${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; }
+  .line-number { opacity: 0.5; margin-right: 10px; display: inline-block; width: 2em; text-align: right; }
 \`;
 document.head.appendChild(style);
 
@@ -277,6 +278,14 @@ async function mapStackFrame(frame) {
   return frame;
 }
 
+// 🔹 minimal inline syntax highlighting (keywords only)
+function highlightJS(code) {
+  return code
+    .replace(/(const|let|var|function|return|import|from|export|class|new|await|async|if|else|for|while|try|catch|throw)/g, '<span style="color:#ffb86c;">$1</span>')
+    .replace(/("[^"]*"|'[^']*')/g, '<span style="color:#8be9fd;">$1</span>')
+    .replace(/(\\/\\/.*)/g, '<span style="opacity:0.6;">$1</span>');
+}
+
 async function renderOverlay(err) {
   const overlay =
     document.getElementById(overlayId) ||
@@ -302,8 +311,7 @@ async function renderOverlay(err) {
 
     if (mapped.snippet) {
       const pre = document.createElement("pre");
-      pre.classList.add("language-jsx");
-      pre.innerHTML = Prism.highlight(mapped.snippet, Prism.languages.jsx, "jsx");
+      pre.innerHTML = highlightJS(mapped.snippet);
       frameEl.appendChild(pre);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-client",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",
@@ -102,7 +102,6 @@
     "esbuild": "^0.25.12",
     "fs-extra": "^11.3.2",
     "open": "^8.4.2",
-    "prismjs": "^1.30.0",
     "prompts": "^2.4.2",
     "react-refresh": "^0.14.0",
     "serve-static": "^1.15.0",