frontend-hamroun 1.1.32 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.1.32",
+  "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

@@ -1,13 +1,11 @@
 {
-  "name": "ssr-version",
+  "name": "ssr-app",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build:client": "vite build",
-    "build:server": "vite build --ssr",
-    "build": "npm run build:client && 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/App.tsx

@@ -1,20 +1,26 @@
 import { useState } from 'frontend-hamroun';
 
-
 export function App() {
-  const [count, setCount] = useState( 0);
-
-  const increment = () => setCount(count + 1);
-  const decrement = () => setCount(count - 1);
-
+  // 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={decrement} data-action="decrement">-</button>
+        <button 
+          onClick={() => setCount(count - 1)}
+          data-action="decrement"
+        >-</button>
         <span style={{ margin: '0 10px' }}>{count}</span>
-        <button onClick={increment} data-action="increment">+</button>
+        <button 
+          onClick={() => setCount(count + 1)}
+          data-action="increment"
+        >+</button>
       </div>
+      <script dangerouslySetInnerHTML={{
+        __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
+      }} />
     </div>
   );
 }

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

@@ -22,7 +22,7 @@ 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, res) => {
+app.get('/', async (_req: any, res: { send: (arg0: string) => void; }) => {
   const clientEntry = getClientEntry();
   const html = await renderToString(jsx(App, null
   ));