frontend-hamroun 1.2.84 → 1.2.85

package/templates/fullstack-app/src/pages/404.js

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

package/templates/fullstack-app/src/pages/[id].d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=%5Bid%5D.d.ts.map

package/templates/fullstack-app/src/pages/[id].d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"[id].d.ts","sourceRoot":"","sources":["[id].tsx"],"names":[],"mappings":""}

package/templates/fullstack-app/src/pages/[id].js

@@ -0,0 +1 @@
+"use strict";

package/templates/fullstack-app/src/pages/_app.d.ts

@@ -0,0 +1,6 @@
+export default function App({ Component, pageProps, initialState }: {
+    Component: any;
+    pageProps: any;
+    initialState: any;
+}): JSX.Element;
+//# sourceMappingURL=_app.d.ts.map

package/templates/fullstack-app/src/pages/_app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_app.d.ts","sourceRoot":"","sources":["_app.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE;;;;CAAA,eAMjE"}

package/templates/fullstack-app/src/pages/_app.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "frontend-hamroun/jsx-runtime";
+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 (_jsx(Layout, { children: _jsx(Component, { ...pageProps, initialState: initialState }) }));
+}

package/templates/fullstack-app/src/pages/_document.d.ts

@@ -0,0 +1,7 @@
+export default function Document({ title, headContent, bodyContent, scripts }: {
+    title?: string | undefined;
+    headContent: any;
+    bodyContent: any;
+    scripts: any;
+}): JSX.Element;
+//# sourceMappingURL=_document.d.ts.map

package/templates/fullstack-app/src/pages/_document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_document.d.ts","sourceRoot":"","sources":["_document.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAA8B,EAC9B,WAAW,EACX,WAAW,EACX,OAAO,EACR;;;;;CAAA,eAiBA"}

package/templates/fullstack-app/src/pages/_document.js

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

package/templates/fullstack-app/src/pages/_error.d.ts

@@ -0,0 +1,4 @@
+export default function ErrorPage({ initialState }: {
+    initialState: any;
+}): JSX.Element;
+//# sourceMappingURL=_error.d.ts.map

package/templates/fullstack-app/src/pages/_error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_error.d.ts","sourceRoot":"","sources":["_error.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,YAAY,EAAE;;CAAA,eA0CjD"}

package/templates/fullstack-app/src/pages/_error.js

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

package/templates/fullstack-app/src/pages/about/index.d.ts

@@ -0,0 +1,5 @@
+declare const AboutPage: ({ initialState }: {
+    initialState: any;
+}) => JSX.Element;
+export default AboutPage;
+//# sourceMappingURL=index.d.ts.map

package/templates/fullstack-app/src/pages/about/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS;;iBA6Dd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/templates/fullstack-app/src/pages/about/index.js

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

package/templates/fullstack-app/src/pages/about.d.ts

@@ -0,0 +1,10 @@
+export default function AboutPage({ initialState }: {
+    initialState: any;
+}): JSX.Element;
+export declare function getServerSideProps(): Promise<{
+    props: {
+        pageTitle: string;
+        description: string;
+    };
+}>;
+//# sourceMappingURL=about.d.ts.map

package/templates/fullstack-app/src/pages/about.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"about.d.ts","sourceRoot":"","sources":["about.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,YAAY,EAAE;;CAAA,eAyDjD;AAGD,wBAAsB,kBAAkB;;;;;GAOvC"}

