frontend-hamroun 1.2.79 → 1.2.82

package/templates/ssr-template/esbuild.config.js

@@ -0,0 +1,33 @@
+import { build } from 'esbuild';
+
+// Build client
+await build({
+  entryPoints: ['src/client.tsx'],
+  bundle: true,
+  outfile: 'dist/client.js',
+  platform: 'browser',
+  format: 'esm',
+  minify: false,
+  jsx: 'transform',
+  jsxFactory: 'jsx',
+  jsxFragment: 'Fragment',
+  inject: ['./jsx-shim.js'],
+});
+
+// Build server
+await build({
+  entryPoints: ['src/server.ts'],
+  bundle: true,
+  outfile: 'dist/server.js',
+  platform: 'node',
+  format: 'esm',
+  external: ['frontend-hamroun'],
+  packages: 'external',
+  minify: false,
+  jsx: 'transform',
+  jsxFactory: 'jsx',
+  jsxFragment: 'Fragment',
+  inject: ['./jsx-shim.js'],
+});
+
+console.log('Build completed successfully!');

package/templates/ssr-template/jsx-shim.js

@@ -0,0 +1 @@
+export { jsx, Fragment } from 'frontend-hamroun';

package/templates/ssr-template/package.json

@@ -1,16 +1,22 @@
-{
-  "name": "ssr-app",
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "node server.js",
-    "start": "node server.js",
-    "build": "echo 'No build step required for this template'"
-  },
-  "dependencies": {
-    "dotenv": "^16.0.3",
-    "express": "^4.18.2",
-    "frontend-hamroun": "latest",
-    "node-fetch": "^3.3.1"
-  }
-}
+{
+  "name": "ssr-version",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build:client": "esbuild src/client.tsx --bundle --outfile=dist/client.js --platform=browser --format=esm",
+    "build:server": "esbuild src/server.ts --bundle --outfile=dist/server.js --platform=node --format=esm --external:frontend-hamroun --packages=external",
+    "build": "node esbuild.config.js",
+    "start": "node dist/server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "frontend-hamroun": "latest"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.5.0",
+    "esbuild": "^0.19.12",
+    "typescript": "^5.0.0"
+  }
+}

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

@@ -1,59 +1,19 @@
-import { useState, useEffect, useMemo, useRef, createContext } from 'frontend-hamroun';
-
-// Create a theme context
-const ThemeContext = createContext('light');
+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);
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const renderCount = useRef(0);
-  
-  // Client-side only effect
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      renderCount.current += 1;
-      console.log('Component rendered', renderCount.current, 'times');
-    }
-    return () => console.log('Component unmounting');
-  }, [count]);
-  
-  // Memoized value
-  const doubled = useMemo(() => count * 2, [count]);
-  
+
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+
   return (
-    <ThemeContext.Provider value={theme}>
-      <div style={{ 
-        padding: '20px', 
-        backgroundColor: theme === 'dark' ? '#333' : '#fff',
-        color: theme === 'dark' ? '#fff' : '#333'
-      }}>
-        <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>
-        <p>Doubled value: {doubled}</p>
-        {typeof window !== 'undefined' && (
-          <p>Render count: {renderCount.current}</p>
-        )}
-        <button 
-          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-          style={{ marginTop: '10px' }}
-        >
-          Toggle Theme ({theme})
-        </button>
-        <script dangerouslySetInnerHTML={{
-          __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
-        }} />
+    <div>
+      <h1>Server-Side Rendered App</h1>
+      <div>
+        <button onClick={decrement} data-action="decrement">-</button>
+        <span style={{ margin: '0 10px' }}>{count}</span>
+        <button onClick={increment} data-action="increment">+</button>
       </div>
-    </ThemeContext.Provider>
+    </div>
   );
 }

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

@@ -1,18 +1,4 @@
-import { hydrate, createElement } from 'frontend-hamroun';
+import { hydrate, jsx } from 'frontend-hamroun';
+import { App } from './App.js';
 
-// For simplicity in this example, we just hydrate the root component
-// In a more complex app, you might use a router
-import HomePage from './pages/index';
-
-// When the DOM is ready, hydrate the server-rendered HTML
-document.addEventListener('DOMContentLoaded', () => {
-  const rootElement = document.getElementById('app');
-  
-  if (rootElement) {
-    // Hydrate the app with the same component that was rendered on the server
-    hydrate(<HomePage />, rootElement);
-    console.log('Hydration complete');
-  } else {
-    console.error('Could not find root element with id "app"');
-  }
-});
+hydrate(jsx(App, {}), document.getElementById('root')!);

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

@@ -3,214 +3,31 @@ 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 __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const app = express();
 const port = 3000;
 
