@finesoft/create-app 0.1.34 → 0.1.35

package/templates/vue-minimal/src/locales/zh-Hans.json

@@ -0,0 +1,5 @@
+{
+    "home.localeLabel": "当前语言",
+    "home.runtimeBadge": "浏览器接管后，翻译器仍然可用。",
+    "home.switchHint": "修改 src/app-definition.ts 中的 frameworkConfig.locale：en-US 为英文，zh-Hans 为中文。"
+}

package/templates/vue-minimal/src/main.ts

@@ -1,75 +1,40 @@
-import {
-    resolveIslandsShell,
-    startBrowserApp,
-    type AppHandle,
-    type MountEntry,
-    type NavigationSnapshot,
-    type SessionStateProvider,
-} from "@finesoft/front";
-import { createApp, createSSRApp, markRaw, reactive, type Component } from "vue";
+import { createBrowserApp } from "@finesoft/front";
+import { createApp, createSSRApp } from "vue";
+import { app } from "./app-definition";
+import { appId } from "./config";
 import App from "./App.vue";
-import HomeView from "./views/HomeView.vue";
-import DetailView from "./views/DetailView.vue";
-import NotesView from "./views/NotesView.vue";
-import { bootstrap, navigation } from "./bootstrap";
+import "./styles.css";
 
-/** 只把要渲染的数据放进 reactive；handle 是带闭包的复杂对象，留在模块作用域不被代理。 */
-export interface AppState {
-    snapshot: NavigationSnapshot | null;
-    name: string;
+export async function mountApplication(
+    target: HTMLElement,
+    persistenceKey = appId,
+    history: "browser" | "memory" = "browser",
+    url?: string,
+) {
+    const handle = await createBrowserApp({
+        definition: app,
+        target,
+        history,
+        url,
+        persistenceKey,
+        domRestore: true,
+        session: {},
+    });
+    const root = (handle.shouldHydrate ? createSSRApp : createApp)(App, { app: handle });
+    root.mount(target);
+    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 type AppController = AppHandle; // 组件 prop 类型 = 框架统一句柄
 
-const state = reactive<AppState>({ snapshot: null, name: "" });
+export const started = mountApplication(document.getElementById("app")!);
 
-/** 全局切片（app-wide）：用户名字 —— 跨 tab、跨重载都在（对标 SwiftUI @SceneStorage）。 */
-const profileProvider: SessionStateProvider = {
-    key: "profile",
-    capture: () => ({ name: state.name }),
-    restore: (data) => {
-        state.name = (data as { name?: string }).name ?? "";
-    },
-};
-
-/** islands 闭包引用：mount 回调赋值，islands(mount 后挂)读时已就绪。 */
-let controller: AppHandle | undefined;
-
-/** intent → 视图组件。islands 按 entry 挂为独立 Vue app。 */
-const VIEWS: Record<string, Component> = { home: HomeView, detail: DetailView, notes: NotesView };
-
-const mountEntry: MountEntry = (entry, container) => {
-    const view = VIEWS[entry.intent] ?? HomeView;
-    // 首屏 island 已由 SSR 渲入容器（编排器收养并置 hydrate:true）→ 水合；否则新建。
-    const factory = entry.hydrate ? createSSRApp : createApp;
-    const app = factory(view, { page: entry.page, controller });
-    app.mount(container);
-    return { unmount: () => app.unmount() };
-};
-
-void startBrowserApp({
-    bootstrap,
-    mount(target: HTMLElement, ctx) {
-        controller = ctx.app; // islands(mount 后挂)与 chrome 共用
-        const nav = ctx.navigation;
-        if (nav) {
-            state.snapshot = nav.getSnapshot(); // mount 时 tree 已就绪
-            nav.subscribe((s) => (state.snapshot = s));
-        }
-        // 方案 C：chrome 挂到 sibling chrome-root（不含 outlet）；outlet 由框架编排器独占。
-        const { chromeRoot, hydrate } = resolveIslandsShell(target);
-        (hydrate ? createSSRApp : createApp)(App, { state, controller: markRaw(ctx.app!) }).mount(
-            chromeRoot,
-        );
-        return () => undefined;
-    },
-    callbacks: {
-        onNavigate() {},
-        onModal() {},
-    },
-    // 结构化导航 + islands：每屏 per-entry 挂为独立 root、保活。
-    navigation: { ...navigation.toBrowserConfig(), mountEntry },
-    // 重载 DOM 自动恢复：data-restore-root 内字段/滚动自动捕获回填。
-    domRestore: true,
-    // 会话恢复：注册全局切片 provider；导航位置 + 作用域状态由框架自动捕获。
-    session: { providers: [profileProvider] },
-});
+if (import.meta.hot) {
+    import.meta.hot.dispose(async () => {
+        await (await started).dispose();
+    });
+}

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DetailPage } from "../lib/models/page";
+defineOptions({ inheritAttrs: false });
+const { page } = defineProps<{ page: DetailPage }>();
+</script>
+
+<template>
+    <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>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ViewProps } from "@finesoft/front";
+import { computed } from "vue";
+import type { HomePage } from "../lib/models/page";
+import { getHomeLocale } from "../lib/locale";
+
+defineOptions({ inheritAttrs: false });
+const { page, app } = defineProps<{
+    page: HomePage;
+    app: ViewProps["app"];
+}>();
+const locale = computed(() => getHomeLocale(app));
+</script>
+
+<template>
+    <section class="page">
+        <h1>{{ page.title }}</h1>
+        <p>{{ page.description }}</p>
+        <ul class="feed">
+            <li v-for="item in page.items" :key="item.id">
+                <button @click="app.perform({ kind: 'flow', url: `/item/${item.id}` })">
+                    {{ item.title }}
+                </button>
+            </li>
+        </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>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ErrorPage } from "../lib/models/page";
+defineOptions({ inheritAttrs: false });
+const { page } = defineProps<{ page: ErrorPage }>();
+</script>
+
+<template>
+    <section class="page">
+        <h1>{{ page.title }}</h1>
+        <p>{{ page.description }}</p>
+        <a href="/">← Go Home</a>
+    </section>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NotesPage } from "../lib/models/page";
+defineOptions({ inheritAttrs: false });
+const { page } = defineProps<{ page: NotesPage }>();
+</script>
+
+<template>
+    <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>
+</template>

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

