frontend-hamroun 1.2.15 → 1.2.17

package/package.json

@@ -1,84 +1,103 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.15",
-  "description": "A lightweight frontend and backend framework for building modern web applications",
+  "version": "1.2.17",
+  "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
-  "main": "dist/frontend-hamroun.umd.js",
-  "module": "dist/frontend-hamroun.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "templates",
-    "scripts",
-    "bin",
+    "README.md",
     "LICENSE",
-    "README.md"
+    "bin",
+    "templates"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/frontend-hamroun.es.js",
-      "require": "./dist/frontend-hamroun.umd.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "bin": {
-    "hamroun": "./bin/cli.mjs",
-    "frontend-hamroun": "./bin/cli.mjs"
+    "frontend-hamroun": "./bin/cli.js",
+    "create-frontend-app": "./bin/cli.js"
   },
   "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",
     "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"
+    "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"
   },
   "keywords": [
     "frontend",
     "framework",
-    "react-like",
     "jsx",
-    "ssr",
-    "server-side-rendering",
-    "backend",
-    "api",
-    "express"
+    "hooks",
+    "virtual-dom",
+    "fullstack",
+    "express",
+    "api"
   ],
   "author": "Hamroun",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/hamroun/frontend-hamroun.git"
+    "url": "your-repo-url"
   },
   "devDependencies": {
-    "@types/bcrypt": "^5.0.2",
-    "@types/compression": "^1.7.5",
-    "@types/express": "^4.17.21",
-    "@types/jest": "^29.5.11",
-    "@types/jsonwebtoken": "^9.0.5",
-    "@types/morgan": "^1.9.9",
-    "@types/node": "^20.10.5",
-    "jest": "^29.7.0",
-    "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"
+    "@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"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bcrypt": "^5.1.1",
-    "compression": "^1.7.4",
+    "bcryptjs": "^2.4.3",
+    "chalk": "^5.3.0",
+    "commander": "^11.0.0",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
-    "helmet": "^7.1.0",
+    "fs-extra": "^11.1.1",
+    "inquirer": "^9.2.10",
     "jsonwebtoken": "^9.0.2",
-    "mongoose": "^8.0.3",
-    "morgan": "^1.10.0",
-    "ts-node": "^10.9.2",
-    "vite-plugin-node-polyfills": "^0.23.0"
+    "mongodb": "^5.7.0",
+    "mysql2": "^3.6.1",
+    "nanospinner": "^1.1.0",
+    "pg": "^8.11.3",
+    "ts-node": "^10.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": 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>Frontend Hamroun App</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Frontend App</title>
 </head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
+<body class="bg-gray-100 min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>

package/templates/basic-app/package.json

@@ -1,24 +1,28 @@
 {
-  "name": "frontend-hamroun-app",
+  "name": "my-app",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "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/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.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"
   }
 }

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

@@ -2,6 +2,5 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-    cssnano: process.env.NODE_ENV === 'production' ? { preset: 'default' } : false
   },
 }

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

@@ -141,13 +141,4 @@ function ContextConsumer() {
   );
 }
 
-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');
-  }
-});
+render(<App />, document.getElementById('root')!);

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

@@ -5,28 +5,7 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
-        },
-      },
-      fontFamily: {
-        sans: ['Inter var', 'sans-serif'],
-      },
-    },
+    extend: {},
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
+  plugins: [],
 }

package/templates/basic-app/tsconfig.json

@@ -1,26 +1,13 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
+    "jsx": "preserve",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
+    "esModuleInterop": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "react": ["./node_modules/frontend-hamroun"],
-      "react-dom": ["./node_modules/frontend-hamroun"],
-      "react/jsx-runtime": ["./node_modules/frontend-hamroun"],
-      "react/jsx-dev-runtime": ["./node_modules/frontend-hamroun"]
-    }
+    "skipLibCheck": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

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

@@ -1,59 +1,8 @@
 import { defineConfig } from 'vite';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import path from 'path';
 
 export default defineConfig({
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true,
-    rollupOptions: {
-      // Mark server-side dependencies as external
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        'react/jsx-dev-runtime',
-        'express',
-        'compression',
-        'helmet',
-        'morgan',
-        'bcrypt',
-        'jsonwebtoken',
-        'mongoose',
-        /node:.*/
-      ]
-    }
-  },
-  server: {
-    port: 3000,
-    open: true
-  },
-  optimizeDeps: {
-    // Prevent Vite from optimizing Node.js modules
-    exclude: ['bcrypt', 'jsonwebtoken', 'mongoose', 'express', 'compression', 'helmet', 'morgan'],
-    esbuildOptions: {
-      define: {
-        global: 'globalThis'
-      }
-    },
-    include: ['frontend-hamroun']
-  },
-  plugins: [
-    nodePolyfills({
-      protocolImports: true,
-    }),
-  ],
-  resolve: {
-    alias: {
-      // Remove any Node.js specific imports that might cause issues
-      'bcrypt': 'frontend-hamroun',
-      'jsonwebtoken': 'frontend-hamroun',
-      'mongoose': 'frontend-hamroun',
-      // 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/react/jsx-runtime.ts'),
-      'react/jsx-dev-runtime': path.resolve(__dirname, 'src/react/jsx-dev-runtime.ts')
-    }
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment'
   }
 });

package/templates/fullstack-app/api/hello.ts

@@ -0,0 +1,18 @@
+import { Request, Response } from 'express';
+
+export const get = (req: Request, res: Response) => {
+  res.json({
+    message: 'Hello from the API!',
+    timestamp: new Date().toISOString()
+  });
+};
+
+export const post = (req: Request, res: Response) => {
+  const { name = 'Guest' } = req.body;
+  
+  res.json({
+    message: `Hello, ${name}!`,
+    timestamp: new Date().toISOString(),
+    receivedData: req.body
+  });
+};

