react-client 1.0.9 → 1.0.10

package/README.md

@@ -76,8 +76,6 @@ export default defineConfig({
 |-----------|-------------|
 | `react` | JavaScript SPA |
 | `react-ts` | TypeScript SPA |
-| `react-ssr` | JavaScript SSR |
-| `react-ssr-ts` | TypeScript SSR |
 | `react-tailwind` | JS + Tailwind |
 | `react-tailwind-ts` | TS + Tailwind |
 
@@ -94,8 +92,6 @@ Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
 - 💬 **Auto Port Detection** — Prompts when default port 5173 is occupied  
 - 🧠 **Smart Config Loader** — Detects project root, compiles `.ts` configs dynamically  
 - 🎨 **PrismJS Highlighting** — For pretty overlay code frames  
-- 🧱 **SSR Runtime Support** — For server-side templates (`react-ssr*`)  
-- 🧩 **Generators** — Create components, routes, and tests instantly  
 - 🔌 **Plugin Hook System** — Extendable with `configResolved`, `transform`, `buildEnd`  
 
 ---
@@ -200,21 +196,3 @@ Found an issue or have a feature request?
 ## 🪪 License
 
 **MIT Licensed** © [Venkatesh Sundaram](https://github.com/venkateshsundaram)
-
----
-
-## 🗺️ Architecture Overview (Bonus)
-
-```text
- ┌───────────────────────────┐
- │ react-client (CLI)        │
- │  ├── esbuild (watch/bundle)
- │  ├── connect (dev server)
- │  ├── websocket (HMR)
- │  ├── prismjs overlay
- │  └── chokidar (file watch)
- └───────────────────────────┘
-             │
-             ▼
-   Browser ↔ Live HMR + Overlay
-```

package/dist/cli/commands/dev.js

@@ -80,8 +80,13 @@ async function dev() {
         outdir: outDir,
         define: { 'process.env.NODE_ENV': '"development"' },
         loader: { '.ts': 'ts', '.tsx': 'tsx', '.js': 'jsx', '.jsx': 'jsx' },
+        entryNames: '[name]', // ✅ output main.js (not src/main.js)
+        assetNames: 'assets/[name]',
     });
     await ctx.watch();
+    console.log(chalk_1.default.gray('📦 Watching and building dev bundle...'));
+    console.log(chalk_1.default.gray('   Output dir:'), chalk_1.default.blue(outDir));
+    console.log(chalk_1.default.gray('   Entry file:'), chalk_1.default.yellow(entry));
     // 🌐 connect server
     const app = (0, connect_1.default)();
     // 🛡 Security headers
@@ -90,19 +95,20 @@ async function dev() {
         res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
         next();
     });
-    // 1️⃣ Serve react-refresh runtime with browser-safe shim
+    // 1️⃣ Serve react-refresh runtime with safe browser shim
     app.use('/@react-refresh', async (_req, res) => {
         const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
         const shim = `
       // React Refresh browser shims
       window.process = window.process || { env: { NODE_ENV: 'development' } };
       window.module = { exports: {} };
-      window.global = window; // ensure global scope for refresh
+      window.global = window;
+      window.require = () => window.module.exports;
     `;
         res.setHeader('Content-Type', 'application/javascript');
         res.end(shim + '\n' + runtime);
     });
-    // 2️⃣ Serve PrismJS (for code frame overlay)
+    // 2️⃣ Serve PrismJS for code highlighting (overlay)
     app.use('/@prismjs', async (_req, res) => {
         const prismPath = require.resolve('prismjs/prism.js');
         const css = await fs_extra_1.default.readFile(require.resolve('prismjs/themes/prism-tomorrow.css'), 'utf8');
@@ -165,7 +171,7 @@ async function dev() {
             res.end(JSON.stringify({ error: msg }));
         }
     });
-    // 4️⃣ Serve HTML and inject overlay + HMR
+    // 4️⃣ Serve index.html with injected refresh + HMR
     app.use(async (req, res, next) => {
         if (req.url === '/' || req.url === '/index.html') {
             if (!fs_extra_1.default.existsSync(indexHtml)) {
@@ -174,10 +180,7 @@ async function dev() {
                 return;
             }
             let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
-            // Ensure main entry reference
-            html = html.replace(/<script[^>]*src="\/bundle\.js"[^>]*><\/script>/, '');
             html = html.replace('</body>', `
-        <script type="module" src="/main.js"></script>
         <script type="module">
           import "/@react-refresh";
           import "/@prismjs";
@@ -204,8 +207,17 @@ async function dev() {
             res.setHeader('Content-Type', 'text/html');
             res.end(html);
         }
-        else
-            next();
+        else {
+            // ✅ Serve compiled output files
+            const filePath = path_1.default.join(outDir, req.url || '');
+            if (await fs_extra_1.default.pathExists(filePath)) {
+                const content = await fs_extra_1.default.readFile(filePath);
+                res.setHeader('Content-Type', 'application/javascript');
+                res.end(content);
+            }
+            else
+                next();
+        }
     });
     const server = http_1.default.createServer(app);
     const wss = new ws_1.WebSocketServer({ server });

package/dist/cli/index.js

@@ -9,10 +9,8 @@ const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const chalk_1 = __importDefault(require("chalk"));
 const init_1 = __importDefault(require("./commands/init"));
-const generate_1 = __importDefault(require("./commands/generate"));
 const dev_1 = __importDefault(require("./commands/dev"));
 const build_1 = __importDefault(require("./commands/build"));
-const build_ssr_1 = __importDefault(require("./commands/build.ssr"));
 const preview_1 = __importDefault(require("./commands/preview"));
 // Load package.json version dynamically
 const pkgPath = path_1.default.resolve(__dirname, '../../package.json');
@@ -23,7 +21,7 @@ const pkg = fs_extra_1.default.existsSync(pkgPath)
 function showBanner(cmd) {
     const title = chalk_1.default.bold.cyan('⚡ React Client');
     const version = chalk_1.default.gray(`v${pkg.version}`);
-    const tagline = chalk_1.default.dim('Fast esbuild-based React CLI with HMR, SSR & Overlay');
+    const tagline = chalk_1.default.dim('Fast esbuild-based React CLI with HMR & Overlay');
     const line = chalk_1.default.gray('──────────────────────────────────────────────────────────────');
     console.log(`\n${title} ${version}`);
     console.log(tagline);
@@ -32,18 +30,12 @@ function showBanner(cmd) {
         case 'init':
             console.log(chalk_1.default.cyan('📦 Initializing new React project...\n'));
             break;
-        case 'generate':
-            console.log(chalk_1.default.white('✨ Generating boilerplate files...\n'));
-            break;
         case 'dev':
             console.log(chalk_1.default.green('🚀 Starting development server...\n'));
             break;
         case 'build':
             console.log(chalk_1.default.yellow('🏗️  Building for production...\n'));
             break;
-        case 'build:ssr':
-            console.log(chalk_1.default.magenta('🧱 Building for server-side rendering (SSR)...\n'));
-            break;
         case 'preview':
             console.log(chalk_1.default.blue('🌐 Starting production preview server...\n'));
             break;
@@ -69,17 +61,6 @@ program
     showBanner('init');
     (0, init_1.default)(name, opts);
 });
-program
-    .command('generate <kind> <name>')
-    .alias('g')
-    .option('-p, --path <path>', 'output path')
-    .option('--no-ts', 'generate JS instead of TS')
-    .option('-f, --force', 'overwrite if exists')
-    .description('generate components, pages, or stores')
-    .action((kind, name, opts) => {
-    showBanner('generate');
-    (0, generate_1.default)(kind, name, opts);
-});
 program
     .command('dev')
     .description('start dev server (with React Fast Refresh)')
@@ -94,13 +75,6 @@ program
     showBanner('build');
     (0, build_1.default)();
 });
-program
-    .command('build:ssr')
-    .description('build for server-side rendering (SSR)')
-    .action(() => {
-    showBanner('build:ssr');
-    (0, build_ssr_1.default)();
-});
 program
     .command('preview')
     .description('preview production build')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-client",
-  "version": "1.0.9",
-  "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration. Esbuild-based, Node-native, and modular like Vite/Next.js with SSR, HMR, Tailwind, CSS Modules, and generators.",
+  "version": "1.0.10",
+  "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",
   "repository": {
@@ -51,7 +51,6 @@
     "react-cli",
     "framework",
     "hmr",
-    "ssr",
     "esbuild",
     "tooling",
     "vite-alternative",
@@ -65,7 +64,6 @@
     "compile": "tsc -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
     "build:cli": "node dist/cli/index.js build",
-    "build:ssr": "node dist/cli/index.js build:ssr",
     "dev": "node dist/cli/index.js dev",
     "prepare": "npm run compile",
     "lint": "eslint . --ext .ts --max-warnings 0",

package/templates/react/index.html

@@ -1 +1,13 @@
-<!doctype html><html><head><meta charset='utf-8'></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>
+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Client App</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+<body>
+    <div id='root'></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/templates/react/src/App.jsx

@@ -1 +1 @@
-export default ()=> <div>Hello React</div>;
+export default () => <div>Hello React</div>;

package/templates/react/src/main.jsx

@@ -1 +1,6 @@
-import React from 'react';import { createRoot } from 'react-dom/client';import App from './App';const root = createRoot(document.getElementById('root'));root.render(<App/>);
+import React from 'react'; 
+import { createRoot } from 'react-dom/client';
+import App from './App'; 
+
+const root = createRoot(document.getElementById('root')); 
+root.render(<App />);

package/templates/react-tailwind/index.html

@@ -1 +1,13 @@
-<!doctype html><html><head><meta charset='utf-8'></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>
+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Client App</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+<body>
+    <div id='root'></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/templates/react-tailwind/src/App.jsx

@@ -1 +1,3 @@
-export default ()=> <div className='p-8'><h1 className='text-2xl'>Tailwind</h1></div>;
+export default function App() { 
+    return <div className='p-8'><h1 className='text-2xl'>Tailwind</h1><p>Welcome to react-tailwind template.</p></div>; 
+}

package/templates/react-tailwind/src/index.css

@@ -0,0 +1 @@
+@tailwind base;@tailwind components;@tailwind utilities;

package/templates/react-tailwind/src/main.jsx

@@ -1 +1,9 @@
-import React from 'react';import { createRoot } from 'react-dom/client';import App from './App';import './index.css';const root = createRoot(document.getElementById('root'));root.render(<App/>);
+
+import '/@react-refresh-shim';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App/>);

package/templates/react-tailwind-ts/index.html

@@ -1 +1,13 @@
-<!doctype html><html><head><meta charset='utf-8'></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>
+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Client App</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+<body>
+    <div id='root'></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/react-tailwind-ts/src/App.tsx

@@ -1,2 +1,4 @@
 
-export default function App(){ return <div className='p-8'><h1 className='text-2xl font-bold'>Tailwind TS</h1><p>Welcome to react-tailwind-ts template.</p></div>; }
+export default function App() { 
+    return <div className='p-8'><h1 className='text-2xl font-bold'>Tailwind TS</h1><p>Welcome to react-tailwind-ts template.</p></div>; 
+}

package/templates/react-tailwind-ts/src/main.tsx

@@ -4,5 +4,6 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import './index.css';
+
 const root = createRoot(document.getElementById('root')!);
 root.render(<App/>);

package/templates/react-ts/index.html

@@ -1 +1,13 @@
-<!doctype html><html><head><meta charset='utf-8'></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>
+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Client App</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  </head>
+<body>
+    <div id='root'></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/react-ts/src/main.tsx

@@ -1 +1,6 @@
-import React from 'react';import { createRoot } from 'react-dom/client';import App from './App';const root = createRoot(document.getElementById('root')!);root.render(<App/>);
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App/>);

package/templates/{react-ssr-ts → react-ts}/tsconfig.json

@@ -9,7 +9,6 @@
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true
+    "esModuleInterop": true
   }
 }

package/dist/cli/commands/build.ssr.js

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = buildSsr;
-const esbuild_1 = __importDefault(require("esbuild"));
-const path_1 = __importDefault(require("path"));
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const chalk_1 = __importDefault(require("chalk"));
-const loadConfig_1 = require("../../utils/loadConfig");
-async function buildSsr() {
-    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/ssr');
-    console.log(chalk_1.default.cyan(`\n🧱 Building SSR bundle...`));
-    console.log(chalk_1.default.gray(`Root: ${appRoot}`));
-    console.log(chalk_1.default.gray(`Output: ${outDir}\n`));
-    const entry = path_1.default.join(appRoot, 'src', 'server.tsx');
-    if (!fs_extra_1.default.existsSync(entry)) {
-        console.error(chalk_1.default.red('❌ SSR entry not found: src/server.tsx'));
-        process.exit(1);
-    }
-    await fs_extra_1.default.ensureDir(outDir);
-    try {
-        await esbuild_1.default.build({
-            entryPoints: [entry],
-            bundle: true,
-            platform: 'node',
-            format: 'esm',
-            target: 'node18',
-            external: ['react', 'react-dom'],
-            outdir: outDir,
-            define: { 'process.env.NODE_ENV': '"production"' },
-            loader: { '.ts': 'ts', '.tsx': 'tsx' },
-        });
-        console.log(chalk_1.default.green(`✅ SSR build completed successfully!`));
-        console.log(chalk_1.default.gray(`Output directory: ${outDir}`));
-    }
-    catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        console.error('❌ SSR build failed:', msg);
-        process.exit(1);
-    }
-}

package/dist/cli/commands/generate.js

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = generate;
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
-const string_1 = require("../../utils/string");
-async function generate(kind, name, opts = {}) {
-    const root = process.cwd();
-    const useTS = opts.ts !== false && opts['no-ts'] !== true;
-    if (kind === 'component') {
-        const pascal = (0, string_1.pascalCase)(name);
-        const dir = path_1.default.join(root, opts.path || 'src/components');
-        await fs_extra_1.default.ensureDir(dir);
-        const ext = useTS ? 'tsx' : 'jsx';
-        const compPath = path_1.default.join(dir, `${pascal}.${ext}`);
-        const css = path_1.default.join(dir, `${pascal}.module.css`);
-        await fs_extra_1.default.writeFile(compPath, `import React from 'react';\nimport styles from './${pascal}.module.css';\nexport default function ${pascal}(){ return <div className={styles.root}>${pascal}</div>; }\n`);
-        await fs_extra_1.default.writeFile(css, `.root{display:block}`);
-        console.log('Created component', compPath);
-        return;
-    }
-    if (kind === 'route') {
-        const parts = name.replace(/^\//, '').split('/').filter(Boolean);
-        const pages = path_1.default.join(root, 'src', 'pages', ...parts.slice(0, -1));
-        await fs_extra_1.default.ensureDir(pages);
-        const last = parts[parts.length - 1] || 'index';
-        const file = path_1.default.join(pages, last + '.' + (useTS ? 'tsx' : 'jsx'));
-        if (await fs_extra_1.default.pathExists(file)) {
-            console.error('Route exists');
-            return;
-        }
-        const compName = (0, string_1.pascalCase)(parts.join('-') || 'IndexPage');
-        const content = `import React from 'react';\nexport default function ${compName}(){ return (<div style={{padding:20}}><h1>${compName}</h1></div>); }\n`;
-        await fs_extra_1.default.writeFile(file, content, 'utf8');
-        console.log('Created route', file);
-        return;
-    }
-    console.log('Unknown generator', kind);
-}

package/templates/react-ssr/index.html

@@ -1 +0,0 @@
-<!doctype html><html><head><meta charset='utf-8'></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>

package/templates/react-ssr/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "template-react-ssr",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "react-client dev",
-    "build": "react-client build:ssr",
-    "preview": "react-client preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}

package/templates/react-ssr/src/entry-client.jsx

@@ -1 +0,0 @@
-import React from 'react';import { hydrateRoot } from 'react-dom/client';import Home from './pages/index';hydrateRoot(document.getElementById('root'), React.createElement(Home));

package/templates/react-ssr/src/entry-server.jsx

@@ -1 +0,0 @@
-import React from 'react';import { renderToString } from 'react-dom/server';import Home from './pages/index';exports.render = function(url){ const Page = Home; return Promise.resolve(renderToString(React.createElement(Page))); };

package/templates/react-ssr/src/pages/index.jsx

@@ -1 +0,0 @@
-import React from 'react';export default function Home(){ return <div>Home SSR</div>; }

package/templates/react-ssr-ts/index.html

@@ -1 +0,0 @@
-<!doctype html><html><head><meta charset='utf-8' /></head><body><div id='root'></div><script type='module' src='/main.js'></script></body></html>

package/templates/react-ssr-ts/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "my-react-ssr-ts-app",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "react-client dev",
-    "build": "react-client build:ssr",
-    "preview": "react-client preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "esbuild": "^0.25.12",
-    "react-refresh": "^0.14.0",
-    "typescript": "^5.0.0"
-  }
-}

package/templates/react-ssr-ts/src/entry-client.js

@@ -1,5 +0,0 @@
-import '/@react-refresh-shim';
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import Home from './pages/index';
-hydrateRoot(document.getElementById('root'), React.createElement(Home));

package/templates/react-ssr-ts/src/entry-client.tsx

@@ -1,6 +0,0 @@
-
-import '/@react-refresh-shim';
-import React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import Home from './pages/index';
-hydrateRoot(document.getElementById('root')!, React.createElement(Home));

package/templates/react-ssr-ts/src/entry-server.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import Home from './pages/index';
-export async function render(url) { const Page = Home; return renderToString(React.createElement(Page)); }

package/templates/react-ssr-ts/src/entry-server.tsx

@@ -1,5 +0,0 @@
-
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import Home from './pages/index';
-export async function render(url:string){ const Page = Home; return renderToString(React.createElement(Page)); }

package/templates/react-ssr-ts/src/pages/index.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Home() { return _jsxs("div", { style: { padding: 20 }, children: [_jsx("h1", { children: "Home (SSR TS)" }), _jsx("p", { children: "Server-side rendered page." })] }); }

package/templates/react-ssr-ts/src/pages/index.tsx

@@ -1,3 +0,0 @@
-
-import React from 'react';
-export default function Home(){ return <div style={{padding:20}}><h1>Home (SSR TS)</h1><p>Server-side rendered page.</p></div>; }

package/templates/react-tailwind-ts/src/App.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function App() { return _jsxs("div", { className: 'p-8', children: [_jsx("h1", { className: 'text-2xl font-bold', children: "Tailwind TS" }), _jsx("p", { children: "Welcome to react-tailwind-ts template." })] }); }

package/templates/react-tailwind-ts/src/main.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import '/@react-refresh-shim';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './index.css';
-const root = createRoot(document.getElementById('root'));
-root.render(_jsx(App, {}));