react-client 1.0.6 → 1.0.7

package/README.md

@@ -32,6 +32,7 @@ To install the latest stable version, run the following command:
 npm install -g react-client
 react-client init myapp --template react-ts
 cd myapp
+npm install
 npm run dev
 ```
 
@@ -74,6 +75,72 @@ react-client init myapp --template react-ts --with-config
 
 ## Template specifics
 
+### react
+
+- `src/App.jsx` — main app component
+- `src/main.jsx` — client entry that mounts React to the DOM
+- `index.html` — HTML template used by the bundler
+- `package.json` lists `react` and `react-dom` as dependencies and includes devDependencies (esbuild, scripts) for local testing
+
+- `--with-config`: creates `react-client.config.ts` with a minimal `defineConfig({})` stub and helpful comments (dev server port, root) tailored to a client-only app.
+
+```ts
+// react / client-only example
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  build: { outDir: 'dist/client' }
+})
+```
+
+### react-ts
+
+- `src/App.tsx` — main app component (TypeScript + JSX)
+- `src/main.tsx` — client entry (TypeScript) that mounts the app
+- `tsconfig.json` — minimal TypeScript configuration tailored for the template
+- `index.html` — HTML template used by the bundler
+- `package.json` includes `react`, `react-dom` and `devDependencies` like `typescript` and `@types/react`, `@types/react-dom` for local development
+
+- `--with-config`: creates `react-client.config.ts` with a TypeScript-friendly `defineConfig({})` stub (typed imports) and suggested TypeScript-related defaults (e.g., `root`, `esbuild` TS options) comments.
+
+```ts
+// react-ts example (TypeScript-friendly)
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  build: { outDir: 'dist/client' },
+  // TS-specific hints: configure `tsconfig` or esbuild TS options if needed
+})
+```
+
+### react-ssr
+
+- `src/entry-client.jsx` — client hydration entry
+- `src/entry-server.jsx` — server rendering entry (exports `render(url)` or similar API)
+- `src/pages/` — route components used by the SSR renderer
+- `index.html` — base HTML template used by the build system
+- `package.json` lists devDependencies required for local testing (esbuild, react-refresh) and provides scripts for building and running the SSR preview
+
+- `--with-config`: the generated `react-client.config.ts` includes an SSR-focused stub with comments for server entry/port and output directories (hints for `ssr` or `server` options) so you can quickly enable SSR-related plugins.
+
+```ts
+// react-ssr example
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  ssr: {
+    entry: 'src/entry-server.jsx', // change to .tsx for TS template
+    outDir: 'dist/server'
+  }
+})
+```
+
 ### react-ssr-ts
 
 - `src/entry-client.tsx` — client hydration entry
@@ -81,12 +148,68 @@ react-client init myapp --template react-ts --with-config
 - `src/pages/` — route components
 - `index.html` — template used by build system
 - `package.json` lists devDependencies required for local testing (esbuild, react-refresh)
+- `tsconfig.json` and `@types/*` entries are included to support TypeScript development
+
+- `--with-config`: creates a typed `react-client.config.ts` stub that includes notes for SSR/TypeScript integration (server entry, `tsconfig` path, and build output locations) to help you customize server-side rendering options.
+
+```ts
+// react-ssr-ts example (typed)
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  ssr: {
+    entry: 'src/entry-server.tsx',
+    outDir: 'dist/server'
+  },
+  // Tip: point to `tsconfig.json` or adjust esbuild TS options if you customize builds
+})
+```
+
+### react-tailwind
+
+- `postcss.config.cjs` and `tailwind.config.cjs` included
+- `src/index.css` with Tailwind directives (`@tailwind base; @tailwind components; @tailwind utilities;`)
+- `index.html` and JS entries (`src/main.jsx`, `src/App.jsx`) wired to import the generated CSS
+- `package.json` includes Tailwind/PostCSS devDependencies (install locally in the app)
+
+- `--with-config`: creates `react-client.config.ts` containing a minimal stub plus a Tailwind hint block that shows how to enable/inject PostCSS/Tailwind processing (for example enabling the PostCSS plugin or pointing to `postcss.config.cjs`).
+
+```ts
+// react-tailwind example
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  css: {
+    postcssConfig: 'postcss.config.cjs'
+  }
+})
+```
 
 ### react-tailwind-ts
 
 - `postcss.config.cjs` and `tailwind.config.cjs` included
 - `src/index.css` with Tailwind directives
-- `package.json` includes tailwind/postcss devDependencies (install locally in the app)
+- `src/App.tsx` / `src/main.tsx` — TypeScript entry points that import the CSS
+- `tsconfig.json` provided for TypeScript templates
+- `package.json` includes Tailwind/PostCSS devDependencies (install locally in the app)
+
+- `--with-config`: generates a TypeScript `react-client.config.ts` stub that includes comments about wiring PostCSS/Tailwind and TypeScript settings (where to find `postcss.config.cjs` and `tsconfig.json`) to get Tailwind configured quickly.
+
+```ts
+// react-tailwind-ts example
+import { defineConfig } from 'react-client'
+
+export default defineConfig({
+  root: '.',
+  server: { port: 3000 },
+  css: { postcssConfig: 'postcss.config.cjs' },
+  // TypeScript hint: adjust tsconfig or esbuild options as needed
+})
+```
 
 ## How the CLI wires features
 
@@ -130,7 +253,7 @@ Development of react-client happens in the open on GitHub, and we are grateful t
 
 ## Publishing
 
-Before pushing your changes to Github, make sure that `version` in `package.json` is changed to newest version. Then run `npm install` for synchronize it to `package-lock.json` and `pnpm install` for synchronize it to `pnpm-lock.yaml`
+Before pushing your changes to Github, make sure that `version` in `package.json` is changed to newest version. Then run `npm install` to synchronize `package-lock.json`
 
 ## Feedbacks and Issues
 

package/dist/cli/commands/init.js

@@ -36,6 +36,25 @@ async function init(name, opts = {}) {
         process.exit(1);
     }
     await fs_extra_1.default.copy(tpl, root);
+    // If the template contains a package.json, update its name field to the
+    // user provided project name so the scaffolded project has the correct
+    // package identity.
+    const pkgPath = path_1.default.join(root, 'package.json');
+    if (fs_extra_1.default.existsSync(pkgPath)) {
+        try {
+            const raw = await fs_extra_1.default.readFile(pkgPath, 'utf8');
+            const pkg = JSON.parse(raw);
+            // Use the final directory name as the package name so users can pass
+            // either a simple name ("myapp") or a path ("/abs/path/myapp").
+            pkg.name = path_1.default.basename(root);
+            // If template marks package private, leave it as-is; do not force publish.
+            await fs_extra_1.default.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf8');
+        }
+        catch (err) {
+            // Non-fatal: log and continue
+            console.warn('Warning: could not update package.json name for template:', err);
+        }
+    }
     if (opts.withConfig) {
         const cfg = "import { defineConfig } from 'react-client';\nexport default defineConfig({});\n";
         await fs_extra_1.default.writeFile(path_1.default.join(root, 'react-client.config.ts'), cfg, 'utf8');

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "react-client",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
-  "bin": {
-    "react-client": "dist/cli/index.js"
-  },
+  "bin": "dist/cli/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/venkateshsundaram/react-client.git"
@@ -94,7 +93,7 @@
   },
   "dependencies": {
     "commander": "^14.0.2",
-    "fs-extra": "^11.1.1",
-    "esbuild": "^0.25.12"
+    "esbuild": "^0.25.12",
+    "fs-extra": "^11.3.2"
   }
 }

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/>);