-// 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')));
-
-// Auto-routing middleware - scans the pages directory for components
-const getPagesDirectory = () => {
-  return path.join(__dirname, 'pages');
-};
-
-// Helper to check if a file exists
-const fileExists = async (filePath) => {
-  try {
-    await fs.promises.access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Map URL path to component path
-const getComponentPath = async (urlPath) => {
-  const pagesDir = getPagesDirectory();
-  
-  // Handle root path
-  if (urlPath === '/') {
-    const indexPath = path.join(pagesDir, 'index.js');
-    if (await fileExists(indexPath)) {
-      return { 
-        componentPath: indexPath,
-        params: {}
-      };
-    }
-  }
-  
-  // Try direct match (e.g., /about -> /pages/about.js)
-  const directPath = path.join(pagesDir, `${urlPath.slice(1)}.js`);
-  if (await fileExists(directPath)) {
-    return { 
-      componentPath: directPath,
-      params: {}
-    };
-  }
-  
-  // Try directory index (e.g., /about -> /pages/about/index.js)
-  const dirIndexPath = path.join(pagesDir, urlPath.slice(1), 'index.js');
-  if (await fileExists(dirIndexPath)) {
-    return { 
-      componentPath: dirIndexPath,
-      params: {}
-    };
-  }
-  
-  // Look for dynamic routes (with [param] in filename)
-  const segments = urlPath.split('/').filter(Boolean);
-  const dynamicRoutes = [];
-  
-  // Recursively scan pages directory for all files
-  const scanDir = (dir, basePath = '') => {
-    const items = fs.readdirSync(dir, { withFileTypes: true });
-    
-    for (const item of items) {
-      const itemPath = path.join(dir, item.name);
-      const routePath = path.join(basePath, item.name);
-      
-      if (item.isDirectory()) {
-        scanDir(itemPath, routePath);
-      } else if (item.name.endsWith('.js') && item.name.includes('[')) {
-        // This is a dynamic route file
-        const urlPattern = routePath
-          .replace(/\.js$/, '')
-          .replace(/\[([^\]]+)\]/g, ':$1');
-        
-        dynamicRoutes.push({
-          pattern: urlPattern,
-          componentPath: itemPath
-        });
-      }
-    }
-  };
-  
-  scanDir(pagesDir);
-  
-  // Check if any dynamic routes match
-  for (const route of dynamicRoutes) {
-    const routeSegments = route.pattern.split('/').filter(Boolean);
-    if (routeSegments.length !== segments.length) continue;
-    
-    const params = {};
-    let matches = true;
-    
-    for (let i = 0; i < segments.length; i++) {
-      const routeSeg = routeSegments[i];
-      const urlSeg = segments[i];
-      
-      if (routeSeg.startsWith(':')) {
-        // This is a parameter
-        const paramName = routeSeg.slice(1);
-        params[paramName] = urlSeg;
-      } else if (routeSeg !== urlSeg) {
-        matches = false;
-        break;
-      }
-    }
-    
-    if (matches) {
-      return {
-        componentPath: route.componentPath,
-        params
-      };
-    }
-  }
-  
-  // No match found
-  return null;
-};
-
-// Handle all routes with auto-routing
-app.get('*', async (req, res) => {
-  try {
-    const clientEntry = getClientEntry();
-    const routeResult = await getComponentPath(req.path);
-    
-    if (!routeResult) {
-      return res.status(404).send(`
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <title>404 - Page Not Found</title>
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          </head>
-          <body>
-            <div id="root">
-              <h1>404 - Page Not Found</h1>
-              <p>The page you requested could not be found.</p>
-            </div>
-            <script type="module" src="/assets/${clientEntry}"></script>
-          </body>
-        </html>
-      `);
-    }
-    
-    // Import the component dynamically
-    const { default: PageComponent } = await import(routeResult.componentPath);
-    
-    if (!PageComponent) {
-      throw new Error(`Invalid component in ${routeResult.componentPath}`);
-    }
-    
-    // Render the component with params
-    const html = await renderToString(jsx(PageComponent, { params: routeResult.params }));
-    
-    // Create route data for client hydration
-    const initialState = {
-      route: req.path,
-      params: routeResult.params,
-      timestamp: new Date().toISOString()
-    };
-    
-    res.send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>Frontend Hamroun SSR</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <meta charset="UTF-8">
-        </head>
-        <body>
-          <div id="root">${html}</div>
-          <script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
-          <script type="module" src="/assets/${clientEntry}"></script>
-        </body>
-      </html>
-    `);
-  } catch (error) {
-    console.error('Rendering error:', error);
-    res.status(500).send(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>500 - Server Error</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        </head>
-        <body>
-          <div id="root">
-            <h1>500 - Server Error</h1>
-            <p>Something went wrong on the server.</p>
-            <pre>${process.env.NODE_ENV === 'production' ? '' : error.stack}</pre>
-          </div>
-          <script type="module" src="/assets/${clientEntry}"></script>
-        </body>
-      </html>
-    `);
-  }
+// Serve static files from dist directory
+app.use(express.static(path.join(__dirname)));
+
+app.get('/', async (req, res) => {
+  const html = await renderToString(jsx(App, {}));
+  
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>SSR App</title>
+      </head>
+      <body>
+        <div id="root">${html}</div>
+        <script type="module" src="/client.js"></script>
+      </body>
+    </html>
+  `);
 });
 
 app.listen(port, () => {

package/templates/ssr-template/tsconfig.json

@@ -1,22 +1,19 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
     "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment"
+    "types": ["node"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }

package/templates/ssr-template/tsconfig.server.json

@@ -1,19 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "esModuleInterop": true,
-    "outDir": "./dist/server",
-    "declaration": true,
-    "sourceMap": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "jsx": "react",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment"
+    "module": "ESNext",
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler"
   },
-  "include": ["server.ts", "src/pages/**/*.tsx"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src/server.ts"]
 }