react-client 1.0.38 → 1.0.41

package/README.md

@@ -1,196 +1,187 @@
+# ⚡ react-client
+
 [![npm](https://img.shields.io/npm/v/react-client.svg)](https://www.npmjs.com/package/react-client)
 [![npm](https://img.shields.io/npm/dt/react-client.svg)](https://npm-stat.com/charts.html?package=react-client)
 [![GitHub issues](https://img.shields.io/github/issues/venkateshsundaram/react-client.svg)](https://github.com/venkateshsundaram/react-client/issues)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-**react-client** is a next-generation CLI and runtime for building React apps with instant feedback, fast iteration, and a beautiful developer experience.
-
-Built for simplicity, designed for speed ⚡
+**react-client** is a lightweight, ultra-fast CLI and runtime for building React applications. Built for speed, it focuses on providing an instant development experience without the overhead of traditional bundlers.
 
 ---
 
-## 🚀 Table of Contents
-- [Installation](#installation)
-- [With Config](#with-config)
-- [Available Templates](#available-templates)
-- [Core Features](#core-features)
-- [How It Works](#how-it-works)
-- [Local Development](#local-development)
-- [Troubleshooting](#troubleshooting)
-- [Contributing](#contributing)
-- [Publishing](#publishing)
-- [Feedback](#feedback)
-- [License](#license)
-
----
+## 🚀 Why react-client?
 
-## 🧩 Installation
+- 💨 **Instant Startup**: No more waiting for slow bundles. Start your dev server in milliseconds.
+- 🔄 **State-Preserving HMR**: React Fast Refresh keeps your application state across code changes.
+- 🎨 **Beautiful Error Overlay**: High-fidelity, syntax-highlighted error overlay with clickable file links.
+- 🗺️ **Source Map Support**: Runtime errors map directly back to your original source code.
+- 🔌 **Plug & Play**: Designed to work out of the box with zero configuration, yet highly extensible.
 
-Install globally and scaffold your first app:
+---
 
-```bash
-npm install -g react-client
-react-client init myapp --template react-ts
-cd myapp
-npm install
-npm run dev
-```
+## 📋 Table of Contents
 
-This launches the **custom dev server** — built on **Connect + WebSocket + esbuild**, featuring:
-- Instant rebuilds  
-- React Fast Refresh (HMR)  
-- Auto port detection & confirmation prompt  
-- In-browser overlay with syntax-highlighted code frames  
+- [Quick Start](#-quick-start)
+- [Available Templates](#-available-templates)
+- [CLI Command Reference](#-cli-command-reference)
+- [Configuration Reference](#-configuration-reference)
+- [Core Features](#-core-features)
+- [Local Development](#-local-development)
+- [Contributing](#-contributing)
+- [License](#-license)
 
 ---
 
-## ⚙️ With Config
+## ⚡ Quick Start
 
-You can generate a project-level configuration file using `--with-config`.
+Create and launch your first app in seconds:
 
 ```bash
-react-client init myapp --template react-ts --with-config
-```
-
-Creates:
+# install globally
+npm install -g react-client
 
-```js
-// react-client.config.js
-import { defineConfig } from 'react-client/config';
+# initialize your project
+react-client init my-app --template react-ts
 
-export default defineConfig({
-  root: './src',
-  server: { port: 2202 },
-  build: { outDir: '.react-client/build' }
-});
+# start developing
+cd my-app
+npm install
+npm run dev
 ```
 
-✅ Loaded automatically by the CLI  
-✅ Type-safe with IntelliSense via `defineConfig()`  
-✅ Supports `.js`, `.mjs`, `.ts` (auto-compiled)  
+Your app will be live at `http://localhost:2202`!
 
 ---
 
 ## 🧰 Available Templates
 
-| Template | Description |
-|-----------|-------------|
-| `react` | JavaScript SPA |
-| `react-ts` | TypeScript SPA |
-| `react-tailwind` | JS + Tailwind |
-| `react-tailwind-ts` | TS + Tailwind |
+Choose from a variety of pre-configured templates to jumpstart your project:
 
-Each template is pre-configured for esbuild, HMR, and fast bootstrapping.
+| Template | Description | Tech Stack |
+| :--- | :--- | :--- |
+| `react` | Basic JavaScript setup | JS, React 18 |
+| `react-ts` | TypeScript-first setup | TS, React 18 |
+| `react-tailwind` | JS with Tailwind CSS | JS, React, Tailwind |
+| `react-tailwind-ts` | TS with Tailwind CSS | TS, React, Tailwind |
+
+> [!TIP]
+> Use the `--template` flag with `init` to specify your preferred starting point.
 
 ---
 
-## 💎 Core Features
+## 🛠️ CLI Command Reference
 
-- ⚡ **Custom Dev Server** — Connect + WebSocket + esbuild  
-- 🔁 **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 2202 is occupied  
-- 🧠 **Smart Config Loader** — Detects project root, compiles `.ts` configs dynamically  
-- 🔌 **Plugin Hook System** — Extendable with `configResolved`, `transform`, `buildEnd`  
+### `init <project-name>`
+Scaffold a new React application.
 
----
+- `--template <name>`: Choose a template (default: `react-ts`).
+- `--with-config`: Generate a `react-client.config.js` file.
 
-## 🧬 How It Works
+### `dev`
+Start the development server with Hot Module Replacement (HMR).
 
-**Under the hood:**
+- Uses port `2202` by default (auto-detects and prompts if occupied).
+- Features on-the-fly esbuild transformations.
 
-1. **esbuild** handles bundling, incremental rebuilds, and sourcemaps.  
-2. **Connect** serves files and APIs (React Refresh runtime, overlay, source-map).  
-3. **WebSocket** pushes HMR updates and overlay messages.  
-4. **Chokidar** watches `/src` for changes and triggers rebuilds.  
+### `build`
+Bundle your application for production.
+
+- Optimized output in `.react-client/build` (default).
+- Incremental rebuild support.
+
+### `preview`
+Serve your production build locally for final verification.
 
 ---
 
-## 🧪 Local Development
+## ⚙️ Configuration Reference
 
-To test `react-client` locally:
+For more advanced control, generate a configuration file:
 
 ```bash
-cd ~/Desktop/Workspace/Hoppy-projects/react-client
-npm run build
-npm link
-cd myapp
-react-client dev
+react-client init myapp --with-config
 ```
 
-If you run it from inside the CLI repo, it auto-detects and switches to `myapp/` as the root.
+### `react-client.config.js`
 
----
-
-## 🧩 Troubleshooting
+```javascript
+import { defineConfig } from 'react-client/config';
 
-### ❌ Config not loading
-Make sure `react-client.config.js` exists in your project root (not `.ts`).
+export default defineConfig({
+  // 🧭 Root directory for the app
+  root: '.',
 
-```bash
-/Users/<you>/myapp/react-client.config.js
-```
+  // ⚡ Dev server settings
+  server: {
+    port: 2202,
+  },
 
-### ❌ `react-refresh/runtime` not found
-Install in the CLI or the project:
-```bash
-npm install react-refresh
-```
+  // 🏗️ Build options
+  build: {
+    outDir: '.react-client/build',
+  },
 
-### ⚠️ Port already in use
-CLI will auto-detect and prompt:
-```
-Port 2202 is occupied. Use 5174 instead? (Y/n)
+  // 🔌 Plugins
+  plugins: [],
+});
 ```
 
-### ⚠️ Permission denied
-Ensure your CLI entry file is executable:
-```bash
-chmod +x dist/cli/index.js
-npm link
-```
+| Property | Description | Default |
+| :--- | :--- | :--- |
+| `root` | The application's root directory | `.` |
+| `server.port` | The dev server port | `2202` |
+| `build.outDir` | Production build output directory | `.react-client/build` |
+| `plugins` | Array of react-client plugins | `[]` |
 
 ---
 
-## 🧑‍💻 Contributing
+## 💎 Core Features
 
-We welcome contributions!  
-Read the [Contributing Guide](./CONTRIBUTING.md) for setup instructions.
+### 🔄 React Fast Refresh
+Experience true Hot Module Replacement that preserves your component state during development. No more manual page reloads when you fix a bug.
 
-```bash
-npm run lint
-npm run test
-npm run build
-```
+### 💥 Interactive Error Overlay
+When something goes wrong, you get a beautiful, clear overlay.
+- **Syntax Highlighting**: Easily read the problematic code.
+- **Click-to-Open**: File links open directly in VS Code (`vscode://file/...`).
+- **Mapped Stacks**: Errors point to your original TSX/JSX lines, not the bundled output.
+
+### ⚡ esbuild Powered
+We use esbuild for lightning-fast compilation, ensuring that even large applications stay responsive during development.
 
 ---
 
-## 🚀 Publishing
+## 🧪 Local Development
 
-Before publishing:
-1. Update version in `package.json`  
-2. Run a full build  
-3. Ensure the entry file has execute permission  
+To contribute or test locally:
 
-```bash
-npm run build
-npm publish
-```
+1. Clone the repository
+2. Build the project: `npm run build`
+3. Link globally: `npm link`
+4. Test in a separate folder:
+   ```bash
+   mkdir test-app && cd test-app
+   react-client init demo
+   ```
+
+---
 
-Your package now includes:
-- `#!/usr/bin/env node` shebang  
-- Auto-detecting config loader  
-- Built-in React Refresh runtime  
+## 🤝 Contributing
+
+We welcome all contributions! Whether it's adding new templates, fixing bugs, or improving documentation.
+
+Please check our [Contributing Guide](./CONTRIBUTING.md) to get started.
 
 ---
 
 ## 💬 Feedback
 
-Found an issue or have a feature request?  
-👉 [Open an issue](https://github.com/venkateshsundaram/react-client/issues)
+Found an issue or have a feature request?
+👉 [Open an issue on GitHub](https://github.com/venkateshsundaram/react-client/issues)
 
 ---
 
 ## 🪪 License
 
 **MIT Licensed** © [Venkatesh Sundaram](https://github.com/venkateshsundaram)
+

package/dist/cli/commands/build.js

@@ -11,12 +11,27 @@ export default async function build() {
     console.log(chalk.cyan(`\n🏗️ Building project...`));
     console.log(chalk.gray(`Root: ${appRoot}`));
     console.log(chalk.gray(`Output: ${outDir}\n`));
-    const entry = path.join(appRoot, 'src', 'main.tsx');
-    if (!fs.existsSync(entry)) {
-        console.error(chalk.red('❌ Entry not found: src/main.tsx'));
+    // Detect entry (main.tsx / main.jsx)
+    const paths = [
+        path.join(appRoot, 'src/main.tsx'),
+        path.join(appRoot, 'src/main.jsx'),
+        path.join(appRoot, 'main.tsx'),
+        path.join(appRoot, 'main.jsx'),
+    ];
+    const entry = paths.find((p) => fs.existsSync(p));
+    if (!entry) {
+        console.error(chalk.red('❌ Entry not found: main.tsx or main.jsx in app root or src/'));
         process.exit(1);
     }
     await fs.ensureDir(outDir);
+    // Copy public folder contents to outDir
+    let publicDir = path.join(appRoot, 'public');
+    if (!fs.existsSync(publicDir)) {
+        publicDir = path.join(root, 'public');
+    }
+    if (await fs.pathExists(publicDir)) {
+        await fs.copy(publicDir, outDir);
+    }
     try {
         await esbuild.build({
             entryPoints: [entry],
@@ -26,6 +41,7 @@ export default async function build() {
             outdir: outDir,
             define: { 'process.env.NODE_ENV': '"production"' },
             loader: { '.ts': 'ts', '.tsx': 'tsx', '.js': 'jsx', '.jsx': 'jsx' },
+            jsx: 'automatic',
         });
         console.log(chalk.green(`✅ Build completed successfully!`));
         console.log(chalk.gray(`Output directory: ${outDir}`));

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

@@ -1 +1 @@
-{"version":3,"file":"build.js","sourceRoot":"","sources":["../../../src/cli/commands/build.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,CAAC,OAAO,CAAC,KAAK,UAAU,KAAK;IACjC,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAC3B,MAAM,MAAM,GAAG,MAAM,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,IAAI,qBAAqB,CAAC,CAAC;IAEjF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,MAAM,IAAI,CAAC,CAAC,CAAC;IAE/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC,CAAC;QAC5D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAE3B,IAAI,CAAC;QACH,MAAM,OAAO,CAAC,KAAK,CAAC;YAClB,WAAW,EAAE,CAAC,KAAK,CAAC;YACpB,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,EAAE,sBAAsB,EAAE,cAAc,EAAE;YAClD,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;SACpE,CAAC,CAAC;QAEH,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC;QAC5D,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,MAAM,EAAE,CAAC,CAAC,CAAC;IACzD,CAAC;IAAC,OAAO,GAAY,EAAE,CAAC;QACtB,MAAM,GAAG,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC7D,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;AACH,CAAC"}
+{"version":3,"file":"build.js","sourceRoot":"","sources":["../../../src/cli/commands/build.ts"],"names":[],"mappings":"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"}