react-client 1.0.8 → 1.0.9

package/dist/cli/commands/dev.js

@@ -32,6 +32,7 @@ async function dev() {
         process.exit(1);
     }
     await fs_extra_1.default.ensureDir(outDir);
+    // 🧠 Detect open port
     const availablePort = await (0, detect_port_1.default)(defaultPort);
     const port = availablePort;
     if (availablePort !== defaultPort) {
@@ -83,13 +84,25 @@ async function dev() {
     await ctx.watch();
     // 🌐 connect server
     const app = (0, connect_1.default)();
-    // 1️⃣ Serve react-refresh runtime
+    // 🛡 Security headers
+    app.use((_req, res, next) => {
+        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+        next();
+    });
+    // 1️⃣ Serve react-refresh runtime with browser-safe 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
+    `;
         res.setHeader('Content-Type', 'application/javascript');
-        res.end(runtime);
+        res.end(shim + '\n' + runtime);
     });
-    // 2️⃣ Serve PrismJS for highlighting
+    // 2️⃣ Serve PrismJS (for code frame 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');
@@ -104,7 +117,7 @@ async function dev() {
       })();
     `);
     });
-    // 3️⃣ Serve source map resolver
+    // 3️⃣ Source map resolver (for overlay stack trace)
     app.use('/@source-map', async (req, res) => {
         const url = new URL(req.url ?? '', `http://localhost:${port}`);
         const file = url.searchParams.get('file');
@@ -152,7 +165,7 @@ async function dev() {
             res.end(JSON.stringify({ error: msg }));
         }
     });
-    // 4️⃣ Inject overlay + HMR
+    // 4️⃣ Serve HTML and inject overlay + HMR
     app.use(async (req, res, next) => {
         if (req.url === '/' || req.url === '/index.html') {
             if (!fs_extra_1.default.existsSync(indexHtml)) {
@@ -161,7 +174,10 @@ 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";

package/dist/utils/loadConfig.js

@@ -41,71 +41,69 @@ 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"));
+const esbuild_1 = require("esbuild");
 /**
- * Dynamically load react-client.config.(js|mjs|ts)
- * from the user project, not the CLI’s own folder.
+ * Dynamically loads react-client.config.(ts|js|mjs)
+ * Compiles .ts and .js configs to .mjs temporarily for import.
  */
 async function loadReactClientConfig(cwd) {
     let projectRoot = cwd;
     try {
-        // 🧭 Detect if running inside react-client source repo
+        // Detect if running inside react-client repo for local testing
         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;
-                }
+        if (await fs_extra_1.default.pathExists(pkgPath)) {
+            const pkg = JSON.parse(await fs_extra_1.default.readFile(pkgPath, 'utf8'));
+            if (pkg.name === 'react-client' && (await fs_extra_1.default.pathExists(path_1.default.join(cwd, 'myapp')))) {
+                console.log(chalk_1.default.gray('🧩 Detected local CLI environment, using ./myapp as root.'));
+                projectRoot = path_1.default.join(cwd, 'myapp');
             }
         }
-        // 🔍 Possible config file names (prefer .js for Node compatibility)
         const filenames = [
-            'react-client.config.js',
-            'react-client.config.mjs',
             'react-client.config.ts',
+            'react-client.config.mjs',
+            'react-client.config.js',
         ];
         let configFile = null;
         for (const name of filenames) {
             const file = path_1.default.join(projectRoot, name);
-            if (fs_extra_1.default.existsSync(file)) {
+            if (await fs_extra_1.default.pathExists(file)) {
                 configFile = file;
                 break;
             }
         }
         if (!configFile) {
-            console.log(chalk_1.default.gray('ℹ️ No react-client.config.js found, using defaults.'));
+            console.log(chalk_1.default.gray('ℹ️ No react-client.config 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({
+        const ext = path_1.default.extname(configFile);
+        const tempFile = path_1.default.join(projectRoot, `.react-client.temp-${Date.now()}.mjs`);
+        // 🧠 Always compile .ts or .js → .mjs for safe ESM import
+        if (ext === '.ts' || ext === '.js') {
+            await (0, esbuild_1.build)({
                 entryPoints: [configFile],
-                outfile: outFile,
-                format: 'esm',
+                outfile: tempFile,
                 platform: 'node',
+                format: 'esm',
+                target: 'node18',
                 bundle: true,
                 write: true,
+                logLevel: 'silent',
             });
-            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
+        else {
+            await fs_extra_1.default.copyFile(configFile, tempFile);
+        }
+        // Import via file:// URL
+        const fileUrl = (0, url_1.pathToFileURL)(tempFile).href;
         const mod = await Promise.resolve(`${fileUrl}`).then(s => __importStar(require(s)));
+        await fs_extra_1.default.remove(tempFile);
+        const config = mod.default || mod;
         console.log(chalk_1.default.green(`🧩 Loaded config from ${path_1.default.basename(configFile)}`));
-        return mod.default || mod;
+        return config;
     }
     catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
-        console.error(chalk_1.default.red(`❌ Failed to load react-client.config: ${msg}`));
+        console.error(chalk_1.default.red(`❌ Could not load config (${path_1.default.join(cwd, 'react-client.config.js')}): ${msg}`));
         return {};
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-client",
-  "version": "1.0.8",
+  "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.",
   "license": "MIT",
   "author": "Venkatesh Sundaram",
@@ -11,21 +11,22 @@
   "bugs": {
     "url": "https://github.com/venkateshsundaram/react-client/issues"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "homepage": "https://github.com/venkateshsundaram/react-client#readme",
   "bin": {
     "react-client": "dist/cli/index.js"
   },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.js"
     },
     "./config": {
-      "import": "./dist/config.js",
+      "types": "./dist/config.d.ts",
       "require": "./dist/config.js",
-      "types": "./dist/config.d.ts"
+      "import": "./dist/config.js"
     }
   },
   "typesVersions": {
@@ -54,25 +55,28 @@
     "esbuild",
     "tooling",
     "vite-alternative",
-    "fast-refresh"
+    "fast-refresh",
+    "react-refresh",
+    "tailwind",
+    "developer-experience"
   ],
   "scripts": {
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist .turbo .react-client.temp.config*",
     "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",
-    "precommit": "lint-staged",
-    "lint": "eslint . --ext .ts",
+    "lint": "eslint . --ext .ts --max-warnings 0",
     "format": "prettier --write \"src/**/*.ts\"",
     "format:check": "prettier --check \"src/**/*.ts\"",
     "release": "standard-version",
     "postrelease": "git push --follow-tags",
-    "prepublishOnly": "npm run compile",
+    "prepublishOnly": "npm run lint && npm run format:check && npm run build && npm test",
     "test": "jest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "verify": "bash scripts/local-verify.sh"
   },
   "lint-staged": {
     "*.ts": [
@@ -82,7 +86,8 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged",
+      "pre-push": "npm run lint && npm run typecheck"
     }
   },
   "commitlint": {
@@ -130,5 +135,8 @@
     "standard-version": "^9.5.0",
     "ts-jest": "^29.0.0",
     "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   }
 }

package/templates/react/index.html

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

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

@@ -1 +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>
+<!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-tailwind/index.html

@@ -1 +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>
+<!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-tailwind-ts/index.html

@@ -1 +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>
+<!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-ts/index.html

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