package/templates/fullstack-app/src/pages/about.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import Layout from '../components/Layout';
+export default function AboutPage({ initialState }) {
+    return (_jsx(Layout, { title: "About - Frontend Hamroun", children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold text-blue-600 mb-6", children: "About Frontend Hamroun" }), _jsxs("div", { className: "bg-white shadow-lg rounded-lg p-8 mb-8", children: [_jsx("h2", { className: "text-xl font-semibold text-gray-800 mb-4", children: "What is Frontend Hamroun?" }), _jsx("p", { className: "text-gray-600 mb-4", children: "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." }), _jsx("p", { className: "text-gray-600 mb-4", children: "This framework is designed to be simple yet powerful, offering the essential features needed for web application development without the complexity of larger frameworks." }), _jsx("h3", { className: "text-lg font-medium text-gray-700 mt-6 mb-2", children: "Key Features:" }), _jsxs("ul", { className: "list-disc pl-6 text-gray-600 space-y-2", children: [_jsx("li", { children: "Component-based architecture" }), _jsx("li", { children: "JSX support" }), _jsx("li", { children: "Hooks for state and effects" }), _jsx("li", { children: "Server-side rendering" }), _jsx("li", { children: "Minimal API surface" }), _jsx("li", { children: "File-based routing" }), _jsx("li", { children: "Built-in API routes" })] })] }), _jsxs("div", { className: "bg-white shadow-lg rounded-lg p-8", children: [_jsx("h2", { className: "text-xl font-semibold text-gray-800 mb-4", children: "Getting Started" }), _jsx("p", { className: "text-gray-600 mb-4", children: "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." }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-md mt-4", children: [_jsx("h3", { className: "text-md font-medium text-gray-700 mb-2", children: "Quick Start:" }), _jsx("pre", { className: "bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto", children: _jsx("code", { children: `# Create a new application
+npx frontend-hamroun create my-app
+
+# Change directory
+cd my-app
+
+# Start the development server
+npm run dev` }) })] })] })] }) }));
+}
+// 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].d.ts

