react-client 1.0.19 → 1.0.20

package/dist/cli/commands/dev.js

@@ -17,13 +17,46 @@ const child_process_1 = require("child_process");
 const chalk_1 = __importDefault(require("chalk"));
 const loadConfig_1 = require("../../utils/loadConfig");
 const broadcastManager_1 = require("../../server/broadcastManager");
+// 🧠 Browser polyfills for Node built-ins
+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',
+};
+// 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',
+];
 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');
-    const pkgFile = path_1.default.join(appRoot, 'package.json');
     await fs_extra_1.default.ensureDir(cacheDir);
     // Detect entry file
     const possibleEntries = ['src/main.tsx', 'src/main.jsx'];
@@ -33,7 +66,7 @@ async function dev() {
         process.exit(1);
     }
     const indexHtml = path_1.default.join(appRoot, 'index.html');
-    // Detect open port
+    // Detect available port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -48,7 +81,7 @@ async function dev() {
             process.exit(0);
         }
     }
-    // Ensure react-refresh installed
+    // 🧩 Auto-install react-refresh
     try {
         require.resolve('react-refresh/runtime');
     }
@@ -60,6 +93,32 @@ async function dev() {
         });
         console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
     }
+    // 🧩 Auto-install missing polyfill packages
+    const missingPolyfills = POLYFILL_PACKAGES.filter((pkg) => {
+        try {
+            require.resolve(pkg, { 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);
+        }
+    }
     // --- Plugins
     const corePlugins = [
         {
@@ -83,119 +142,73 @@ async function dev() {
     const plugins = [...corePlugins, ...userPlugins];
     const app = (0, connect_1.default)();
     const transformCache = new Map();
-    // 🧠 Deep dependency graph analyzer
-    async function analyzeGraph(file, seen = new Set()) {
-        if (seen.has(file))
-            return seen;
-        seen.add(file);
-        const code = await fs_extra_1.default.readFile(file, 'utf8');
-        const matches = [
-            ...code.matchAll(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g),
-            ...code.matchAll(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g),
-        ];
-        for (const m of matches) {
-            const dep = m[1];
-            if (!dep || dep.startsWith('.') || dep.startsWith('/'))
-                continue;
+    // 🧱 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];
             try {
-                const resolved = require.resolve(dep, { paths: [appRoot] });
-                await analyzeGraph(resolved, seen);
+                entryPath = require.resolve(base, { paths: [appRoot] });
             }
             catch {
-                seen.add(dep); // bare dependency
+                entryPath = null;
             }
         }
-        return seen;
-    }
-    // 📦 Smart prebundle cache (parallelized)
-    async function prebundleDeps(deps) {
-        if (!deps.size)
-            return;
-        const cached = (await fs_extra_1.default.readdir(cacheDir)).map((f) => f.replace('.js', ''));
-        const missing = [...deps].filter((d) => !cached.includes(d));
-        if (!missing.length) {
-            console.log(chalk_1.default.green('✅ All dependencies already prebundled.'));
-            return;
+        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;
+      `;
         }
-        console.log(chalk_1.default.cyan('📦 Prebundling:'), missing.join(', '));
-        await Promise.all(missing.map(async (dep) => {
-            try {
-                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',
-                    outfile: outFile,
-                    write: true,
-                    target: 'es2020',
-                });
-                console.log(chalk_1.default.green(`✅ Cached ${dep}`));
-            }
-            catch (err) {
-                const e = err;
-                console.warn(chalk_1.default.yellow(`⚠️ Skipped ${dep}: ${e.message}`));
-            }
-        }));
+        await fs_extra_1.default.writeFile(cacheFile, finalCode, 'utf8');
+        return finalCode;
     }
-    // 🧩 Prewarm Graph
-    const deps = await analyzeGraph(entry);
-    await prebundleDeps(deps);
-    // Auto rebuild on package.json change
-    chokidar_1.default.watch(pkgFile).on('change', async () => {
-        console.log(chalk_1.default.yellow('📦 package.json changed — rebuilding prebundle cache...'));
-        const newDeps = await analyzeGraph(entry);
-        await prebundleDeps(newDeps);
-    });
-    // --- Serve /@modules/
+    // --- /@modules/
     app.use('/@modules/', async (req, res, next) => {
         const id = req.url?.replace(/^\/(@modules\/)?/, '');
         if (!id)
             return next();
         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));
-            }
-            let entryPath = null;
-            try {
-                entryPath = require.resolve(id, { paths: [appRoot] });
-            }
-            catch {
-                if (id === 'react')
-                    entryPath = require.resolve('react');
-                else if (id === 'react-dom' || id === 'react-dom/client')
-                    entryPath = require.resolve('react-dom');
-            }
-            if (!entryPath)
-                throw new Error(`Module ${id} not found.`);
-            const result = await esbuild_1.default.build({
-                entryPoints: [entryPath],
-                bundle: true,
-                platform: 'browser',
-                format: 'esm',
-                target: 'es2020',
-                write: false,
-            });
-            let code = result.outputFiles[0].text;
-            // 🩹 Fixed react-dom/client shim (no duplicate export)
-            if (id === 'react-dom/client') {
-                code += `
-          // React Client auto-shim for React 18+
-          import * as ReactDOMClient from '/@modules/react-dom';
-          if (!('createRoot' in ReactDOMClient) && ReactDOMClient.default) {
-            Object.assign(ReactDOMClient, ReactDOMClient.default);
-          }
-          export const createRoot =
-            ReactDOMClient.createRoot ||
-            ReactDOMClient.default?.createRoot ||
-            (() => { throw new Error('ReactDOM.createRoot not found'); });
-          export default ReactDOMClient;
-        `;
-            }
-            await fs_extra_1.default.writeFile(cacheFile, code, 'utf8');
+            const code = await buildModuleWithSafeWrapper(id);
             res.setHeader('Content-Type', 'application/javascript');
             res.end(code);
         }
@@ -206,13 +219,13 @@ async function dev() {
             res.end(`// Failed to resolve module ${id}: ${e.message}`);
         }
     });
-    // --- Serve /src files dynamically
+    // --- Universal transform for all project files
     app.use(async (req, res, next) => {
-        if (!req.url || (!req.url.startsWith('/src/') && !req.url.endsWith('.css')))
+        const urlPath = decodeURIComponent(req.url.split('?')[0]);
+        if (urlPath.includes('node_modules'))
             return next();
-        const rawPath = decodeURIComponent(req.url.split('?')[0]);
-        let filePath = path_1.default.join(appRoot, rawPath);
-        const possibleExts = ['', '.tsx', '.ts', '.jsx', '.js'];
+        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;
@@ -223,10 +236,10 @@ async function dev() {
             return next();
         try {
             let code = await fs_extra_1.default.readFile(filePath, 'utf8');
-            // Rewrite bare imports → /@modules/*
+            // Rewrite bare imports
             code = code
-                .replace(/\bfrom\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`)
-                .replace(/\bimport\(['"]([^'".\/][^'"]*)['"]\)/g, (_match, dep) => `import("/@modules/${dep}")`);
+                .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);
@@ -254,7 +267,7 @@ async function dev() {
             res.end(`// Error: ${e.message}`);
         }
     });
-    // --- Serve index.html + overlay + HMR
+    // --- index.html + overlay + HMR
     app.use(async (req, res, next) => {
         if (req.url !== '/' && req.url !== '/index.html')
             return next();
@@ -269,9 +282,9 @@ async function dev() {
           const style = document.createElement('style');
           style.textContent = \`
             .rc-overlay {
-              position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-              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: #ff5555; font-family: monospace;
+              padding: 2rem; overflow:auto; z-index: 999999;
             }
           \`;
           document.head.appendChild(style);
@@ -305,12 +318,13 @@ async function dev() {
     // --- WebSocket + HMR
     const server = http_1.default.createServer(app);
     const broadcaster = new broadcastManager_1.BroadcastManager(server);
-    chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', async (file) => {
+    chokidar_1.default.watch(appRoot, { ignoreInitial: true }).on('change', async (file) => {
+        if (file.includes('node_modules') || file.includes('.react-client'))
+            return;
         console.log(chalk_1.default.yellow(`🔄 Changed: ${file}`));
         transformCache.delete(file);
-        for (const p of plugins) {
+        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, '/'),
@@ -321,6 +335,8 @@ async function dev() {
         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/package.json

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