frontend-hamroun 1.2.75 → 1.2.77

package/templates/fullstack-app/public/styles.css

@@ -460,13 +460,19 @@ video {
     max-width: 1536px;
   }
 }
+.m-1 {
+  margin: 0.25rem;
+}
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 .mb-2 {
   margin-bottom: 0.5rem;
@@ -486,12 +492,24 @@ video {
 .mr-2 {
   margin-right: 0.5rem;
 }
-.mt-12 {
-  margin-top: 3rem;
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
 }
 .mt-8 {
   margin-top: 2rem;
 }
+.block {
+  display: block;
+}
 .inline-block {
   display: inline-block;
 }
@@ -501,11 +519,38 @@ video {
 .table {
   display: table;
 }
+.grid {
+  display: grid;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-40 {
+  height: 10rem;
+}
 .h-5 {
   height: 1.25rem;
 }
-.min-h-\[50vh\] {
-  min-height: 50vh;
+.h-8 {
+  height: 2rem;
+}
+.max-h-24 {
+  max-height: 6rem;
+}
+.max-h-96 {
+  max-height: 24rem;
+}
+.min-h-screen {
+  min-height: 100vh;
+}
+.w-1\/2 {
+  width: 50%;
+}
+.w-1\/4 {
+  width: 25%;
+}
+.w-3\/4 {
+  width: 75%;
 }
 .w-5 {
   width: 1.25rem;
@@ -516,8 +561,25 @@ video {
 .max-w-4xl {
   max-width: 56rem;
 }
-.max-w-5xl {
-  max-width: 64rem;
+.flex-grow {
+  flex-grow: 1;
+}
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.list-disc {
+  list-style-type: disc;
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.flex-col {
+  flex-direction: column;
 }
 .items-center {
   align-items: center;
@@ -525,6 +587,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -535,15 +600,27 @@ video {
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
+}
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
 }
+.self-center {
+  align-self: center;
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -553,6 +630,12 @@ video {
 .overflow-x-auto {
   overflow-x: auto;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -576,6 +659,18 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+.border-yellow-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
+}
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
@@ -588,14 +683,41 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+}
+.p-2 {
+  padding: 0.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -605,6 +727,14 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -613,10 +743,18 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -625,12 +763,22 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
+.pb-4 {
+  padding-bottom: 1rem;
+}
+.pl-6 {
+  padding-left: 1.5rem;
+}
+.pt-4 {
+  padding-top: 1rem;
 }
 .text-left {
   text-align: left;
@@ -638,14 +786,14 @@ video {
 .text-center {
   text-align: center;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -658,6 +806,10 @@ video {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 .font-bold {
   font-weight: 700;
 }
@@ -688,6 +840,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+}
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -712,10 +872,30 @@ video {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
+}
+.text-yellow-700 {
+  --tw-text-opacity: 1;
+  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
+}
 .underline {
   text-decoration-line: underline;
 }
@@ -729,6 +909,14 @@ video {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -755,14 +943,33 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
+}
+.hover\:text-blue-100:hover {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
+}
 .hover\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
+.hover\:text-red-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .hover\:underline:hover {
   text-decoration-line: underline;
+}
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
 }

package/templates/fullstack-app/server.ts

@@ -2,7 +2,7 @@ import express, { Request, Response, NextFunction } from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs/promises';
-import { existsSync } from 'fs';
+import { existsSync, PathLike } from 'fs';
 import dotenv from 'dotenv';
 import { createServer } from 'http';
 import { Server as SocketServer } from 'socket.io';
@@ -82,7 +82,7 @@ app.get('/api/users/:id', (req, res) => {
 });
 
 // Setup esbuild
-let esbuildContext;
+let esbuildContext: esbuild.BuildContext<{ entryPoints: string[]; bundle: true; format: "esm"; outdir: string; sourcemap: boolean; minify: boolean; jsx: "transform"; jsxFactory: string; jsxFragment: string; external: string[]; define: { 'process.env.NODE_ENV': string; }; loader: { '.tsx': "tsx"; '.ts': "ts"; '.jsx': "jsx"; '.js': "js"; '.css': "css"; '.json': "json"; '.png': "file"; '.jpg': "file"; '.svg': "file"; }; plugins: { name: string; setup(build: esbuild.PluginBuild): void; }[]; }>;
 
 async function setupEsbuild() {
   const buildDir = path.join(__dirname, 'build');
@@ -101,7 +101,7 @@ async function setupEsbuild() {
       // Create a plugin to process CSS with Tailwind
       postcssPlugin = {
         name: 'postcss-tailwind',
-        setup(build) {
+        setup(build: esbuild.PluginBuild) {
           build.onLoad({ filter: /\.css$/ }, async (args) => {
             const css = await fs.readFile(args.path, 'utf8');
             try {
@@ -116,11 +116,11 @@ async function setupEsbuild() {
               
               return {
                 contents: result.css,
-                loader: 'css'
+                loader: 'css' as esbuild.Loader
               };
             } catch (error) {
               console.error('Error processing CSS with Tailwind:', error);
-              return { contents: css, loader: 'css' };
+              return { contents: css, loader: 'css' as esbuild.Loader };
             }
           });
         }
@@ -209,7 +209,7 @@ if (isDev) {
       // Determine content type based on file extension
       const ext = path.extname(filePath);
       let contentType = 'application/javascript';
-      let loader: esbuild.Loader = 'js';
+      let loader = 'js';
       
       switch (ext) {
         case '.ts':
@@ -233,7 +233,7 @@ if (isDev) {
       
       // Transform the file with esbuild
       const result = await esbuild.transform(source, {
-        loader,
+        loader: loader as esbuild.Loader,
         sourcemap: 'inline',
         jsxFactory: 'jsx',
         jsxFragment: 'Fragment'
@@ -249,7 +249,7 @@ if (isDev) {
 }
 
 // Helper function to check if file exists
-async function fileExists(filepath: string): Promise<boolean> {
+async function fileExists(filepath: PathLike) {
   try {
     await fs.access(filepath);
     return true;
@@ -258,8 +258,30 @@ async function fileExists(filepath: string): Promise<boolean> {
   }
 }
 
+// Import server utilities directly without WASM functionality
+import { renderToString } from 'frontend-hamroun';
+
+// Simple renderComponent implementation
+async function renderComponent(Component: (arg0: {}) => any, props = {}) {
+  try {
+    // Create HTML string from component
+    const html = renderToString(Component(props));
+    return {
+      html,
+      success: true
+    };
+  } catch (error) {
+    console.error('Error rendering component:', error);
+    return {
+      html: `<div class="error">Error rendering component</div>`,
+      success: false,
+      error
+    };
+  }
+}
+
 // SSR handler for all routes except /api and static files
-app.get('*', async (req: Request, res: Response, next: NextFunction) => {
+app.get('*', async (req, res, next) => {
   // Skip API routes, static assets, and build/src files
   if (req.path.startsWith('/api/') || 
       req.path.startsWith('/build/') || 
@@ -323,7 +345,7 @@ app.get('*', async (req: Request, res: Response, next: NextFunction) => {
           }
         </style>
         <script>
-          window.__INITIAL_STATE__ = ` + JSON.stringify(initialState) + `;
+          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
         </script>
       </head>
       <body>
@@ -386,8 +408,8 @@ io.on('connection', (socket) => {
 
 // Handle file changes for live reload in development
 if (isDev) {
-  const chokidar = await import('chokidar');
-  const watcher = chokidar.watch([
+  const { watch } = await import('chokidar');
+  const watcher = watch([
     path.join(__dirname, 'src/**/*'),
     path.join(__dirname, 'public/**/*')
   ]);
@@ -417,6 +439,18 @@ if (isDev) {
   console.log('[Watcher] File watching enabled for development');
 }
 
+// API routes
+app.get('/api/posts', (req, res) => {
+  const { authorId } = req.query;
+  
+  if (authorId) {
+    const filteredPosts = store.posts.filter(p => p.authorId === parseInt( authorId as string));
+    return res.json(filteredPosts);
+  }
+  
+  res.json(store.posts);
+});
+
 // Start the server
 httpServer.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);

package/templates/fullstack-app/src/components/ErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import { jsx, useState, useEffect, useErrorBoundary } from 'frontend-hamroun';
+
+interface ErrorBoundaryProps {
+  children: any;
+  fallback?: (error: Error, reset: () => void) => any;
+}
+
+export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
+  const [error, resetError] = useErrorBoundary();
+  
+  if (error) {
+    if (fallback) {
+      return fallback(error, resetError);
+    }
+    
+    return (
+      <div className="error-boundary p-4 border border-red-500 rounded bg-red-50">
+        <h3 className="text-lg font-medium text-red-800 mb-2">Something went wrong</h3>
+        <p className="text-red-600 mb-2">{error.message}</p>
+        <button
+          onClick={resetError}
+          className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+        >
+          Try again
+        </button>
+        {process.env.NODE_ENV !== 'production' && (
+          <pre className="mt-3 text-xs overflow-auto p-2 bg-gray-100">
+            {error.stack}
+          </pre>
+        )}
+      </div>
+    );
+  }
+  
+  return children;
+}

package/templates/fullstack-app/src/components/Layout.tsx

@@ -1,44 +1,41 @@
 import { jsx } from 'frontend-hamroun';
-import AppConfig from '../config';
 
-export interface LayoutProps {
+interface LayoutProps {
   children: any;
   title?: string;
-  showNavigation?: boolean;
 }
 
-export default function Layout({ children, title = AppConfig.title, showNavigation = true }: LayoutProps) {
-  const { navigation } = AppConfig;
-  
+export default function Layout({ children, title = 'Frontend Hamroun App' }: LayoutProps) {
   return (
-    <div className="container mx-auto px-4 py-8 max-w-5xl">
-      <header className="mb-8">
-        <h1 className="text-4xl font-bold text-gray-800 mb-4">{title}</h1>
-        
-        {showNavigation && (
-          <nav className="mb-6">
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      <header className="bg-blue-600 text-white">
+        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+          <h1 className="text-xl font-bold">
+            <a href="/" className="hover:text-blue-100">
+              {title}
+            </a>
+          </h1>
+          
+          <nav>
             <ul className="flex space-x-6">
-              {navigation.map(item => (
-                <li key={item.path}>
-                  <a 
-                    href={item.path} 
-                    className="text-blue-600 hover:text-blue-800 hover:underline transition-colors font-medium"
-                  >
-                    {item.label}
-                  </a>
-                </li>
-              ))}
+              <li><a href="/" className="hover:text-blue-100">Home</a></li>
+              <li><a href="/about" className="hover:text-blue-100">About</a></li>
+              {/* WASM demo link removed */}
             </ul>
           </nav>
-        )}
+        </div>
       </header>
       
-      <main className="min-h-[50vh]">
+      <main className="flex-grow container mx-auto px-4 py-8">
         {children}
       </main>
       
-      <footer className="mt-12 pt-6 border-t border-gray-200 text-gray-600 text-sm">
-        <p>{AppConfig.title} &copy; {new Date().getFullYear()}</p>
+      <footer className="bg-gray-800 text-white">
+        <div className="container mx-auto px-4 py-6">
+          <p className="text-center text-gray-400">
+            &copy; {new Date().getFullYear()} Frontend Hamroun App. All rights reserved.
+          </p>
+        </div>
       </footer>
     </div>
   );