@finesoft/create-app 0.1.33 → 0.1.35

package/templates/react/src/lib/controllers/product-detail.ts

@@ -1,52 +1,83 @@
-import {
-    BaseController,
-    type Container,
-    DEP_KEYS,
-    type Logger,
-    type LoggerFactory,
-} from "@finesoft/front";
+import { DEP_KEYS, type Logger, type LoggerFactory } from "@finesoft/front";
+import { BaseServerController } from "@finesoft/front";
+import { markPublic } from "@finesoft/front";
 import type { ProductPage } from "../models/product";
+import type {
+    ProductDetailControllerFailure as Failure,
+    ProductDetailControllerInput as Input,
+} from "../../../.finesoft/controller-types";
 
-export class ProductDetailController extends BaseController<{ id: number }, ProductPage> {
-    readonly intentId = "product-detail";
-
-    async execute(params: { id: number }, container: Container): Promise<ProductPage> {
-        const loggerFactory = container.resolve<LoggerFactory>(DEP_KEYS.LOGGER_FACTORY);
+export class ProductDetailController extends BaseServerController<Input, ProductPage> {
+    async execute({ params, context }: Input): Promise<ProductPage> {
+        const loggerFactory = await context.get<LoggerFactory>(DEP_KEYS.LOGGER_FACTORY);
         const log: Logger = loggerFactory.loggerFor("ProductDetailController");
         log.info(`Loading product ${params.id}`);
 
+        // Application-owned browsing preference, unrelated to authentication.
+        // getCookie reads the incoming request; setCookie only writes the response.
+        context.responseHeaders.set("cache-control", "private, no-store");
+        if (context.getCookie("last_product") !== String(params.id)) {
+            context.setCookie("last_product", String(params.id), {
+                httpOnly: true,
+                sameSite: "Lax",
+                secure: new URL(context.request.url).protocol === "https:",
+            });
+        }
+
         // Simulated API fetch — replace with real HttpClient call
-        return {
-            id: `product-${params.id}`,
-            pageType: "product",
-            title: `Product ${params.id}`,
-            description: `Details for product ${params.id}`,
-            url: `/products/${params.id}`,
-            product: {
-                id: String(params.id),
-                name: `Product ${params.id}`,
-                price: 29.99,
-                description:
-                    "This is a demo product showcasing BaseController with typed params and DI container usage.",
-                imageUrl: `/img/product-${params.id}.svg`,
+        return markPublic(
+            {
+                id: `product-${params.id}`,
+                pageType: "product",
+                title: `Product ${params.id}`,
+                description: `Details for product ${params.id}`,
+                url: `/products/${params.id}`,
+                product: {
+                    id: String(params.id),
+                    name: `Product ${params.id}`,
+                    price: 29.99,
+                    description:
+                        "This is a demo product showcasing route-inferred params and DI container usage.",
+                    imageUrl: `/img/product-${params.id}.svg`,
+                },
             },
-        };
+            {
+                product: {
+                    id: true,
+                    name: true,
+                    price: true,
+                    description: true,
+                    imageUrl: true,
+                },
+            },
+        );
     }
 
-    fallback(params: { id: number }, error: Error): ProductPage {
-        return {
-            id: `product-${params.id}`,
-            pageType: "product",
-            title: "Product Not Found",
-            description: error.message,
-            url: `/products/${params.id}`,
-            product: {
-                id: String(params.id),
-                name: "Unknown Product",
-                price: 0,
-                description: "Could not load product data.",
-                imageUrl: "/img/placeholder.svg",
+    fallback({ params }: Failure): ProductPage {
+        return markPublic(
+            {
+                id: `product-${params.id}`,
+                pageType: "product",
+                title: "Product Not Found",
+                description: "The product is currently unavailable.",
+                url: `/products/${params.id}`,
+                product: {
+                    id: String(params.id),
+                    name: "Unknown Product",
+                    price: 0,
+                    description: "Could not load product data.",
+                    imageUrl: "/img/placeholder.svg",
+                },
+            },
+            {
+                product: {
+                    id: true,
+                    name: true,
+                    price: true,
+                    description: true,
+                    imageUrl: true,
+                },
             },
-        };
+        );
     }
 }

package/templates/react/src/lib/controllers/search.ts

@@ -1,58 +1,37 @@
-import { BaseController, makeFlowAction } from "@finesoft/front";
-import type { ProductItem, SearchPage } from "../models/product";
+import { PRODUCTS } from "../data/products";
+import { BaseController } from "@finesoft/front";
+import { markPublic } from "@finesoft/front";
+import type { SearchPage } from "../models/product";
+import type { SearchControllerInput as Input } from "../../../.finesoft/controller-types";
 
-const ALL_PRODUCTS: ProductItem[] = [
-    {
-        id: "1",
-        itemType: "product",
-        name: "TypeScript Handbook",
-        price: 29.99,
-        imageUrl: "/img/ts.svg",
-        clickAction: makeFlowAction("/products/1"),
-    },
-    {
-        id: "2",
-        itemType: "product",
-        name: "Vite Starter Kit",
-        price: 19.99,
-        imageUrl: "/img/vite.svg",
-        clickAction: makeFlowAction("/products/2"),
-    },
-    {
-        id: "3",
-        itemType: "product",
-        name: "Hono Framework Guide",
-        price: 24.99,
-        imageUrl: "/img/hono.svg",
-        clickAction: makeFlowAction("/products/3"),
-    },
-    {
-        id: "4",
-        itemType: "product",
-        name: "SSR Deep Dive",
-        price: 34.99,
-        imageUrl: "/img/ssr.svg",
-        clickAction: makeFlowAction("/products/4"),
-    },
-];
+export class SearchController extends BaseController<Input, SearchPage> {
+    execute({ query }: Input): SearchPage {
+        const term = query.q;
+        const results = term
+            ? PRODUCTS.filter((p) => p.name.toLowerCase().includes(term.toLowerCase()))
+            : PRODUCTS;
 
-export class SearchController extends BaseController<{ q?: string }, SearchPage> {
-    readonly intentId = "search";
-
-    execute(params: { q?: string }): SearchPage {
-        const query = params.q ?? "";
-        const results = query
-            ? ALL_PRODUCTS.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()))
-            : ALL_PRODUCTS;
-
-        return {
-            id: "search",
-            pageType: "search",
-            title: query ? `Search: ${query}` : "All Products",
-            description: `${results.length} result(s)`,
-            url: "/search",
-            query,
-            results,
-        };
+        return markPublic(
+            {
+                id: "search",
+                pageType: "search",
+                title: term ? `Search: ${term}` : "All Products",
+                description: `${results.length} result(s)`,
+                url: "/search",
+                query: term,
+                results,
+            },
+            {
+                query: true,
+                results: {
+                    id: true,
+                    itemType: true,
+                    name: true,
+                    price: true,
+                    imageUrl: true,
+                    clickAction: { kind: true, url: true },
+                },
+            },
+        );
     }
 }

package/templates/react/src/lib/data/products.ts

@@ -0,0 +1,36 @@
+import type { ProductItem } from "../models/product";
+
+export const PRODUCTS: ProductItem[] = [
+    {
+        id: "1",
+        itemType: "product",
+        name: "TypeScript Handbook",
+        price: 29.99,
+        imageUrl: "/img/ts.svg",
+        clickAction: { url: "/products/1" },
+    },
+    {
+        id: "2",
+        itemType: "product",
+        name: "Vite Starter Kit",
+        price: 19.99,
+        imageUrl: "/img/vite.svg",
+        clickAction: { url: "/products/2" },
+    },
+    {
+        id: "3",
+        itemType: "product",
+        name: "Hono Framework Guide",
+        price: 24.99,
+        imageUrl: "/img/hono.svg",
+        clickAction: { url: "/products/3" },
+    },
+    {
+        id: "4",
+        itemType: "product",
+        name: "SSR Deep Dive",
+        price: 34.99,
+        imageUrl: "/img/ssr.svg",
+        clickAction: { url: "/products/4" },
+    },
+];

package/templates/react/src/lib/mappers/product.ts

@@ -1,4 +1,4 @@
-import { makeFlowAction, mapEach, type Mapper } from "@finesoft/front";
+import { mapEach, type Mapper } from "@finesoft/front";
 import type { ProductItem } from "../models/product";
 
 /** Raw API response shape */
@@ -16,12 +16,12 @@ const toProductItem: Mapper<ApiProduct, ProductItem> = (raw) => ({
     name: raw.title,
     price: raw.price,
     imageUrl: raw.thumbnail ?? "/img/placeholder.svg",
-    clickAction: makeFlowAction(`/products/${raw.id}`),
+    clickAction: { url: `/products/${raw.id}` },
 });
 
 /**
  * Composed mapper pipeline: ApiProduct[] → ProductItem[]
  *
- * Demonstrates pipe() + mapEach() for data transformation.
+ * Demonstrates mapEach() for data transformation.
  */
 export const mapProducts: Mapper<ApiProduct[], ProductItem[]> = mapEach(toProductItem);

package/templates/react/src/lib/models/product.ts

@@ -1,15 +1,25 @@
-import type { BaseItem, BasePage, BaseShelf } from "@finesoft/front";
+import type { BasePage } from "@finesoft/front";
+interface BaseItem {
+    readonly id: string;
+}
+interface BaseShelf {
+    readonly id: string;
+    readonly title: string;
+}
 
 export interface ProductItem extends BaseItem {
     itemType: "product";
     name: string;
     price: number;
     imageUrl: string;
+    clickAction?: { readonly url: string };
 }
 
 export interface ProductShelf extends BaseShelf {
     shelfType: "products";
     items: ProductItem[];
+    isHorizontal?: boolean;
+    seeAllAction?: { readonly url: string };
 }
 
 export interface HomePage extends BasePage {

package/templates/react/src/lib/services/api-client.ts

@@ -6,11 +6,14 @@ import { HttpClient, type HttpClientConfig } from "@finesoft/front";
  * Showcases HttpClient subclass pattern with base URL and custom fetch.
  */
 export class ApiClient extends HttpClient {
-    constructor(config?: Partial<HttpClientConfig>) {
+    constructor(config: Partial<HttpClientConfig> & Pick<HttpClientConfig, "fetch">) {
         super({
-            baseUrl: config?.baseUrl ?? "/api",
-            defaultHeaders: { "Content-Type": "application/json", ...config?.defaultHeaders },
-            fetch: config?.fetch,
+            baseUrl: config.baseUrl ?? "/api",
+            defaultHeaders: { "Content-Type": "application/json", ...config.defaultHeaders },
+            fetch: config.fetch,
+            validateDns: config.validateDns,
+            lookup: config.lookup,
+            allowInternalHosts: config.allowInternalHosts,
         });
     }
 

package/templates/react/src/main.ts

@@ -0,0 +1,34 @@
+import { createBrowserApp } from "@finesoft/front";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { createElement } from "react";
+import { app } from "./app-definition";
+import App from "./App";
+import "./styles.css";
+
+const target = document.getElementById("app")!;
+export async function mountApplication(
+    target: HTMLElement,
+    history: "browser" | "memory" = "browser",
+    url?: string,
+) {
+    const handle = await createBrowserApp({ definition: app, target, history, url });
+    const root = handle.shouldHydrate
+        ? hydrateRoot(target, createElement(App, { app: handle }))
+        : createRoot(target);
+    if (!handle.shouldHydrate) root.render(createElement(App, { app: handle }));
+    const originalDispose = handle.dispose.bind(handle);
+    let disposal: Promise<void> | undefined;
+    Object.assign(handle, {
+        dispose: () => (disposal ??= originalDispose().finally(() => root.unmount())),
+    });
+    await handle.ready;
+    return handle;
+}
+
+export const started = mountApplication(target);
+
+if (import.meta.hot) {
+    import.meta.hot.dispose(async () => {
+        await (await started).dispose();
+    });
+}

package/templates/react/src/pages/About.tsx

@@ -1,16 +1,14 @@
-import type { Action } from "@finesoft/front";
 import type { AboutPage } from "../lib/models/product";
 
 interface AboutProps {
     page: AboutPage;
-    onAction?: (action: Action) => void;
 }
 
 export default function About({ page }: AboutProps) {
     return (
-        <div>
+        <section className="page page-about">
             <h1>{page.title}</h1>
             <p>{page.content}</p>
-        </div>
+        </section>
     );
 }

package/templates/react/src/pages/Home.tsx

@@ -1,34 +1,25 @@
-import type { Action } from "@finesoft/front";
 import ProductCard from "../components/ProductCard";
 import type { HomePage } from "../lib/models/product";
 
 interface HomeProps {
     page: HomePage;
-    onAction?: (action: Action) => void;
 }
 
-export default function Home({ page, onAction }: HomeProps) {
+export default function Home({ page }: HomeProps) {
     return (
-        <div>
+        <section className="page page-home">
             <h1>{page.title}</h1>
             <p>{page.description}</p>
             {page.shelves.map((shelf) => (
-                <section key={shelf.id}>
+                <section className="shelf-section" key={shelf.id}>
                     <h2>{shelf.title}</h2>
-                    <div
-                        style={{
-                            display: "flex",
-                            gap: "1rem",
-                            flexWrap: shelf.isHorizontal ? "nowrap" : "wrap",
-                            overflowX: shelf.isHorizontal ? "auto" : undefined,
-                        }}
-                    >
+                    <div className={`shelf${shelf.isHorizontal ? " horizontal" : ""}`}>
                         {shelf.items.map((item) => (
-                            <ProductCard key={item.id} item={item} onAction={onAction} />
+                            <ProductCard key={item.id} item={item} />
                         ))}
                     </div>
                 </section>
             ))}
-        </div>
+        </section>
     );
 }

package/templates/react/src/pages/NotFound.tsx

@@ -1,25 +1,15 @@
-import type { Action } from "@finesoft/front";
-import { makeFlowAction } from "@finesoft/front";
 import type { ErrorPage } from "../lib/models/product";
 
 interface NotFoundProps {
     page: ErrorPage;
-    onAction?: (action: Action) => void;
 }
 
-export default function NotFound({ page, onAction }: NotFoundProps) {
-    const handleHome = (e: React.MouseEvent) => {
-        e.preventDefault();
-        onAction?.(makeFlowAction("/"));
-    };
-
+export default function NotFound({ page }: NotFoundProps) {
     return (
-        <div>
+        <section className="page page-error">
             <h1>{page.title}</h1>
             <p>{page.description}</p>
-            <a href="/" onClick={handleHome}>
-                ← Go Home
-            </a>
-        </div>
+            <a href="/">← Go Home</a>
+        </section>
     );
 }

package/templates/react/src/pages/ProductDetail.tsx

@@ -1,34 +1,16 @@
-import type { Action } from "@finesoft/front";
-import { makeFlowAction } from "@finesoft/front";
 import type { ProductPage } from "../lib/models/product";
 
 interface ProductDetailProps {
     page: ProductPage;
-    onAction?: (action: Action) => void;
 }
 
-export default function ProductDetail({ page, onAction }: ProductDetailProps) {
-    const handleBack = (e: React.MouseEvent) => {
-        e.preventDefault();
-        onAction?.(makeFlowAction("/"));
-    };
-
+export default function ProductDetail({ page }: ProductDetailProps) {
     return (
-        <div>
-            <a href="/" onClick={handleBack}>
-                ← Back
-            </a>
+        <section className="page page-product">
+            <a href="/">← Back</a>
             <h1>{page.product.name}</h1>
-            <p
-                style={{
-                    fontSize: "1.5rem",
-                    color: "#007bff",
-                    fontWeight: "bold",
-                }}
-            >
-                ${page.product.price.toFixed(2)}
-            </p>
+            <p className="price price-large">${page.product.price.toFixed(2)}</p>
             <p>{page.product.description}</p>
-        </div>
+        </section>
     );
 }

package/templates/react/src/pages/Search.tsx

@@ -1,23 +1,21 @@
-import type { Action } from "@finesoft/front";
 import ProductCard from "../components/ProductCard";
 import type { SearchPage } from "../lib/models/product";
 
 interface SearchProps {
     page: SearchPage;
-    onAction?: (action: Action) => void;
 }
 
-export default function Search({ page, onAction }: SearchProps) {
+export default function Search({ page }: SearchProps) {
     return (
-        <div>
+        <section className="page page-search">
             <h1>{page.title}</h1>
             <p>{page.description}</p>
-            <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+            <div className="results">
                 {page.results.map((item) => (
-                    <ProductCard key={item.id} item={item} onAction={onAction} />
+                    <ProductCard key={item.id} item={item} />
                 ))}
             </div>
             {page.results.length === 0 && <p>No products found.</p>}
-        </div>
+        </section>
     );
 }

package/templates/react/src/ssr.ts

@@ -0,0 +1,11 @@
+import { renderToString } from "react-dom/server";
+import { createElement } from "react";
+import { createSSRRender } from "@finesoft/front";
+import { app } from "./app-definition";
+import App from "./App";
+
+export const render = createSSRRender({
+    definition: app,
+    render: (app) => renderToString(createElement(App, { app })),
+});
+export { serializeServerData } from "@finesoft/front";

package/templates/react/src/styles.css

@@ -0,0 +1,71 @@
+:root {
+    color: #333;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    margin: 0;
+}
+
+.app-shell {
+    min-height: 100vh;
+}
+
+.navigation {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    border-bottom: 1px solid #eee;
+}
+
+.navigation-link {
+    color: #333;
+    text-decoration: none;
+}
+
+.navigation-link:hover,
+.navigation-link.active {
+    color: #007bff;
+}
+
+.navigation-link.active {
+    font-weight: bold;
+}
+
+.app-main {
+    padding: 1rem;
+}
+
+.loading {
+    padding: 2rem;
+    color: #999;
+    text-align: center;
+}
+
+.shelf,
+.results {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.shelf.horizontal {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+}
+
+.product-card {
+    min-width: 200px;
+    padding: 1rem;
+    border: 1px solid #eee;
+    border-radius: 8px;
+}
+
+.price {
+    color: #007bff;
+    font-weight: bold;
+}
+
+.price-large {
+    font-size: 1.5rem;
+}

package/templates/react/src/views.ts

@@ -0,0 +1,12 @@
+import About from "./pages/About";
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+import ProductDetail from "./pages/ProductDetail";
+import Search from "./pages/Search";
+export const views = {
+    home: Home,
+    product: ProductDetail,
+    search: Search,
+    about: About,
+    error: NotFound,
+};

package/templates/react/tsconfig.json

@@ -4,20 +4,25 @@
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "bundler",
-        "jsx": "react-jsx",
+        "allowImportingTsExtensions": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
         "skipLibCheck": true,
         "noEmit": true,
+        "rootDir": ".",
+        "jsx": "react-jsx",
         "paths": {
-            "@/*": ["./src/*"],
-            "@finesoft/front": ["../../packages/front/src/index.ts"],
-            "@finesoft/front/browser": ["../../packages/front/src/browser.ts"],
-            "@finesoft/core": ["../../packages/core/src/index.ts"],
-            "@finesoft/browser": ["../../packages/browser/src/index.ts"],
-            "@finesoft/ssr": ["../../packages/ssr/src/index.ts"],
-            "@finesoft/server": ["../../packages/server/src/index.ts"]
+            "@finesoft/front": [
+                "./.finesoft/front.d.ts"
+            ]
         }
     },
-    "include": ["src/**/*", "env.d.ts", "vite.config.ts"]
+    "include": [
+        "src/**/*",
+        "env.d.ts",
+        "vite.config.ts"
+    ]
 }