@finesoft/create-app 0.1.34 → 0.1.36

package/templates/svelte-minimal/src/pages/Detail.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { DetailPage } from "../lib/models/page";
+    let { page }: { page: DetailPage } = $props();
+</script>
+
+<section class="page">
+    <h1>{page.title}</h1>
+    <p>{page.description}</p>
+    <!-- The entry owns this draft; data-restore-root also restores it after reload. -->
+    <div class="draft" data-restore-root><label>Detail note<input name="note" placeholder="Kept while this screen is alive; lost when popped" /></label></div>
+</section>

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

@@ -1,25 +1,21 @@
 <script lang="ts">
-	import type { BasePage } from "@finesoft/front";
-	import { getFramework } from "../lib/framework-svelte";
+    import type { ViewProps } from "@finesoft/front";
+    import type { HomePage } from "../lib/models/page";
+    import { getHomeLocale } from "../lib/locale";
 
-	let { page }: { page: BasePage } = $props();
-
-	const framework = getFramework();
-	const locale = framework?.getLocale()?.lang ?? "unknown";
-	const translator = framework?.getTranslator();
-	const localeLabel = translator?.t("home.localeLabel") ?? "Current locale";
-	const runtimeBadge =
-		translator?.t("home.runtimeBadge") ??
-		"Hydration kept the translator alive on the client.";
-	const switchHint =
-		translator?.t("home.switchHint") ??
-		'Change frameworkConfig.locale in src/bootstrap.ts to load another JSON file.';
+    let { page, app }: { page: HomePage; app: ViewProps["app"] } = $props();
+    const locale = $derived(getHomeLocale(app));
 </script>
 
-<div>
-	<h1>{page.title}</h1>
-	<p>{page.description}</p>
-	<p><strong>{localeLabel}:</strong> {locale}</p>
-	<p>{runtimeBadge}</p>
-	<p>{switchHint}</p>
-</div>
+<section class="page">
+    <h1>{page.title}</h1>
+    <p>{page.description}</p>
+    <ul class="feed">
+        {#each page.items as item (item.id)}<li><button onclick={() => void app.perform({ kind: "flow", url: `/item/${item.id}` })}>{item.title}</button></li>{/each}
+    </ul>
+    <section class="locale-info" aria-label="Locale">
+        <p><strong>{locale.label}:</strong> {locale.lang}</p>
+        <p>{locale.badge}</p>
+        <p>{locale.hint}</p>
+    </section>
+</section>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { ErrorPage } from "../lib/models/page";
+    let { page }: { page: ErrorPage } = $props();
+</script>
+
+<section class="page">
+    <h1>{page.title}</h1>
+    <p>{page.description}</p>
+    <a href="/">← Go Home</a>
+</section>

package/templates/svelte-minimal/src/pages/Notes.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { NotesPage } from "../lib/models/page";
+    let { page }: { page: NotesPage } = $props();
+</script>
+
+<section class="page">
+    <h1>{page.title}</h1>
+    <p>{page.description}</p>
+    <!-- The entry owns this draft; data-restore-root also restores it after reload. -->
+    <div class="draft" data-restore-root><label>Notes draft<textarea name="notes" rows={6} placeholder="Write a note; switch tabs or reload to restore it"></textarea></label></div>
+</section>

package/templates/svelte-minimal/src/ssr.ts

@@ -1,21 +1,13 @@
-import { createSSRRender, serializeServerData } from "@finesoft/front";
-import { bootstrap } from "./bootstrap";
-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,
-    frameworkConfig: {
-        locale: "zh-Hans",
+    definition: app,
+    render: (app) => {
+        const result = renderSvelte(App, { props: { app } });
+        return { html: result.body, head: result.head, css: "" };
     },
-    getErrorPage(status, message) {
-        return {
-            id: "error",
-            pageType: "error",
-            title: `Error ${status}`,
-            description: message,
-        };
-    },
-    renderApp,
 });
