react-client 1.0.21 → 1.0.22

package/dist/cli/commands/dev.js

@@ -1,13 +1,13 @@
 "use strict";
 /**
- * 🚀 react-client Dev Server (Final Version)
- * Includes:
- *  - Favicon & public asset support
- *  - ETag + gzip/brotli caching
- *  - Persistent prebundle deps (.react-client/deps)
- *  - HMR + overlay
- *  - CSS hot reload
- *  - ESLint + Prettier clean
+ * 🚀 React Client Dev Server — Final Version
+ * ------------------------------------------
+ * ✅ Local overlay-runtime.js (Prism + stack mapping)
+ * ✅ Dynamic /@runtime/overlay-runtime.js alias
+ * ✅ Automatic HTML injection for overlay + HMR
+ * ✅ Prebundle cache (.react-client/deps)
+ * ✅ CSS HMR, relative & bare import handling
+ * ✅ Favicon & public assets serving
  */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -29,24 +29,6 @@ const zlib_1 = __importDefault(require("zlib"));
 const crypto_1 = __importDefault(require("crypto"));
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
-// Node polyfill mapping
-const NODE_POLYFILLS = {
-    buffer: 'buffer/',
-    process: 'process/browser',
-    path: 'path-browserify',
-    fs: 'browserify-fs',
-    os: 'os-browserify/browser',
-    stream: 'stream-browserify',
-    util: 'util/',
-    url: 'url/',
-    assert: 'assert/',
-    crypto: 'crypto-browserify',
-    events: 'events/',
-    constants: 'constants-browserify',
-    querystring: 'querystring-es3',
-    zlib: 'browserify-zlib',
-};
-// --- Helper utilities
 const computeHash = (content) => crypto_1.default.createHash('sha1').update(content).digest('hex');
 const getMimeType = (file) => {
     const ext = path_1.default.extname(file).toLowerCase();
@@ -64,35 +46,26 @@ const getMimeType = (file) => {
         '.mjs': 'application/javascript',
         '.css': 'text/css',
         '.html': 'text/html',
-        '.woff': 'font/woff',
-        '.woff2': 'font/woff2',
-        '.ttf': 'font/ttf',
-        '.otf': 'font/otf',
-        '.mp4': 'video/mp4',
-        '.mp3': 'audio/mpeg',
     };
     return mime[ext] || 'application/octet-stream';
 };
-// ✅ Unused helpers are underscored to comply with eslint rules
-const _gunzipAsync = (input) => new Promise((res, rej) => zlib_1.default.gunzip(input, (e, out) => (e ? rej(e) : res(out))));
-const _brotliAsync = (input) => new Promise((res, rej) => zlib_1.default.brotliDecompress(input, (e, out) => (e ? rej(e) : res(out))));
 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 defaultPort = userConfig.server?.port || 5173;
     const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
-    await fs_extra_1.default.ensureDir(cacheDir);
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
     const pkgFile = path_1.default.join(appRoot, 'package.json');
-    // Detect entry
+    const indexHtml = path_1.default.join(appRoot, 'index.html');
+    await fs_extra_1.default.ensureDir(cacheDir);
+    // ✅ Detect entry
     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);
     }
