react-client 1.0.20 → 1.0.21

package/README.md

@@ -59,7 +59,7 @@ import { defineConfig } from 'react-client/config';
 
 export default defineConfig({
   root: './src',
-  server: { port: 5173 },
+  server: { port: 2202 },
   build: { outDir: '.react-client/build' }
 });
 ```
@@ -89,7 +89,7 @@ Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
 - 🔁 **React Fast Refresh (HMR)** — State-preserving reloads  
 - 💥 **Overlay** — Syntax-highlighted stack frames, clickable file links (`vscode://file`)  
 - 🔍 **Source Map Stack Mapping** — Maps runtime errors to original TS/JS source lines  
-- 💬 **Auto Port Detection** — Prompts when default port 5173 is occupied  
+- 💬 **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`  
@@ -142,7 +142,7 @@ npm install react-refresh
 ### ⚠️ Port already in use
 CLI will auto-detect and prompt:
 ```
-Port 5173 is occupied. Use 5174 instead? (Y/n)
+Port 2202 is occupied. Use 5174 instead? (Y/n)
 ```
 
 ### ⚠️ Permission denied

package/dist/cli/commands/dev.js

@@ -1,4 +1,14 @@
 "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
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -15,9 +25,11 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const open_1 = __importDefault(require("open"));
 const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
+const zlib_1 = __importDefault(require("zlib"));
+const crypto_1 = __importDefault(require("crypto"));
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
-// 🧠 Browser polyfills for Node built-ins
+// Node polyfill mapping
 const NODE_POLYFILLS = {
     buffer: 'buffer/',
     process: 'process/browser',
@@ -34,23 +46,36 @@ const NODE_POLYFILLS = {
     querystring: 'querystring-es3',
     zlib: 'browserify-zlib',
 };
-// List of NPM packages required for polyfills
-const POLYFILL_PACKAGES = [
-    'buffer',
-    'process',
-    'path-browserify',
-    'browserify-fs',
-    'os-browserify',
-    'stream-browserify',
-    'util',
-    'url',
-    'assert',
-    'crypto-browserify',
-    'events',
-    'constants-browserify',
-    'querystring-es3',
-    '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();
+    const mime = {
+        '.ico': 'image/x-icon',
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+        '.webp': 'image/webp',
+        '.json': 'application/json',
+        '.txt': 'text/plain',
+        '.js': 'application/javascript',
+        '.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);
@@ -58,66 +83,48 @@ async function dev() {
     const defaultPort = userConfig.server?.port || 5173;
     const cacheDir = path_1.default.join(appRoot, '.react-client', 'deps');
     await fs_extra_1.default.ensureDir(cacheDir);
-    // Detect entry file
+    const indexHtml = path_1.default.join(appRoot, 'index.html');
+    const pkgFile = path_1.default.join(appRoot, 'package.json');
+    // 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);
     }
-    const indexHtml = path_1.default.join(appRoot, 'index.html');
-    // Detect available port
-    const availablePort = await (0, detect_port_1.default)(defaultPort);
-    const port = availablePort;
-    if (availablePort !== defaultPort) {
+    // Detect open port
+    const port = await (0, detect_port_1.default)(defaultPort);
+    if (port !== defaultPort) {
         const res = await (0, prompts_1.default)({
             type: 'confirm',
             name: 'useNewPort',
-            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
+            message: `Port ${defaultPort} is occupied. Use ${port} instead?`,
             initial: true,
         });
-        if (!res.useNewPort) {
-            console.log('🛑 Dev server cancelled.');
+        if (!res.useNewPort)
             process.exit(0);
-        }
     }
-    // 🧩 Auto-install react-refresh
+    // Ensure react-refresh installed
     try {
         require.resolve('react-refresh/runtime');
     }
     catch {
-        console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — installing...'));
-        (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
-            cwd: root,
-            stdio: 'inherit',
-        });
-        console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
+        console.log(chalk_1.default.yellow('Installing react-refresh...'));
+        (0, child_process_1.execSync)('npm i react-refresh --silent', { cwd: root, stdio: 'inherit' });
     }
-    // 🧩 Auto-install missing polyfill packages
-    const missingPolyfills = POLYFILL_PACKAGES.filter((pkg) => {
+    // Ensure Node polyfills installed
+    const missing = Object.keys(NODE_POLYFILLS).filter((m) => {
         try {
-            require.resolve(pkg, { paths: [appRoot] });
+            require.resolve(m, { paths: [appRoot] });
             return false;
         }
         catch {
             return true;
         }
     });
-    if (missingPolyfills.length > 0) {
-        console.log(chalk_1.default.yellow('⚙️ Installing missing polyfill packages...'));
-        console.log(chalk_1.default.gray('📦 ' + missingPolyfills.join(', ')));
-        try {
-            (0, child_process_1.execSync)(`npm install ${missingPolyfills.join(' ')} --no-audit --no-fund --silent`, {
-                cwd: appRoot,
-                stdio: 'inherit',
-            });
-            console.log(chalk_1.default.green('✅ Polyfills installed successfully.'));
-        }
-        catch (err) {
-            console.error(chalk_1.default.red('❌ Failed to install polyfills automatically.'));
-            console.error(err);
-            process.exit(1);
-        }
+    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
     const corePlugins = [
@@ -141,137 +148,163 @@ async function dev() {
     const userPlugins = Array.isArray(userConfig.plugins) ? userConfig.plugins : [];
     const plugins = [...corePlugins, ...userPlugins];
     const app = (0, connect_1.default)();
+    const server = http_1.default.createServer(app);
+    const broadcaster = new broadcastManager_1.BroadcastManager(server);
     const transformCache = new Map();
-    // 🧱 Polyfilled module builder
-    async function buildModuleWithSafeWrapper(id) {
-        const cacheFile = path_1.default.join(cacheDir, id.replace(/\//g, '_') + '.js');
-        if (await fs_extra_1.default.pathExists(cacheFile))
-            return fs_extra_1.default.readFile(cacheFile, 'utf8');
-        // 🧠 Polyfill detection
-        const polyId = NODE_POLYFILLS[id];
-        if (polyId) {
-            console.log(chalk_1.default.gray(`🧩 Using polyfill for ${id}: ${polyId}`));
-            const result = await esbuild_1.default.build({
-                entryPoints: [require.resolve(polyId, { paths: [appRoot] })],
-                bundle: true,
-                platform: 'browser',
-                format: 'esm',
-                target: 'es2020',
-                write: false,
-            });
-            const polyCode = result.outputFiles[0].text;
-            await fs_extra_1.default.writeFile(cacheFile, polyCode, 'utf8');
-            return polyCode;
-        }
-        // 🧱 Normal dependency
-        let entryPath = null;
-        try {
-            entryPath = require.resolve(id, { paths: [appRoot] });
-        }
-        catch {
-            const base = id.split('/')[0];
+    // --- Prebundle deps with gzip/brotli caching
+    async function prebundleDeps() {
+        if (!(await fs_extra_1.default.pathExists(pkgFile)))
+            return;
+        const pkg = JSON.parse(await fs_extra_1.default.readFile(pkgFile, 'utf8'));
+        const deps = Object.keys(pkg.dependencies || {});
+        if (!deps.length)
+            return;
+        const hash = computeHash(JSON.stringify(deps));
+        const metaFile = path_1.default.join(cacheDir, '_meta.json');
+        let prevHash = null;
+        if (await fs_extra_1.default.pathExists(metaFile))
+            prevHash = (await fs_extra_1.default.readJSON(metaFile)).hash;
+        if (prevHash === hash)
+            return;
+        console.log(chalk_1.default.cyan('📦 Rebuilding prebundle cache...'));
+        await Promise.all(deps.map(async (dep) => {
             try {
-                entryPath = require.resolve(base, { paths: [appRoot] });
+                const entryPath = require.resolve(dep, { paths: [appRoot] });
+                const outFile = path_1.default.join(cacheDir, dep + '.js');
+                await esbuild_1.default.build({
+                    entryPoints: [entryPath],
+                    bundle: true,
+                    platform: 'browser',
+                    format: 'esm',
+                    target: 'es2020',
+                    outfile: outFile,
+                    write: true,
+                });
+                const content = await fs_extra_1.default.readFile(outFile);
+                await fs_extra_1.default.writeFile(outFile + '.gz', zlib_1.default.gzipSync(content));
+                await fs_extra_1.default.writeFile(outFile + '.br', zlib_1.default.brotliCompressSync(content));
+                console.log(chalk_1.default.green(`✅ Cached ${dep}`));
             }
-            catch {
-                entryPath = null;
+            catch (e) {
+                const err = e;
+                console.warn(chalk_1.default.yellow(`⚠️ Failed ${dep}: ${err.message}`));
             }
-        }
-        if (!entryPath)
-            throw new Error(`Module ${id} not found (resolve failed)`);
-        const result = await esbuild_1.default.build({
-            entryPoints: [entryPath],
-            bundle: true,
-            platform: 'browser',
-            format: 'esm',
-            target: 'es2020',
-            write: false,
-        });
-        const originalCode = result.outputFiles[0].text;
-        const isSubpath = id.includes('/');
-        let finalCode = originalCode;
-        if (isSubpath) {
-            const base = id.split('/')[0];
-            finalCode += `
-        // --- react-client auto wrapper for subpath: ${id}
-        import * as __base from '/@modules/${base}';
-        export const __rc_dynamic = __base;
-        export default __base.default || __base;
-      `;
-        }
-        await fs_extra_1.default.writeFile(cacheFile, finalCode, 'utf8');
-        return finalCode;
+        }));
+        await fs_extra_1.default.writeJSON(metaFile, { hash });
     }
-    // --- /@modules/
+    await prebundleDeps();
+    chokidar_1.default.watch(pkgFile).on('change', prebundleDeps);
+    // --- 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 {
-            const code = await buildModuleWithSafeWrapper(id);
+            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();
+            }
             res.setHeader('Content-Type', 'application/javascript');
-            res.end(code);
+            res.setHeader('ETag', etag);
+            res.setHeader('Cache-Control', 'no-cache');
+            if (encoding)
+                res.setHeader('Content-Encoding', encoding);
+            res.end(buf);
         }
-        catch (err) {
-            const e = err;
-            console.error(chalk_1.default.red(`❌ Failed to load module ${id}: ${e.message}`));
+        catch (e) {
+            const err = e;
             res.writeHead(500);
-            res.end(`// Failed to resolve module ${id}: ${e.message}`);
+            res.end(`// Failed to resolve module ${id}: ${err.message}`);
         }
     });