-
-export { serializeServerData };
+export { serializeServerData } from "@finesoft/front";

package/templates/svelte-minimal/src/styles.css

@@ -0,0 +1,74 @@
+:root {
+    font-family: system-ui, sans-serif;
+    color: #202124;
+    background: #fff;
+}
+
+body {
+    margin: 0;
+}
+button,
+input,
+textarea {
+    font: inherit;
+}
+button {
+    cursor: pointer;
+}
+
+.app-chrome,
+.page {
+    box-sizing: border-box;
+    max-width: 34rem;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.profile,
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.profile label {
+    flex: 1;
+}
+.profile input {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+}
+.tabs button[aria-current="true"] {
+    font-weight: 700;
+}
+.feed {
+    list-style: none;
+    padding: 0;
+}
+.feed li + li {
+    margin-top: 0.5rem;
+}
+.feed button {
+    width: 100%;
+    padding: 0.75rem;
+    text-align: left;
+}
+.draft label,
+.draft input,
+.draft textarea {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+}
+.draft input,
+.draft textarea {
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+}
+.locale-info {
+    margin-top: 2rem;
+    color: #555;
+    font-size: 0.875rem;
+}

package/templates/svelte-minimal/src/views.ts

@@ -0,0 +1,6 @@
+import Home from "./pages/Home.svelte";
+import Detail from "./pages/Detail.svelte";
+import Notes from "./pages/Notes.svelte";
+import NotFound from "./pages/NotFound.svelte";
+
+export const views = { home: Home, detail: Detail, notes: Notes, error: NotFound };

package/templates/svelte-minimal/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+declare module "virtual:finesoft-front/i18n-loader" {
+    export const loadMessages: import("@finesoft/front").MessagesLoader;
+}

package/templates/svelte-minimal/svelte.config.js

@@ -0,0 +1,2 @@
+/** Standard Svelte defaults; compiler configuration belongs to the Vite plugin. */
+export default {};

package/templates/svelte-minimal/tsconfig.json

@@ -4,19 +4,24 @@
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
         "skipLibCheck": true,
         "noEmit": true,
+        "rootDir": ".",
         "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"
+    ]
 }

package/templates/svelte-minimal/vite.config.ts

@@ -1,15 +1,14 @@
 import { finesoftFrontViteConfig } from "@finesoft/front";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { defineConfig } from "vite-plus";
+import { defineConfig, lazyPlugins } from "vite-plus";
+
+const front = finesoftFrontViteConfig({
+    controllerTypes: { root: import.meta.dirname },
+    ssr: { entry: "src/ssr.ts" },
+    i18n: { messagesDir: "src/locales" },
+});
 
 export default defineConfig({
-    plugins: [
-        svelte(),
-        finesoftFrontViteConfig({
-            ssr: { entry: "src/ssr.ts" },
-            i18n: {
-                messagesDir: "src/locales",
-            },
-        }),
-    ],
+    lint: { options: { typeAware: true, typeCheck: true } },
+    plugins: lazyPlugins(() => [front, svelte()]),
 });

package/templates/vue/README.md

