react-client 1.0.28 → 1.0.31

package/dist/cli/commands/dev.js

@@ -1,6 +1,5 @@
-"use strict";
 /**
- * dev.ts — Vite-like dev server for react-client
+ * dev.ts — dev server for react-client
  *
  * - prebundles deps into .react-client/deps
  * - serves /@modules/<dep>
@@ -10,45 +9,187 @@
  *
  * Keep this file linted & typed. Avoids manual react-dom/client hacks.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = dev;
-const esbuild_1 = __importDefault(require("esbuild"));
-const connect_1 = __importDefault(require("connect"));
-const http_1 = __importDefault(require("http"));
-const chokidar_1 = __importDefault(require("chokidar"));
-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 open_1 = __importDefault(require("open"));
-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");
-async function dev() {
+import esbuild from 'esbuild';
+import connect from 'connect';
+import http from 'http';
+import chokidar from 'chokidar';
+import detectPort from 'detect-port';
+import prompts from 'prompts';
+import path from 'path';
+import fs from 'fs-extra';
+import open from 'open';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import { loadReactClientConfig } from '../../utils/loadConfig';
+import { BroadcastManager } from '../../server/broadcastManager';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const RUNTIME_OVERLAY_ROUTE = '/@runtime/overlay';
+function jsContentType() {
+    return 'application/javascript; charset=utf-8';
+}
+/**
+ * Resolve any bare import id robustly:
+ * 1. try require.resolve(id)
+ * 2. try require.resolve(`${pkg}/${subpath}`)
+ * 3. try package.json exports field
+ * 4. try common fallback candidates
+ */
+async function resolveModuleEntry(id, root) {
+    // quick resolution
+    try {
+        return require.resolve(id, { paths: [root] });
+    }
+    catch {
+        // continue
+    }
+    // split package root and subpath
+    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('/');
+    let pkgJsonPath;
+    try {
+        pkgJsonPath = require.resolve(`${pkgRoot}/package.json`, { paths: [root] });
+    }
+    catch {
+        // No need to keep unused variable 'err'
+        throw new Error(`Package not found: ${pkgRoot}`);
+    }
+    const pkgDir = path.dirname(pkgJsonPath);
+    // Explicitly type pkgJson to avoid 'any'
+    let pkgJson = {};
+    try {
+        const pkgContent = await fs.readFile(pkgJsonPath, 'utf8');
+        pkgJson = JSON.parse(pkgContent);
+    }
+    catch {
+        // ignore parse or read errors gracefully
+    }
+    // If exports field exists, try to look up subpath (type-safe, supports conditional exports)
+    if (pkgJson.exports) {
+        const exportsField = pkgJson.exports;
+        // If exports is a plain string -> it's the entry
+        if (typeof exportsField === 'string') {
+            if (!subPath)
+                return path.resolve(pkgDir, exportsField);
+        }
+        else if (exportsField && typeof exportsField === 'object') {
+            // Normalize to a record so we can index it safely
+            const exportsMap = exportsField;
+            // Try candidates in order: explicit subpath, index, fallback
+            const keyCandidates = [];
+            if (subPath) {
+                keyCandidates.push(`./${subPath}`, `./${subPath}.js`, `./${subPath}.mjs`);
+            }
+            keyCandidates.push('.', './index.js', './index.mjs');
+            for (const key of keyCandidates) {
+                if (!(key in exportsMap))
+                    continue;
+                const entry = exportsMap[key];
+                // entry may be string or object like { import: "...", require: "..." }
+                let target;
+                if (typeof entry === 'string') {
+                    target = entry;
+                }
+                else if (entry && typeof entry === 'object') {
+                    const entryObj = entry;
+                    // Prefer "import" field for ESM consumers, then "default", then any string-ish value
+                    if (typeof entryObj.import === 'string')
+                        target = entryObj.import;
+                    else if (typeof entryObj.default === 'string')
+                        target = entryObj.default;
+                    else {
+                        // If the entry object itself is a conditional map (like {"node": "...", "browser": "..."}),
+                        // attempt to pick any string value present.
+                        for (const k of Object.keys(entryObj)) {
+                            if (typeof entryObj[k] === 'string') {
+                                target = entryObj[k];
+                                break;
+                            }
+                        }
+                    }
+                }
+                if (!target || typeof target !== 'string')
+                    continue;
+                // Normalize relative paths in exports (remove leading ./)
+                const normalized = target.replace(/^\.\//, '');
+                const abs = path.isAbsolute(normalized)
+                    ? normalized
+                    : path.resolve(pkgDir, normalized);
+                if (await fs.pathExists(abs)) {
+                    return abs;
+                }
+            }
+        }
+    }
+    // Try resolved subpath directly (pkg/subpath)
+    if (subPath) {
+        try {
+            const candidate = require.resolve(`${pkgRoot}/${subPath}`, { paths: [root] });
+            return candidate;
+        }
+        catch {
+            // fallback to searching common candidates under package dir
+            const candPaths = [
+                path.join(pkgDir, subPath),
+                path.join(pkgDir, subPath + '.js'),
+                path.join(pkgDir, subPath + '.mjs'),
+                path.join(pkgDir, subPath, 'index.js'),
+                path.join(pkgDir, subPath, 'index.mjs'),
+            ];
+            for (const c of candPaths) {
+                if (await fs.pathExists(c))
+                    return c;
+            }
+        }
+    }
+    // Try package's main/module/browser fields safely (typed as string)
+    const candidateFields = [
+        typeof pkgJson.module === 'string' ? pkgJson.module : undefined,
+        typeof pkgJson.browser === 'string' ? pkgJson.browser : undefined,
+        typeof pkgJson.main === 'string' ? pkgJson.main : undefined,
+    ];
+    for (const field of candidateFields) {
+        if (!field)
+            continue;
+        const abs = path.isAbsolute(field) ? field : path.resolve(pkgDir, field);
+        if (await fs.pathExists(abs))
+            return abs;
+    }
+    throw new Error(`Could not resolve module entry for ${id}`);
+}
+/**
+ * Wrap the built module for subpath imports:
+ * For requests like "/@modules/react-dom/client" — we bundle the resolved file
+ * and return it. If the user requested the package root instead, the resolved
+ * bundle is returned directly.
+ *
+ * No hardcoded special cases.
+ */
+function normalizeCacheKey(id) {
+    return id.replace(/[\\/]/g, '_');
+}
+export default async function dev() {
     const root = process.cwd();
-    const userConfig = (await (0, loadConfig_1.loadReactClientConfig)(root));
-    const appRoot = path_1.default.resolve(root, userConfig.root || '.');
+    const userConfig = (await loadReactClientConfig(root));
+    const appRoot = path.resolve(root, userConfig.root || '.');
     const defaultPort = userConfig.server?.port ?? 2202;
     // cache dir for prebundled deps
-    const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
-    await fs_extra_1.default.ensureDir(cacheDir);
+    const cacheDir = path.join(appRoot, '.react-client', 'deps');
+    await fs.ensureDir(cacheDir);
     // Detect entry (main.tsx / main.jsx)
-    const possible = ['src/main.tsx', 'src/main.jsx'].map((p) => path_1.default.join(appRoot, p));
-    const entry = possible.find((p) => fs_extra_1.default.existsSync(p));
+    const possible = ['src/main.tsx', 'src/main.jsx'].map((p) => path.join(appRoot, p));
+    const entry = possible.find((p) => fs.existsSync(p));
     if (!entry) {
-        console.error(chalk_1.default.red('❌ Entry not found: src/main.tsx or src/main.jsx'));
+        console.error(chalk.red('❌ Entry not found: src/main.tsx or src/main.jsx'));
         process.exit(1);
     }
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
+    const indexHtml = path.join(appRoot, 'index.html');
     // Select port
-    const availablePort = await (0, detect_port_1.default)(defaultPort);
+    const availablePort = await detectPort(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
-        const response = await (0, prompts_1.default)({
+        const response = await prompts({
             type: 'confirm',
             name: 'useNewPort',
             message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
@@ -64,11 +205,16 @@ async function dev() {
         require.resolve('react-refresh/runtime');
     }
     catch {
-        console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — installing react-refresh...'));
-        (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
-            cwd: appRoot,
-            stdio: 'inherit',
-        });
+        console.warn(chalk.yellow('⚠️ react-refresh not found — installing react-refresh...'));
+        try {
+            execSync('npm install react-refresh --no-audit --no-fund --silent', {
+                cwd: appRoot,
+                stdio: 'inherit',
+            });
+        }
+        catch {
+            console.warn(chalk.yellow('⚠️ automatic install of react-refresh failed; continuing without it.'));
+        }
     }
     // Plugin system (core + user)
     const corePlugins = [
@@ -92,7 +238,7 @@ async function dev() {
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
     // App + caches
-    const app = (0, connect_1.default)();
+    const app = connect();
     const transformCache = new Map();
     // Helper: recursively analyze dependency graph for prebundling (bare imports)
     async function analyzeGraph(file, seen = new Set()) {
@@ -100,7 +246,7 @@ async function dev() {
             return seen;
         seen.add(file);
         try {
-            const code = await fs_extra_1.default.readFile(file, 'utf8');
+            const code = await fs.readFile(file, 'utf8');
             const matches = [
                 ...code.matchAll(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g),
                 ...code.matchAll(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g),
@@ -128,17 +274,17 @@ async function dev() {
     async function prebundleDeps(deps) {
         if (!deps.size)
             return;
-        const existingFiles = await fs_extra_1.default.readdir(cacheDir);
+        const existingFiles = await fs.readdir(cacheDir);
         const existing = new Set(existingFiles.map((f) => f.replace(/\.js$/, '')));
         const missing = [...deps].filter((d) => !existing.has(d));
         if (!missing.length)
             return;
-        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
+        console.log(chalk.cyan('📦 Prebundling:'), missing.join(', '));
         await Promise.all(missing.map(async (dep) => {
             try {
                 const entryPoint = require.resolve(dep, { paths: [appRoot] });
-                const outFile = path_1.default.join(cacheDir, dep.replace(/\//g, '_') + '.js');
-                await esbuild_1.default.build({
+                const outFile = path.join(cacheDir, normalizeCacheKey(dep) + '.js');
+                await esbuild.build({
                     entryPoints: [entryPoint],
                     bundle: true,
                     platform: 'browser',
@@ -147,10 +293,10 @@ async function dev() {
                     write: true,
                     target: ['es2020'],
                 });
-                console.log(chalk_1.default.green(`✅ Cached ${dep}`));
+                console.log(chalk.green(`✅ Cached ${dep}`));
             }
             catch (err) {
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
+                console.warn(chalk.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
             }
         }));
     }
@@ -158,16 +304,16 @@ async function dev() {
     const depsSet = await analyzeGraph(entry);
     await prebundleDeps(depsSet);
     // Watch package.json for changes to re-prebundle
-    const pkgPath = path_1.default.join(appRoot, 'package.json');
-    if (await fs_extra_1.default.pathExists(pkgPath)) {
-        chokidar_1.default.watch(pkgPath).on('change', async () => {
-            console.log(chalk_1.default.yellow('📦 package.json changed — rebuilding prebundle...'));
+    const pkgPath = path.join(appRoot, 'package.json');
+    if (await fs.pathExists(pkgPath)) {
+        chokidar.watch(pkgPath).on('change', async () => {
+            console.log(chalk.yellow('📦 package.json changed — rebuilding prebundle...'));
             const newDeps = await analyzeGraph(entry);
             await prebundleDeps(newDeps);
         });
     }
     // --- 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();
@@ -177,44 +323,14 @@ async function dev() {
             return res.end('// invalid module');
         }
         try {
-            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');
-                return res.end(await fs_extra_1.default.readFile(cacheFile, 'utf8'));
-            }
-            // 🧠 Handle subpath imports correctly (like react-dom/client)
-            let entryFile = null;
-            try {
-                entryFile = require.resolve(id, { paths: [appRoot] });
+            const cacheFile = path.join(cacheDir, normalizeCacheKey(id) + '.js');
+            if (await fs.pathExists(cacheFile)) {
+                res.setHeader('Content-Type', jsContentType());
+                return res.end(await fs.readFile(cacheFile, 'utf8'));
             }
-            catch {
-                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 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;
-                        }
-                    }
-                }
-            }
-            if (!entryFile)
-                throw new Error(`Cannot resolve module: ${id}`);
-            const result = await esbuild_1.default.build({
+            // Resolve the actual entry file (handles subpaths & package exports)
+            const entryFile = await resolveModuleEntry(id, appRoot);
+            const result = await esbuild.build({
                 entryPoints: [entryFile],
                 bundle: true,
                 platform: 'browser',
@@ -223,108 +339,87 @@ async function dev() {
                 target: ['es2020'],
             });
             const output = result.outputFiles?.[0]?.text ?? '';
-            await fs_extra_1.default.writeFile(cacheFile, output, 'utf8');
-            res.setHeader('Content-Type', 'application/javascript');
+            // Write cache and respond
+            await fs.writeFile(cacheFile, output, 'utf8');
+            res.setHeader('Content-Type', jsContentType());
             res.end(output);
         }
         catch (err) {
             res.writeHead(500);
             res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
-    });
+    }));
     // --- Serve runtime overlay (inline, no external dependencies)
     const OVERLAY_RUNTIME = `
+/* inline overlay runtime - served at ${RUNTIME_OVERLAY_ROUTE} */
+${(() => {
+        // small helper — embed as a string
+        return `
 const overlayId = "__rc_error_overlay__";
+(function(){ 
+  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;}
+    #\${overlayId} h2{color:#ff6b6b;margin-bottom:16px;}
+    #\${overlayId} pre{background:rgba(255,255,255,0.06);padding:12px;border-radius:6px;overflow:auto;}
+    .frame-file{color:#ffa500;cursor:pointer;font-weight:bold;margin-bottom:4px;}
+    .line-number{opacity:0.6;margin-right:10px;display:inline-block;width:2em;text-align:right;}
+  \`;
+  document.head.appendChild(style);
 
-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;
+  async function mapStackFrame(frame){
+    const m = frame.match(/(\\/src\\/[^\s:]+):(\\d+):(\\d+)/);
+    if(!m) return frame;
+    const [,file,line,col] = m;
+    try{
+      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 pos;
+    }catch(e){}
+    return frame;
   }
-  @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; 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; display: inline-block; width: 2em; text-align: right; }
-\`;
-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 || ""
-    };
+  function highlightSimple(s){
+    return s.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>');
   }
-  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) ||
-    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.innerHTML = highlightJS(mapped.snippet);
-      frameEl.appendChild(pre);
+  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");
+      const link = document.createElement("div");
+      link.className = "frame-file";
+      link.textContent = \`\${mapped.source||mapped.file}:\${mapped.line}:\${mapped.column}\`;
+      link.onclick = ()=>window.open("vscode://file/"+(mapped.source||mapped.file)+":"+mapped.line);
+      frameEl.appendChild(link);
+      if(mapped.snippet){
+        const pre = document.createElement("pre");
+        pre.innerHTML = highlightSimple(mapped.snippet);
+        frameEl.appendChild(pre);
+      }
+      overlay.appendChild(frameEl);
     }
-
-    overlay.appendChild(frameEl);
   }
-}
 
-window.showErrorOverlay = (err) => renderOverlay(err);
-window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
+  window.showErrorOverlay = (err)=>renderOverlay(err);
+  window.clearErrorOverlay = ()=>document.getElementById(overlayId)?.remove();
+  window.addEventListener("error", e => window.showErrorOverlay?.(e.error || e));
+  window.addEventListener("unhandledrejection", e => window.showErrorOverlay?.(e.reason || e));
+})();
+`;
+    })()}
 `;
     app.use(async (req, res, next) => {
-        if (req.url === '/@runtime/overlay') {
-            res.setHeader('Content-Type', 'application/javascript');
+        if (req.url === RUNTIME_OVERLAY_ROUTE) {
+            res.setHeader('Content-Type', jsContentType());
             return res.end(OVERLAY_RUNTIME);
         }
         next();
@@ -334,10 +429,8 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         const url = req.url ?? '';
         if (!url.startsWith('/@source-map'))
             return next();
-        // expected query: ?file=/src/xyz.tsx&line=12&column=3
         try {
-            const full = req.url ?? '';
-            const parsed = new URL(full, `http://localhost:${port}`);
+            const parsed = new URL(req.url ?? '', `http://localhost:${port}`);
             const file = parsed.searchParams.get('file') ?? '';
             const lineStr = parsed.searchParams.get('line') ?? '0';
             const lineNum = Number(lineStr) || 0;
@@ -345,12 +438,12 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
                 res.writeHead(400);
                 return res.end('{}');
             }
-            const filePath = path_1.default.join(appRoot, file.startsWith('/') ? file.slice(1) : file);
-            if (!(await fs_extra_1.default.pathExists(filePath))) {
+            const filePath = path.join(appRoot, file.startsWith('/') ? file.slice(1) : file);
+            if (!(await fs.pathExists(filePath))) {
                 res.writeHead(404);
                 return res.end('{}');
             }
-            const src = await fs_extra_1.default.readFile(filePath, 'utf8');
+            const src = await fs.readFile(filePath, 'utf8');
             const lines = src.split(/\r?\n/);
             const start = Math.max(0, lineNum - 3 - 1);
             const end = Math.min(lines.length, lineNum + 2);
@@ -377,12 +470,12 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         if (!url.startsWith('/src/') && !url.endsWith('.css'))
             return next();
         const raw = decodeURIComponent((req.url ?? '').split('?')[0]);
-        const filePath = path_1.default.join(appRoot, raw.replace(/^\//, ''));
+        const filePath = path.join(appRoot, raw.replace(/^\//, ''));
         // Try file extensions if not exact file
         const exts = ['', '.tsx', '.ts', '.jsx', '.js', '.css'];
         let found = '';
         for (const ext of exts) {
-            if (await fs_extra_1.default.pathExists(filePath + ext)) {
+            if (await fs.pathExists(filePath + ext)) {
                 found = filePath + ext;
                 break;
             }
@@ -390,7 +483,7 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         if (!found)
             return next();
         try {
-            let code = await fs_extra_1.default.readFile(found, 'utf8');
+            let code = await fs.readFile(found, 'utf8');
             // rewrite bare imports -> /@modules/<dep>
             code = code
                 .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
@@ -398,24 +491,21 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
             // run plugin transforms
             for (const p of plugins) {
                 if (p.onTransform) {
-                    // plugin may return transformed code
-                    // keep typed as string
-                    // eslint-disable-next-line no-await-in-loop
                     const out = await p.onTransform(code, found);
                     if (typeof out === 'string')
                         code = out;
                 }
             }
             // choose loader by extension
-            const ext = path_1.default.extname(found).toLowerCase();
+            const ext = path.extname(found).toLowerCase();
             const loader = ext === '.ts' ? 'ts' : ext === '.tsx' ? 'tsx' : ext === '.jsx' ? 'jsx' : 'js';
-            const result = await esbuild_1.default.transform(code, {
+            const result = await esbuild.transform(code, {
                 loader,
                 sourcemap: 'inline',
                 target: ['es2020'],
             });
             transformCache.set(found, result.code);
-            res.setHeader('Content-Type', 'application/javascript');
+            res.setHeader('Content-Type', jsContentType());
             res.end(result.code);
         }
         catch (err) {
@@ -429,15 +519,15 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         const url = req.url ?? '';
         if (url !== '/' && url !== '/index.html')
             return next();
-        if (!(await fs_extra_1.default.pathExists(indexHtml))) {
+        if (!(await fs.pathExists(indexHtml))) {
             res.writeHead(404);
             return res.end('index.html not found');
         }
         try {
-            let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
+            let html = await fs.readFile(indexHtml, 'utf8');
             // inject overlay runtime and HMR client if not already present
-            if (!html.includes('/@runtime/overlay')) {
-                html = html.replace('</body>', `\n<script type="module" src="/@runtime/overlay"></script>\n<script type="module">
+            if (!html.includes(RUNTIME_OVERLAY_ROUTE)) {
+                html = html.replace('</body>', `\n<script type="module" src="${RUNTIME_OVERLAY_ROUTE}"></script>\n<script type="module">
   const ws = new WebSocket("ws://" + location.host);
   ws.onmessage = (e) => {
     const msg = JSON.parse(e.data);
@@ -450,7 +540,7 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
   };
 </script>\n</body>`);
             }
-            res.setHeader('Content-Type', 'text/html');
+            res.setHeader('Content-Type', 'text/html; charset=utf-8');
             res.end(html);
         }
         catch (err) {
@@ -459,29 +549,24 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         }
     }));
     // --- HMR WebSocket server
-    const server = http_1.default.createServer(app);
-    const broadcaster = new broadcastManager_1.BroadcastManager(server);
+    const server = http.createServer(app);
+    const broadcaster = new BroadcastManager(server);
     // Watch files and trigger plugin onHotUpdate + broadcast HMR message
-    const watcher = chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true });
+    const watcher = chokidar.watch(path.join(appRoot, 'src'), { ignoreInitial: true });
     watcher.on('change', async (file) => {
         transformCache.delete(file);
         // plugin hook onHotUpdate optionally
         for (const p of plugins) {
             if (p.onHotUpdate) {
                 try {
-                    // allow plugin to broadcast via a simple function
-                    // plugin gets { broadcast }
-                    // plugin signature: onHotUpdate(file, { broadcast })
-                    // eslint-disable-next-line no-await-in-loop
                     await p.onHotUpdate(file, {
+                        // plugin only needs broadcast in most cases
                         broadcast: (msg) => {
                             broadcaster.broadcast(msg);
                         },
                     });
                 }
                 catch (err) {
-                    // plugin errors shouldn't crash server
-                    // eslint-disable-next-line no-console
                     console.warn('plugin onHotUpdate error:', err.message);
                 }
             }
@@ -489,18 +574,17 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
         // default: broadcast update for changed file
         broadcaster.broadcast({
             type: 'update',
-            path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
+            path: '/' + path.relative(appRoot, file).replace(/\\/g, '/'),
         });
     });
     // 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.green(`⚡ Running at: ${url}`));
+        console.log(chalk.cyan.bold('\n🚀 React Client Dev Server'));
+        console.log(chalk.green(`⚡ Running at: ${url}`));
         if (userConfig.server?.open !== false) {
-            // open default browser
             try {
-                await (0, open_1.default)(url);
+                await open(url);
             }
             catch {
                 // ignore open errors
@@ -509,8 +593,8 @@ window.clearErrorOverlay = () => document.getElementById(overlayId)?.remove();
     });
     // graceful shutdown
     process.on('SIGINT', async () => {
-        console.log(chalk_1.default.red('\n🛑 Shutting down...'));
-        watcher.close();
+        console.log(chalk.red('\n🛑 Shutting down...'));
+        await watcher.close();
         broadcaster.close();
         server.close();
         process.exit(0);