react-client 1.0.7 → 1.0.8

package/dist/cli/commands/dev.js

@@ -5,25 +5,224 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = dev;
 const esbuild_1 = __importDefault(require("esbuild"));
+const connect_1 = __importDefault(require("connect"));
+const http_1 = __importDefault(require("http"));
+const ws_1 = require("ws");
+const chokidar_1 = __importDefault(require("chokidar"));
+const detect_port_1 = __importDefault(require("detect-port"));
+const prompts_1 = __importDefault(require("prompts"));
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
+const trace_mapping_1 = require("@jridgewell/trace-mapping");
+const loadConfig_1 = require("../../utils/loadConfig");
+const open_1 = __importDefault(require("open"));
+const child_process_1 = require("child_process");
+const chalk_1 = __importDefault(require("chalk"));
 async function dev() {
     const root = process.cwd();
-    const entry = path_1.default.join(root, 'src', 'main.tsx');
+    // 🧩 Load config
+    const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
+    const appRoot = path_1.default.resolve(root, userConfig.root || '.');
+    const defaultPort = userConfig.server?.port || 5173;
+    const outDir = path_1.default.join(appRoot, userConfig.build?.outDir || '.react-client/dev');
+    const entry = path_1.default.join(appRoot, 'src', 'main.tsx');
+    const indexHtml = path_1.default.join(appRoot, 'index.html');
     if (!fs_extra_1.default.existsSync(entry)) {
-        console.error('Entry not found: src/main.tsx');
+        console.error(chalk_1.default.red('❌ Entry not found: src/main.tsx'));
         process.exit(1);
     }
-    const outdir = path_1.default.join(root, '.react-client', 'dev');
-    await fs_extra_1.default.ensureDir(outdir);
+    await fs_extra_1.default.ensureDir(outDir);
+    const availablePort = await (0, detect_port_1.default)(defaultPort);
+    const port = availablePort;
+    if (availablePort !== defaultPort) {
+        const res = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'useNewPort',
+            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
+            initial: true,
+        });
+        if (!res.useNewPort) {
+            console.log('🛑 Dev server cancelled.');
+            process.exit(0);
+        }
+    }
+    // ⚡ Auto-install + resolve react-refresh runtime
+    function safeResolveReactRefresh() {
+        try {
+            return require.resolve('react-refresh/runtime');
+        }
+        catch {
+            console.warn(chalk_1.default.yellow('⚠️ react-refresh not found — attempting to install...'));
+            try {
+                (0, child_process_1.execSync)('npm install react-refresh --no-audit --no-fund --silent', {
+                    cwd: root,
+                    stdio: 'inherit',
+                });
+                console.log(chalk_1.default.green('✅ react-refresh installed successfully.'));
+                return require.resolve('react-refresh/runtime');
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                console.error(msg);
+                console.error(chalk_1.default.red('❌ Failed to install react-refresh automatically.'));
+                console.error('Please run: npm install react-refresh');
+                process.exit(1);
+            }
+        }
+    }
+    const reactRefreshRuntime = safeResolveReactRefresh();
+    // 🏗️ esbuild context
     const ctx = await esbuild_1.default.context({
         entryPoints: [entry],
         bundle: true,
         sourcemap: true,
-        outdir,
+        outdir: outDir,
         define: { 'process.env.NODE_ENV': '"development"' },
         loader: { '.ts': 'ts', '.tsx': 'tsx', '.js': 'jsx', '.jsx': 'jsx' },
     });
     await ctx.watch();