@@ -0,0 +1,35 @@
+# Finesoft Front full application
+
+Home, product detail, search and About demonstrate SSR, CSR, URL actions, typed route parameters, DI, data mapping and guards. All three native frameworks have the same example.
+
+## Run
+
+Node must satisfy `^22.18.0 || >=24.11.0`. Use Vite+ for tooling.
+
+```sh
+vp install
+vp run dev
+vp run build
+vp run preview
+```
+
+Visit `/`, open a product, try `/search?q=Vite`, and navigate to `/about` (CSR). `/admin` demonstrates an authentication guard: without an `auth_token` cookie it redirects to `/login?from=...`. Add your real login page and authentication service when adopting this example.
+
+## Server controller example
+
+`src/lib/controllers/product-detail.ts` extends `BaseServerController` from `@finesoft/front`. Open `/products/1`, then navigate to another product. The controller reads the incoming `last_product` cookie and explicitly writes a new HttpOnly cookie when the product changes. It also sets `Cache-Control: private, no-store`. This is an application-owned browsing preference; the framework provides request/response tools and does not manage login state or automatically forward credentials.
+
+SSR executes the controller directly. Browser navigation invokes it on the server, and hydration reuses the SSR result. Its implementation stays out of the browser bundle; `markPublic` selects the page data sent to the browser. Home, search and About keep ordinary `BaseController` examples. Route types still come from `src/app-definition.ts`; the Vite plugin maintains the generated `Input` / `Failure` types and provides the server context automatically.
+
+Keep the configured SSR entry and deploy to a request host such as Node or Worker. Serving only `dist/client` cannot execute this controller. The template runs locally without external API credentials.
+
+## Edit
+
+- `src/config.ts`: application identity and persistence namespace.
+- `src/app-definition.ts`: pages, routes, guards and navigation.
+- `src/lib/controllers/` and `src/lib/models/`: page loading and typed public data.
+- `src/pages/`, `src/App.*`, `src/styles.css`: native UI and presentation.
+- `src/views.ts`: the view registry shared by browser and server.
+- `src/main.ts` and `src/ssr.ts`: standard browser and SSR startup.
+
+All framework APIs import from `@finesoft/front`. Select the native component with `Outlet("react")`, `Outlet("vue")`, or `Outlet("svelte")`, and pass the same renderer to `useSnapshot`. The plugin maintains `.finesoft/front.d.ts` and the exact TypeScript import mapping; install only the chosen renderer. For standalone TypeScript checks, first run `vp exec finesoft-types`. The project is standalone and requires no sibling templates or private runtime packages.

package/templates/vue/index.html

@@ -6,8 +6,7 @@
         <!--ssr-head-->
     </head>
     <body>
-        <div id="app"><!--ssr-body--></div>
-        <!--ssr-data-->
+        <div id="app"><!--ssr-body--><!--ssr-data--></div>
         <script type="module" src="/src/main.ts"></script>
     </body>
 </html>

package/templates/vue/package.json

@@ -8,12 +8,16 @@
         "preview": "vp preview"
     },
     "dependencies": {
-        "@finesoft/front": "^0.5.1",
-        "vue": "^3.5.0"
+        "@finesoft/front": "^0.5.3",
+        "vue": "^3.5.41"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^5.0.0",
-        "vite": "npm:@voidzero-dev/vite-plus-core@0.1.16",
-        "vite-plus": "0.1.24"
+        "@hono/node-server": "^2.1.0",
+        "@types/node": "^22.20.1",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "hono": "^4.13.1",
+        "typescript": "^6.0.3",
+        "vite": "npm:@voidzero-dev/vite-plus-core@0.2.8",
+        "vite-plus": "0.2.8"
     }
 }

package/templates/vue/src/App.vue

@@ -1,29 +1,14 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
-import { computed } from "vue";
+import { Outlet as selectOutlet, useSnapshot, type WebAppView } from "@finesoft/front";
 import Layout from "./components/Layout.vue";
-import Loading from "./components/Loading.vue";
-import PageRenderer from "./components/PageRenderer.vue";
-import type { AppPage } from "./lib/models/product";
-
-// state: reactive object for CSR; page: initial prop for SSR
-const {
-    state,
-    page: ssrPage,
-    onAction,
-} = defineProps<{
-    state?: { page: AppPage | null; loading: boolean };
-    page?: AppPage;
-    onAction?: (action: Action) => void;
-}>();
-
-const currentPage = computed(() => state?.page ?? ssrPage ?? null);
-const loading = computed(() => state?.loading ?? false);
+import { views } from "./views";
+const Outlet = selectOutlet("vue");
+const { app } = defineProps<{ app: WebAppView }>();
+const snapshot = useSnapshot("vue", app);
 </script>
 
 <template>
