frontend-hamroun 1.1.49 → 1.1.51

package/package.json

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

package/templates/ssr-template/package.json

@@ -1,14 +1,15 @@
 {
-  "name": "ssr-version",
+  "name": "ssr-template",
   "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",
-    "start": "node dist/server.js"
+    "build": "vite build",
+    "build:client": "vite build --outDir dist/client",
+    "build:server": "vite build --ssr src/server.ts --outDir dist/server",
+    "start": "node dist/server/server.js",
+    "preview": "vite preview"
   },
   "dependencies": {
     "express": "^4.18.2",

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

@@ -1,35 +1,51 @@
-import { useState, useEffect } from 'frontend-hamroun';
+import { useState, useEffect, Link, useRouter } from 'frontend-hamroun';
 
 interface AppProps {
-  initialUrl?: string;
-  initialSettings?: {
+  url: string;
+  user: any | null;
+  settings: {
     theme: string;
   };
-  user?: any;
 }
 
-export function App({ 
-  initialUrl = '/',
-  initialSettings = { theme: 'light' },
-  user = null 
-}: AppProps) {
-  const [theme, setTheme] = useState(initialSettings.theme);
+export function App({ url, user, settings }: AppProps) {
+  const [theme, setTheme] = useState(settings.theme);
+  const router = useRouter();
 
   useEffect(() => {
-    document.body.dataset.theme = theme;
+    document.documentElement.dataset.theme = theme;
   }, [theme]);
 
   return (
     <div className="app">
       <header>
-        <h1>My SSR App</h1>
-        <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
-          Toggle Theme
-        </button>
+        <nav>
+          <Link href="/">Home</Link>
+          <Link href="/about">About</Link>
+          <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
+            {theme === 'light' ? '🌙' : '☀️'}
+          </button>
+        </nav>
       </header>
+
       <main>
-        <p>Current URL: {initialUrl}</p>
-        {user && <p>Welcome, {user.name}!</p>}
+        {router.pathname === '/' && (
+          <section>
+            <h1>Welcome</h1>
+            {user ? (
+              <p>Hello, {user.name}!</p>
+            ) : (
+              <p>Welcome, guest!</p>
+            )}
+          </section>
+        )}
+
+        {router.pathname === '/about' && (
+          <section>
+            <h1>About</h1>
+            <p>This is a server-side rendered app.</p>
+          </section>
+        )}
       </main>
     </div>
   );

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

@@ -1,29 +1,31 @@
 import { hydrate } from 'frontend-hamroun';
 import { App } from './App';
 
-// Type-safe initial state access
+// Type-safe initial state
+interface InitialState {
+  url: string;
+  user: null | { id: number; name: string };
+  settings: {
+    theme: 'light' | 'dark';
+  };
+}
+
 declare global {
   interface Window {
-    __INITIAL_STATE__: {
-      url: string;
-      user: any;
-      settings: {
-        theme: string;
-      };
-    };
+    __INITIAL_STATE__: InitialState;
   }
 }
 
-// Get state from server
+// Get state injected by SSR
 const initialState = window.__INITIAL_STATE__;
 
+// Hydrate with the same props used in SSR
 document.addEventListener('DOMContentLoaded', () => {
   hydrate(
-    <App 
-      initialUrl={initialState.url}
-      initialSettings={initialState.settings}
-      user={initialState.user}
-    />, 
+    <App {...initialState} />, 
     document.getElementById('root')!
   );
+  
+  // Clean up after hydration
+  delete window.__INITIAL_STATE__;
 });

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

@@ -1,52 +1,64 @@
 import express from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { renderToString, createElement } from 'frontend-hamroun';
+import { renderToString } from 'frontend-hamroun';
 import { App } from './App';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = express();
-const port = 3000;
 
 // Static files
-app.use('/assets', express.static(path.join(__dirname, './assets')));
+app.use(express.static(path.join(__dirname, 'dist')));
 
-// All routes handler
 app.get('*', async (req, res) => {
   try {
-    // Get initial state based on route
+    // Create initial state
     const initialState = {
       url: req.url,
-      user: null, // Add your user data here
+      user: null,
       settings: { theme: 'light' }
     };
 
-    const html = await renderToString(createElement(App, {
-      initialUrl: req.url,
-      initialSettings: initialState.settings,
-      user: initialState.user
-    }), {
-      title: 'My SSR App',
-      description: 'Server-side rendered application',
-      scripts: ['/assets/client.js'],
-      styles: ['/assets/styles.css'],
+    // Use renderToString with proper options
+    const html = await renderToString(<App {...initialState} />, {
+      title: 'SSR Demo',
+      description: 'Server-side rendered app with Frontend Hamroun',
+      scripts: [
+        '/client.js' // Client entry point
+      ],
+      styles: ['/styles.css'],
       initialState,
       meta: {
+        'viewport': 'width=device-width, initial-scale=1.0',
         'theme-color': '#ffffff',
-        'og:title': 'My SSR App'
+        'og:title': 'SSR Demo',
+        'og:description': 'A server-rendered application'
       },
-      bodyAttrs: { 
-        'data-theme': initialState.settings.theme 
+      htmlAttrs: { 
+        lang: 'en',
+        'data-theme': initialState.settings.theme
       }
     });
-    
+
     res.send(html);
   } catch (error) {
-    console.error('Rendering error:', error);
-    res.status(500).send('Server Error');
+    console.error('SSR Error:', error);
+    // Fallback error page
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Error</title>
+        </head>
+        <body>
+          <h1>500 - Server Error</h1>
+          <script>window.location.reload()</script>
+        </body>
+      </html>
+    `);
   }
 });
 
-app.listen(port, () => {
-  console.log(`✓ Server running at http://localhost:${port}`);
+app.listen(3000, () => {
+  console.log('✓ SSR Server running at http://localhost:3000');
 });

package/templates/ssr-template/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
     "jsx": "preserve",
     "jsxFactory": "jsx",
     "jsxFragmentFactory": "Fragment",
@@ -15,9 +15,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "types": ["node"],
+    "types": ["vite/client"],
+    "outDir": "dist",
+    "baseUrl": ".",
     "paths": {
-      "frontend-hamroun": ["./node_modules/frontend-hamroun"]
+      "frontend-hamroun": ["../../src/index.ts"]
     }
   },
   "include": ["src"],

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

@@ -4,27 +4,28 @@ import path from 'path';
 export default defineConfig({
   resolve: {
     alias: {
-      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
+      'frontend-hamroun': path.resolve(__dirname, '../../src/index.ts')
     }
   },
   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]'
+        format: 'esm'
       }
     }
   },
   esbuild: {
-    jsxFactory: '_jsx',
-    jsxFragment: '_Fragment',
-    jsxInject: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun'`
+    jsxFactory: 'createElement',
+    jsxFragment: 'Fragment',
+    jsxInject: `import { createElement, Fragment } from 'frontend-hamroun'`
+  },
+  optimizeDeps: {
+    exclude: ['frontend-hamroun']
   }
 });