frontend-hamroun 1.2.79 → 1.2.82

package/package.json

@@ -1,159 +1,112 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.79",
+  "version": "1.2.82",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE",
-    "bin",
-    "templates"
-  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./server": {
-      "types": "./dist/server/index.d.ts",
-      "node": "./dist/server/index.js",
-      "import": "./dist/server/index.mjs",
-      "require": "./dist/server/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
     },
-    "./server/database": {
-      "types": "./dist/server/database.d.ts",
-      "import": "./dist/server/database.mjs",
-      "require": "./dist/server/database.js"
+    "./client": {
+      "import": "./dist/index.client.js",
+      "require": "./dist/index.client.cjs",
+      "types": "./dist/index.client.d.ts"
     },
-    "./server/auth": {
-      "types": "./dist/server/auth.d.ts",
-      "import": "./dist/server/auth.mjs",
-      "require": "./dist/server/auth.js"
-    },
-    "./server/middleware": {
-      "types": "./dist/server/middleware.d.ts",
-      "import": "./dist/server/middleware.mjs",
-      "require": "./dist/server/middleware.js"
-    },
-    "./server/api-router": {
-      "types": "./dist/server/api-router.d.ts",
-      "import": "./dist/server/api-router.mjs",
-      "require": "./dist/server/api-router.js"
-    },
-    "./server-types": {
-      "types": "./dist/server-types.d.ts",
-      "import": "./dist/server-types.mjs",
-      "require": "./dist/server-types.js"
-    },
-    "./ssr": {
-      "types": "./dist/server-renderer.d.ts",
-      "import": "./dist/server-renderer.mjs",
-      "require": "./dist/server-renderer.js"
+    "./server": {
+      "import": "./dist/server-renderer.js",
+      "require": "./dist/server-renderer.cjs",
+      "types": "./dist/server-renderer.d.ts"
     },
     "./jsx-runtime": {
-      "types": "./dist/jsx-runtime.d.ts",
-      "import": "./dist/jsx-runtime.mjs",
-      "require": "./dist/jsx-runtime.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks.d.ts",
-      "import": "./dist/hooks.mjs",
-      "require": "./dist/hooks.js"
-    },
-    "./renderer": {
-      "types": "./dist/renderer.d.ts",
-      "import": "./dist/renderer.mjs",
-      "require": "./dist/renderer.js"
-    },
-    "./wasm": {
-      "types": "./dist/wasm.d.ts",
-      "import": "./dist/wasm.mjs",
-      "require": "./dist/wasm.js"
-    },
-    "./server/wasm": {
-      "types": "./dist/server/wasm.d.ts",
-      "import": "./dist/server/wasm.mjs",
-      "require": "./dist/server/wasm.js"
+      "import": "./dist/jsx-runtime.js",
+      "require": "./dist/jsx-runtime.cjs",
+      "types": "./dist/jsx-runtime.d.ts"
     }
   },
   "bin": {
-    "frontend-hamroun": "./bin/cli.js",
-    "create-frontend-app": "./bin/cli.js"
+    "frontend-hamroun": "./bin/cli.js"
   },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "build:client": "vite build",
-    "build:server": "node build-server.js",
-    "build": "npm run build:server && npm run build:client",
-    "clean": "node -e \"if(require('fs').existsSync('dist')) require('fs').rmSync('dist',{recursive:true})\"",
-    "prepublishOnly": "npm run clean && npm run build",
+    "build": "tsc && vite build",
     "dev": "vite",
-    "test": "node --loader ts-node/esm tests/run-tests.ts",
-    "test:watch": "nodemon --watch src --watch tests --ext ts,tsx --exec 'npm test'",
-    "generate-test-report": "node --loader ts-node/esm tests/generate-report.ts"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write src/**/*.{ts,tsx}",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "clean": "rimraf dist"
   },
   "keywords": [
+    "javascript",
     "frontend",
     "framework",
-    "jsx",
-    "hooks",
-    "virtual-dom",
-    "fullstack",
-    "express",
-    "api"
+    "ssr",
+    "reactive",
+    "lightweight"
   ],
   "author": "Hamroun",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "your-repo-url"
+    "url": "https://github.com/hamroun/frontend-hamroun.git"
   },
