frontend-hamroun 1.2.11 → 1.2.13

package/bin/cli.mjs

@@ -34,7 +34,7 @@ function printBanner() {
 ${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
 ║                                              ║
 ║   Frontend Hamroun v${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework  ║
+║   A lightweight frontend & backend framework ║
 ║                                              ║
 ╚══════════════════════════════════════════════╝${colors.reset}
   `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "description": "A lightweight frontend and backend framework for building modern web applications",
   "type": "module",
   "main": "dist/frontend-hamroun.umd.js",

package/scripts/build-cli.js

@@ -50,7 +50,7 @@ function printBanner() {
 \${colors.blue}\${colors.bright}╔══════════════════════════════════════════════╗
 ║                                              ║
 ║   Frontend Hamroun v\${packageJson.version.padEnd(25)}║
-║   A lightweight frontend & backend framework  ║
+║   A lightweight frontend & backend framework ║
 ║                                              ║
 ╚══════════════════════════════════════════════╝\${colors.reset}
   \`);
@@ -732,6 +732,95 @@ export default defineConfig({
   );
   
   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
@@ -766,5 +855,253 @@ export default {
   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 React 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"
+    },
+    "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"
+    }
+  };
+  
+  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 vite.config.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,
+    }),
+  ]
+});`
+  );
+  
+  // 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}`);
+}
+
+// Update the main CLI function to create only pure JS templates
+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 a pure JS template (no React, no JSX)
+    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);
+    }
+  }
+}
+
 // Call this function when creating templates
 // ...existing code...

package/templates/basic/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>
-</head>
-<body class="bg-gray-100 min-h-screen">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-</body>
-</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>

package/templates/basic/jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "checkJs": false,
+    "strict": false
+  },
+  "include": ["src/**/*.js"],
+  "exclude": ["node_modules"]
+}

package/templates/basic/package.json

@@ -1,30 +1,20 @@
-{
-  "name": "front-package-app",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "start": "node dist/server.js",
-    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\"",
-    "dev:server": "tsx watch src/server.ts"
-  },
-  "dependencies": {
-    "frontend-hamroun": "latest"
-  },
-  "devDependencies": {
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.10.0",
-    "autoprefixer": "^10.4.16",
-    "concurrently": "^8.2.2",
-    "cssnano": "^6.0.1",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "tsx": "^4.6.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.0"
-  }
-}
+{
+  "name": "frontend-hamroun-app",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && 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"
+  }
+}

package/templates/basic/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++;
+  
+  // 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'
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
+}

package/templates/basic/src/main.js

@@ -0,0 +1,11 @@
+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');
+  }
+});

package/templates/basic/vite.config.js

@@ -0,0 +1,18 @@
+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,
+    }),
+  ]
+});

package/templates/basic-app/package.json

@@ -16,5 +16,9 @@
     "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"
   }
 }

package/templates/basic-app/src/react/index.ts

@@ -0,0 +1,35 @@
+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;

package/templates/basic-app/src/react/jsx-dev-runtime.ts

@@ -0,0 +1,13 @@
+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
+};

package/templates/basic-app/src/react/jsx-runtime.ts

@@ -0,0 +1,12 @@
+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
+};

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

@@ -35,7 +35,8 @@ export default defineConfig({
       define: {
         global: 'globalThis'
       }
-    }
+    },
+    include: ['frontend-hamroun']
   },
   plugins: [
     nodePolyfills({
@@ -48,11 +49,11 @@ export default defineConfig({
       'bcrypt': 'frontend-hamroun',
       'jsonwebtoken': 'frontend-hamroun',
       'mongoose': 'frontend-hamroun',
-      // Alias React imports to empty modules
-      'react': path.resolve(__dirname, 'src/shims.ts'),
+      // Map React imports to our compatibility layer
+      'react': path.resolve(__dirname, 'src/react/index.ts'),
       'react-dom': 'frontend-hamroun',
-      'react/jsx-runtime': path.resolve(__dirname, 'src/shims.ts'),
-      'react/jsx-dev-runtime': path.resolve(__dirname, 'src/shims.ts')
+      'react/jsx-runtime': path.resolve(__dirname, 'src/react/jsx-runtime.ts'),
+      'react/jsx-dev-runtime': path.resolve(__dirname, 'src/react/jsx-dev-runtime.ts')
     }
   }
 });

package/templates/full-stack/index.html

@@ -1,13 +1,12 @@
-<!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>
-  <link rel="stylesheet" href="/src/main.css">
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-</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>

package/templates/full-stack/jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "checkJs": false,
+    "strict": false
+  },
+  "include": ["src/**/*.js"],
+  "exclude": ["node_modules"]
+}

package/templates/full-stack/package.json

@@ -1,33 +1,20 @@
-{
-  "name": "frontend-hamroun-app",
-  "private": true,
-  "version": "0.1.0",
-  "description": "{{description}}",
-  "author": "{{author}}",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "start": "node dist/server.js",
-    "dev:server": "ts-node-esm --transpile-only src/server.ts",
-    "dev:full": "concurrently \"npm run dev\" \"npm run dev:server\""
-  },
-  "dependencies": {
-    "frontend-hamroun": "latest",
-    "express": "^4.18.2",
-    "compression": "^1.7.4",
-    "helmet": "^7.0.0",
-    "morgan": "^1.10.0"
-  },
-  "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.10.0",
-    "concurrently": "^8.2.2",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.0",
-    "vite-plugin-node-polyfills": "^0.21.0"
-  }
-}
+{
+  "name": "frontend-hamroun-app",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && 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"
+  }
+}

package/templates/full-stack/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++;
+  
+  // 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'
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  };
+}

package/templates/full-stack/src/main.js

@@ -0,0 +1,11 @@
+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');
+  }
+});

package/templates/full-stack/vite.config.js

@@ -1,34 +1,18 @@
-import { defineConfig } from 'vite';
-import path from 'path';
-
-export default defineConfig({
-  root: 'src/client',
-  publicDir: 'public',
-  build: {
-    outDir: '../../dist/client',
-    emptyOutDir: true,
-    rollupOptions: {
-      // Mark testing dependencies as external so they won't be included in the bundle
-      external: [
-        'mock-aws-s3',
-        'aws-sdk',
-        'nock',
-        'jest',
-        'jest-mock',
-        '@testing-library/react',
-        '@testing-library/jest-dom'
-      ]
-    }
-  },
-  server: {
-    port: 3001,
-    proxy: {
-      '/api': 'http://localhost:3000'
-    }
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src/client')
-    }
-  }
-});
+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,
+    }),
+  ]
+});