-    await ctx.serve({ servedir: outdir, port: 5173 });
+    // 🌐 connect server
+    const app = (0, connect_1.default)();
+    // 1️⃣ Serve react-refresh runtime
+    app.use('/@react-refresh', async (_req, res) => {
+        const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
+        res.setHeader('Content-Type', 'application/javascript');
+        res.end(runtime);
+    });
+    // 2️⃣ Serve PrismJS for highlighting
+    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');
+        const js = await fs_extra_1.default.readFile(prismPath, 'utf8');
+        res.setHeader('Content-Type', 'application/javascript');
+        res.end(`
+      (function(){
+        const style = document.createElement('style');
+        style.textContent = \`${css}\`;
+        document.head.appendChild(style);
+        ${js}
+      })();
+    `);
+    });
+    // 3️⃣ Serve source map resolver
+    app.use('/@source-map', async (req, res) => {
+        const url = new URL(req.url ?? '', `http://localhost:${port}`);
+        const file = url.searchParams.get('file');
+        const line = Number(url.searchParams.get('line'));
+        const column = Number(url.searchParams.get('column'));
+        if (!file) {
+            res.writeHead(400);
+            res.end('Missing ?file parameter');
+            return;
+        }
+        const mapPath = path_1.default.join(outDir, file + '.map');
+        if (!fs_extra_1.default.existsSync(mapPath)) {
+            res.writeHead(404);
+            res.end('Map not found');
+            return;
+        }
+        try {
+            const mapJson = JSON.parse(await fs_extra_1.default.readFile(mapPath, 'utf8'));
+            const traceMap = new trace_mapping_1.TraceMap(mapJson);
+            const pos = (0, trace_mapping_1.originalPositionFor)(traceMap, { line, column });
+            if (!pos.source) {
+                res.writeHead(404);
+                res.end('Source not found');
+                return;
+            }
+            const absSource = path_1.default.resolve(outDir, '../', pos.source);
+            let snippet = '';
+            if (await fs_extra_1.default.pathExists(absSource)) {
+                const lines = (await fs_extra_1.default.readFile(absSource, 'utf8')).split('\n');
+                const start = Math.max((pos.line || 1) - 3, 0);
+                const end = Math.min(lines.length, (pos.line || 1) + 2);
+                snippet = lines
+                    .slice(start, end)
+                    .map((l, i) => `<span class="line-number">${start + i + 1}</span> ${l
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')}`)
+                    .join('\\n');
+            }
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ ...pos, snippet }));
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            res.writeHead(500);
+            res.end(JSON.stringify({ error: msg }));
+        }
+    });
+    // 4️⃣ Inject overlay + HMR
+    app.use(async (req, res, next) => {
+        if (req.url === '/' || req.url === '/index.html') {
+            if (!fs_extra_1.default.existsSync(indexHtml)) {
+                res.writeHead(404);
+                res.end('index.html not found');
+                return;
+            }
+            let html = await fs_extra_1.default.readFile(indexHtml, 'utf8');
+            html = html.replace('</body>', `
+        <script type="module">
+          import "/@react-refresh";
+          import "/@prismjs";
+          const ws = new WebSocket("ws://" + location.host);
+          ws.onmessage = async (e) => {
+            const msg = JSON.parse(e.data);
+            if (msg.type === "error") {
+              console.error(msg);
+              return window.showErrorOverlay?.(msg);
+            }
+            if (msg.type === "update") {
+              try {
+                await import(msg.path + "?t=" + Date.now());
+                window.clearErrorOverlay?.();
+                window.$RefreshRuntime?.performReactRefresh?.();
+              } catch (err) {
+                window.showErrorOverlay?.(err);
+              }
+            }
+            if (msg.type === "reload") location.reload();
+          };
+        </script>
+        </body>`);
+            res.setHeader('Content-Type', 'text/html');
+            res.end(html);
+        }
+        else
+            next();
+    });
+    const server = http_1.default.createServer(app);
+    const wss = new ws_1.WebSocketServer({ server });
+    const broadcast = (data) => {
+        const json = JSON.stringify(data);
+        wss.clients.forEach((c) => c.readyState === 1 && c.send(json));
+    };
+    chokidar_1.default.watch(path_1.default.join(appRoot, 'src'), { ignoreInitial: true }).on('change', async (file) => {
+        try {
+            console.log(`🔄 Rebuilding: ${file}`);
+            await ctx.rebuild();
+            broadcast({ type: 'update', path: '/' + path_1.default.relative(appRoot, file).replace(/\\/g, '/') });
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                broadcast({ type: 'error', message: err.message, stack: err.stack });
+            }
+            else {
+                broadcast({ type: 'error', message: String(err) });
+            }
+        }
+    });
+    server.listen(port, async () => {
+        const url = `http://localhost:${port}`;
+        console.log(chalk_1.default.green(`\n⚡ Dev Server running at ${url}`));
+        if (port !== defaultPort)
+            console.log(chalk_1.default.yellow(`⚠️ Using alternate port (default ${defaultPort} was occupied).`));
+        await (0, open_1.default)(url, { newInstance: true });
+    });
+    process.on('SIGINT', async () => {
+        console.log(chalk_1.default.red('\n🛑 Shutting down...'));
+        await ctx.dispose();
+        server.close();
+        process.exit(0);
+    });
 }