-  "devDependencies": {
-    "@types/bcryptjs": "^2.4.4",
-    "@types/cors": "^2.8.14",
-    "@types/express": "^4.17.18",
-    "@types/jsonwebtoken": "^9.0.3",
-    "@types/mongodb": "^4.0.7",
-    "@types/node": "^18.16.19",
-    "@types/pg": "^8.10.2",
-    "@types/react": "^19.0.8",
-    "@vitejs/plugin-react": "^4.0.4",
-    "nanospinner": "^1.1.0",
-    "terser": "^5.38.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^0.34.0"
+  "bugs": {
+    "url": "https://github.com/hamroun/frontend-hamroun/issues"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+  "homepage": "https://github.com/hamroun/frontend-hamroun#readme",
+  "devDependencies": {
+    "@types/cors": "^2.8.18",
+    "@types/express": "^5.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/jsonwebtoken": "^9.0.9",
+    "@types/node": "^20.6.3",
+    "@types/pg": "^8.15.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.1",
+    "terser": "^5.19.4",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
   },
   "dependencies": {
-    "bcryptjs": "^2.4.3",
+    "bcryptjs": "^3.0.2",
     "boxen": "^7.1.1",
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
-    "cors": "^2.8.5",
-    "express": "^4.18.2",
-    "figlet": "^1.7.0",
+    "express": "^5.1.0",
+    "figlet": "^1.6.0",
     "fs-extra": "^11.1.1",
-    "gradient-string": "^3.0.0",
-    "inquirer": "^9.2.10",
+    "gradient-string": "^2.0.2",
+    "inquirer": "^9.2.11",
     "jsonwebtoken": "^9.0.2",
-    "mongodb": "^5.7.0",
-    "mysql2": "^3.6.1",
+    "mongodb": "^6.16.0",
+    "mysql2": "^3.14.1",
     "nanospinner": "^1.1.0",
     "ora": "^7.0.1",
-    "pg": "^8.11.3",
+    "pg": "^8.16.0",
     "terminal-link": "^3.0.0",
-    "ts-node": "^10.9.2",
-    "update-notifier": "^6.0.2"
+    "update-notifier": "^7.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -166,5 +119,9 @@
     "react-dom": {
       "optional": true
     }
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   }
-}
+}

package/templates/basic-app/build.js

@@ -0,0 +1,22 @@
+import * as esbuild from 'esbuild';
+
+await esbuild.build({
+  entryPoints: ['src/main.tsx'],
+  bundle: true,
+  outfile: 'dist/bundle.js',
+  format: 'esm',
+  platform: 'browser',
+  minify: true,
+  sourcemap: true,
+  loader: {
+    '.tsx': 'tsx',
+    '.ts': 'tsx',
+  },
+  jsxFactory: '_jsx',
+  jsxFragment: '_Fragment',
+  banner: {
+    js: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun';`,
+  },
+});
+
+console.log('Build complete');

package/templates/basic-app/dev.js

@@ -0,0 +1,27 @@
+import * as esbuild from 'esbuild';
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/main.tsx'],
+  bundle: true,
+  outfile: 'dist/bundle.js',
+  format: 'esm',
+  platform: 'browser',
+  sourcemap: true,
+  loader: {
+    '.tsx': 'tsx',
+    '.ts': 'tsx',
+  },
+  jsxFactory: '_jsx',
+  jsxFragment: '_Fragment',
+  banner: {
+    js: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun';`,
+  },
+});
+
+await ctx.watch();
+await ctx.serve({
+  servedir: '.',
+  port: 3000,
+});
+
+console.log('Development server running on http://localhost:3000');

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

@@ -0,0 +1,28 @@
+import * as esbuild from 'esbuild';
+
+const isWatch = process.argv.includes('--watch');
+
+const config = {
+  entryPoints: ['src/main.tsx'],
+  bundle: true,
+  outfile: 'dist/bundle.js',
+  loader: { '.tsx': 'tsx' },
+  jsxFactory: 'createElement',
+  jsxFragment: 'null',
+  platform: 'browser',
+  target: 'es2020',
+  minify: true,
+  inject: ['./src/jsx-shim.ts'],
+  define: {
+    'Fragment': 'null'
+  }
+};
+
+if (isWatch) {
+  const ctx = await esbuild.context(config);
+  await ctx.watch();
+  console.log('Watching...');
+} else {
+  await esbuild.build(config);
+  console.log('Build complete');
+}

package/templates/basic-app/index.html

@@ -5,7 +5,7 @@
     <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">
+<body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
 </body>

package/templates/basic-app/package.json