@@ -0,0 +1,6 @@
+import { Request, Response } from 'express';
+export declare function get(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+export declare function put(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+export declare function del(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+export declare const DELETE: typeof del;
+//# sourceMappingURL=%5Bid%5D.d.ts.map

package/templates/fullstack-app/src/pages/api/users/[id].d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"[id].d.ts","sourceRoot":"","sources":["[id].ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAa5C,wBAAsB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAcpD;AAGD,wBAAsB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAkBpD;AAGD,wBAAsB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAiBpD;AAGD,eAAO,MAAM,MAAM,YAAM,CAAC"}

package/templates/fullstack-app/src/pages/api/users/[id].js

@@ -0,0 +1,51 @@
+// 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) => users.find(user => user.id === id);
+// GET handler for retrieving a specific user
+export async function get(req, res) {
+    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, res) {
+    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, res) {
+    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.d.ts

@@ -0,0 +1,4 @@
+import { Request, Response } from 'express';
+export declare function get(req: Request, res: Response): Promise<void>;
+export declare function post(req: Request, res: Response): Promise<Response<any, Record<string, any>> | undefined>;
+//# sourceMappingURL=index.d.ts.map

package/templates/fullstack-app/src/pages/api/users/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAU5C,wBAAsB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBASpD;AAGD,wBAAsB,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DAmBrD"}

package/templates/fullstack-app/src/pages/api/users/index.js

@@ -0,0 +1,33 @@
+// 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, res) {
+    // Option to simulate delay for testing loading states
+    const delay = req.query.delay ? parseInt(req.query.delay) : 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, res) {
+    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.d.ts

@@ -0,0 +1,21 @@
+export default function HomePage({ users, posts, initialState }: {
+    users: any;
+    posts: any;
+    initialState: any;
+}): JSX.Element;
+export declare function getServerSideProps(): Promise<{
+    props: {
+        users: {
+            id: number;
+            name: string;
+            email: string;
+        }[];
+        posts: {
+            id: number;
+            title: string;
+            content: string;
+            authorId: number;
+        }[];
+    };
+}>;
+//# sourceMappingURL=index.d.ts.map

package/templates/fullstack-app/src/pages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE;;;;CAAA,eA+E9D;AAGD,wBAAsB,kBAAkB;;;;;;;;;;;;;;GAoBvC"}

package/templates/fullstack-app/src/pages/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { 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 (_jsxs("div", { className: "max-w-4xl mx-auto py-8", children: [_jsx("h1", { className: "text-3xl font-bold text-blue-600 mb-6", children: "Welcome to your Next-style Frontend Hamroun application!" }), _jsxs("div", { className: "mb-8", children: [_jsx("button", { className: "mb-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700", onClick: handleRefresh, children: "Refresh Data" }), _jsx("div", { className: "bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6", children: _jsxs("p", { className: "text-blue-700", children: ["Last updated: ", state.lastUpdate || 'Never'] }) })] }), _jsx(ErrorBoundary, { children: _jsxs("div", { className: "bg-white shadow-lg rounded-lg p-6 mb-8", children: [_jsx("h2", { className: "text-xl font-semibold text-gray-800 mb-4", children: "User List" }), _jsx(UserList, { users: users || state.data?.users || [] })] }) }), _jsx(ErrorBoundary, { children: _jsx(StateDemo, {}) }), _jsxs("div", { className: "bg-gray-50 rounded-lg p-6 border border-gray-200 mt-8", children: [_jsx("h3", { className: "text-lg font-medium text-gray-700 mb-3", children: "Application State" }), _jsx("pre", { className: "overflow-auto p-4 bg-gray-100 rounded-md text-sm text-gray-800", children: JSON.stringify({ users, posts, ...state }, null, 2) })] })] }));
+}
+// 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].d.ts

@@ -0,0 +1,38 @@
+export default function UserDetail({ user, posts, initialState }: {
+    user: any;
+    posts: any;
+    initialState: any;
+}): JSX.Element;
+export declare function getServerSideProps({ params }: {
+    params: any;
+}): Promise<{
+    notFound: boolean;
+    props?: undefined;
+} | {
+    props: {
+        user: {
+            id: number;
+            name: string;
+            email: string;
+        };
+        posts: {
+            id: number;
+            title: string;
+            content: string;
+            authorId: number;
+        }[];
+        error?: undefined;
+    };
+    notFound?: undefined;
+} | {
+    props: {
+        error: {
+            message: any;
+            status: any;
+        };
+        user: null;
+        posts: never[];
+    };
+    notFound?: undefined;
+}>;
+//# sourceMappingURL=%5Bid%5D.d.ts.map

package/templates/fullstack-app/src/pages/users/[id].d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"[id].d.ts","sourceRoot":"","sources":["[id].tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE;;;;CAAA,eA4G/D;AAGD,wBAAsB,kBAAkB,CAAC,EAAE,MAAM,EAAE;;CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsClD"}

package/templates/fullstack-app/src/pages/users/[id].js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { 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 (_jsx("div", { className: "max-w-4xl mx-auto p-4", children: _jsxs("div", { className: "animate-pulse rounded-md bg-gray-100 p-8", children: [_jsx("div", { className: "h-8 bg-gray-200 rounded w-1/4 mb-4" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2 mb-2" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-4" }), _jsx("div", { className: "h-40 bg-gray-200 rounded mb-4" })] }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "max-w-4xl mx-auto p-4", children: _jsxs("div", { className: "rounded-md bg-red-50 p-4 border border-red-200", children: [_jsx("h2", { className: "text-lg font-bold text-red-700", children: "Error Loading User" }), _jsx("p", { className: "text-red-600", children: error })] }) }));
+    }
+    if (!userData) {
+        return (_jsx("div", { className: "max-w-4xl mx-auto p-4", children: _jsxs("div", { className: "rounded-md bg-yellow-50 p-4 border border-yellow-200", children: [_jsx("h2", { className: "text-lg font-bold text-yellow-700", children: "User Not Found" }), _jsxs("p", { className: "text-yellow-600", children: ["Could not find user with ID: ", id] }), _jsx("a", { href: "/users", className: "text-blue-600 hover:underline mt-2 block", children: "Back to Users List" })] }) }));
+    }
+    return (_jsxs("div", { className: "max-w-4xl mx-auto p-4", children: [_jsxs("div", { className: "bg-white shadow-lg rounded-lg p-6 mb-6", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-800 mb-4", children: userData.name }), _jsxs("div", { className: "user-info mb-6", children: [_jsxs("p", { className: "text-gray-600", children: [_jsx("span", { className: "font-bold", children: "ID:" }), " ", userData.id] }), _jsxs("p", { className: "text-gray-600", children: [_jsx("span", { className: "font-bold", children: "Email:" }), " ", userData.email] })] }), _jsx("a", { href: "/users", className: "text-blue-600 hover:underline", children: "Back to Users List" })] }), userPosts && userPosts.length > 0 ? (_jsxs("div", { className: "bg-white shadow-lg rounded-lg p-6", children: [_jsxs("h2", { className: "text-xl font-bold text-gray-800 mb-4", children: ["Posts by ", userData.name] }), _jsx("div", { className: "space-y-4", children: userPosts.map(post => (_jsxs("div", { className: "border-b pb-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: post.title }), _jsx("p", { className: "text-gray-600", children: post.content })] }, post.id))) })] })) : (_jsxs("div", { className: "bg-white shadow-lg rounded-lg p-6", children: [_jsxs("h2", { className: "text-xl font-bold text-gray-800 mb-4", children: ["Posts by ", userData.name] }), _jsx("p", { className: "text-gray-500 italic", children: "No posts found for this user." })] }))] }));
+}
+// 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: []
+            }
+        };
+    }
+}