-    // --- Universal transform for all project files
+    // --- Serve /src/ files
     app.use(async (req, res, next) => {
-        const urlPath = decodeURIComponent(req.url.split('?')[0]);
-        if (urlPath.includes('node_modules'))
+        if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
             return next();
-        let filePath = path_1.default.join(appRoot, urlPath);
-        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js', '.css'];
-        for (const ext of possibleExts) {
-            if (await fs_extra_1.default.pathExists(filePath + ext)) {
-                filePath += ext;
-                break;
-            }
-        }
+        const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
         if (!(await fs_extra_1.default.pathExists(filePath)))
             return next();
-        try {
-            let code = await fs_extra_1.default.readFile(filePath, 'utf8');
-            // Rewrite bare imports
-            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 ext = path_1.default.extname(filePath);
-            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',
-            });
-            transformCache.set(filePath, result.code);
-            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}`);
+        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);
+    });
+    // --- Serve static assets (favicon, /public, etc.)
+    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)
+            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);
     });
-    // --- index.html + overlay + HMR
+    // --- Serve index.html with overlay + HMR
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
-        if (!fs_extra_1.default.existsSync(indexHtml)) {
+        if (!(await fs_extra_1.default.pathExists(indexHtml))) {
             res.writeHead(404);
             return res.end('index.html not found');
         }
@@ -282,9 +315,10 @@ async function dev() {
           const style = document.createElement('style');
           style.textContent = \`
             .rc-overlay {
-              position: fixed; inset: 0; background: rgba(0,0,0,0.9);
-              color: #ff5555; font-family: monospace;
-              padding: 2rem; overflow:auto; z-index: 999999;
+              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);
@@ -315,28 +349,26 @@ async function dev() {
         res.setHeader('Content-Type', 'text/html');
         res.end(html);
     });
-    // --- WebSocket + HMR
-    const server = http_1.default.createServer(app);
-    const broadcaster = new broadcastManager_1.BroadcastManager(server);
-    chokidar_1.default.watch(appRoot, { ignoreInitial: true }).on('change', async (file) => {
-        if (file.includes('node_modules') || file.includes('.react-client'))
-            return;
+    // --- Watchers for HMR + favicon reload
+    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);
-        for (const p of plugins)
-            await p.onHotUpdate?.(file, { broadcast: (msg) => broadcaster.broadcast(msg) });
         broadcaster.broadcast({
             type: 'update',
             path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/'),
         });
     });
+    chokidar_1.default
+        .watch(path_1.default.join(appRoot, 'public', 'favicon.ico'), { ignoreInitial: true })
+        .on('change', () => {
+        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'));
         console.log(chalk_1.default.gray('──────────────────────────────'));
         console.log(chalk_1.default.green(`⚡ Running at: ${url}`));
-        if (port !== defaultPort)
-            console.log(chalk_1.default.yellow(`⚠️ Using alternate port (default ${defaultPort} occupied)`));
         await (0, open_1.default)(url, { newInstance: true });
     });
     process.on('SIGINT', () => {

package/dist/cli/commands/init.js

@@ -51,7 +51,7 @@ export default defineConfig({
 
   // ⚡ Dev server settings
   server: {
-    port: 5173,
+    port: 2202,
   },
 
   // 🏗️ Build options

package/dist/cli/commands/preview.js

@@ -19,7 +19,7 @@ async function preview() {
     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 || 5173;
+    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.'));

package/package.json

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