react-client 1.0.6 → 1.0.8

package/dist/utils/loadConfig.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadReactClientConfig = loadReactClientConfig;
+const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const url_1 = require("url");
+const chalk_1 = __importDefault(require("chalk"));
+/**
+ * Dynamically load react-client.config.(js|mjs|ts)
+ * from the user project, not the CLI’s own folder.
+ */
+async function loadReactClientConfig(cwd) {
+    let projectRoot = cwd;
+    try {
+        // 🧭 Detect if running inside react-client source repo
+        const pkgPath = path_1.default.join(cwd, 'package.json');
+        if (fs_extra_1.default.existsSync(pkgPath)) {
+            const pkgJson = JSON.parse(await fs_extra_1.default.readFile(pkgPath, 'utf8'));
+            if (pkgJson.name === 'react-client') {
+                // Running CLI locally — auto-switch into example project (if found)
+                const myappPath = path_1.default.join(cwd, 'myapp');
+                if (fs_extra_1.default.existsSync(myappPath)) {
+                    console.log(chalk_1.default.gray('🧩 Detected local CLI environment, using ./myapp as root.'));
+                    projectRoot = myappPath;
+                }
+            }
+        }
+        // 🔍 Possible config file names (prefer .js for Node compatibility)
+        const filenames = [
+            'react-client.config.js',
+            'react-client.config.mjs',
+            'react-client.config.ts',
+        ];
+        let configFile = null;
+        for (const name of filenames) {
+            const file = path_1.default.join(projectRoot, name);
+            if (fs_extra_1.default.existsSync(file)) {
+                configFile = file;
+                break;
+            }
+        }
+        if (!configFile) {
+            console.log(chalk_1.default.gray('ℹ️ No react-client.config.js found, using defaults.'));
+            return {};
+        }
+        // 🧩 Import dynamically using file://
+        const fileUrl = (0, url_1.pathToFileURL)(configFile).href;
+        // If TypeScript file, try to compile it temporarily using esbuild
+        if (configFile.endsWith('.ts')) {
+            const esbuild = await Promise.resolve().then(() => __importStar(require('esbuild')));
+            const outFile = path_1.default.join(projectRoot, '.react-client.temp.config.js');
+            await esbuild.build({
+                entryPoints: [configFile],
+                outfile: outFile,
+                format: 'esm',
+                platform: 'node',
+                bundle: true,
+                write: true,
+            });
+            const mod = await Promise.resolve(`${(0, url_1.pathToFileURL)(outFile).href}`).then(s => __importStar(require(s)));
+            await fs_extra_1.default.remove(outFile);
+            console.log(chalk_1.default.green(`🧩 Loaded config from ${path_1.default.basename(configFile)}`));
+            return mod.default || mod;
+        }
+        // Normal .js or .mjs import
+        const mod = await Promise.resolve(`${fileUrl}`).then(s => __importStar(require(s)));
+        console.log(chalk_1.default.green(`🧩 Loaded config from ${path_1.default.basename(configFile)}`));
+        return mod.default || mod;
+    }
+    catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        console.error(chalk_1.default.red(`❌ Failed to load react-client.config: ${msg}`));
+        return {};
+    }
+}

package/package.json

@@ -1,43 +1,61 @@
 {
   "name": "react-client",
-  "version": "1.0.6",
-  "description": "react-client is a lightweight CLI and runtime for building React apps with fast iteration. It is designed to be esbuild-based, Node-native, and modular like Vite/Next.js with SSR, HMR, Tailwind, CSS Modules, and generators.",
+  "version": "1.0.8",
+  "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.",
+  "license": "MIT",
+  "author": "Venkatesh Sundaram",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/venkateshsundaram/react-client.git"
+  },
+  "bugs": {
+    "url": "https://github.com/venkateshsundaram/react-client/issues"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "files": [
-    "dist"
-  ],
   "bin": {
     "react-client": "dist/cli/index.js"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/venkateshsundaram/react-client.git"
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./config": {
+      "import": "./dist/config.js",
+      "require": "./dist/config.js",
+      "types": "./dist/config.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "dist/config.d.ts"
+      ]
+    }
   },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "workspaces": [
+    "templates/*"
+  ],
   "keywords": [
     "react",
-    "javascript",
     "typescript",
     "cli",
     "react-cli",
-    "react-client",
+    "framework",
+    "hmr",
     "ssr",
     "esbuild",
-    "tailwind",
-    "css-modules",
-    "hmr",
-    "framework",
-    "tooling"
+    "tooling",
+    "vite-alternative",
+    "fast-refresh"
   ],
