npm - baraqex - Versions diffs - 1.0.76 → 2.0.0 - Mend

baraqex 1.0.76 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

package/CHANGELOG.md +73 -0
package/README.md +268 -315
package/bin/baraqex.js +150 -12
package/dist/browser.d.ts +1 -1
package/dist/browser.d.ts.map +1 -1
package/dist/browser.js +2319 -205
package/dist/browser.js.map +4 -4
package/dist/core/batch.d.ts +10 -0
package/dist/core/batch.d.ts.map +1 -0
package/dist/core/component.d.ts +69 -0
package/dist/core/component.d.ts.map +1 -0
package/dist/core/context.d.ts +22 -0
package/dist/core/context.d.ts.map +1 -0
package/dist/core/errors.d.ts +125 -0
package/dist/core/errors.d.ts.map +1 -0
package/dist/core/event-bus.d.ts +29 -0
package/dist/core/event-bus.d.ts.map +1 -0
package/dist/core/forms.d.ts +128 -0
package/dist/core/forms.d.ts.map +1 -0
package/dist/core/hooks.d.ts +84 -0
package/dist/core/hooks.d.ts.map +1 -0
package/dist/core/index.d.ts +23 -0
package/dist/core/index.d.ts.map +1 -0
package/dist/core/jsx-runtime.d.ts +45 -0
package/dist/core/jsx-runtime.d.ts.map +1 -0
package/dist/core/lifecycle-events.d.ts +71 -0
package/dist/core/lifecycle-events.d.ts.map +1 -0
package/dist/core/renderer.d.ts +39 -0
package/dist/core/renderer.d.ts.map +1 -0
package/dist/core/router.d.ts +108 -0
package/dist/core/router.d.ts.map +1 -0
package/dist/core/server-renderer.d.ts +26 -0
package/dist/core/server-renderer.d.ts.map +1 -0
package/dist/core/store.d.ts +102 -0
package/dist/core/store.d.ts.map +1 -0
package/dist/core/types.d.ts +66 -0
package/dist/core/types.d.ts.map +1 -0
package/dist/core/utils.d.ts +153 -0
package/dist/core/utils.d.ts.map +1 -0
package/dist/core/vdom.d.ts +29 -0
package/dist/core/vdom.d.ts.map +1 -0
package/dist/index.d.ts +39 -35
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2592 -508
package/dist/index.js.map +4 -4
package/dist/server/auth.d.ts +8 -3
package/dist/server/auth.d.ts.map +1 -1
package/dist/server/index.d.ts +2 -2
package/dist/server/index.d.ts.map +1 -1
package/dist/server/index.js +173 -112
package/dist/server/index.js.map +4 -4
package/dist/server/middleware.d.ts +10 -1
package/dist/server/middleware.d.ts.map +1 -1
package/package.json +224 -124
package/templates/basic-app/src/main.jsx +336 -0
package/templates/complete-app/api/hello.js +0 -0
package/templates/complete-app/client.js +58 -0
package/templates/complete-app/lib/frontend-hamroun.js +182 -0
package/templates/complete-app/package.json +18 -0
package/templates/complete-app/pages/about.js +119 -0
package/templates/complete-app/pages/about.jsx +0 -0
package/templates/complete-app/pages/index.js +157 -0
package/templates/complete-app/pages/index.jsx +0 -0
package/templates/complete-app/pages/wasm-demo.js +290 -0
package/templates/complete-app/pages/wasm-demo.jsx +0 -0
package/templates/complete-app/public/client.js +89 -0
package/templates/complete-app/public/index.html +118 -0
package/templates/complete-app/public/styles.css +76 -0
package/templates/complete-app/readme.md +188 -0
package/templates/complete-app/server.js +226 -0
package/templates/complete-app/server.ts +275 -0
package/templates/complete-app/src/App.tsx +59 -0
package/templates/complete-app/src/client.ts +61 -0
package/templates/complete-app/src/client.tsx +18 -0
package/templates/complete-app/src/pages/index.tsx +51 -0
package/templates/complete-app/src/server.ts +218 -0
package/templates/complete-app/tsconfig.json +22 -0
package/templates/complete-app/tsconfig.server.json +19 -0
package/templates/complete-app/vite.config.js +57 -0
package/templates/complete-app/vite.config.ts +30 -0
package/templates/complete-app/wasm/build.bat +0 -0
package/templates/complete-app/wasm/build.sh +0 -0
package/templates/complete-app/wasm/example.go +0 -0
package/templates/fullstack-app/README.md +37 -0
package/templates/fullstack-app/api/hello.js +11 -0
package/templates/fullstack-app/api/hello.ts +18 -0
package/templates/fullstack-app/api/users/[id].ts +73 -0
package/templates/fullstack-app/api/users/index.ts +32 -0
package/templates/fullstack-app/build/main.css +874 -0
package/templates/fullstack-app/build/main.css.map +7 -0
package/templates/fullstack-app/build/main.js +967 -0
package/templates/fullstack-app/build/main.js.map +7 -0
package/templates/fullstack-app/build.ts +210 -0
package/templates/fullstack-app/index.html +36 -0
package/templates/fullstack-app/package.json +35 -0
package/templates/fullstack-app/postcss.config.js +6 -0
package/templates/fullstack-app/process-tailwind.js +45 -0
package/templates/fullstack-app/public/_redirects +1 -0
package/templates/fullstack-app/public/route-handler.js +47 -0
package/templates/fullstack-app/public/spa-fix.html +17 -0
package/templates/fullstack-app/public/styles.css +975 -0
package/templates/fullstack-app/public/tailwind.css +15 -0
package/templates/fullstack-app/server.js +267 -0
package/templates/fullstack-app/server.ts +474 -0
package/templates/fullstack-app/src/README.md +55 -0
package/templates/fullstack-app/src/client.js +87 -0
package/templates/fullstack-app/src/components/ClientHome.tsx +0 -0
package/templates/fullstack-app/src/components/ErrorBoundary.tsx +36 -0
package/templates/fullstack-app/src/components/Layout.tsx +42 -0
package/templates/fullstack-app/src/components/StateDemo.tsx +207 -0
package/templates/fullstack-app/src/components/UserList.tsx +44 -0
package/templates/fullstack-app/src/config.ts +42 -0
package/templates/fullstack-app/src/data/api.ts +206 -0
package/templates/fullstack-app/src/main.tsx +155 -0
package/templates/fullstack-app/src/middleware.ts +28 -0
package/templates/fullstack-app/src/pages/404.tsx +28 -0
package/templates/fullstack-app/src/pages/[id].tsx +0 -0
package/templates/fullstack-app/src/pages/_app.tsx +11 -0
package/templates/fullstack-app/src/pages/_document.tsx +25 -0
package/templates/fullstack-app/src/pages/_error.tsx +45 -0
package/templates/fullstack-app/src/pages/about/index.tsx +67 -0
package/templates/fullstack-app/src/pages/about.tsx +71 -0
package/templates/fullstack-app/src/pages/api/users/[id].ts +73 -0
package/templates/fullstack-app/src/pages/api/users/index.ts +43 -0
package/templates/fullstack-app/src/pages/index.tsx +110 -0
package/templates/fullstack-app/src/pages/users/[id].tsx +153 -0
package/templates/fullstack-app/src/pages/users.tsx +60 -0
package/templates/fullstack-app/src/pages/wasm-demo.tsx +1 -0
package/templates/fullstack-app/src/router.ts +255 -0
package/templates/fullstack-app/src/styles.css +5 -0
package/templates/fullstack-app/tailwind.config.js +11 -0
package/templates/fullstack-app/tsconfig.json +18 -0
package/templates/fullstack-app/vite.config.js +87 -0
package/templates/go/build.bat +36 -0
package/templates/go/build.sh +43 -0
package/templates/go/example.go +205 -0
package/templates/go-wasm-app/README.md +38 -0
package/templates/go-wasm-app/babel.config.js +21 -0
package/templates/go-wasm-app/build-client.js +49 -0
package/templates/go-wasm-app/build-wasm.js +237 -0
package/templates/go-wasm-app/build.config.js +62 -0
package/templates/go-wasm-app/build.js +218 -0
package/templates/go-wasm-app/package.json +32 -0
package/templates/go-wasm-app/public/index.html +128 -0
package/templates/go-wasm-app/public/styles.css +197 -0
package/templates/go-wasm-app/public/wasm/example.wasm +0 -0
package/templates/go-wasm-app/public/wasm/wasm_exec.js +561 -0
package/templates/go-wasm-app/public/wasm/wasm_exec_node.js +39 -0
package/templates/go-wasm-app/server.js +70 -0
package/templates/go-wasm-app/src/App.jsx +38 -0
package/templates/go-wasm-app/src/app.js +173 -0
package/templates/go-wasm-app/src/client.js +57 -0
package/templates/go-wasm-app/src/components/Footer.jsx +13 -0
package/templates/go-wasm-app/src/components/Header.jsx +19 -0
package/templates/go-wasm-app/src/components/WasmDemo.jsx +120 -0
package/templates/go-wasm-app/src/main.jsx +12 -0
package/templates/go-wasm-app/src/wasm/example.go +75 -0
package/templates/go-wasm-app/tsconfig.server.json +18 -0
package/templates/go-wasm-app/vite.config.js +45 -0
package/dist/forms/index.d.ts +0 -2
package/dist/forms/index.d.ts.map +0 -1
package/dist/forms/types.d.ts +0 -2
package/dist/forms/types.d.ts.map +0 -1
package/dist/frontend/components/WasmLoader.d.ts +0 -2
package/dist/frontend/components/WasmLoader.d.ts.map +0 -1
package/dist/frontend/hooks/useWasm.d.ts +0 -2
package/dist/frontend/hooks/useWasm.d.ts.map +0 -1
package/dist/frontend/index.d.ts +0 -2
package/dist/frontend/index.d.ts.map +0 -1
package/dist/router/index.d.ts +0 -2
package/dist/router/index.d.ts.map +0 -1
package/dist/router/types.d.ts +0 -2
package/dist/router/types.d.ts.map +0 -1
package/dist/store/index.d.ts +0 -2
package/dist/store/index.d.ts.map +0 -1
package/dist/store/types.d.ts +0 -2
package/dist/store/types.d.ts.map +0 -1
package/templates/basic-app/package-lock.json +0 -7173
package/templates/fullstack-template/package-lock.json +0 -3558
package/templates/ssr-template/package-lock.json +0 -5380
package/templates/wasm/package-lock.json +0 -5347
package/templates/wasm/public/example.wasm +0 -0