@@ -1,50 +1,11 @@
-import {
-    createSSRNavigationRender,
-    renderIslandsHtml,
-    serializeServerData,
-    type ResolvedEntry,
-} from "@finesoft/front";
-import { createSSRApp, type Component } from "vue";
+import { createSSRApp } from "vue";
 import { renderToString } from "vue/server-renderer";
+import { createSSRRender } from "@finesoft/front";
+import { app } from "./app-definition";
 import App from "./App.vue";
-import HomeView from "./views/HomeView.vue";
-import DetailView from "./views/DetailView.vue";
-import NotesView from "./views/NotesView.vue";
-import { bootstrap, navigation } from "./bootstrap";
 
-const VIEWS: Record<string, Component> = { home: HomeView, detail: DetailView, notes: NotesView };
-
-/**
- * islands 架构 SSR（方案 C）：
- * - chrome（App.vue，header + tabbar）渲进 `<div data-fs-chrome>`。
- * - 可见 island 内容由 `renderIslandsHtml` 渲进 sibling `<main data-fs-outlet>`，客户端按 key 收养水合。
- *
- * chrome 水合 props parity：SSR 必须用与客户端 hydrate 时**相同**的初始 state 渲 App，否则
- * App.vue 的 `v-if="state"`（name label 等）server/client 不一致 → hydration mismatch。
- * 客户端 hydrate 时 state = { snapshot: null, name: "" }（onNavigationReady / session 恢复都在
- * 水合**之后**才填）。controller 仅用于事件处理器（`controller?.`），不影响渲染 DOM，SSR 可省。
- */
-export const render = createSSRNavigationRender({
-    bootstrap,
-    getErrorPage(status, message) {
-        return { id: "error", pageType: "error", title: `Error ${status}`, description: message };
-    },
-    async renderApp(page, _framework, snapshot) {
-        // 客户端 mount 时 navigation.getSnapshot() 即此 URL 推导 snapshot（tree 一致）→ chrome 水合无失配,
-        // 且 nav bar 首屏即被 SSR 渲出。name 仍默认 ""（会话恢复在 mount 后，水合后才生效）。
-        const chromeHtml = await renderToString(
-            createSSRApp(App, { state: { snapshot, name: "" } }),
-        );
-        const islandsHtml = await renderIslandsHtml(snapshot, (entry: ResolvedEntry) =>
-            renderToString(createSSRApp(VIEWS[entry.intent] ?? HomeView, { page: entry.page })),
-        );
-        return {
-            html: `<div data-fs-chrome>${chromeHtml}</div><main data-fs-outlet>${islandsHtml}</main>`,
-            head: `<title>${page.title}</title>`,
-            css: "",
-        };
-    },
-    navigation: navigation.toSSRDefinition(),
+export const render = createSSRRender({
+    definition: app,
+    render: (app) => renderToString(createSSRApp(App, { app })),
 });
-
-export { serializeServerData };
+export { serializeServerData } from "@finesoft/front";

package/templates/vue-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/vue-minimal/src/views.ts

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

package/templates/vue-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/vue-minimal/tsconfig.json

@@ -4,20 +4,25 @@
         "target": "ESNext",
         "module": "ESNext",
         "moduleResolution": "bundler",
-        "jsx": "preserve",
+        "allowImportingTsExtensions": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
         "skipLibCheck": true,
         "noEmit": true,
+        "rootDir": ".",
+        "jsx": "preserve",
         "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/vue-minimal/vite.config.ts

@@ -1,12 +1,14 @@
 import { finesoftFrontViteConfig } from "@finesoft/front";
 import vue from "@vitejs/plugin-vue";
-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: [
-        vue(),
-        finesoftFrontViteConfig({
-            ssr: { entry: "src/ssr.ts" },
-        }),
-    ],
+    lint: { options: { typeAware: true, typeCheck: true } },
+    plugins: lazyPlugins(() => [front, vue()]),
 });