package/templates/fullstack-app/api/users/[id].ts

@@ -0,0 +1,73 @@
+import { Request, Response } from 'express';
+
+// Mock user database - same as in index.ts for simplicity
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+export const get = (req: Request, res: Response) => {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const user = users.find(u => u.id === userId);
+  
+  if (!user) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  res.json(user);
+};
+
+export const put = (req: Request, res: Response) => {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const userIndex = users.findIndex(u => u.id === userId);
+  
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  const { name, email } = req.body;
+  
+  if (!name && !email) {
+    return res.status(400).json({ error: 'Name or email must be provided' });
+  }
+  
+  // Update the user
+  users[userIndex] = {
+    ...users[userIndex],
+    ...(name && { name }),
+    ...(email && { email })
+  };
+  
+  res.json(users[userIndex]);
+};
+
+export const delete_ = (req: Request, res: Response) => {
+  const userId = parseInt(req.params.id);
+  
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  
+  const userIndex = users.findIndex(u => u.id === userId);
+  
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  // Remove the user
+  const deletedUser = users[userIndex];
+  users.splice(userIndex, 1);
+  
+  res.json({ success: true, deletedUser });
+};

package/templates/fullstack-app/api/users/index.ts

@@ -0,0 +1,32 @@
+import { Request, Response } from 'express';
+
+// Mock user database
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+export const get = (req: Request, res: Response) => {
+  // Return users without sensitive information
+  const safeUsers = users.map(({ id, name, email }) => ({ id, name, email }));
+  res.json(safeUsers);
+};
+
+export const post = (req: Request, res: Response) => {
+  const { name, email } = req.body;
+  
+  if (!name || !email) {
+    return res.status(400).json({ error: 'Name and email are required' });
+  }
+  
+  // In a real app, validate data and save to database
+  const newUser = {
+    id: users.length + 1,
+    name,
+    email
+  };
+  
+  users.push(newUser);
+  res.status(201).json(newUser);
+};

package/templates/fullstack-app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "fullstack-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node --loader ts-node/esm server.ts",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "start": "node dist/server.js"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "frontend-hamroun": "latest",
+    "jsonwebtoken": "^9.0.2",
+    "mongodb": "^5.7.0"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.4",
+    "@types/cors": "^2.8.14",
+    "@types/express": "^4.17.18",
+    "@types/jsonwebtoken": "^9.0.3",
+    "@types/node": "^18.16.19",
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.29",
+    "tailwindcss": "^3.3.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  }
+}

package/templates/fullstack-app/server.ts

@@ -0,0 +1,46 @@
+import { Server } from 'frontend-hamroun';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const server = new Server({
+  port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
+  apiDir: './api',
+  pagesDir: './src/pages',
+  staticDir: './public',
+  
+  // Uncomment to enable database
+  /*
+  db: {
+    url: process.env.DATABASE_URL || 'mongodb://localhost:27017/my_app',
+    type: 'mongodb'
+  },
+  */
+  
+  // Uncomment to enable authentication
+  /*
+  auth: {
+    secret: process.env.JWT_SECRET || 'your-secret-key',
+    expiresIn: '7d'
+  }
+  */
+});
+
+// Connect to database if configured
+if (server.getDatabase()) {
+  await server.getDatabase()?.connect();
+}
+
+// Start the server
+await server.start();
+
+// Handle shutdown gracefully
+process.on('SIGINT', async () => {
+  console.log('Shutting down server...');
+  await server.stop();
+  if (server.getDatabase()) {
+    await server.getDatabase()?.disconnect();
+  }
+  process.exit(0);
+});

package/templates/fullstack-app/src/pages/index.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'frontend-hamroun';
+
+export default function HomePage() {
+  const [apiData, setApiData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await fetch('/api/hello');
+        const data = await response.json();
+        setApiData(data);
+        setLoading(false);
+      } catch (err) {
+        setError(err.message);
+        setLoading(false);
+      }
+    }
+    
+    fetchData();
+  }, []);
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-3xl font-bold mb-4">Frontend Hamroun Full Stack</h1>
+      
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold mb-2">API Response:</h2>
+        {loading ? (
+          <p>Loading...</p>
+        ) : error ? (
+          <p className="text-red-500">Error: {error}</p>
+        ) : (
+          <pre className="bg-gray-100 p-4 rounded">
+            {JSON.stringify(apiData, null, 2)}
+          </pre>
+        )}
+      </div>
+      
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold mb-2">Features:</h2>
+        <ul className="list-disc pl-6">
+          <li>Server-side rendering</li>
+          <li>API routes with Express</li>
+          <li>Database integration</li>
+          <li>Authentication and authorization</li>
+          <li>File-based routing</li>
+        </ul>
+      </div>
+      
+      <div>
+        <h2 className="text-xl font-semibold mb-2">Get Started:</h2>
+        <p>Edit <code className="bg-gray-100 px-2 py-1 rounded">src/pages/index.tsx</code> to customize this page</p>
+        <p>API routes are in the <code className="bg-gray-100 px-2 py-1 rounded">api</code> directory</p>
+      </div>
+    </div>
+  );
+}

package/templates/ssr-template/vite.config.ts

@@ -19,17 +19,7 @@ export default defineConfig({
         entryFileNames: '[name].js',
         chunkFileNames: 'assets/[name]-[hash].js',
         assetFileNames: 'assets/[name]-[hash].[ext]'
-      },
-      // 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'
-      ]
+      }
     }
   },
   esbuild: {

package/bin/cli.cjs

@@ -1,16 +0,0 @@
-#!/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();