frontend-hamroun 1.2.16 → 1.2.17

package/scripts/build-cli.js

@@ -1,1199 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const rootDir = path.resolve(__dirname, '..');
-const binDir = path.resolve(rootDir, 'bin');
-
-// Ensure bin directory exists
-if (!fs.existsSync(binDir)) {
-  fs.mkdirSync(binDir, { recursive: true });
-}
-
-// Create CLI entrypoint using ES modules
-const cliContent = `#!/usr/bin/env node
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Templates available
-const TEMPLATES = {
-  'basic': 'Basic frontend only template',
-  'full-stack': 'Complete frontend and backend template'
-};
-
-// Colors for CLI output
-const colors = {
-  reset: '\\x1b[0m',
-  bright: '\\x1b[1m',
-  green: '\\x1b[32m',
-  blue: '\\x1b[34m',
-  red: '\\x1b[31m',
-  yellow: '\\x1b[33m'
-};
-
-// Get package.json to read version
-const packageJsonPath = path.resolve(__dirname, '../package.json');
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-
-// Print banner
-function printBanner() {
-  console.log(\`
-\${colors.blue}\${colors.bright}╔══════════════════════════════════════════════╗
-║                                              ║
-║   Frontend Hamroun v\${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework ║
-║                                              ║
-╚══════════════════════════════════════════════╝\${colors.reset}
-  \`);
-}
-
-// Print help
-function printHelp() {
-  console.log(\`
-\${colors.bright}USAGE:\${colors.reset}
-  \${colors.blue}npx frontend-hamroun\${colors.reset} [command] [options]
-
-\${colors.bright}COMMANDS:\${colors.reset}
-  \${colors.blue}create\${colors.reset} <project-name> [options]  Create a new project
-  \${colors.blue}help\${colors.reset}                           Display this help message
-  \${colors.blue}version\${colors.reset}                        Display version information
-
-\${colors.bright}OPTIONS:\${colors.reset}
-  \${colors.blue}--template\${colors.reset}, \${colors.blue}-t\${colors.reset} <template>       Specify template (default: basic)
-  \${colors.blue}--skip-install\${colors.reset}, \${colors.blue}-s\${colors.reset}            Skip package installation
-
-\${colors.bright}AVAILABLE TEMPLATES:\${colors.reset}
-\${Object.entries(TEMPLATES).map(([name, desc]) => \`  \${colors.blue}\${name.padEnd(12)}\${colors.reset} \${desc}\`).join('\\n')}
-
-\${colors.bright}EXAMPLES:\${colors.reset}
-  \${colors.blue}npx frontend-hamroun create\${colors.reset} my-app
-  \${colors.blue}npx frontend-hamroun create\${colors.reset} my-app --template full-stack
-  \`);
-}
-
-// Create project from template
-function createProject(projectName, options) {
-  const template = options.template || 'basic';
-  
-  // Check if template exists
-  if (!Object.keys(TEMPLATES).includes(template)) {
-    console.error(\`\${colors.red}error:\${colors.reset} Template "\${template}" not found.\`);
-    console.log(\`Available templates: \${Object.keys(TEMPLATES).join(', ')}\`);
-    process.exit(1);
-  }
-  
-  // Check if project directory already exists
-  const projectPath = path.resolve(process.cwd(), projectName);
-  if (fs.existsSync(projectPath)) {
-    console.error(\`\${colors.red}error:\${colors.reset} Directory \${projectName} already exists.\`);
-    process.exit(1);
-  }
-  
-  console.log(\`
-\${colors.bright}Creating a new project with Frontend Hamroun...\${colors.reset}
-\${colors.blue}• Project name:\${colors.reset} \${projectName}
-\${colors.blue}• Template:\${colors.reset} \${template}
-\${colors.blue}• Directory:\${colors.reset} \${projectPath}
-  \`);
-  
-  try {
-    // Find templates directory
-    const templateDir = path.resolve(__dirname, '../templates', template);
-    
-    if (!fs.existsSync(templateDir)) {
-      console.error(\`\${colors.red}error:\${colors.reset} Template directory not found: \${templateDir}\`);
-      // Try to find template with -app suffix as fallback
-      const fallbackTemplateDir = path.resolve(__dirname, '../templates', \`\${template}-app\`);
-      if (fs.existsSync(fallbackTemplateDir)) {
-        console.log(\`\${colors.yellow}Using fallback template:\${colors.reset} \${template}-app\`);
-        templateDir = fallbackTemplateDir;
-      } else {
-        process.exit(1);
-      }
-    }
-    
-    // Create project directory
-    fs.mkdirSync(projectPath, { recursive: true });
-    
-    // Copy template files (recursive function)
-    function copyDir(src, dest) {
-      const entries = fs.readdirSync(src, { withFileTypes: true });
-      
-      for (const entry of entries) {
-        const srcPath = path.join(src, entry.name);
-        const destPath = path.join(dest, entry.name);
-        
-        if (entry.isDirectory()) {
-          fs.mkdirSync(destPath, { recursive: true });
-          copyDir(srcPath, destPath);
-        } else {
-          fs.copyFileSync(srcPath, destPath);
-        }
-      }
-    }
-    
-    // Copy the files
-    copyDir(templateDir, projectPath);
-    console.log(\`\${colors.green}•\${colors.reset} Copied template files\`);
-    
-    // Update package.json with project name
-    const projectPackageJsonPath = path.join(projectPath, 'package.json');
-    if (fs.existsSync(projectPackageJsonPath)) {
-      const projectPackageJson = JSON.parse(fs.readFileSync(projectPackageJsonPath, 'utf8'));
-      projectPackageJson.name = projectName;
-      fs.writeFileSync(
-        projectPackageJsonPath, 
-        JSON.stringify(projectPackageJson, null, 2)
-      );
-    }
-    
-    // Install dependencies
-    if (!options.skipInstall) {
-      console.log(\`\\n\${colors.blue}Installing dependencies...\${colors.reset}\`);
-      
-      try {
-        execSync(\`npm install\`, { 
-          cwd: projectPath, 
-          stdio: 'inherit' 
-        });
-      } catch (error) {
-        console.error(\`\\n\${colors.red}Failed to install dependencies. You can install them manually:\${colors.reset}\`);
-        console.log(\`  cd \${projectName} && npm install\`);
-      }
-    }
-    
-    // Success message
-    console.log(\`
-\${colors.green}\${colors.bright}Success!\${colors.reset} Created \${projectName} at \${projectPath}
-
-\${colors.blue}Inside that directory, you can run several commands:\${colors.reset}
-
-  \${colors.bright}npm run dev\${colors.reset}
-    Starts the development server.
-
-  \${colors.bright}npm run build\${colors.reset}
-    Builds the app for production.
-
-  \${colors.bright}npm start\${colors.reset}
-    Runs the built app in production mode.
-
-\${colors.blue}We suggest that you begin by typing:\${colors.reset}
-
-  \${colors.bright}cd\${colors.reset} \${projectName}
-  \${colors.bright}npm run dev\${colors.reset}
-
-\${colors.green}Happy coding!\${colors.reset}
-    \`);
-    
-  } catch (error) {
-    console.error(\`\${colors.red}Failed to create project:\${colors.reset}\`, error);
-    process.exit(1);
-  }
-}
-
-// Parse command line arguments
-function parseArgs() {
-  const args = process.argv.slice(2);
-  const command = args[0];
-  
-  if (!command || command === 'help') {
-    printBanner();
-    printHelp();
-    process.exit(0);
-  }
-  
-  if (command === 'version') {
-    console.log(\`frontend-hamroun v\${packageJson.version}\`);
-    process.exit(0);
-  }
-  
-  if (command === 'create') {
-    const projectName = args[1];
-    
-    if (!projectName) {
-      console.error(\`\${colors.red}error:\${colors.reset} Project name is required.\`);
-      console.log(\`Run \${colors.blue}npx frontend-hamroun help\${colors.reset} for usage information.\`);
-      process.exit(1);
-    }
-    
-    // Parse options
-    const options = {
-      template: 'basic',
-      skipInstall: false
-    };
-    
-    for (let i = 2; i < args.length; i++) {
-      if (args[i] === '--template' || args[i] === '-t') {
-        options.template = args[++i];
-      } else if (args[i] === '--skip-install' || args[i] === '-s') {
-        options.skipInstall = true;
-      }
-    }
-    
-    printBanner();
-    createProject(projectName, options);
-    return;
-  }
-  
-  console.error(\`\${colors.red}error:\${colors.reset} Unknown command: \${command}\`);
-  console.log(\`Run \${colors.blue}npx frontend-hamroun help\${colors.reset} for usage information.\`);
-  process.exit(1);
-}
-
-// Run CLI
-parseArgs();
-`;
-
-// Write CLI file with .mjs extension for ES modules
-fs.writeFileSync(path.join(binDir, 'cli.mjs'), cliContent, 'utf8');
-
-// Make CLI executable
-try {
-  fs.chmodSync(path.join(binDir, 'cli.mjs'), '755');
-  console.log('✅ CLI built successfully: bin/cli.mjs');
-} catch (error) {
-  console.warn('⚠️ Could not make CLI executable:', error);
-}
-
-// Let's make sure we also have template directories
-const templatesDir = path.resolve(rootDir, 'templates');
-const templateList = ['basic', 'full-stack'];
-
-console.log('🔍 Checking template directories...');
-for (const template of templateList) {
-  const templateDir = path.join(templatesDir, template);
-  const appTemplateDir = path.join(templatesDir, `${template}-app`);
-  
-  // Check if either directory exists
-  if (!fs.existsSync(templateDir) && !fs.existsSync(appTemplateDir)) {
-    console.log(`⚠️ Template directory "${template}" not found at: ${templateDir}`);
-    console.log(`⚠️ Template directory "${template}-app" not found at: ${appTemplateDir}`);
-    
-    // Create the template directory
-    console.log(`📁 Creating template directory: ${template}`);
-    fs.mkdirSync(templateDir, { recursive: true });
-    
-    // Create a minimal template
-    console.log(`📝 Creating minimal ${template} template`);
-    
-    // Create package.json
-    const packageJson = {
-      "name": "frontend-hamroun-app",
-      "private": true,
-      "version": "0.1.0",
-      "type": "module",
-      "scripts": {
-        "dev": "node src/server.js",
-        "build": "node src/build.js",
-        "preview": "node src/preview.js"
-      },
-      "dependencies": {
-        "frontend-hamroun": "latest"
-      },
-      "devDependencies": {
-        "@types/node": "^20.10.0",
-        "typescript": "^5.3.2"
-      }
-    };
-    
-    fs.writeFileSync(
-      path.join(templateDir, 'package.json'),
-      JSON.stringify(packageJson, null, 2)
-    );
-    
-    // Create minimal files for the template
-    fs.writeFileSync(
-      path.join(templateDir, 'index.html'),
-      `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-</html>`
-    );
-    
-    // Create src directory
-    const srcDir = path.join(templateDir, 'src');
-    fs.mkdirSync(srcDir, { recursive: true });
-    
-    // Create basic files
-    fs.writeFileSync(
-      path.join(srcDir, 'main.ts'),
-      `import { render } from 'frontend-hamroun';
-import { App } from './App';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  if (rootElement) {
-    render(<App />, rootElement);
-  }
-});`
-    );
-    
-    fs.writeFileSync(
-      path.join(srcDir, 'App.tsx'),
-      `import { useState } from 'frontend-hamroun';
-
-export function App() {
-  const [count, setCount] = useState(0);
-  
-  return (
-    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '2rem' }}>
-      <h1 style={{ color: '#333', textAlign: 'center' }}>Frontend Hamroun App</h1>
-      <div style={{ 
-        display: 'flex', 
-        flexDirection: 'column', 
-        alignItems: 'center',
-        marginTop: '2rem',
-        padding: '1rem',
-        border: '1px solid #ccc',
-        borderRadius: '8px'
-      }}>
-        <h2>Counter Example</h2>
-        <p>Count: {count}</p>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <button 
-            onClick={() => setCount(count - 1)}
-            style={{
-              padding: '8px 16px',
-              background: '#ff4d4d',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer'
-            }}
-          >
-            Decrement
-          </button>
-          <button 
-            onClick={() => setCount(count + 1)}
-            style={{
-              padding: '8px 16px',
-              background: '#4d79ff',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer'
-            }}
-          >
-            Increment
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}`
-    );
-    
-    // Create build.js
-    fs.writeFileSync(
-      path.join(srcDir, 'build.js'),
-      `import { execSync } from 'child_process';
-
-console.log('Building the app...');
-try {
-  execSync('tsc', { stdio: 'inherit' });
-  console.log('Build completed successfully.');
-} catch (error) {
-  console.error('Build failed:', error);
-}`
-    );
-    
-    // Create preview.js
-    fs.writeFileSync(
-      path.join(srcDir, 'preview.js'),
-      `import { execSync } from 'child_process';
-
-console.log('Starting preview server...');
-try {
-  execSync('node dist/server.js', { stdio: 'inherit' });
-} catch (error) {
-  console.error('Failed to start preview server:', error);
-}`
-    );
-    
-    // Create tsconfig files
-    fs.writeFileSync(
-      path.join(templateDir, 'tsconfig.json'),
-      `{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}`
-    );
-    
-    fs.writeFileSync(
-      path.join(templateDir, 'tsconfig.node.json'),
-      `{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src/build.js", "src/preview.js"]
-}`
-    );
-    
-    console.log(`✅ Created minimal ${template} template`);
-  } else {
-    if (fs.existsSync(templateDir)) {
-      console.log(`✅ Template found: ${template}`);
-    } else {
-      console.log(`✅ Template found: ${template}-app (will use as fallback)`);
-    }
-  }
-}
-
-// Create a CJS wrapper for environments that don't support ESM out of the box
-const cjsWrapper = `#!/usr/bin/env node
-// This file is a CommonJS wrapper for the ES module CLI
-// It loads the actual CLI implementation using dynamic import()
-
-async function main() {
-  try {
-    // Use dynamic import to load the ES module CLI
-    const cliPath = new URL('../bin/cli.mjs', import.meta.url).href;
-    await import(cliPath);
-  } catch (error) {
-    console.error('Error loading CLI:', error);
-    process.exit(1);
-  }
-}
-
-main();
-`;
-
-fs.writeFileSync(path.join(binDir, 'cli.cjs'), cjsWrapper, 'utf8');
-fs.chmodSync(path.join(binDir, 'cli.cjs'), '755');
-console.log('✅ Created CJS wrapper: bin/cli.cjs');
-
-console.log('✅ CLI build process completed');
-
-// Create a minimal basic template (update existing code)
-function createBasicTemplate(templateDir) {
-  console.log(`📝 Creating minimal basic template at ${templateDir}`);
-  
-  // Create package.json
-  const packageJson = {
-    "name": "frontend-hamroun-app",
-    "private": true,
-    "version": "0.1.0",
-    "type": "module",
-    "scripts": {
-      "dev": "node src/server.js",
-      "build": "node src/build.js",
-      "preview": "node src/preview.js"
-    },
-    "dependencies": {
-      "frontend-hamroun": "latest"
-    },
-    "devDependencies": {
-      "@types/node": "^20.10.0",
-      "typescript": "^5.3.2"
-    }
-  };
-  
-  fs.writeFileSync(
-    path.join(templateDir, 'package.json'),
-    JSON.stringify(packageJson, null, 2)
-  );
-  
-  // Create index.html
-  fs.writeFileSync(
-    path.join(templateDir, 'index.html'),
-    `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-</html>`
-  );
-  
-  // Create src directory
-  const srcDir = path.join(templateDir, 'src');
-  fs.mkdirSync(srcDir, { recursive: true });
-  
-  // Create main.ts
-  fs.writeFileSync(
-    path.join(srcDir, 'main.ts'),
-    `import { render } from 'frontend-hamroun';
-import { App } from './App';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  if (rootElement) {
-    render(App({}), rootElement);
-    console.log('App rendered successfully');
-  }
-});`
-  );
-  
-  // Create App.ts (not App.tsx)
-  fs.writeFileSync(
-    path.join(srcDir, 'App.ts'),
-    `import { useState, useRef } from 'frontend-hamroun';
-
-export function App(props) {
-  const [count, setCount] = useState(0);
-  const renderCount = useRef(0);
-  
-  renderCount.current++;
-  
-  return {
-    type: 'div',
-    props: {
-      style: { 
-        fontFamily: 'Arial, sans-serif', 
-        maxWidth: '600px', 
-        margin: '0 auto', 
-        padding: '2rem'
-      },
-      children: [
-        {
-          type: 'h1',
-          props: { 
-            style: { textAlign: 'center' },
-            children: 'Frontend Hamroun App'
-          }
-        },
-        {
-          type: 'p',
-          props: {
-            style: { textAlign: 'center' },
-            children: \`Render count: \${renderCount.current}\`
-          }
-        },
-        {
-          type: 'div',
-          props: {
-            style: {
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              padding: '1rem',
-              border: '1px solid #ccc',
-              borderRadius: '8px'
-            },
-            children: [
-              {
-                type: 'h2',
-                props: {
-                  children: 'Counter Example'
-                }
-              },
-              {
-                type: 'p',
-                props: {
-                  children: \`Count: \${count}\`
-                }
-              },
-              {
-                type: 'div',
-                props: {
-                  style: {
-                    display: 'flex',
-                    gap: '8px'
-                  },
-                  children: [
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count - 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#ff4d4d',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Decrement'
-                      }
-                    },
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count + 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#4d79ff',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Increment'
-                      }
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        }
-      ]
-    }
-  };
-}`
-  );
-  
-  // Create build.js
-  fs.writeFileSync(
-    path.join(srcDir, 'build.js'),
-    `import { execSync } from 'child_process';
-
-console.log('Building the app...');
-try {
-  execSync('tsc', { stdio: 'inherit' });
-  console.log('Build completed successfully.');
-} catch (error) {
-  console.error('Build failed:', error);
-}`
-  );
-  
-  // Create preview.js
-  fs.writeFileSync(
-    path.join(srcDir, 'preview.js'),
-    `import { execSync } from 'child_process';
-
-console.log('Starting preview server...');
-try {
-  execSync('node dist/server.js', { stdio: 'inherit' });
-} catch (error) {
-  console.error('Failed to start preview server:', error);
-}`
-  );
-  
-  // Create tsconfig.json
-  fs.writeFileSync(
-    path.join(templateDir, 'tsconfig.json'),
-    `{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}`
-  );
-  
-  // Create tsconfig.node.json
-  fs.writeFileSync(
-    path.join(templateDir, 'tsconfig.node.json'),
-    `{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src/build.js", "src/preview.js"]
-}`
-  );
-  
-  console.log(`✅ Created minimal basic template at ${templateDir}`);
-  
-  // Create React compatibility layer
-  createReactCompatibilityLayer(templateDir);
-}
-
-// Create React compatibility layer
-function createReactCompatibilityLayer(templateDir) {
-  // Create React compatibility directory
-  const reactDir = path.join(templateDir, 'src/react');
-  if (!fs.existsSync(reactDir)) {
-    fs.mkdirSync(reactDir, { recursive: true });
-  }
-  
-  // Create jsx-dev-runtime.ts
-  fs.writeFileSync(
-    path.join(reactDir, 'jsx-dev-runtime.ts'),
-    `import { jsx } from 'frontend-hamroun';
-
-// Export jsx as jsxDEV for React compatibility
-export const jsxDEV = jsx;
-export const Fragment = Symbol('Fragment');
-export const jsxs = jsx;
-
-// Default export
-export default {
-  jsxDEV,
-  Fragment,
-  jsxs
-};`
-  );
-  
-  // Create jsx-runtime.ts
-  fs.writeFileSync(
-    path.join(reactDir, 'jsx-runtime.ts'),
-    `import { jsx } from 'frontend-hamroun';
-
-// Export jsx functions for React compatibility
-export const jsxs = jsx;
-export const Fragment = Symbol('Fragment');
-
-// Default export
-export default {
-  jsx,
-  jsxs,
-  Fragment
-};`
-  );
-  
-  // Create index.ts
-  fs.writeFileSync(
-    path.join(reactDir, 'index.ts'),
-    `import { 
-  useState, 
-  useEffect, 
-  useRef, 
-  useMemo, 
-  useContext, 
-  createContext,
-  jsx
-} from 'frontend-hamroun';
-
-// Provide React compatibility layer
-const React = {
-  createElement: jsx,
-  Fragment: Symbol('Fragment'),
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useContext,
-  createContext
-};
-
-// Export hooks directly for named imports
-export {
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useContext,
-  createContext,
-  jsx as createElement
-};
-
-// Default export
-export default React;`
-  );
-  
-  console.log(`✅ Created React compatibility layer in ${templateDir}`);
-}
-
-// Create React compatibility shims
-function createTemplateShims(templateDir) {
-  // Create src directory if it doesn't exist
-  const srcDir = path.join(templateDir, 'src');
-  if (!fs.existsSync(srcDir)) {
-    fs.mkdirSync(srcDir, { recursive: true });
-  }
-  
-  // Create shims.ts file for React JSX compatibility
-  fs.writeFileSync(
-    path.join(srcDir, 'shims.ts'),
-    `// This file provides compatibility shims for React JSX imports
-
-import { jsx } from 'frontend-hamroun';
-
-// Export the jsx function as jsxDEV for React compatibility
-export const jsxDEV = jsx;
-
-// Export a Fragment symbol
-export const Fragment = Symbol('Fragment');
-
-// Default export as React compatibility layer
-export default {
-  createElement: jsx,
-  Fragment
-};
-`
-  );
-  
-  console.log(`✅ Created React compatibility shims in ${templateDir}`);
-}
-
-// Create a function to create a pure non-JSX template
-function createPureTemplate(templateDir) {
-  console.log(`📝 Creating pure JS template at ${templateDir}`);
-  
-  // Create package.json without TypeScript, React or any unnecessary dependencies
-  const packageJson = {
-    "name": "frontend-hamroun-app",
-    "private": true,
-    "version": "0.1.0",
-    "type": "module",
-    "scripts": {
-      "dev": "node src/server.js",
-      "build": "node src/build.js",
-      "preview": "node src/preview.js"
-    },
-    "dependencies": {
-      "frontend-hamroun": "latest"
-    },
-    "devDependencies": {
-      "typescript": "^5.3.2"
-    }
-  };
-  
-  fs.writeFileSync(
-    path.join(templateDir, 'package.json'),
-    JSON.stringify(packageJson, null, 2)
-  );
-  
-  // Create index.html
-  fs.writeFileSync(
-    path.join(templateDir, 'index.html'),
-    `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-</html>`
-  );
-  
-  // Create src directory
-  const srcDir = path.join(templateDir, 'src');
-  fs.mkdirSync(srcDir, { recursive: true });
-  
-  // Create pure JS main.js without any JSX
-  fs.writeFileSync(
-    path.join(srcDir, 'main.js'),
-    `import { render } from 'frontend-hamroun';
-import { App } from './App.js';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  if (rootElement) {
-    // Call App as a function to create the VDOM structure
-    render(App(), rootElement);
-    console.log('App rendered successfully');
-  }
-});`
-  );
-  
-  // Create App.js with pure JS (no JSX or TS)
-  fs.writeFileSync(
-    path.join(srcDir, 'App.js'),
-    `import { useState, useRef } from 'frontend-hamroun';
-
-export function App() {
-  const [count, setCount] = useState(0);
-  const renderCount = useRef(0);
-  
-  renderCount.current++;
-  
-  // Return a plain JavaScript object representation of the UI
-  return {
-    type: 'div',
-    props: {
-      style: { 
-        fontFamily: 'Arial, sans-serif', 
-        maxWidth: '600px', 
-        margin: '0 auto', 
-        padding: '2rem'
-      },
-      children: [
-        {
-          type: 'h1',
-          props: { 
-            style: { textAlign: 'center' },
-            children: 'Frontend Hamroun App'
-          }
-        },
-        {
-          type: 'p',
-          props: {
-            style: { textAlign: 'center' },
-            children: \`Render count: \${renderCount.current}\`
-          }
-        },
-        {
-          type: 'div',
-          props: {
-            style: {
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              padding: '1rem',
-              border: '1px solid #ccc',
-              borderRadius: '8px'
-            },
-            children: [
-              {
-                type: 'h2',
-                props: {
-                  children: 'Counter Example'
-                }
-              },
-              {
-                type: 'p',
-                props: {
-                  children: \`Count: \${count}\`
-                }
-              },
-              {
-                type: 'div',
-                props: {
-                  style: {
-                    display: 'flex',
-                    gap: '8px'
-                  },
-                  children: [
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count - 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#ff4d4d',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Decrement'
-                      }
-                    },
-                    {
-                      type: 'button',
-                      props: {
-                        onClick: () => setCount(count + 1),
-                        style: {
-                          padding: '8px 16px',
-                          backgroundColor: '#4d79ff',
-                          color: 'white',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer'
-                        },
-                        children: 'Increment'
-                      }
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-        }
-      ]
-    }
-  };
-}`
-  );
-  
-  // Create build.js - No TypeScript, no JSX
-  fs.writeFileSync(
-    path.join(templateDir, 'src/build.js'),
-    `import { execSync } from 'child_process';
-
-console.log('Building the app...');
-try {
-  execSync('node src/build.js', { stdio: 'inherit' });
-  console.log('Build completed successfully.');
-} catch (error) {
-  console.error('Build failed:', error);
-}`
-  );
-  
-  // Create jsconfig.json instead of tsconfig.json
-  fs.writeFileSync(
-    path.join(templateDir, 'jsconfig.json'),
-    `{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
-    "checkJs": false,
-    "strict": false
-  },
-  "include": ["src/**/*.js"],
-  "exclude": ["node_modules"]
-}`
-  );
-  
-  console.log(`✅ Created pure JS template at ${templateDir}`);
-}
-
-// Add a function for full-stack template
-function createFullStackTemplate(templateDir) {
-  // Create the base template first
-  createPureTemplate(templateDir);
-  
-  // Update package.json with backend dependencies
-  const packageJsonPath = path.join(templateDir, 'package.json');
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-  
-  // Add backend dependencies
-  packageJson.dependencies = {
-    ...packageJson.dependencies,
-    "express": "^4.18.2",
-    "compression": "^1.7.4",
-    "helmet": "^7.1.0",
-    "morgan": "^1.10.0"
-  };
-  
-  // Add backend scripts
-  packageJson.scripts = {
-    ...packageJson.scripts,
-    "start": "node dist/server.js",
-    "dev:server": "node --experimental-specifier-resolution=node src/server.js",
-    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\""
-  };
-  
-  // Add development dependencies for backend
-  packageJson.devDependencies = {
-    ...packageJson.devDependencies,
-    "concurrently": "^8.2.2"
-  };
-  
-  fs.writeFileSync(
-    packageJsonPath,
-    JSON.stringify(packageJson, null, 2)
-  );
-  
-  // Create server file
-  const srcDir = path.join(templateDir, 'src');
-  fs.writeFileSync(
-    path.join(srcDir, 'server.js'),
-    `import express from 'express';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-import compression from 'compression';
-import morgan from 'morgan';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Create the Express app
-const app = express();
-const PORT = process.env.PORT || 3001;
-
-// Apply middleware
-app.use(compression());
-app.use(morgan('dev'));
-app.use(express.json());
-
-// Serve static files in production
-if (process.env.NODE_ENV === 'production') {
-  const distPath = join(__dirname, '..');
-  app.use(express.static(distPath));
-}
-
-// API routes
-app.get('/api/hello', (req, res) => {
-  res.json({ 
-    message: 'Hello from Frontend Hamroun API!',
-    timestamp: new Date().toISOString()
-  });
-});
-
-// Start the server
-app.listen(PORT, () => {
-  console.log(\`Server running on port \${PORT}\`);
-});
-`
-  );
-  
-  console.log(`✅ Created full-stack template with server at ${templateDir}`);
-}
-
-// Update how templates are checked and created
-console.log('🔍 Checking template directories...');
-for (const template of templateList) {
-  const templateDir = path.join(templatesDir, template);
-  
-  if (!fs.existsSync(templateDir)) {
-    console.log(`⚠️ Template directory "${template}" not found at: ${templateDir}`);
-    console.log(`📁 Creating template directory: ${template}`);
-    fs.mkdirSync(templateDir, { recursive: true });
-    
-    // Create appropriate template based on type
-    if (template === 'full-stack') {
-      createFullStackTemplate(templateDir);
-    } else {
-      createPureTemplate(templateDir);
-    }
-  } else {
-    console.log(`✅ Template found: ${template}`);
-    
-    // Update package.json in existing templates
-    const packageJsonPath = path.join(templateDir, 'package.json');
-    if (fs.existsSync(packageJsonPath)) {
-      try {
-        console.log(`📦 Updating package.json in ${template}`);
-        if (template === 'full-stack') {
-          createFullStackTemplate(templateDir);
-        } else {
-          createPureTemplate(templateDir);
-        }
-      } catch (error) {
-        console.error(`❌ Failed to update package.json in ${template}: ${error.message}`);
-      }
-    }
-  }
-}
-
-console.log('✅ CLI build process completed');