frontend-hamroun 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "description": "A lightweight frontend and backend framework for building modern web applications",
   "type": "module",
   "main": "dist/frontend-hamroun.umd.js",
@@ -27,15 +27,9 @@
     "frontend-hamroun": "./bin/cli.mjs"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build && tsc && npm run build:cli",
-    "build:cli": "node scripts/build-cli.js",
-    "prepublishOnly": "npm run build",
-    "test": "jest",
-    "clean": "rimraf dist bin",
-    "prebuild": "npm run clean",
-    "generate": "node scripts/generate.js",
-    "publish:next": "npm publish --tag next"
+    "dev": "node src/server.js",
+    "build": "tsc && node scripts/build-cli.js",
+    "start": "node dist/server.js"
   },
   "keywords": [
     "frontend",
@@ -66,9 +60,7 @@
     "rimraf": "^5.0.5",
     "terser": "^5.25.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.6.4"
+    "typescript": "^5.3.2"
   },
   "dependencies": {
     "bcrypt": "^5.1.1",
@@ -78,7 +70,6 @@
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.0.3",
     "morgan": "^1.10.0",
-    "ts-node": "^10.9.2",
-    "vite-plugin-node-polyfills": "^0.23.0"
+    "ts-node": "^10.9.2"
   }
 }

package/scripts/build-cli.js

@@ -292,17 +292,16 @@ for (const template of templateList) {
       "version": "0.1.0",
       "type": "module",
       "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview"
+        "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",
-        "vite": "^5.0.0"
+        "typescript": "^5.3.2"
       }
     };
     
@@ -401,21 +400,31 @@ export function App() {
 }`
     );
     
-    // Create vite.config.ts
+    // Create build.js
     fs.writeFileSync(
-      path.join(templateDir, 'vite.config.ts'),
-      `import { defineConfig } from 'vite';
+      path.join(srcDir, 'build.js'),
+      `import { execSync } from 'child_process';
 
-export default defineConfig({
-  esbuild: {
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
-  },
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  }
-});`
+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
@@ -453,7 +462,7 @@ export default defineConfig({
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["src/build.js", "src/preview.js"]
 }`
     );
     
@@ -503,18 +512,16 @@ function createBasicTemplate(templateDir) {
     "version": "0.1.0",
     "type": "module",
     "scripts": {
-      "dev": "vite",
-      "build": "tsc && vite build",
-      "preview": "vite preview"
+      "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",
-      "vite": "^5.0.0",
-      "vite-plugin-node-polyfills": "^0.21.0"
+      "typescript": "^5.3.2"
     }
   };
   
@@ -668,27 +675,31 @@ export function App(props) {
 }`
   );
   