package/dist/cli/commands/init.js

@@ -3,61 +3,92 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = init;
-const fs_extra_1 = __importDefault(require("fs-extra"));
+exports.default = initCmd;
 const path_1 = __importDefault(require("path"));
-async function init(name, opts = {}) {
-    const root = path_1.default.resolve(process.cwd(), name);
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const prompts_1 = __importDefault(require("prompts"));
+const chalk_1 = __importDefault(require("chalk"));
+const child_process_1 = require("child_process");
+async function initCmd(name, opts) {
+    const root = process.cwd();
+    const projectDir = path_1.default.resolve(root, name);
     const template = opts.template || 'react-ts';
-    await fs_extra_1.default.ensureDir(root);
-    // Resolve templates directory by walking up from __dirname until we find a
-    // `templates` folder. This handles different install layouts (local dev,
-    // global install, packaged dist) transparently.
-    let cur = __dirname;
-    let tplDir = null;
-    while (true) {
-        const candidate = path_1.default.join(cur, 'templates');
-        if (fs_extra_1.default.existsSync(candidate)) {
-            tplDir = candidate;
-            break;
+    console.log(chalk_1.default.cyan(`\n📦 Creating new React Client app: ${chalk_1.default.bold(name)}`));
+    // 1️⃣ Check if directory exists
+    if (fs_extra_1.default.existsSync(projectDir)) {
+        const res = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'overwrite',
+            message: chalk_1.default.yellow(`Directory "${name}" already exists. Overwrite?`),
+            initial: false,
+        });
+        if (!res.overwrite) {
+            console.log(chalk_1.default.red('❌ Operation cancelled.'));
+            process.exit(1);
         }
-        const parent = path_1.default.dirname(cur);
-        if (parent === cur)
-            break; // reached filesystem root
-        cur = parent;
+        await fs_extra_1.default.remove(projectDir);
     }
-    if (!tplDir) {
-        console.error('Templates directory not found in package layout');
+    await fs_extra_1.default.ensureDir(projectDir);
+    // 2️⃣ Locate template
+    const templateDir = path_1.default.resolve(__dirname, '../../../templates', template);
+    if (!fs_extra_1.default.existsSync(templateDir)) {
+        console.error(chalk_1.default.red(`❌ Template not found: ${template}`));
         process.exit(1);
     }
-    const tpl = path_1.default.join(tplDir, template);
-    if (!fs_extra_1.default.existsSync(tpl)) {
-        console.error('Template not found:', template);
-        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);
+    // 3️⃣ Copy template
+    console.log(chalk_1.default.gray(`\n📁 Copying template: ${template}...`));
+    await fs_extra_1.default.copy(templateDir, projectDir);
+    // 4️⃣ Optionally create react-client.config.js (not .ts)
+    if (opts.withConfig) {
+        const configPath = path_1.default.join(projectDir, 'react-client.config.js');
+        if (!fs_extra_1.default.existsSync(configPath)) {
+            const configContent = `// react-client.config.js
+import { defineConfig } from 'react-client/config';
+
+export default defineConfig({
+  // 🧭 Root directory for the app
+  root: './src',
+
+  // ⚡ Dev server settings
+  server: {
+    port: 5173,
+  },
+
+  // 🏗️ Build options
+  build: {
+    outDir: '.react-client/build',
+  },
+
+  // 💡 Add plugins, aliases, etc.
+});
+`;
+            await fs_extra_1.default.writeFile(configPath, configContent, 'utf8');
+            console.log(chalk_1.default.green('📝 Created react-client.config.js'));
         }
     }
-    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');
+    // 5️⃣ Initialize git repo
+    try {
+        (0, child_process_1.execSync)('git init', { cwd: projectDir, stdio: 'ignore' });
+        console.log(chalk_1.default.gray('🔧 Initialized Git repository.'));
+    }
+    catch {
+        console.warn(chalk_1.default.yellow('⚠️ Git init failed (skipping).'));
+    }
+    // 6️⃣ Install dependencies
+    const pkgManager = /yarn/.test(process.env.npm_execpath || '') ? 'yarn' : 'npm';
+    console.log(chalk_1.default.gray(`\n📦 Installing dependencies using ${pkgManager}...`));
+    try {
+        (0, child_process_1.execSync)(`${pkgManager} install`, { cwd: projectDir, stdio: 'inherit' });
+    }
+    catch {
+        console.warn(chalk_1.default.yellow('⚠️ Dependency installation failed, please run manually.'));
     }
-    console.log('Project created at', root);
+    // 7️⃣ Completion message
+    console.log();
+    console.log(chalk_1.default.green('✅ Project setup complete!'));
+    console.log(chalk_1.default.cyan(`\nNext steps:`));
+    console.log(chalk_1.default.gray(`  cd ${name}`));
+    console.log(chalk_1.default.gray(`  ${pkgManager === 'yarn' ? 'yarn dev' : 'npm run dev'}`));
+    console.log();
+    console.log(chalk_1.default.dim('Happy coding! ⚡'));
 }

package/dist/cli/commands/preview.js

@@ -4,27 +4,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = preview;
+const connect_1 = __importDefault(require("connect"));
+const serve_static_1 = __importDefault(require("serve-static"));
 const http_1 = __importDefault(require("http"));
-const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
+const detect_port_1 = __importDefault(require("detect-port"));
+const prompts_1 = __importDefault(require("prompts"));
+const chalk_1 = __importDefault(require("chalk"));
+const open_1 = __importDefault(require("open"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const loadConfig_1 = require("../../utils/loadConfig");
 async function preview() {
-    const out = path_1.default.join(process.cwd(), 'dist');
-    if (!fs_1.default.existsSync(out)) {
-        console.error('dist not found, run build');
+    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/build');
+    const defaultPort = config.server?.port || 5173;
+    if (!fs_extra_1.default.existsSync(outDir)) {
+        console.error(chalk_1.default.red(`❌ Build output not found at: ${outDir}`));
+        console.log(chalk_1.default.gray('Please run `react-client build` first.'));
         process.exit(1);
     }
-    const server = http_1.default.createServer((req, res) => {
-        let url = req.url?.split('?')[0] || '/';
-        if (url === '/')
-            url = '/index.html';
-        const f = path_1.default.join(out, url);
-        if (fs_1.default.existsSync(f)) {
-            res.writeHead(200);
-            res.end(fs_1.default.readFileSync(f));
-            return;
+    const availablePort = await (0, detect_port_1.default)(defaultPort);
+    const port = availablePort;
+    if (availablePort !== defaultPort) {
+        const res = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'useNewPort',
+            message: `Port ${defaultPort} is occupied. Use ${availablePort} instead?`,
+            initial: true,
+        });
+        if (!res.useNewPort) {
+            console.log(chalk_1.default.red('🛑 Preview server cancelled.'));
+            process.exit(0);
         }
-        res.writeHead(404);
-        res.end('Not found');
+    }
+    const app = (0, connect_1.default)();
+    app.use((0, serve_static_1.default)(outDir));
+    const server = http_1.default.createServer(app);
+    server.listen(port, async () => {
+        const url = `http://localhost:${port}`;
+        console.log(chalk_1.default.green(`\n🌐 Preview server running at ${url}`));
+        if (port !== defaultPort) {
+            console.log(chalk_1.default.yellow(`⚠️ Using alternate port (default ${defaultPort} was occupied).`));
+        }
+        await (0, open_1.default)(url, { newInstance: true });
+    });
+    process.on('SIGINT', () => {
+        console.log(chalk_1.default.red('\n🛑 Shutting down preview server...'));
+        server.close();
+        process.exit(0);
     });
-    server.listen(5000, () => console.log('Preview running at http://localhost:5000'));
 }

package/dist/cli/index.js

@@ -5,43 +5,129 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const commander_1 = require("commander");
+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');
+const pkg = fs_extra_1.default.existsSync(pkgPath)
+    ? JSON.parse(fs_extra_1.default.readFileSync(pkgPath, 'utf8'))
+    : { version: '0.0.0' };
+// 🧠 Fancy startup banner
+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 line = chalk_1.default.gray('──────────────────────────────────────────────────────────────');
+    console.log(`\n${title} ${version}`);
+    console.log(tagline);
+    console.log(line);
+    switch (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;
+        default:
+            console.log();
+    }
+}
+// 🧩 Commander setup
 const program = new commander_1.Command();
-program.name('react-client').version('1.0.0').description('react-client CLI');
+program
+    .name('react-client')
+    .description('react-client CLI – A lightweight React toolkit for fast builds & dev server')
+    .version(pkg.version, '-v, --version', 'display version information');
+// ------------------------------------------------------
+// CLI Commands
+// ------------------------------------------------------
 program
     .command('init <name>')
-    .option('-t,--template <template>', 'template', 'react-ts')
-    .option('--with-config', 'create config')
-    .action((name, opts) => (0, init_1.default)(name, opts));
+    .option('-t, --template <template>', 'choose a template', 'react-ts')
+    .option('--with-config', 'create a config file')
+    .description('initialize a new React project')
+    .action((name, opts) => {
+    showBanner('init');
+    (0, init_1.default)(name, opts);
+});
 program
     .command('generate <kind> <name>')
-    .option('-p,--path <path>', 'path')
-    .option('--no-ts', 'generate JS')
-    .option('-f,--force', 'force')
-    .action((k, n, o) => (0, generate_1.default)(k, n, o));
+    .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')
-    .action(() => (0, dev_1.default)());
+    .description('start dev server (with React Fast Refresh)')
+    .action(() => {
+    showBanner('dev');
+    (0, dev_1.default)();
+});
 program
     .command('build')
-    .description('build app')
-    .action(() => (0, build_1.default)());
+    .description('build production assets')
+    .action(() => {
+    showBanner('build');
+    (0, build_1.default)();
+});
 program
     .command('build:ssr')
-    .description('build ssr')
-    .action(() => (0, build_ssr_1.default)());
+    .description('build for server-side rendering (SSR)')
+    .action(() => {
+    showBanner('build:ssr');
+    (0, build_ssr_1.default)();
+});
 program
     .command('preview')
-    .description('preview build')
-    .action(() => (0, preview_1.default)());
-// Only parse argv when executed directly as a CLI, not when imported by tests or other code.
+    .description('preview production build')
+    .action(() => {
+    showBanner('preview');
+    (0, preview_1.default)();
+});
+// ------------------------------------------------------
+// Default / Unknown command handling
+// ------------------------------------------------------
+program.on('command:*', () => {
+    console.error(chalk_1.default.red('❌ Invalid command:'), program.args.join(' '));
+    console.log();
+    program.outputHelp();
+    process.exit(1);
+});
+// ------------------------------------------------------
+// Entry point
+// ------------------------------------------------------
 if (require.main === module) {
-    program.parse(process.argv);
+    if (process.argv.length <= 2) {
+        console.clear();
+        showBanner();
+        program.outputHelp();
+    }
+    else {
+        program.parse(process.argv);
+    }
 }
 exports.default = program;