frontend-hamroun 1.1.31 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "description": "A lightweight frontend framework with hooks and virtual DOM",
   "type": "module",
   "main": "./dist/index.js",

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/package.json

@@ -4,22 +4,15 @@
   "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"
+    "dev": "node dev.js",
+    "build": "node build.js",
+    "serve": "esbuild --serve=3000 --servedir=."
   },
   "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"
+    "esbuild": "^0.19.0",
+    "typescript": "^5.0.0"
   }
 }

package/templates/ssr-template/build.js

@@ -0,0 +1,44 @@
+import * as esbuild from 'esbuild';
+
+// Build client
+await esbuild.build({
+  entryPoints: ['src/client.tsx'],
+  bundle: true,
+  outfile: 'dist/client.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';`,
+  },
+});
+
+// Build server
+await esbuild.build({
+  entryPoints: ['src/server.ts'],
+  bundle: true,
+  outfile: 'dist/server.js',
+  format: 'esm',
+  platform: 'node',
+  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';`,
+  },
+  external: ['express', 'frontend-hamroun'],
+});
+
+console.log('Build complete');

package/templates/ssr-template/dev.js

@@ -0,0 +1,24 @@
+import * as esbuild from 'esbuild';
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/client.tsx', 'src/server.ts'],
+  bundle: true,
+  outdir: 'dist',
+  format: 'esm',
+  platform: 'node',
+  sourcemap: true,
+  loader: {
+    '.tsx': 'tsx',
+    '.ts': 'tsx',
+  },
+  jsxFactory: '_jsx',
+  jsxFragment: '_Fragment',
+  banner: {
+    js: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun';`,
+  },
+  external: ['express', 'frontend-hamroun'],
+});
+
+await ctx.watch();
+
+console.log('Watching for changes...');

package/templates/ssr-template/package.json

@@ -4,10 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "build:server": "tsc -p tsconfig.server.json",
-    "build:ssr": "npm run build && npm run build:server",
+    "dev": "node dev.js",
+    "build": "node build.js",
     "start": "node dist/server.js"
   },
   "dependencies": {
@@ -15,9 +13,9 @@
     "frontend-hamroun": "latest"
   },
   "devDependencies": {
+    "esbuild": "^0.19.0",
     "@types/express": "^4.17.17",
     "@types/node": "^20.5.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.4.9"
+    "typescript": "^5.0.0"
   }
 }

package/templates/ssr-template/src/client.tsx

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

package/templates/ssr-template/src/server.ts

@@ -1,12 +1,31 @@
 import express from 'express';
-import { renderToString, jsx, Fragment } from 'frontend-hamroun';
-import { App } from './App';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { renderToString, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
+import fs from 'fs';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = express();
 const port = 3000;
 
-app.get('/', async (req: any, res: { send: (arg0: string) => void; }) => {
-  const html = await renderToString(jsx(App, {}));
+// Find the client entry file
+const getClientEntry = () => {
+  const assetsDir = path.join(__dirname, './');
+  const files = fs.readdirSync(assetsDir);
+  return files.find(file => file.startsWith("client")&& file.endsWith('.js'));
+};
+
+// Serve static files from dist/assets
+app.use('/assets', express.static(path.join(__dirname, './')));
+
+// Serve static files from dist
+app.use(express.static(path.join(__dirname, 'dist')));
+
+app.get('/', async (_req: any, res: { send: (arg0: string) => void; }) => {
+  const clientEntry = getClientEntry();
+  const html = await renderToString(jsx(App, null
+  ));
   
   res.send(`
     <!DOCTYPE html>
@@ -16,7 +35,7 @@ app.get('/', async (req: any, res: { send: (arg0: string) => void; }) => {
       </head>
       <body>
         <div id="root">${html}</div>
-        <script type="module" src="/client.js"></script>
+        <script type="module" src="/assets/${clientEntry}"></script>
       </body>
     </html>
   `);

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

@@ -1,12 +1,24 @@
 import { defineConfig } from 'vite';
+import path from 'path';
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
+    }
+  },
   build: {
-    ssr: true,
+    outDir: 'dist',
+    ssr: 'src/server.ts',
     rollupOptions: {
       input: {
         client: './src/client.tsx',
         server: './src/server.ts'
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]'
       }
     }
   },