@@ -1,28 +1,29 @@
-{
-  "name": "my-app",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint src --ext ts,tsx --fix"
-  },
-  "dependencies": {
-    "frontend-hamroun": "latest"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "tailwindcss": "^3.3.3",
-    "postcss": "^8.4.27",
-    "autoprefixer": "^10.4.14"
-  }
-}
+{
+  "name": "create",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext ts,tsx --fix"
+  },
+  "dependencies": {
+    "frontend-hamroun": "latest"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.9"
+  }
+}

package/templates/basic-app/server.js

@@ -0,0 +1,24 @@
+import { spawn } from 'child_process';
+import sirv from 'sirv';
+import http from 'http';
+
+// Start esbuild in watch mode
+const esbuild = spawn('node', ['esbuild.config.js', '--watch'], {
+  stdio: 'inherit'
+});
+
+// Create simple static server
+const serve = sirv('.', {
+  dev: true,
+  single: true
+});
+
+const server = http.createServer(serve);
+server.listen(3000);
+console.log('Server running at http://localhost:3000');
+
+process.on('SIGTERM', () => {
+  esbuild.kill();
+  server.close();
+  process.exit();
+});

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

@@ -0,0 +1,16 @@
+import { useState } from 'frontend-hamroun';
+export function App() {
+    // Initialize with a default state that works on both server and client
+    const [count, setCount] = useState(0);
+    return (<div>
+      <h1>Server-Side Rendered App</h1>
+      <div>
+        <button onClick={() => setCount(count - 1)} data-action="decrement">-</button>
+        <span style={{ margin: '0 10px' }}>{count}</span>
+        <button onClick={() => setCount(count + 1)} data-action="increment">+</button>
+      </div>
+      <script dangerouslySetInnerHTML={{
+            __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
+        }}/>
+    </div>);
+}

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

@@ -0,0 +1,26 @@
+import { useState } from 'frontend-hamroun';
+
+export function App() {
+  // Initialize with a default state that works on both server and client
+  const [count, setCount] = useState(0);
+  
+  return (
+    <div>
+      <h1>Server-Side Rendered App</h1>
+      <div>
+        <button 
+          onClick={() => setCount(count - 1)}
+          data-action="decrement"
+        >-</button>
+        <span style={{ margin: '0 10px' }}>{count}</span>
+        <button 
+          onClick={() => setCount(count + 1)}
+          data-action="increment"
+        >+</button>
+      </div>
+      <script dangerouslySetInnerHTML={{
+        __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
+      }} />
+    </div>
+  );
+}

package/templates/basic-app/src/client.jsx

@@ -0,0 +1,5 @@
+import { hydrate } from 'frontend-hamroun';
+import { App } from './App';
+document.addEventListener('DOMContentLoaded', () => {
+    hydrate(<App />, document.getElementById('root'));
+});

package/templates/basic-app/src/client.tsx

@@ -0,0 +1,11 @@
+import { hydrate } from 'frontend-hamroun';
+import { App } from './App';
+
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  hydrate(
+    <App  />, 
+    document.getElementById('root')!
+  );
+});

package/templates/basic-app/src/components/Counter.jsx

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'frontend-hamroun';
+export function Counter({ initial = 0 }) {
+    const [count, setCount] = useState(initial);
+    useEffect(() => {
+        document.title = `Count: ${count}`;
+    }, [count]);
+    return (<div>
+      <h2>Counter Component</h2>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span style={{ margin: '0 10px' }}>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>);
+}

package/templates/basic-app/src/components/Counter.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'frontend-hamroun';
+
+export function Counter({ initial = 0 }) {
+  const [count, setCount] = useState(initial);
+  
+  useEffect(() => {
+    document.title = `Count: ${count}`;
+  }, [count]);
+
+  return (
+    <div>
+      <h2>Counter Component</h2>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <span style={{ margin: '0 10px' }}>{count}</span>
+      <button onClick={() => setCount(count + 1)}>+</button>
+    </div>
+  );
+}

package/templates/basic-app/src/jsx-shim.js

@@ -0,0 +1,3 @@
+import { jsx as createElement, Fragment } from 'frontend-hamroun';
+window.createElement = createElement;
+window.Fragment = Fragment;

package/templates/basic-app/src/jsx-shim.ts

@@ -0,0 +1,11 @@
+import { jsx as createElement, Fragment } from 'frontend-hamroun';
+
+declare global {
+  interface Window {
+    createElement: typeof createElement;
+    Fragment: typeof Fragment;
+  }
+}
+
+window.createElement = createElement;
+window.Fragment = Fragment;

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