package/templates/react/src/actions.ts

@@ -1,14 +0,0 @@
-import { makeExternalUrlAction, makeFlowAction, type Action } from "@finesoft/front";
-
-/** 创建指向商品详情的 FlowAction */
-export function productDetailAction(id: string): Action {
-    return makeFlowAction(`/products/${id}`);
-}
-
-/** 导航 Actions */
-export const NAV_ACTIONS = {
-    home: makeFlowAction("/"),
-    search: makeFlowAction("/search"),
-    about: makeFlowAction("/about"),
-    github: makeExternalUrlAction("https://github.com/nicepkg/finesoft"),
-} as const;

package/templates/react/src/bootstrap.ts

@@ -1,36 +0,0 @@
-import { type Framework, defineRoutes, int, route } 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";
-
-export function bootstrap(framework: Framework): void {
-    framework.afterLoad(seoGuard);
-
-    defineRoutes(framework, [
-        { path: "/", intentId: "home", controller: new HomeController() },
-        route("/products/:id", {
-            intentId: "product-detail",
-            controller: new ProductDetailController(),
-            params: { id: int() },
-        }),
-        {
-            path: "/search",
-            intentId: "search",
-            controller: new SearchController(),
-        },
-        {
-            path: "/about",
-            intentId: "about",
-            controller: new AboutController(),
-            renderMode: "csr",
-        },
-        {
-            path: "/admin",
-            intentId: "home",
-            beforeLoad: [authGuard],
-        },
-    ]);
-}

package/templates/react/src/components/PageRenderer.tsx

@@ -1,41 +0,0 @@
-import type { Action } from "@finesoft/front";
-import type { AppPage } from "../lib/models/product";
-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";
-
-interface PageRendererProps {
-    page: AppPage;
-    onAction?: (action: Action) => void;
-}
-
-/** 根据 pageType 分发渲染对应组件 */
-export function PageRenderer({ page, onAction }: PageRendererProps) {
-    switch (page.pageType) {
-        case "home":
-            return <Home page={page} onAction={onAction} />;
-        case "product":
-            return <ProductDetail page={page} onAction={onAction} />;
-        case "search":
-            return <Search page={page} onAction={onAction} />;
-        case "about":
-            return <About page={page} onAction={onAction} />;
-        case "error":
-            return <NotFound page={page} onAction={onAction} />;
-        default:
-            return (
-                <NotFound
-                    page={{
-                        id: "unknown",
-                        pageType: "error",
-                        title: "Unknown Page",
-                        description: "Page not found",
-                        status: 404,
-                    }}
-                    onAction={onAction}
-                />
-            );
-    }
-}

package/templates/react/src/main.tsx