package/templates/fullstack-app/src/pages/404.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import { jsx } from 'frontend-hamroun';
+export default function NotFound({ initialState }) {
+  return (
+    <div className="not-found-container max-w-4xl mx-auto p-6">
+      <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 shadow-sm">
+        <h1 className="text-3xl font-bold text-gray-700 mb-4">Page Not Found</h1>
+        <p className="text-lg text-gray-600 mb-4">
+          The page you are looking for does not exist or has been moved.
+        </p>
+        <p className="text-gray-600 mb-6">
+          Path: <code className="bg-gray-100 px-2 py-1 rounded">{initialState?.route || 'unknown'}</code>
+        </p>
+        <div className="mt-6">
+          <a
+            href="/"
+            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack-app/src/pages/[id].tsx ADDED Viewed

File without changes

package/templates/fullstack-app/src/pages/_app.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+// This is the main App wrapper component similar to Next.js _app.js
+export default function App({ Component, pageProps, initialState }) {
+  return (
+    <Layout>
+      <Component {...pageProps} initialState={initialState} />
+    </Layout>
+  );
+}

package/templates/fullstack-app/src/pages/_document.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { jsx } from 'frontend-hamroun';
+export default function Document({
+  title = 'Frontend Hamroun App',
+  headContent,
+  bodyContent,
+  scripts
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <link rel="stylesheet" href="/styles.css" />
+        {headContent}
+      </head>
+      <body>
+        <div id="root">{bodyContent}</div>
+        <script src="/build/main.js" type="module"></script>
+        {scripts}
+      </body>
+    </html>
+  );
+}

package/templates/fullstack-app/src/pages/_error.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+export default function ErrorPage({ initialState }) {
+  const { error } = initialState || {};
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV !== 'production';
+  return (
+    <div className="error-page-container max-w-4xl mx-auto p-6">
+      <div className="bg-red-50 border border-red-200 rounded-lg p-8 shadow-sm">
+        <h1 className="text-3xl font-bold text-red-700 mb-4">Something went wrong</h1>
+        <p className="text-lg text-red-600 mb-4">
+          {error?.message || "An unexpected error occurred"}
+        </p>
+        {isDev && error?.stack && (
+          <div className="mt-6">
+            <button
+              className="text-blue-600 underline mb-2"
+              onClick={() => setShowDetails(!showDetails)}
+            >
+              {showDetails ? "Hide" : "Show"} technical details
+            </button>
+            {showDetails && (
+              <pre className="bg-gray-100 p-4 rounded-md text-sm overflow-auto max-h-96 text-gray-800">
+                {error.stack}
+              </pre>
+            )}
+          </div>
+        )}
+        <div className="mt-6">
+          <a
+            href="/"
+            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack-app/src/pages/about/index.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../../components/Layout';
+const AboutPage = ({ initialState }) => {
+  return (
+    <Layout title="About This App">
+      <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+        <div className="p-8">
+          <p className="text-lg text-gray-700 mb-6">
+            This is a frontend application built with Frontend Hamroun framework and styled with Tailwind CSS.
+          </p>
+          <p className="text-gray-600 mb-8">
+            It features server-side rendering, client-side navigation, and websocket-based live reloading during development.
+          </p>
+          <div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-8">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">Key Features</h2>
+            <ul className="space-y-2 text-gray-700">
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Server-side rendering
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Client-side navigation
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Component-based architecture
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Integrated API backend
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Live reload during development
+              </li>
+              <li className="flex items-center">
+                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Tailwind CSS for styling
+              </li>
+            </ul>
+          </div>
+          <a href="/" className="inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
+            Back to Home
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+export default AboutPage;

package/templates/fullstack-app/src/pages/about.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+export default function AboutPage({ initialState }) {
+  return (
+    <Layout title="About - Frontend Hamroun">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-blue-600 mb-6">
+          About Frontend Hamroun
+        </h1>
+        <div className="bg-white shadow-lg rounded-lg p-8 mb-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">What is Frontend Hamroun?</h2>
+          <p className="text-gray-600 mb-4">
+            Frontend Hamroun is a lightweight JavaScript framework for building modern web applications.
+            It provides a familiar component-based architecture with hooks, JSX support, and
+            server-side rendering capabilities.
+          </p>
+          <p className="text-gray-600 mb-4">
+            This framework is designed to be simple yet powerful, offering the essential features
+            needed for web application development without the complexity of larger frameworks.
+          </p>
+          <h3 className="text-lg font-medium text-gray-700 mt-6 mb-2">Key Features:</h3>
+          <ul className="list-disc pl-6 text-gray-600 space-y-2">
+            <li>Component-based architecture</li>
+            <li>JSX support</li>
+            <li>Hooks for state and effects</li>
+            <li>Server-side rendering</li>
+            <li>Minimal API surface</li>
+            <li>File-based routing</li>
+            <li>Built-in API routes</li>
+          </ul>
+        </div>
+        <div className="bg-white shadow-lg rounded-lg p-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">Getting Started</h2>
+          <p className="text-gray-600 mb-4">
+            This application was created using the Frontend Hamroun fullstack template,
+            which provides a complete setup for building applications with server-side rendering,
+            API routes, and client-side navigation.
+          </p>
+          <div className="bg-gray-50 p-4 rounded-md mt-4">
+            <h3 className="text-md font-medium text-gray-700 mb-2">Quick Start:</h3>
+            <pre className="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto">
+              <code>{`# Create a new application
+npx frontend-hamroun create my-app
+# Change directory
+cd my-app
+# Start the development server
+npm run dev`}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+// Server-side data fetching
+export async function getServerSideProps() {
+  return {
+    props: {
+      pageTitle: 'About Frontend Hamroun',
+      description: 'Learn more about the Frontend Hamroun framework'
+    }
+  };
+}

package/templates/fullstack-app/src/pages/api/users/[id].ts ADDED Viewed

@@ -0,0 +1,73 @@
+// Dynamic API Route for individual user operations
+import { Request, Response } from 'express';
+// Sample data store
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+// Utility to find user by ID
+const findUser = (id: number) => users.find(user => user.id === id);
+// GET handler for retrieving a specific user
+export async function get(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  const user = findUser(userId);
+  if (!user) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  res.json(user);
+}
+// PUT handler for updating a user
+export async function put(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  const userIndex = users.findIndex(user => user.id === userId);
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  // Update user, but preserve the ID
+  const updatedUser = { ...req.body, id: userId };
+  users[userIndex] = updatedUser;
+  res.json(updatedUser);
+}
+// DELETE handler for removing a user
+export async function del(req: Request, res: Response) {
+  const userId = parseInt(req.params.id);
+  if (isNaN(userId)) {
+    return res.status(400).json({ error: 'Invalid user ID' });
+  }
+  const userIndex = users.findIndex(user => user.id === userId);
+  if (userIndex === -1) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  // Remove the user
+  users.splice(userIndex, 1);
+  res.status(204).end();
+}
+// Use delete handler for DELETE method since 'delete' is a reserved word
+export const DELETE = del;

package/templates/fullstack-app/src/pages/api/users/index.ts ADDED Viewed

@@ -0,0 +1,43 @@
+// Next.js-like API Route for Users
+import { Request, Response } from 'express';
+// Sample data store
+const users = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+// GET handler for retrieving all users
+export async function get(req: Request, res: Response) {
+  // Option to simulate delay for testing loading states
+  const delay = req.query.delay ? parseInt(req.query.delay as string) : 0;
+  if (delay) {
+    await new Promise(resolve => setTimeout(resolve, delay));
+  }
+  res.json(users);
+}
+// POST handler for creating a new user
+export async function post(req: Request, res: Response) {
+  try {
+    const newUser = req.body;
+    // Validation
+    if (!newUser.name || !newUser.email) {
+      return res.status(400).json({ error: 'Name and email are required' });
+    }
+    // Generate new ID
+    const newId = Math.max(0, ...users.map(u => u.id)) + 1;
+    const createdUser = { ...newUser, id: newId };
+    users.push(createdUser);
+    res.status(201).json(createdUser);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create user' });
+  }
+}

package/templates/fullstack-app/src/pages/index.tsx ADDED Viewed

@@ -0,0 +1,110 @@
+import { jsx, useState, useEffect, batchUpdates } from 'frontend-hamroun';
+import UserList from '../components/UserList';
+import StateDemo from '../components/StateDemo';
+import { ErrorBoundary } from '../components/ErrorBoundary';
+import { UserApi } from '../data/api';
+// Home Page Component with Server Side Props
+export default function HomePage({ users, posts, initialState }) {
+  const [state, setState] = useState(initialState || {});
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  // Fetch data when refresh is triggered
+  useEffect(() => {
+    if (refreshTrigger === 0) return; // Skip initial render
+    async function fetchData() {
+      try {
+        const [users, posts] = await Promise.all([
+          UserApi.getAll(),
+          UserApi.getPosts()
+        ]);
+        // Use batch updates for efficiency
+        batchUpdates(() => {
+          setState(prev => ({
+            ...prev,
+            data: {
+              ...prev.data,
+              users,
+              posts
+            },
+            lastUpdate: new Date().toISOString()
+          }));
+        });
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+    fetchData();
+  }, [refreshTrigger]);
+  const handleRefresh = () => {
+    setRefreshTrigger(t => t + 1);
+  };
+  return (
+    <div className="max-w-4xl mx-auto py-8">
+      <h1 className="text-3xl font-bold text-blue-600 mb-6">
+        Welcome to your Next-style Frontend Hamroun application!
+      </h1>
+      <div className="mb-8">
+        <button
+          className="mb-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          onClick={handleRefresh}
+        >
+          Refresh Data
+        </button>
+        <div className="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
+          <p className="text-blue-700">
+            Last updated: {state.lastUpdate || 'Never'}
+          </p>
+        </div>
+      </div>
+      <ErrorBoundary>
+        <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">User List</h2>
+          <UserList users={users || state.data?.users || []} />
+        </div>
+      </ErrorBoundary>
+      <ErrorBoundary>
+        <StateDemo />
+      </ErrorBoundary>
+      <div className="bg-gray-50 rounded-lg p-6 border border-gray-200 mt-8">
+        <h3 className="text-lg font-medium text-gray-700 mb-3">Application State</h3>
+        <pre className="overflow-auto p-4 bg-gray-100 rounded-md text-sm text-gray-800">
+          {JSON.stringify({ users, posts, ...state }, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}
+// Server-side data fetching (Next.js style)
+export async function getServerSideProps() {
+  try {
+    const users = await UserApi.getAll();
+    const posts = await UserApi.getPosts();
+    return {
+      props: {
+        users,
+        posts
+      }
+    };
+  } catch (error) {
+    console.error('Error fetching initial data:', error);
+    return {
+      props: {
+        users: [],
+        posts: []
+      }
+    };
+  }
+}

package/templates/fullstack-app/src/pages/users/[id].tsx ADDED Viewed

@@ -0,0 +1,153 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+import { UserApi } from '../../data/api';
+export default function UserDetail({ user, posts, initialState }) {
+  // State for client-side data fetching when needed
+  const [userData, setUserData] = useState(user);
+  const [userPosts, setUserPosts] = useState(posts || []);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  // Get user ID from route params
+  const { id } = initialState?.params || {};
+  // Fetch user data if not provided from server
+  useEffect(() => {
+    if (!userData && id) {
+      setLoading(true);
+      Promise.all([
+        UserApi.getById(id),
+        UserApi.getPosts(id)
+      ])
+        .then(([userData, postsData]) => {
+          setUserData(userData);
+          setUserPosts(postsData);
+          setLoading(false);
+        })
+        .catch(err => {
+          console.error('Error fetching user data:', err);
+          setError(err.message || 'Failed to load user data');
+          setLoading(false);
+        });
+    }
+  }, [userData, id]);
+  if (loading) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="animate-pulse rounded-md bg-gray-100 p-8">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
+          <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
+          <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
+          <div className="h-40 bg-gray-200 rounded mb-4"></div>
+        </div>
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="rounded-md bg-red-50 p-4 border border-red-200">
+          <h2 className="text-lg font-bold text-red-700">Error Loading User</h2>
+          <p className="text-red-600">{error}</p>
+        </div>
+      </div>
+    );
+  }
+  if (!userData) {
+    return (
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="rounded-md bg-yellow-50 p-4 border border-yellow-200">
+          <h2 className="text-lg font-bold text-yellow-700">User Not Found</h2>
+          <p className="text-yellow-600">Could not find user with ID: {id}</p>
+          <a href="/users" className="text-blue-600 hover:underline mt-2 block">
+            Back to Users List
+          </a>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <div className="bg-white shadow-lg rounded-lg p-6 mb-6">
+        <h1 className="text-2xl font-bold text-gray-800 mb-4">{userData.name}</h1>
+        <div className="user-info mb-6">
+          <p className="text-gray-600">
+            <span className="font-bold">ID:</span> {userData.id}
+          </p>
+          <p className="text-gray-600">
+            <span className="font-bold">Email:</span> {userData.email}
+          </p>
+        </div>
+        <a href="/users" className="text-blue-600 hover:underline">
+          Back to Users List
+        </a>
+      </div>
+      {userPosts && userPosts.length > 0 ? (
+        <div className="bg-white shadow-lg rounded-lg p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
+          <div className="space-y-4">
+            {userPosts.map(post => (
+              <div key={post.id} className="border-b pb-4">
+                <h3 className="text-lg font-semibold">{post.title}</h3>
+                <p className="text-gray-600">{post.content}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white shadow-lg rounded-lg p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
+          <p className="text-gray-500 italic">No posts found for this user.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+// Next.js style server-side data fetching
+export async function getServerSideProps({ params }) {
+  try {
+    const userId = params.id;
+    // Parallel data fetching
+    const [user, posts] = await Promise.all([
+      UserApi.getById(parseInt(userId)),
+      UserApi.getPosts(parseInt(userId))
+    ]);
+    // Handle user not found
+    if (!user) {
+      return {
+        notFound: true
+      };
+    }
+    return {
+      props: {
+        user,
+        posts
+      }
+    };
+  } catch (error) {
+    console.error(`Error fetching user ${params.id}:`, error);
+    // Pass the error for client-side handling
+    return {
+      props: {
+        error: {
+          message: error.message,
+          status: error.status || 500
+        },
+        user: null,
+        posts: []
+      }
+    };
+  }
+}