@@ -0,0 +1,98 @@
+import { render, useState, useEffect, useMemo, useRef, useErrorBoundary, createContext, useContext } from 'frontend-hamroun';
+import './main.css';
+// Create a theme context
+const ThemeContext = createContext('light');
+// Create a component that will throw an error when clicked
+function BuggyComponent() {
+    const [shouldError, setShouldError] = useState(false);
+    if (shouldError) {
+        throw new Error("Test error from BuggyComponent");
+    }
+    return (<button onClick={() => setShouldError(true)} className="bg-red-600 text-white px-4 py-2 rounded mt-4 hover:bg-red-700">
+      Trigger Error
+    </button>);
+}
+function App() {
+    const [count, setCount] = useState(0);
+    const [theme, setTheme] = useState('light');
+    const renderCount = useRef(0);
+    const [error, resetError] = useErrorBoundary();
+    // Demonstrate useEffect
+    useEffect(() => {
+        document.title = `Count: ${count}`;
+        renderCount.current += 1;
+        return () => {
+            console.log('Cleanup effect');
+        };
+    }, [count]);
+    // Demonstrate useMemo
+    const doubled = useMemo(() => count * 2, [count]);
+    if (error) {
+        return (<div className="p-8 max-w-md mx-auto bg-red-50 rounded-lg shadow-lg">
+        <h1 className="text-2xl font-bold text-red-600 mb-4">Something went wrong!</h1>
+        <button onClick={resetError} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
+          Try again
+        </button>
+      </div>);
+    }
+    return (<ThemeContext.Provider value={theme}>
+      <div className={`p-8 max-w-4xl mx-auto rounded-lg shadow-lg transition-colors ${theme === 'dark'
+            ? 'bg-gray-800 text-white'
+            : 'bg-white text-gray-900'}`}>
+        <h1 className="text-3xl font-bold mb-6">Welcome to Frontend Hamroun</h1>
+        
+        <div className="mb-6">
+          <button onClick={() => setCount(count - 1)} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">-</button>
+          <span className="mx-4 text-xl">{count}</span>
+          <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">+</button>
+        </div>
+        
+        <p className="mb-2 text-lg">Doubled value: <span className="font-semibold">{doubled}</span></p>
+        <p className="mb-4 text-lg">Render count: <span className="font-semibold">{renderCount.current}</span></p>
+        
+        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} className={`px-4 py-2 rounded mb-8 ${theme === 'dark'
+            ? 'bg-yellow-400 text-gray-900 hover:bg-yellow-300'
+            : 'bg-gray-800 text-white hover:bg-gray-700'}`}>
+          Toggle Theme ({theme})
+        </button>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Error Boundary</h2>
+          <BuggyComponent />
+        </div>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Context</h2>
+          <ContextConsumer />
+        </div>
+      </div>
+    </ThemeContext.Provider>);
+}
+// Component to test context
+function ContextConsumer() {
+    // Get the full context object for debugging
+    const themeContext = useContext(ThemeContext);
+    console.log('Theme context object:', themeContext);
+    // Access the current theme from the parent component instead
+    // This is a workaround until context is properly implemented
+    return (<div className={`mt-4 p-4 rounded-md border ${themeContext === 'dark' ? 'border-gray-600' : 'border-gray-300'}`}>
+      <p className="mb-2"><strong>Note:</strong> Context API needs a fix in the framework.</p>
+      <p className="mb-1">Context object type: {typeof themeContext}</p>
+      <p className="mb-4">Context object keys: {Object.keys(themeContext).join(', ') || 'none'}</p>
+      
+      <button onClick={() => {
+            // Since we can't get the value directly from context,
+            // Let's add a button to demonstrate we can still use the Provider
+            const newTheme = document.body.style.backgroundColor === 'rgb(51, 51, 51)'
+                ? 'light' : 'dark';
+            console.log('Manually changing theme to:', newTheme);
+            // This won't work yet, but demonstrates the intent
+            if (ThemeContext) {
+                console.log('Provider exists, would set value to:', newTheme);
+            }
+        }} className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">
+        Check Context Implementation
+      </button>
+    </div>);
+}
+render(<App />, document.getElementById('root'));

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

@@ -1,6 +1,5 @@
 import { render, useState, useEffect, useMemo, useRef, useErrorBoundary, createContext, useContext } from 'frontend-hamroun';
 import './main.css';
-
 // Create a theme context
 const ThemeContext = createContext<'light' | 'dark'>('light');