-  // Create vite.config.ts
+  // Create build.js
   fs.writeFileSync(
-    path.join(templateDir, 'vite.config.ts'),
-    `import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-export default defineConfig({
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  plugins: [
-    nodePolyfills({
-      protocolImports: true,
-    }),
-  ]
-});`
+    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
@@ -727,7 +738,7 @@ export default defineConfig({
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["src/build.js", "src/preview.js"]
 }`
   );
   
@@ -859,25 +870,22 @@ export default {
 function createPureTemplate(templateDir) {
   console.log(`📝 Creating pure JS template at ${templateDir}`);
   
-  // Create package.json without React dependencies
+  // 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": "vite",
-      "build": "tsc && vite build",
-      "preview": "vite preview"
+      "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",
-      "vite": "^5.0.0",
-      "vite-plugin-node-polyfills": "^0.21.0"
+      "typescript": "^5.3.2"
     }
   };
   
@@ -1033,27 +1041,18 @@ export function App() {
 }`
   );
   
-  // Create vite.config.js - No TypeScript, no JSX
+  // Create build.js - No TypeScript, no JSX
   fs.writeFileSync(
-    path.join(templateDir, 'vite.config.js'),
-    `import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-export default defineConfig({
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  plugins: [
-    nodePolyfills({
-      protocolImports: true,
-    }),
-  ]
-});`
+    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
@@ -1078,7 +1077,90 @@ export default defineConfig({
   console.log(`✅ Created pure JS template at ${templateDir}`);
 }
 
-// Update the main CLI function to create only pure JS templates
+// 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);
@@ -1088,20 +1170,30 @@ for (const template of templateList) {
     console.log(`📁 Creating template directory: ${template}`);
     fs.mkdirSync(templateDir, { recursive: true });
     
-    // Create a pure JS template (no React, no JSX)
-    createPureTemplate(templateDir);
+    // Create appropriate template based on type
+    if (template === 'full-stack') {
+      createFullStackTemplate(templateDir);
+    } else {
+      createPureTemplate(templateDir);
+    }
   } else {
     console.log(`✅ Template found: ${template}`);
     
-    // Update existing template to use pure JS
-    const mainFile = path.join(templateDir, 'src/main.js');
-    if (!fs.existsSync(mainFile)) {
-      console.log(`⚠️ Updating template ${template} to use pure JS`);
-      // Create a pure JS template in this location
-      createPureTemplate(templateDir);
+    // 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}`);
+      }
     }
   }
 }
 
-// Call this function when creating templates
-// ...existing code...
+console.log('✅ CLI build process completed');

package/templates/basic/package.json

@@ -5,16 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "frontend-hamroun": "latest"
   },
   "devDependencies": {
-    "@types/node": "^20.10.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
+    "vite": "^5.0.10",
+    "vite-plugin-node-polyfills": "^0.23.0"
   }
 }

package/templates/basic/tsconfig.json

@@ -10,9 +10,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "Fragment",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

package/templates/basic-app/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Frontend App</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun App</title>
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
 </body>
 </html>

package/templates/basic-app/package.json

@@ -4,21 +4,14 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "dev": "node src/server.js",
+    "build": "tsc",
+    "start": "node dist/server.js"
   },
   "dependencies": {
-    "frontend-hamroun": "latest"
+    "express": "^4.18.2"
   },
   "devDependencies": {
-    "@types/node": "^20.10.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
-  },
-  "overrides": {
-    "react": "npm:@empty-npm-package/react@1.0.0",
-    "react-dom": "npm:@empty-npm-package/react-dom@1.0.0"
+    "typescript": "^5.3.2"
   }
 }

package/templates/basic-app/src/App.js

@@ -0,0 +1,105 @@
+import { useState, useRef } from 'frontend-hamroun';
+
+export function App() {
+  const [count, setCount] = useState(0);
+  const renderCount = useRef(0);
+  
+  renderCount.current++;
+  
+  // Using plain JS objects instead of JSX
+  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'
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
+}

package/templates/basic-app/src/main.js

@@ -0,0 +1,10 @@
+import { render } from 'frontend-hamroun';
+import { App } from './App.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    render(App(), rootElement);
+    console.log('App rendered successfully');
+  }
+});

package/templates/basic-app/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+export default defineConfig({
+  // No JSX-specific configuration
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  },
+  server: {
+    port: 3000,
+    open: true
+  },
+  optimizeDeps: {
+    include: ['frontend-hamroun']
+  },
+  plugins: [
+    nodePolyfills({
+      protocolImports: true,
+    }),
+  ]
+});

package/templates/full-stack/package.json

@@ -4,17 +4,18 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "dev": "node src/server.js",
+    "build": "tsc",
+    "start": "node dist/server.js"
   },
   "dependencies": {
-    "frontend-hamroun": "latest"
+    "express": "^4.18.2",
+    "compression": "^1.7.4",
+    "helmet": "^7.1.0",
+    "morgan": "^1.10.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
+    "typescript": "^5.3.2"
   }
 }

package/templates/full-stack/tsconfig.json

@@ -10,9 +10,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxFactory": "jsx",
-    "jsxFragmentFactory": "Fragment",
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,