-    // Detect open port
+    // ✅ Detect free port
     const port = await (0, detect_port_1.default)(defaultPort);
     if (port !== defaultPort) {
         const res = await (0, prompts_1.default)({
@@ -104,7 +77,7 @@ async function dev() {
         if (!res.useNewPort)
             process.exit(0);
     }
-    // Ensure react-refresh installed
+    // ✅ Ensure react-refresh
     try {
         require.resolve('react-refresh/runtime');
     }
@@ -112,21 +85,7 @@ async function dev() {
         console.log(chalk_1.default.yellow('Installing react-refresh...'));
         (0, child_process_1.execSync)('npm i react-refresh --silent', { cwd: root, stdio: 'inherit' });
     }
-    // Ensure Node polyfills installed
-    const missing = Object.keys(NODE_POLYFILLS).filter((m) => {
-        try {
-            require.resolve(m, { paths: [appRoot] });
-            return false;
-        }
-        catch {
-            return true;
-        }
-    });
-    if (missing.length > 0) {
-        console.log(chalk_1.default.yellow('Installing missing polyfills...'));
-        (0, child_process_1.execSync)(`npm i ${missing.join(' ')} --silent`, { cwd: appRoot, stdio: 'inherit' });
-    }
-    // --- Plugins
+    // ✅ Core + user plugins
     const corePlugins = [
         {
             name: 'css-hmr',
@@ -151,7 +110,7 @@ async function dev() {
     const server = http_1.default.createServer(app);
     const broadcaster = new broadcastManager_1.BroadcastManager(server);
     const transformCache = new Map();
-    // --- Prebundle deps with gzip/brotli caching
+    // 🧱 Persistent prebundle cache
     async function prebundleDeps() {
         if (!(await fs_extra_1.default.pathExists(pkgFile)))
             return;
@@ -187,120 +146,139 @@ async function dev() {
             }
             catch (e) {
                 const err = e;
-                console.warn(chalk_1.default.yellow(`⚠️ Failed ${dep}: ${err.message}`));
+                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${err.message}`));
             }
         }));
         await fs_extra_1.default.writeJSON(metaFile, { hash });
     }
     await prebundleDeps();
     chokidar_1.default.watch(pkgFile).on('change', prebundleDeps);
-    // --- Serve /@modules/
+    // 🧩 Serve local overlay runtime
+    app.use('/@runtime/overlay-runtime.js', async (req, res) => {
+        const overlayPath = path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js');
+        try {
+            if (!(await fs_extra_1.default.pathExists(overlayPath))) {
+                res.writeHead(404);
+                return res.end(`// Overlay runtime not found: ${overlayPath}`);
+            }
+            let code = await fs_extra_1.default.readFile(overlayPath, 'utf8');
+            // Transform bare imports → /@modules/*
+            code = code
+                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
+                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
+            const result = await esbuild_1.default.transform(code, {
+                loader: 'js',
+                sourcemap: 'inline',
+                target: 'es2020',
+            });
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(result.code);
+        }
+        catch (err) {
+            const e = err;
+            console.error(chalk_1.default.red(`❌ Failed to load overlay runtime: ${e.message}`));
+            res.writeHead(500);
+            res.end(`// Failed to load overlay runtime: ${e.message}`);
+        }
+    });
+    // 🧠 Serve /@modules/
     app.use('/@modules/', async (req, res, next) => {
         const id = req.url?.replace(/^\/(@modules\/)?/, '');
         if (!id)
             return next();
-        const base = path_1.default.join(cacheDir, id.replace(/\//g, '_') + '.js');
-        const gz = base + '.gz';
-        const br = base + '.br';
-        const accept = req.headers['accept-encoding'] || '';
         try {
-            let buf = null;
-            let encoding = null;
-            if (/\bbr\b/.test(accept) && (await fs_extra_1.default.pathExists(br))) {
-                buf = await fs_extra_1.default.readFile(br);
-                encoding = 'br';
-            }
-            else if (/\bgzip\b/.test(accept) && (await fs_extra_1.default.pathExists(gz))) {
-                buf = await fs_extra_1.default.readFile(gz);
-                encoding = 'gzip';
-            }
-            else if (await fs_extra_1.default.pathExists(base)) {
-                buf = await fs_extra_1.default.readFile(base);
-            }
-            else {
-                const entryPath = require.resolve(id, { paths: [appRoot] });
-                const result = await esbuild_1.default.build({
-                    entryPoints: [entryPath],
-                    bundle: true,
-                    platform: 'browser',
-                    format: 'esm',
-                    write: false,
-                });
-                buf = Buffer.from(result.outputFiles[0].text);
-                await fs_extra_1.default.writeFile(base, buf);
-            }
-            const etag = `"${computeHash(buf)}"`;
-            if (req.headers['if-none-match'] === etag) {
-                res.writeHead(304);
-                return res.end();
+            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));
             }
+            const entryPath = require.resolve(id, { paths: [appRoot] });
+            const result = await esbuild_1.default.build({
+                entryPoints: [entryPath],
+                bundle: true,
+                platform: 'browser',
+                format: 'esm',
+                target: 'es2020',
+                write: false,
+            });
+            const code = result.outputFiles[0].text;
+            await fs_extra_1.default.writeFile(cacheFile, code, 'utf8');
             res.setHeader('Content-Type', 'application/javascript');
-            res.setHeader('ETag', etag);
-            res.setHeader('Cache-Control', 'no-cache');
-            if (encoding)
-                res.setHeader('Content-Encoding', encoding);
-            res.end(buf);
+            res.end(code);
         }
         catch (e) {
             const err = e;
+            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${err.message}`));
             res.writeHead(500);
             res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
     });
-    // --- Serve /src/ files
+    // 🧩 Serve /src/ and .css files dynamically
     app.use(async (req, res, next) => {
         if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
             return next();
-        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');
-        code = code
-            .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
-            .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
-        for (const p of plugins)
-            if (p.onTransform)
-                code = await p.onTransform(code, filePath);
-        const loader = filePath.endsWith('.tsx')
-            ? 'tsx'
-            : filePath.endsWith('.ts')
-                ? 'ts'
-                : filePath.endsWith('.jsx')
-                    ? 'jsx'
-                    : 'js';
-        const result = await esbuild_1.default.transform(code, { loader, sourcemap: 'inline', target: 'es2020' });
-        res.setHeader('Content-Type', 'application/javascript');
-        res.end(result.code);
+        const rawPath = decodeURIComponent(req.url.split('?')[0]);
+        const filePath = path_1.default.join(appRoot, rawPath);
+        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
+        let resolvedPath = null;
+        for (const ext of possibleExts) {
+            const candidate = filePath + ext;
+            if (await fs_extra_1.default.pathExists(candidate)) {
+                resolvedPath = candidate;
+                break;
+            }
+        }
+        if (!resolvedPath) {
+            res.writeHead(404);
+            return res.end(`// File not found: ${filePath}`);
+        }
+        try {
+            let code = await fs_extra_1.default.readFile(resolvedPath, 'utf8');
+            // Rewrite bare imports → /@modules/*
+            code = code
+                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_m, dep) => `from "/@modules/${dep}"`)
+                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_m, dep) => `import("/@modules/${dep}")`);
+            for (const p of plugins)
+                if (p.onTransform)
+                    code = await p.onTransform(code, resolvedPath);
+            const ext = path_1.default.extname(resolvedPath);
+            let loader = 'js';
+            if (ext === '.ts')
+                loader = 'ts';
+            else if (ext === '.tsx')
+                loader = 'tsx';
+            else if (ext === '.jsx')
+                loader = 'jsx';
+            const result = await esbuild_1.default.transform(code, {
+                loader,
+                sourcemap: 'inline',
+                target: 'es2020',
+            });
+            res.setHeader('Content-Type', 'application/javascript');
+            res.end(result.code);
+        }
+        catch (err) {
+            const e = err;
+            console.error(chalk_1.default.red(`⚠️ Transform failed: ${e.message}`));
+            res.writeHead(500);
+            res.end(`// Error: ${e.message}`);
+        }
     });