-    <Layout :current-path="currentPage?.url ?? '/'" :on-action="onAction">
-        <Loading v-if="loading" />
-        <PageRenderer v-else-if="currentPage" :page="currentPage" :on-action="onAction" />
+    <Layout :current-path="snapshot.entries.find((entry) => entry.visible)?.page.url ?? '/'">
+        <Outlet :app="app" :views="views" />
     </Layout>
 </template>

package/templates/vue/src/app-definition.ts

@@ -0,0 +1,35 @@
+import { appId } from "./config";
+import { definePage, defineWebApp, int, str, withDefault } from "@finesoft/front";
+import { AboutController } from "./lib/controllers/about";
+import { HomeController } from "./lib/controllers/home";
+import { ProductDetailController } from "./lib/controllers/product-detail";
+import { SearchController } from "./lib/controllers/search";
+import { authGuard } from "./lib/guards/auth";
+import { seoGuard } from "./lib/guards/seo";
+import { getErrorPage } from "./lib/controllers/error";
+export const homePage = definePage({
+    id: "home",
+    create: () => new HomeController(),
+    routes: ["/", { path: "/admin", beforeLoad: [authGuard] }],
+});
+export const productDetailPage = definePage({
+    id: "product-detail",
+    routes: [{ path: "/products/:id", params: { id: int() } }],
+    create: () => new ProductDetailController(),
+});
+export const searchPage = definePage({
+    id: "search",
+    create: () => new SearchController(),
+    routes: [{ path: "/search", query: { q: withDefault(str(), "") } }],
+});
+export const aboutPage = definePage({
+    id: "about",
+    create: () => new AboutController(),
+    routes: [{ path: "/about", renderMode: "csr" }],
+});
+export const app = defineWebApp({
+    id: appId,
+    pages: [homePage, productDetailPage, searchPage, aboutPage],
+    getErrorPage,
+    afterLoad: [seoGuard],
+});

package/templates/vue/src/components/Layout.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
 import Navigation from "./Navigation.vue";
 