package/templates/fullstack-app/src/pages/users.d.ts

@@ -0,0 +1,14 @@
+declare const UsersPage: {
+    ({ initialState }: {
+        initialState: any;
+    }): JSX.Element;
+    getInitialData(): Promise<{
+        users: {
+            id: number;
+            name: string;
+            email: string;
+        }[];
+    }>;
+};
+export default UsersPage;
+//# sourceMappingURL=users.d.ts.map

package/templates/fullstack-app/src/pages/users.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["users.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,SAAS;;;;;;;;;;;CA8Cd,CAAC;AASF,eAAe,SAAS,CAAC"}

package/templates/fullstack-app/src/pages/users.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import Layout from '../components/Layout';
+import { UserApi } from '../data/api';
+const UsersPage = ({ initialState }) => {
+    const users = initialState.data?.users || [];
+    return (_jsx(Layout, { title: "User Management", children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsxs("div", { className: "bg-blue-50 p-6 rounded-lg mb-8 border border-blue-100", children: [_jsx("h2", { className: "text-xl font-semibold text-blue-800 mb-2", children: "Data Fetching Demo" }), _jsx("p", { className: "text-blue-700", children: "This page demonstrates dynamic data fetching with the Users API." })] }), _jsxs("div", { className: "bg-white shadow-md rounded-lg overflow-hidden", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: _jsx("h2", { className: "text-xl font-semibold text-gray-800", children: "User List" }) }), users.length === 0 ? (_jsx("div", { className: "p-6 text-center text-gray-500", children: _jsx("p", { children: "No users found." }) })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b", children: "ID" }), _jsx("th", { className: "text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b", children: "Name" }), _jsx("th", { className: "text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b", children: "Email" })] }) }), _jsx("tbody", { className: "divide-y divide-gray-200", children: users.map(user => (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "py-4 px-6 text-sm text-gray-900", children: user.id }), _jsx("td", { className: "py-4 px-6 text-sm font-medium text-gray-900", children: user.name }), _jsx("td", { className: "py-4 px-6 text-sm text-gray-500", children: user.email })] }, user.id))) })] }) }))] })] }) }));
+};
+// Static method to fetch initial data for this page
+UsersPage.getInitialData = async () => {
+    return {
+        users: await UserApi.getAll()
+    };
+};
+export default UsersPage;

package/templates/fullstack-app/src/pages/wasm-demo.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=wasm-demo.d.ts.map

package/templates/fullstack-app/src/pages/wasm-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wasm-demo.d.ts","sourceRoot":"","sources":["wasm-demo.tsx"],"names":[],"mappings":""}

package/templates/fullstack-app/src/pages/wasm-demo.js

@@ -0,0 +1,2 @@
+"use strict";
+// This file will be removed as it contains WASM functionality

package/templates/fullstack-app/src/router.d.ts

@@ -0,0 +1,22 @@
+export interface PageProps {
+    initialState: any;
+}
+export interface PageComponent {
+    (props: PageProps): any;
+    getInitialData?: (path: string) => Promise<any>;
+}
+export declare class Router {
+    private routes;
+    private notFoundComponent;
+    register(path: string, component: PageComponent): Router;
+    setNotFound(component: PageComponent): Router;
+    getNotFound(): PageComponent | null;
+    getAllRoutes(): Record<string, PageComponent>;
+    resolve(path: string): Promise<PageComponent | null>;
+    discoverRoutes(): Promise<Record<string, PageComponent>>;
+    tryLoadCoreRoutes(): Promise<void>;
+}
+export declare const router: Router;
+export declare const NotFound: PageComponent;
+export declare function initializeRouter(): Promise<Router>;
+//# sourceMappingURL=router.d.ts.map

package/templates/fullstack-app/src/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["router.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CACjD;AAQD,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAqC;IACnD,OAAO,CAAC,iBAAiB,CAA8B;IAGvD,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,MAAM;IAQxD,WAAW,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM;IAM7C,WAAW,IAAI,aAAa,GAAG,IAAI;IAKnC,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC;IAKvC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;IAsGpD,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAiBxD,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;CA4BzC;AAGD,eAAO,MAAM,MAAM,QAAe,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,aAgBtB,CAAC;AAMF,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,MAAM,CAAC,CA8BxD"}