frontend-hamroun 1.1.58 → 1.1.59

package/bin/cli.js

@@ -1,87 +1,122 @@
 #!/usr/bin/env node
 
 import { Command } from 'commander';
-import inquirer from 'inquirer';
-import fs from 'fs-extra';
+import { spawn } from 'child_process';
+import sirv from 'sirv';
+import http from 'http';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
 import chalk from 'chalk';
-import { createSpinner } from 'nanospinner';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-async function init() {
-  const program = new Command();
 
-  program
-    .name('create-frontend-app')
-    .description('Create a new Frontend Hamroun application')
-    .argument('[name]', 'Project name')
-    .action(async (name) => {
-      const projectName = name || await askProjectName();
-      await createProject(projectName);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const program = new Command();
+
+// Create development server
+async function createDevServer(root) {
+  const server = http.createServer(sirv(root, { 
+    dev: true, 
+    single: true 
+  }));
+  
+  return new Promise((resolve) => {
+    server.listen(3000, () => {
+      console.log(chalk.green('✓'), 'Dev server running at:', chalk.cyan('http://localhost:3000'));
+      resolve(server);
     });
-
-  program.parse();
-}
-
-async function askProjectName() {
-  const { projectName } = await inquirer.prompt([{
-    type: 'input',
-    name: 'projectName',
-    message: 'What is your project named?',
-    default: 'my-frontend-app'
-  }]);
-  return projectName;
-}
-
-async function askProjectType() {
-  const { template } = await inquirer.prompt([{
-    type: 'list',
-    name: 'template',
-    message: 'Select project type:',
-    choices: [
-      { name: 'Client Side App', value: 'basic-app' },
-      { name: 'Server Side Rendered App', value: 'ssr-template' }
-    ]
-  }]);
-  return template;
+  });
 }
 
-async function createProject(projectName) {
-  const spinner = createSpinner('Creating project...').start();
-
-  try {
-    const template = await askProjectType();
-    const templateDir = path.join(__dirname, '..', 'templates', template);
-    const targetDir = path.join(process.cwd(), projectName);
-
-    // Create project directory
-    await fs.ensureDir(targetDir);
-
-    // Copy template files
-    await fs.copy(templateDir, targetDir);
-
-    // Update package.json
-    const pkgPath = path.join(targetDir, 'package.json');
-    const pkg = await fs.readJson(pkgPath);
-    pkg.name = projectName;
-    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
-
-    spinner.success({ text: `Project ${chalk.green(projectName)} created successfully!` });
-
-    // Show next steps
-    console.log('\nNext steps:');
-    console.log(chalk.cyan(`  cd ${projectName}`));
-    console.log(chalk.cyan('  npm install'));
-    console.log(chalk.cyan('  npm run dev'));
-
-  } catch (error) {
-    spinner.error({ text: 'Failed to create project' });
-    console.error(chalk.red(error));
-    process.exit(1);
+// Build configuration
+async function buildProject(root, isDev = false) {
+  const esbuild = await import('esbuild');
+  
+  const config = {
+    entryPoints: [path.join(root, 'src/main.tsx')],
+    bundle: true,
+    outfile: path.join(root, 'dist/bundle.js'),
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsxFactory: '_jsx',
+    jsxFragment: '_Fragment',
+    platform: 'browser',
+    target: 'es2020',
+    minify: !isDev,
+    sourcemap: isDev,
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production')
+    },
+    inject: [path.join(root, 'src/jsx-shim.js')],
+  };
+
+  if (isDev) {
+    const ctx = await esbuild.context(config);
+    await ctx.watch();
+    console.log(chalk.green('✓'), 'Watching for changes...');
+    return ctx;
+  } else {
+    await esbuild.build(config);
+    console.log(chalk.green('✓'), 'Build complete');
   }
 }
 
-init().catch(console.error);
+// Commands
+program
+  .command('dev')
+  .description('Start development server')
+  .action(async () => {
+    try {
+      const root = process.cwd();
+      const [server, buildCtx] = await Promise.all([
+        createDevServer(root),
+        buildProject(root, true)
+      ]);
+
+      process.once('SIGINT', () => {
+        server.close();
+        buildCtx.dispose();
+        process.exit(0);
+      });
+    } catch (error) {
+      console.error(chalk.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('build')
+  .description('Build for production')
+  .action(async () => {
+    try {
+      const root = process.cwd();
+      await buildProject(root, false);
+    } catch (error) {
+      console.error(chalk.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('create <project-name>')
+  .description('Create a new project')
+  .action(async (name) => {
+    const targetDir = path.join(process.cwd(), name);
+    
+    try {
+      // Copy template files
+      await fs.copy(
+        path.join(__dirname, '../templates/basic-app'),
+        targetDir
+      );
+
+      console.log(chalk.green('✓'), 'Created project:', chalk.cyan(name));
+      console.log('\nNext steps:');
+      console.log(`  cd ${name}`);
+      console.log('  npm install');
+      console.log('  npm run dev');
+    } catch (error) {
+      console.error(chalk.red('Error:'), error.message);
+      process.exit(1);
+    }
+  });
+
+program.parse(process.argv);

package/bin/cli.ts

@@ -0,0 +1,40 @@
+import { Command } from 'commander';
+import { startDevServer } from './dev-server';
+import { createBuildConfig } from './esbuild.config';
+
+const program = new Command();
+
+program
+  .command('dev')
+  .description('Start development server')
+  .action(async () => {
+    try {
+      const projectRoot = process.cwd();
+      const { esbuild, server } = startDevServer(projectRoot);
+      
+      process.on('SIGINT', () => {
+        esbuild.kill();
+        server.close();
+        process.exit(0);
+      });
+    } catch (error) {
+      console.error('Failed to start dev server:', error);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('build')
+  .description('Build for production')
+  .action(async () => {
+    try {
+      const projectRoot = process.cwd();
+      process.env.NODE_ENV = 'production';
+      await createBuildConfig(projectRoot);
+    } catch (error) {
+      console.error('Build failed:', error);
+      process.exit(1);
+    }
+  });
+
+program.parse(process.argv);

package/bin/dev-server.ts

@@ -0,0 +1,34 @@
+import { spawn } from 'child_process';
+import sirv from 'sirv';
+import http from 'http';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export function startDevServer(projectRoot: string) {
+  // Start esbuild in watch mode
+  const esbuild = spawn('node', [path.join(__dirname, 'esbuild.config.js'), '--watch'], {
+    stdio: 'inherit',
+    cwd: projectRoot
+  });
+
+  // Create static server
+  const serve = sirv(projectRoot, {
+    dev: true,
+    single: true
+  });
+
+  const server = http.createServer(serve);
+  server.listen(3000);
+  console.log('✓ Dev server running at http://localhost:3000');
+
+  // Handle cleanup
+  process.on('SIGTERM', () => {
+    esbuild.kill();
+    server.close();
+    process.exit();
+  });
+
+  return { esbuild, server };
+}

package/bin/esbuild.config.ts

@@ -0,0 +1,39 @@
+import * as esbuild from 'esbuild';
+import path from 'path';
+
+export async function createBuildConfig(projectRoot: string, options: { watch?: boolean } = {}) {
+  const config: esbuild.BuildOptions = {
+    entryPoints: [path.join(projectRoot, 'src/main.tsx')],
+    bundle: true,
+    outfile: path.join(projectRoot, 'dist/bundle.js'),
+    loader: { '.tsx': 'tsx', '.ts': 'ts' },
+    jsxFactory: 'createElement',
+    jsxFragment: 'Fragment',
+    platform: 'browser',
+    target: 'es2020',
+    minify: process.env.NODE_ENV === 'production',
+    sourcemap: true,
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    },
+    plugins: [{
+      name: 'frontend-hamroun',
+      setup(build) {
+        // Handle framework imports
+        build.onResolve({ filter: /^frontend-hamroun$/ }, args => ({
+          path: path.resolve(projectRoot, 'node_modules/frontend-hamroun/dist/index.mjs')
+        }));
+      }
+    }]
+  };
+
+  if (options.watch) {
+    const ctx = await esbuild.context(config);
+    await ctx.watch();
+    console.log('✓ Watching for changes...');
+    return ctx;
+  } else {
+    await esbuild.build(config);
+    console.log('✓ Build complete');
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.1.58",
+  "version": "1.1.59",
   "description": "A lightweight frontend framework with hooks and virtual DOM",
   "type": "module",
   "main": "./dist/index.js",
@@ -61,8 +61,10 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
+    "esbuild": "^0.19.0",
     "fs-extra": "^11.1.1",
     "inquirer": "^9.2.10",
-    "nanospinner": "^1.1.0"
+    "nanospinner": "^1.1.0",
+    "sirv": "^2.0.4"
   }
 }

package/templates/basic-app/package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node server.js",
-    "build": "node esbuild.config.js",
+    "dev": "npx frontend-hamroun dev",
+    "build": "npx frontend-hamroun build",
     "lint": "eslint src --ext ts,tsx"
   },
   "dependencies": {