-  "author": "venkateshsundaram",
-  "license": "MIT",
-  "workspaces": [
-    "templates/*"
-  ],
-  "bugs": {
-    "url": "https://github.com/venkateshsundaram/react-client/issues"
-  },
   "scripts": {
     "clean": "rm -rf dist",
     "compile": "tsc -p tsconfig.build.json",
@@ -46,6 +64,7 @@
     "build:ssr": "node dist/cli/index.js build:ssr",
     "dev": "node dist/cli/index.js dev",
     "prepare": "npm run compile",
+    "precommit": "lint-staged",
     "lint": "eslint . --ext .ts",
     "format": "prettier --write \"src/**/*.ts\"",
     "format:check": "prettier --check \"src/**/*.ts\"",
@@ -55,29 +74,49 @@
     "test": "jest",
     "typecheck": "tsc --noEmit"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.ts": [
       "eslint --fix",
       "prettier --write"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
     ]
   },
+  "dependencies": {
+    "@jridgewell/trace-mapping": "^0.3.31",
+    "chalk": "^4.1.2",
+    "chokidar": "^4.0.3",
+    "commander": "^14.0.2",
+    "connect": "^3.7.0",
+    "detect-port": "^2.1.0",
+    "esbuild": "^0.25.12",
+    "fs-extra": "^11.3.2",
+    "open": "^8.4.2",
+    "prismjs": "^1.30.0",
+    "prompts": "^2.4.2",
+    "react-refresh": "^0.14.0",
+    "serve-static": "^1.15.0",
+    "ws": "^8.18.3"
+  },
   "devDependencies": {
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@types/commander": "^2.12.0",
+    "@types/connect": "^3.4.38",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.0.0",
+    "@types/prompts": "^2.4.9",
+    "@types/serve-static": "^1.15.5",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
     "eslint": "^8.0.0",
@@ -91,10 +130,5 @@
     "standard-version": "^9.5.0",
     "ts-jest": "^29.0.0",
     "typescript": "^5.3.0"
-  },
-  "dependencies": {
-    "commander": "^14.0.2",
-    "fs-extra": "^11.1.1",
-    "esbuild": "^0.25.12"
   }
 }

package/templates/react/index.html

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

package/templates/react/package.json

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

package/templates/react/src/App.jsx

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

package/templates/react/src/main.jsx

@@ -0,0 +1 @@
+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/index.html

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

package/templates/react-ssr/package.json

@@ -0,0 +1,14 @@
+{
+  "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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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

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

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

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

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

@@ -0,0 +1,21 @@
+{
+  "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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,3 @@
+
+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-ssr-ts/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "lib": [
+      "DOM",
+      "ES2020"
+    ],
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}

package/templates/react-tailwind/index.html

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

package/templates/react-tailwind/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "template-react-tailwind",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "react-client dev",
+    "build": "react-client build",
+    "preview": "react-client preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.0.0",
+    "esbuild": "^0.25.12",
+    "postcss": "^8.0.0",
+    "tailwindcss": "^3.0.0"
+  }
+}

package/templates/react-tailwind/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };

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

@@ -0,0 +1 @@
+export default ()=> <div className='p-8'><h1 className='text-2xl'>Tailwind</h1></div>;

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

@@ -0,0 +1 @@
+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/tailwind.config.cjs

@@ -0,0 +1 @@
+module.exports = { content: ['./index.html','./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {} }, plugins: [] };

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

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

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

@@ -0,0 +1,24 @@
+{
+  "name": "template-react-tailwind-ts",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "react-client dev",
+    "build": "react-client build",
+    "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",
+    "autoprefixer": "^10.0.0",
+    "esbuild": "^0.25.12",
+    "postcss": "^8.0.0",
+    "react-refresh": "^0.14.0",
+    "tailwindcss": "^3.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/react-tailwind-ts/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };

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

@@ -0,0 +1,2 @@
+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/App.tsx

@@ -0,0 +1,2 @@
+
+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/index.css

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

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

@@ -0,0 +1,7 @@
+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, {}));

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

@@ -0,0 +1,8 @@
+
+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/tailwind.config.cjs

@@ -0,0 +1 @@
+module.exports = { content: ['./index.html','./src/**/*.{js,jsx,ts,tsx}'], theme: { extend:{} }, plugins: [] };

package/templates/react-tailwind-ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "lib": [
+      "DOM",
+      "ES2020"
+    ],
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true
+  }
+}

package/templates/react-ts/index.html

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

package/templates/react-ts/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "template-react-ts",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "react-client dev",
+    "build": "react-client build",
+    "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",
+    "typescript": "^5.0.0"
+  }
+}

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

@@ -0,0 +1 @@
+export default function App(){ return <div>Hello React TS</div>; }

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

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