-    // --- Serve static assets (favicon, /public, etc.)
+    // 🖼️ Serve static assets (favicon + public)
     app.use(async (req, res, next) => {
         if (!req.url)
             return next();
-        const assetPath = decodeURIComponent(req.url.split('?')[0]);
         const publicDir = path_1.default.join(appRoot, 'public');
-        const rootFile = path_1.default.join(appRoot, assetPath);
-        const publicFile = path_1.default.join(publicDir, assetPath);
-        let targetFile = null;
-        if (await fs_extra_1.default.pathExists(publicFile))
-            targetFile = publicFile;
-        else if (await fs_extra_1.default.pathExists(rootFile))
-            targetFile = rootFile;
-        if (!targetFile)
+        const targetFile = path_1.default.join(publicDir, decodeURIComponent(req.url.split('?')[0]));
+        if (!(await fs_extra_1.default.pathExists(targetFile)))
             return next();
         const stat = await fs_extra_1.default.stat(targetFile);
         if (!stat.isFile())
             return next();
-        const etag = `"${stat.size}-${stat.mtimeMs}"`;
-        if (req.headers['if-none-match'] === etag) {
-            res.writeHead(304);
-            return res.end();
-        }
-        res.setHeader('Cache-Control', 'public, max-age=3600');
-        res.setHeader('ETag', etag);
         res.setHeader('Content-Type', getMimeType(targetFile));
         fs_extra_1.default.createReadStream(targetFile).pipe(res);
     });
