@finesoft/create-app 0.1.34 → 0.1.36

package/templates/svelte/src/lib/controllers/home.ts

@@ -1,36 +1,12 @@
-import { BaseController, makeFlowAction } from "@finesoft/front";
-import type { HomePage, ProductItem, ProductShelf } from "../models/product";
-
-const MOCK_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"),
-    },
-];
-
-export class HomeController extends BaseController<Record<string, string>, HomePage> {
-    readonly intentId = "home";
+import { PRODUCTS } from "../data/products";
+import { BaseController, type ControllerInput } from "@finesoft/front";
+import { markPublic, makeFlowAction } from "@finesoft/front";
+import type { HomePage, ProductShelf } from "../models/product";
 
+export class HomeController extends BaseController<
+    ControllerInput<Record<string, string>>,
+    HomePage
+> {
     execute(): HomePage {
         const shelf: ProductShelf = {
             id: "featured",
@@ -38,16 +14,35 @@ export class HomeController extends BaseController<Record<string, string>, HomeP
             title: "Featured Products",
             isHorizontal: true,
             seeAllAction: makeFlowAction("/search"),
-            items: MOCK_PRODUCTS,
+            items: PRODUCTS.slice(0, 3),
         };
 
-        return {
-            id: "home",
-            pageType: "home",
-            url: "/",
-            title: "Home",
-            description: "Welcome to Finesoft Front Demo",
-            shelves: [shelf],
-        };
+        return markPublic(
+            {
+                id: "home",
+                pageType: "home",
+                title: "Home",
+                description: "Welcome to Finesoft Front Demo",
+                url: "/",
+                shelves: [shelf],
+            },
+            {
+                shelves: {
+                    id: true,
+                    shelfType: true,
+                    title: true,
+                    isHorizontal: true,
+                    seeAllAction: { kind: true, url: true },
+                    items: {
+                        id: true,
+                        itemType: true,
+                        name: true,
+                        price: true,
+                        imageUrl: true,
+                        clickAction: { kind: true, url: true },
+                    },
+                },
+            },
+        );
     }
 }

package/templates/svelte/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",
-            url: `/products/${params.id}`,
-            title: `Product ${params.id}`,
-            description: `Details for product ${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",
-            url: `/products/${params.id}`,
-            title: "Product Not Found",
-            description: error.message,
-            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/svelte/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",
-            url: "/search",
-            title: query ? `Search: ${query}` : "All Products",
-            description: `${results.length} result(s)`,
-            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/svelte/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/svelte/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/svelte/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 {
@@ -44,4 +54,5 @@ export interface ErrorPage extends BasePage {
     status: number;
 }
 
+/** 所有页面类型联合 */
 export type AppPage = HomePage | ProductPage | SearchPage | AboutPage | ErrorPage;

package/templates/svelte/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/svelte/src/main.ts

@@ -1,27 +1,31 @@
-import { startBrowserApp, type BasePage, type Framework } from "@finesoft/front";
-import { hydrate } from "svelte";
+import { createBrowserApp } from "@finesoft/front";
+import { hydrate, mount, unmount } from "svelte";
+import { app } from "./app-definition";
 import App from "./App.svelte";
-import { bootstrap } from "./bootstrap";
-import type { AppPage } from "./lib/models/product";
+import "./styles.css";
 
-void startBrowserApp({
-    bootstrap,
-    mount(target: HTMLElement, { framework }: { framework: Framework }) {
-        // Svelte 5 中必须用 hydrate() 激活 SSR 输出，new Component() 已被移除
-        const app = hydrate(App, { target, props: { framework } });
+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 });
+    if (!handle.shouldHydrate) target.replaceChildren();
+    const root = (handle.shouldHydrate ? hydrate : mount)(App, { target, props: { app: handle } });
+    const originalDispose = handle.dispose.bind(handle);
+    let disposal: Promise<void> | undefined;
+    Object.assign(handle, {
+        dispose: () => (disposal ??= originalDispose().finally(() => unmount(root))),
+    });
+    await handle.ready;
+    return handle;
+}
 
-        return (props: { page: Promise<BasePage> | BasePage; isFirstPage?: boolean }) => {
-            (app as { updatePage: (p: Promise<AppPage> | AppPage) => void }).updatePage(
-                props.page as Promise<AppPage> | AppPage,
-            );
-        };
-    },
-    callbacks: {
-        onNavigate(pathname) {
-            console.log("[navigate]", pathname);
-        },
-        onModal(page) {
-            console.log("[modal]", page.title);
-        },
-    },
-});
+export const started = mountApplication(target);
+
+if (import.meta.hot) {
+    import.meta.hot.dispose(async () => {
+        await (await started).dispose();
+    });
+}

package/templates/svelte/src/pages/About.svelte

@@ -4,7 +4,7 @@
 	let { page }: { page: AboutPage } = $props();
 </script>
 
-<div>
+<section class="page page-about">
 	<h1>{page.title}</h1>
 	<p>{page.content}</p>
-</div>
+</section>

package/templates/svelte/src/pages/Home.svelte

@@ -5,12 +5,12 @@
 	let { page }: { page: HomePage } = $props();
 </script>
 
-<div>
+<section class="page page-home">
 	<h1>{page.title}</h1>
 	<p>{page.description}</p>
 
 	{#each page.shelves as shelf}
-		<section>
+		<section class="shelf-section">
 			<h2>{shelf.title}</h2>
 			<div class="shelf" class:horizontal={shelf.isHorizontal}>
 				{#each shelf.items as item}
@@ -19,16 +19,4 @@
 			</div>
 		</section>
 	{/each}
-</div>
-
-<style>
-	.shelf {
-		display: flex;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-	.shelf.horizontal {
-		flex-wrap: nowrap;
-		overflow-x: auto;
-	}
-</style>
+</section>

package/templates/svelte/src/pages/NotFound.svelte

@@ -1,23 +1,14 @@
 <script lang="ts">
-	import { NAV_ACTIONS } from "../actions";
-	import { getPerform } from "../lib/framework-svelte";
 	import type { ErrorPage } from "../lib/models/product";
 
 	let { page }: { page: ErrorPage } = $props();
-
-	const perform = getPerform();
 </script>
 
-<div>
+<section class="page page-error">
 	<h1>{page.title}</h1>
 	<p>{page.description}</p>
 	<a
 		href="/"
-		onclick={(e) => {
-			if (perform) {
-				e.preventDefault();
-				void perform(NAV_ACTIONS.home);
-			}
-		}}>← Go Home</a
+		>← Go Home</a
 	>
-</div>
+</section>

package/templates/svelte/src/pages/ProductDetail.svelte

@@ -1,32 +1,15 @@
 <script lang="ts">
-	import { NAV_ACTIONS } from "../actions";
-	import { getPerform } from "../lib/framework-svelte";
 	import type { ProductPage } from "../lib/models/product";
 
 	let { page }: { page: ProductPage } = $props();
-
-	const perform = getPerform();
 </script>
 
-<div>
+<section class="page page-product">
 	<a
 		href="/"
-		onclick={(e) => {
-			if (perform) {
-				e.preventDefault();
-				void perform(NAV_ACTIONS.home);
-			}
-		}}>← Back</a
+		>← Back</a
 	>
 	<h1>{page.product.name}</h1>
-	<p class="price">${page.product.price.toFixed(2)}</p>
+	<p class="price price-large">${page.product.price.toFixed(2)}</p>
 	<p>{page.product.description}</p>
-</div>
-
-<style>
-	.price {
-		font-size: 1.5rem;
-		color: #007bff;
-		font-weight: bold;
-	}
-</style>
+</section>

package/templates/svelte/src/pages/Search.svelte

@@ -5,7 +5,7 @@
 	let { page }: { page: SearchPage } = $props();
 </script>
 
-<div>
+<section class="page page-search">
 	<h1>{page.title}</h1>
 	<p>{page.description}</p>
 
@@ -18,12 +18,4 @@
 	{#if page.results.length === 0}
 		<p>No products found.</p>
 	{/if}
-</div>
-
-<style>
-	.results {
-		display: flex;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-</style>
+</section>

package/templates/svelte/src/ssr.ts

@@ -1,12 +1,13 @@
-import { createSSRRender, serializeServerData } from "@finesoft/front";
-import { bootstrap } from "./bootstrap";
-import { getErrorPage } from "./lib/controllers/error";
-import { renderApp } from "./lib/render";
+import { render as renderSvelte } from "svelte/server";
+import { createSSRRender } from "@finesoft/front";
+import { app } from "./app-definition";
+import App from "./App.svelte";
 
 export const render = createSSRRender({
-    bootstrap,
-    getErrorPage,
-    renderApp,
+    definition: app,
+    render: (app) => {
+        const result = renderSvelte(App, { props: { app } });
+        return { html: result.body, head: result.head, css: "" };
+    },
 });
-
-export { serializeServerData };
+export { serializeServerData } from "@finesoft/front";