frontend-hamroun 1.2.79 → 1.2.80

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.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.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.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.ts

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

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');
 

package/templates/basic-app/src/server.ts

@@ -0,0 +1,52 @@
+import express from 'express';
+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;
+
+// Find the client entry file
+function getClientEntry(): string {
+  const assetsDir = path.join(__dirname, './');
+  const files = fs.readdirSync(assetsDir);
+  const entry = files.find(file => file.startsWith("client") && file.endsWith('.js'));
+  if (!entry) {
+    throw new Error('Client entry file not found');
+  }
+  return entry;
+}
+
+// Static file serving
+app.use('/assets', express.static(path.join(__dirname, './')));
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Main route handler
+app.get('/', async (_req: express.Request, res: express.Response) => {
+  try {
+    const clientEntry = getClientEntry();
+    const html = await renderToString({
+      element: jsx(App, null),
+      title: 'SSR App',
+      scripts: [`/assets/${clientEntry}`],
+      initialState: {
+        // Add any initial state here
+      },
+      meta: {
+        'viewport': 'width=device-width, initial-scale=1.0',
+      }
+    });
+    
+    res.send(html);
+  } catch (error) {
+    console.error('Rendering error:', error);
+    res.status(500).send('Server Error');
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

package/templates/basic-app/tsconfig.server.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/server.ts"]
+}