-const { currentPath = "/", onAction } = defineProps<{
+const { currentPath = "/" } = defineProps<{
     currentPath?: string;
-    onAction?: (action: Action) => void;
 }>();
 </script>
 
 <template>
-    <div>
-        <Navigation :current-path="currentPath" :on-action="onAction" />
-        <main style="padding: 1rem">
+    <div class="app-shell">
+        <Navigation :current-path="currentPath" />
+        <main class="app-main">
             <slot />
         </main>
     </div>

package/templates/vue/src/components/Loading.vue

@@ -1,3 +1,3 @@
 <template>
-    <div style="text-align: center; padding: 2rem; color: #999">Loading…</div>
+    <div class="loading">Loading…</div>
 </template>

package/templates/vue/src/components/Navigation.vue

@@ -1,58 +1,25 @@
 <script setup lang="ts">
-import { makeExternalUrlAction, makeFlowAction, type Action } from "@finesoft/front";
-
-const { currentPath = "/", onAction } = defineProps<{
+const { currentPath = "/" } = defineProps<{
     currentPath?: string;
-    onAction?: (action: Action) => void;
 }>();
-
 const links = [
-    { label: "Home", action: makeFlowAction("/"), path: "/" },
-    { label: "Search", action: makeFlowAction("/search"), path: "/search" },
-    { label: "About", action: makeFlowAction("/about"), path: "/about" },
-    { label: "GitHub", action: makeExternalUrlAction("https://github.com"), path: null as null },
-];
-
-function handleClick(action: Action) {
-    return (e: MouseEvent) => {
-        if (onAction) {
-            e.preventDefault();
-            onAction(action);
-        }
-    };
-}
+    { label: "Home", href: "/" },
+    { label: "Search", href: "/search" },
+    { label: "About", href: "/about" },
+    { label: "GitHub", href: "https://github.com/nicepkg/finesoft" },
+] as const;
 </script>
 
 <template>
-    <nav>
+    <nav class="navigation">
         <a
             v-for="link in links"
             :key="link.label"
-            :href="link.action.url"
-            :class="{ active: link.path !== null && currentPath === link.path }"
-            @click="handleClick(link.action)"
+            :href="link.href"
+            class="navigation-link"
+            :class="{ active: currentPath === link.href }"
         >
             {{ link.label }}
         </a>
     </nav>
 </template>
-
-<style scoped>
-nav {
-    display: flex;
-    gap: 1rem;
-    padding: 1rem;
-    border-bottom: 1px solid #eee;
-}
-a {
-    text-decoration: none;
-    color: #333;
-}
-a:hover {
-    color: #007bff;
-}
-a.active {
-    color: #007bff;
-    font-weight: bold;
-}
-</style>

package/templates/vue/src/components/ProductCard.vue

@@ -1,39 +1,15 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
 import type { ProductItem } from "../lib/models/product";
 
-const { item, onAction } = defineProps<{
+const { item } = defineProps<{
     item: ProductItem;
-    onAction?: (action: Action) => void;
 }>();
-
-function handleClick(e: MouseEvent) {
-    if (onAction && item.clickAction) {
-        e.preventDefault();
-        onAction(item.clickAction);
-    }
-}
 </script>
 
 <template>
-    <div class="product-card">
+    <article class="product-card">
         <h3>{{ item.name }}</h3>
         <p class="price">${{ item.price.toFixed(2) }}</p>
-        <a v-if="item.clickAction" :href="item.clickAction.url" @click="handleClick">
-            View Details →
-        </a>
-    </div>
+        <a v-if="item.clickAction" :href="item.clickAction.url"> View Details → </a>
+    </article>
 </template>
-
-<style scoped>
-.product-card {
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 1rem;
-    min-width: 200px;
-}
-.price {
-    color: #007bff;
-    font-weight: bold;
-}
-</style>

package/templates/vue/src/config.ts

@@ -0,0 +1,2 @@
+/** App identity also namespaces persisted browser sessions. */
+export const appId = "vue";

package/templates/vue/src/lib/controllers/about.ts

@@ -1,18 +1,23 @@
-import { BaseController } from "@finesoft/front";
+import { BaseController, type ControllerInput } from "@finesoft/front";
+import { markPublic } from "@finesoft/front";
 import type { AboutPage } from "../models/product";
 
-export class AboutController extends BaseController<Record<string, string>, AboutPage> {
-    readonly intentId = "about";
-
+export class AboutController extends BaseController<
+    ControllerInput<Record<string, string>>,
+    AboutPage
+> {
     execute(): AboutPage {
-        return {
-            id: "about",
-            pageType: "about",
-            url: "/about",
-            title: "About",
-            description: "About Finesoft Front",
-            content:
-                "Finesoft Front is a full-stack TypeScript framework with router, DI, middleware, SSR, and multi-platform deployment.",
-        };
+        return markPublic(
+            {
+                id: "about",
+                pageType: "about",
+                title: "About",
+                description: "About Finesoft Front",
+                url: "/about",
+                content:
+                    "Finesoft Front is a full-stack TypeScript framework with router, DI, middleware, SSR, and multi-platform deployment.",
+            },
+            ["content"],
+        );
     }
 }

package/templates/vue/src/lib/controllers/error.ts

@@ -1,11 +1,15 @@
+import { markPublic } from "@finesoft/front";
 import type { ErrorPage } from "../models/product";
 
 export function getErrorPage(status: number, message: string): ErrorPage {
-    return {
-        id: "error",
-        pageType: "error",
-        title: `Error ${status}`,
-        description: message,
-        status,
-    };
+    return markPublic(
+        {
+            id: "error",
+            pageType: "error",
+            title: `Error ${status}`,
+            description: message,
+            status,
+        },
+        ["status"],
+    );
 }