-    // --- Serve index.html with overlay + HMR
+    // 🧩 Serve index.html + overlay + HMR
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
@@ -310,29 +288,7 @@ async function dev() {
         }
         let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
         html = html.replace('</body>', `
-      <script>
-        (() => {
-          const style = document.createElement('style');
-          style.textContent = \`
-            .rc-overlay {
-              position: fixed; inset: 0;
-              background: rgba(0,0,0,0.9); color:#fff;
-              font-family: monospace; padding:2rem; overflow:auto;
-              z-index:999999; white-space:pre-wrap;
-            }
-          \`;
-          document.head.appendChild(style);
-          window.showErrorOverlay = (err) => {
-            window.clearErrorOverlay?.();
-            const el = document.createElement('div');
-            el.className = 'rc-overlay';
-            el.innerHTML = '<h2>🚨 Error</h2><pre>' + (err.message || err) + '</pre>';
-            document.body.appendChild(el);
-            window.__overlay = el;
-          };
-          window.clearErrorOverlay = () => window.__overlay?.remove();
-        })();
-      </script>
+      <script type="module" src="/@runtime/overlay-runtime.js"></script>
       <script type="module">
         const ws = new WebSocket("ws://" + location.host);
         ws.onmessage = (e) => {
@@ -349,7 +305,7 @@ async function dev() {
         res.setHeader('Content-Type', 'text/html');
         res.end(html);
     });
-    // --- Watchers for HMR + favicon reload
+    // ♻️ Watchers
     chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', (file) => {
         console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
         transformCache.delete(file);
@@ -359,11 +315,11 @@ async function dev() {
         });
     });
     chokidar_1.default
-        .watch(path_1.default.join(appRoot, 'public', 'favicon.ico'), { ignoreInitial: true })
+        .watch(path_1.default.join(appRoot, 'src/runtime/overlay-runtime.js'), { ignoreInitial: true })
         .on('change', () => {
+        console.log(chalk_1.default.magenta('♻️ Overlay runtime updated — reloading browser...'));
         broadcaster.broadcast({ type: 'reload' });
     });
-    // --- Start server
     server.listen(port, async () => {
         const url = `http://localhost:${port}`;
         console.log(chalk_1.default.cyan.bold('\n🚀 React Client Dev Server'));

package/dist/cli/commands/preview.js

@@ -4,54 +4,161 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = preview;
-const connect_1 = __importDefault(require("connect"));
-const serve_static_1 = __importDefault(require("serve-static"));
 const http_1 = __importDefault(require("http"));
 const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const chalk_1 = __importDefault(require("chalk"));
 const detect_port_1 = __importDefault(require("detect-port"));
 const prompts_1 = __importDefault(require("prompts"));
-const chalk_1 = __importDefault(require("chalk"));
 const open_1 = __importDefault(require("open"));
-const fs_extra_1 = __importDefault(require("fs-extra"));
 const loadConfig_1 = require("../../utils/loadConfig");
+const MIME = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'application/javascript; charset=utf-8',
+    '.mjs': 'application/javascript; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.map': 'application/octet-stream',
+    '.txt': 'text/plain; charset=utf-8',
+};
+function contentType(file) {
+    return MIME[path_1.default.extname(file).toLowerCase()] || 'application/octet-stream';
+}
+function setCachingHeaders(res, stat) {
+    // Short cache for preview by default, but set ETag/Last-Modified so browsers behave nicely
+    const etag = `${stat.size}-${Date.parse(stat.mtime.toString())}`;
+    res.setHeader('ETag', etag);
+    res.setHeader('Last-Modified', stat.mtime.toUTCString());
+    res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate');
+}
 async function preview() {
-    const root = process.cwd();
-    const config = await (0, loadConfig_1.loadReactClientConfig)(root);
-    const appRoot = path_1.default.resolve(root, config.root || '.');
-    const outDir = path_1.default.join(appRoot, config.build?.outDir || '.react-client/build');
-    const defaultPort = config.server?.port || 2202;
-    if (!fs_extra_1.default.existsSync(outDir)) {
-        console.error(chalk_1.default.red(`❌ Build output not found at: ${outDir}`));
-        console.log(chalk_1.default.gray('Please run `react-client build` first.'));
+    const cwd = process.cwd();
+    const config = await (0, loadConfig_1.loadReactClientConfig)(cwd);
+    const appRoot = path_1.default.resolve(cwd, config.root || '.');
+    const outDir = path_1.default.join(appRoot, config.build?.outDir || 'dist');
+    const indexHtml = path_1.default.join(outDir, 'index.html');
+    if (!(await fs_extra_1.default.pathExists(outDir))) {
+        console.error(chalk_1.default.red(`❌ Preview directory not found: ${outDir}`));
         process.exit(1);
     }
-    const availablePort = await (0, detect_port_1.default)(defaultPort);
-    const port = availablePort;
-    if (availablePort !== defaultPort) {
-        const res = await (0, prompts_1.default)({
+    if (!(await fs_extra_1.default.pathExists(indexHtml))) {
+        console.warn(chalk_1.default.yellow(`⚠️ index.html not found in ${outDir}. SPA fallback will be disabled.`));
+    }
+    const defaultPort = config.server?.port || 4173;
+    const port = await (0, detect_port_1.default)(defaultPort);
+    if (port !== defaultPort) {
+        const r = await (0, prompts_1.default)({
             type: 'confirm',
             name: 'useNewPort',
-            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
             initial: true,
+            message: `Port ${defaultPort} is occupied. Use ${port} instead?`,
         });
-        if (!res.useNewPort) {
-            console.log(chalk_1.default.red('🛑 Preview server cancelled.'));
+        if (!r.useNewPort) {
+            console.log('🛑 Preview cancelled.');
             process.exit(0);
         }
     }
-    const app = (0, connect_1.default)();
-    app.use((0, serve_static_1.default)(outDir));
-    const server = http_1.default.createServer(app);
+    const server = http_1.default.createServer(async (req, res) => {
+        try {
+            const url = req.url || '/';
+            // normalize and protect
+            const relPath = decodeURIComponent(url.split('?')[0]);
+            if (relPath.includes('..')) {
+                res.writeHead(400);
+                return res.end('Invalid request');
+            }
+            // handle root -> index.html
+            let filePath = path_1.default.join(outDir, relPath);
+            const tryIndexFallback = async () => {
+                if (await fs_extra_1.default.pathExists(indexHtml)) {
+                    const stat = await fs_extra_1.default.stat(indexHtml);
+                    setCachingHeaders(res, stat);
+                    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+                    return fs_extra_1.default.createReadStream(indexHtml).pipe(res);
+                }
+                else {
+                    res.writeHead(404);
+                    return res.end('Not found');
+                }
+            };
+            // If the request path is a directory, try index.html inside it
+            if (relPath.endsWith('/')) {
+                const candidate = path_1.default.join(filePath, 'index.html');
+                if (await fs_extra_1.default.pathExists(candidate)) {
+                    filePath = candidate;
+                }
+                else {
+                    return tryIndexFallback();
+                }
+            }
+            // If file doesn't exist, fallback to index.html for SPA routes
+            if (!(await fs_extra_1.default.pathExists(filePath))) {
+                // If request appears to be a static asset (has extension), return 404
+                if (path_1.default.extname(filePath)) {
+                    res.writeHead(404);
+                    return res.end('Not found');
+                }
+                return tryIndexFallback();
+            }
+            const stat = await fs_extra_1.default.stat(filePath);
+            if (!stat.isFile()) {
+                return tryIndexFallback();
+            }
+            // Compression/Precompressed support: prefer brotli -> gzip -> raw
+            const accept = (req.headers['accept-encoding'] || '');
+            const tryPrecompressed = async () => {
+                if (accept.includes('br') && (await fs_extra_1.default.pathExists(filePath + '.br'))) {
+                    res.setHeader('Content-Encoding', 'br');
+                    res.setHeader('Content-Type', contentType(filePath));
+                    setCachingHeaders(res, stat);
+                    return fs_extra_1.default.createReadStream(filePath + '.br').pipe(res);
+                }
+                if (accept.includes('gzip') && (await fs_extra_1.default.pathExists(filePath + '.gz'))) {
+                    res.setHeader('Content-Encoding', 'gzip');
+                    res.setHeader('Content-Type', contentType(filePath));
+                    setCachingHeaders(res, stat);
+                    return fs_extra_1.default.createReadStream(filePath + '.gz').pipe(res);
+                }
+                // default
+                res.setHeader('Content-Type', contentType(filePath));
+                setCachingHeaders(res, stat);
+                return fs_extra_1.default.createReadStream(filePath).pipe(res);
+            };
+            // ETag / If-None-Match handling
+            const etag = `${stat.size}-${Date.parse(stat.mtime.toString())}`;
+            const inm = req.headers['if-none-match'];
+            if (inm && inm.toString() === etag) {
+                res.writeHead(304);
+                return res.end();
+            }
+            return tryPrecompressed();
+        }
+        catch (err) {
+            const e = err;
+            console.error('Preview server error:', e);
+            res.writeHead(500);
+            res.end('Internal Server Error');
+        }
+    });
     server.listen(port, async () => {
         const url = `http://localhost:${port}`;
-        console.log(chalk_1.default.green(`\n🌐 Preview 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 preview'));
+        console.log(chalk_1.default.gray('────────────────────────'));
+        console.log(chalk_1.default.green(`Serving: ${outDir}`));
+        console.log(chalk_1.default.green(`Open: ${url}`));
         await (0, open_1.default)(url, { newInstance: true });
     });
     process.on('SIGINT', () => {
-        console.log(chalk_1.default.red('\n🛑 Shutting down preview server...'));
+        console.log(chalk_1.default.red('\n🛑 Shutting down preview...'));
         server.close();
         process.exit(0);
     });

package/package.json

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