@@ -1,49 +0,0 @@
-import { startBrowserApp, type Action, type BasePage, type Framework } from "@finesoft/front";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import { bootstrap } from "./bootstrap";
-import type { AppPage } from "./lib/models/product";
-
-void startBrowserApp({
-    bootstrap,
-    mountId: "app",
-    mount: (target: HTMLElement, { framework }: { framework: Framework }) => {
-        let root: ReturnType<typeof createRoot> | null = null;
-        let currentPage: AppPage | null = null;
-
-        function render(page: AppPage | null, loading: boolean) {
-            const handleAction = (action: Action) => {
-                void framework.perform(action);
-            };
-            if (!root) root = createRoot(target);
-            root.render(<App page={page} loading={loading} onAction={handleAction} />);
-        }
-
-        return ({
-            page,
-            isFirstPage,
-        }: {
-            page: Promise<BasePage> | BasePage;
-            isFirstPage?: boolean;
-        }) => {
-            if (page instanceof Promise) {
-                if (!isFirstPage) render(currentPage, true);
-                void page.then((p) => {
-                    currentPage = p as AppPage;
-                    render(currentPage, false);
-                });
-            } else {
-                currentPage = page as AppPage;
-                render(currentPage, false);
-            }
-        };
-    },
-    callbacks: {
-        onNavigate(pathname) {
-            console.log("[navigate]", pathname);
-        },
-        onModal(page) {
-            console.log("[modal]", page.title);
-        },
-    },
-});

package/templates/react/src/ssr.tsx

@@ -1,23 +0,0 @@
-import { createSSRRender, serializeServerData } from "@finesoft/front";
-import { renderToString } from "react-dom/server";
-import App from "./App";
-import { bootstrap } from "./bootstrap";
-import { getErrorPage } from "./lib/controllers/error";
-import type { AppPage } from "./lib/models/product";
-
-export { serializeServerData };
-
-export const render = createSSRRender({
-    bootstrap,
-    getErrorPage,
-    renderApp(page, _framework) {
-        const html = renderToString(<App page={page as AppPage} />);
-        return {
-            html,
-            head: `<title>${page.title}</title><meta name="description" content="${
-                page.description ?? ""
-            }">`,
-            css: "",
-        };
-    },
-});

package/templates/react-minimal/src/bootstrap.ts

@@ -1,39 +0,0 @@
-import { Framework, defineNavigation, defineRoutes, leaf, stack, tabs } from "@finesoft/front";
-import { DetailController } from "./lib/controllers/detail";
-import { HomeController } from "./lib/controllers/home";
-import { NotesController } from "./lib/controllers/notes";
-
-/**
- * 同一份 bootstrap 在浏览器与服务器都会执行：注册 controllers + 路由。
- * 路由让 URL 能 resolve（SSR 首屏 / codec / 扁平回退都需要）。
- */
-export function bootstrap(framework: Framework): void {
-    defineRoutes(framework, [
-        { path: "/", intentId: "home", controller: new HomeController() },
-        { path: "/item/:id", intentId: "detail", controller: new DetailController() },
-        { path: "/notes", intentId: "notes", controller: new NotesController() },
-    ]);
-}
-
-/**
- * 结构化导航：一个 TabView（Home / Notes），每个 tab 是一个 NavigationStack。
- * - Home 栈可 push 到 detail（栈深 +1），返回 pop（栈深 -1）。
- * - 切 tab 保活另一分支的栈深与作用域状态（对标 SwiftUI TabView）。
- *
- * `initial` 用 **URL→树 工厂**（而非静态树）：这样深链 / 刷新 `/item/2` 能重建出
- * 「Home 栈压着 detail」的结构，active-leaf codec 也把它回写成 `/item/2`，刷新不再跳回 `/`。
- * （静态树会忽略 URL、永远从 home 起，刷新被改回 `/`。）
- */
-export const navigation = defineNavigation({
-    initial: (url) => {
-        const path = url.split("?")[0].split("#")[0];
-        const detail = /^\/item\/(.+)$/.exec(path);
-        const home = detail
-            ? stack([leaf("home"), leaf("detail", { id: detail[1] })])
-            : stack(leaf("home"));
-        return tabs({
-            active: path === "/notes" ? "notes" : "home",
-            branches: { home, notes: stack(leaf("notes")) },
-        });
-    },
-});