@finesoft/create-app 0.1.34 → 0.1.35

package/templates/react-minimal/src/main.tsx

@@ -1,99 +0,0 @@
-import {
-    resolveIslandsShell,
-    startBrowserApp,
-    type AppHandle,
-    type BasePage,
-    type MountEntry,
-    type SessionStateProvider,
-} from "@finesoft/front";
-import type { ComponentType } from "react";
-import { flushSync } from "react-dom";
-import { createRoot, hydrateRoot } from "react-dom/client";
-import App, { type NameStore } from "./App";
-import { bootstrap, navigation } from "./bootstrap";
-import DetailView from "./views/DetailView";
-import HomeView from "./views/HomeView";
-import NotesView from "./views/NotesView";
-
-/** name 全局切片的极小外部 store —— React 无内建响应式，跨组件共享需显式 store（mount 前建好交给 provider + App）。 */
-function createNameStore(): NameStore {
-    let value = "";
-    const listeners = new Set<() => void>();
-    return {
-        get: () => value,
-        set: (v) => {
-            value = v;
-            listeners.forEach((l) => l());
-        },
-        subscribe: (l) => {
-            listeners.add(l);
-            return () => listeners.delete(l);
-        },
-    };
-}
-const nameStore = createNameStore();
-
-/** 全局切片（app-wide）：用户名字 —— 跨 tab、跨重载都在（对标 SwiftUI @SceneStorage）。 */
-const profileProvider: SessionStateProvider = {
-    key: "profile",
-    capture: () => ({ name: nameStore.get() }),
-    restore: (data) => nameStore.set((data as { name?: string }).name ?? ""),
-};
-
-/** islands 闭包引用：mount 回调赋值，islands(mount 后挂)读时已就绪。 */
-let controller: AppHandle | undefined;
-
-/** intent → 视图组件。islands 按 entry 挂为独立 React root。 */
-const VIEWS: Record<string, ComponentType<{ page: BasePage; controller?: AppHandle }>> = {
-    home: HomeView,
-    detail: DetailView,
-    notes: NotesView,
-};
-
-const mountEntry: MountEntry = (entry, container) => {
-    const View = VIEWS[entry.intent] ?? HomeView;
-    const element = <View page={entry.page} controller={controller} />;
-    // 首屏 island 已由 SSR 渲入容器（编排器收养并置 hydrate:true）→ 水合；否则新建。
-    if (entry.hydrate) {
-        const root = hydrateRoot(container, element);
-        return { unmount: () => root.unmount() };
-    }
-    const root = createRoot(container);
-    // flushSync 强制同步提交：domRestore 在 fs:enter 后用 rAF 回填 data-restore-root 字段，
-    // 而 React 的 root.render() 默认异步提交 DOM，rAF 会赢得竞态、字段元素尚不存在 → 回填扑空
-    // （从根路径恢复到深层 URL 时，该 island 是客户端新挂、非 SSR，必踩）。同步提交贴合 domRestore
-    // 假设的「挂载即 DOM 就绪」契约（Vue/Svelte 的 .mount() 天然同步满足）。
-    flushSync(() => root.render(element));
-    return { unmount: () => root.unmount() };
-};
-
-void startBrowserApp({
-    bootstrap,
-    mount(target, ctx) {
-        controller = ctx.app; // islands(mount 后挂)与 chrome 共用
-        // 方案 C：chrome 挂到 sibling chrome-root（不含 outlet）；outlet 由框架编排器独占。
-        const { chromeRoot, hydrate } = resolveIslandsShell(target);
-        const initialSnapshot = ctx.navigation?.getSnapshot() ?? null;
-        const element = (
-            <App
-                initialSnapshot={initialSnapshot}
-                nav={ctx.navigation}
-                controller={ctx.app}
-                nameStore={nameStore}
-            />
-        );
-        if (hydrate) hydrateRoot(chromeRoot, element);
-        else createRoot(chromeRoot).render(element);
-        return () => undefined;
-    },
-    callbacks: {
-        onNavigate() {},
-        onModal() {},
-    },
-    // 结构化导航 + islands：每屏 per-entry 挂为独立 root、保活。
-    navigation: { ...navigation.toBrowserConfig(), mountEntry },
-    // 重载 DOM 自动恢复：data-restore-root 内字段/滚动自动捕获回填。
-    domRestore: true,
-    // 会话恢复：注册全局切片 provider；导航位置 + 作用域状态由框架自动捕获。
-    session: { providers: [profileProvider] },
-});

package/templates/react-minimal/src/ssr.tsx

@@ -1,51 +0,0 @@
-import {
-    createSSRNavigationRender,
-    renderIslandsHtml,
-    serializeServerData,
-    type BasePage,
-    type ResolvedEntry,
-} from "@finesoft/front";
-import type { ComponentType } from "react";
-import { renderToString } from "react-dom/server";
-import App from "./App";
-import { bootstrap, navigation } from "./bootstrap";
-import DetailView from "./views/DetailView";
-import HomeView from "./views/HomeView";
-import NotesView from "./views/NotesView";
-
-const VIEWS: Record<string, ComponentType<{ page: BasePage }>> = {
-    home: HomeView,
-    detail: DetailView,
-    notes: NotesView,
-};
-
-/**
- * islands 架构 SSR（方案 C）：
- * - chrome（App，header + tabbar）渲进 `<div data-fs-chrome>`。
- * - 可见 island 内容由 `renderIslandsHtml` 渲进 sibling `<main data-fs-outlet>`，客户端按 key 收养水合。
- *
- * chrome 水合 props parity：客户端 mount 时 navigation.getSnapshot() 即此 URL 推导 snapshot
- * （tree 一致）→ chrome 水合无失配，且 nav bar 首屏即被 SSR 渲出。name 仍默认 ""（会话恢复在
- * mount 后、水合后才生效）。nav/controller/nameStore 仅事件与订阅用，不影响 SSR DOM，可省。
- */
-export const render = createSSRNavigationRender({
-    bootstrap,
-    getErrorPage(status, message) {
-        return { id: "error", pageType: "error", title: `Error ${status}`, description: message };
-    },
-    async renderApp(page, _framework, snapshot) {
-        const chromeHtml = renderToString(<App initialSnapshot={snapshot} />);
-        const islandsHtml = await renderIslandsHtml(snapshot, (entry: ResolvedEntry) => {
-            const View = VIEWS[entry.intent] ?? HomeView;
-            return renderToString(<View 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 { serializeServerData };

package/templates/react-minimal/src/views/DetailView.tsx

@@ -1,28 +0,0 @@
-import type { BasePage } from "@finesoft/front";
-
-/**
- * Detail：由 push("detail", { id }) 进入。
- *
- * 零样板保活：标一个 data-restore-root，里面的裸 <input>（非受控）即自动：
- * - in-session：push 走、pop 回来值还在（islands 保活，实例没销毁）
- * - 重载：sessionStorage 回填（domRestore），合成事件驱动可能的受控绑定
- * 注意必须用**非受控** input（无 value/onChange）——否则 React 会盖掉 domRestore 的命令式写值。
- */
-export default function DetailView({ page }: { page: BasePage }) {
-    return (
-        <section>
-            <h1 style={{ margin: "0 0 0.25rem" }}>{page.title}</h1>
-            <p style={{ color: "#666", margin: "0 0 1rem" }}>{page.description}</p>
-            <div data-restore-root>
-                <label style={{ display: "block", marginTop: "1rem" }}>
-                    Draft note for this screen:
-                    <input
-                        name="note"
-                        placeholder="kept while alive; restored on reload"
-                        style={{ width: "100%" }}
-                    />
-                </label>
-            </div>
-        </section>
-    );
-}

package/templates/react-minimal/src/views/HomeView.tsx

@@ -1,27 +0,0 @@
-import type { AppHandle, BasePage } from "@finesoft/front";
-import type { FeedPage } from "../lib/controllers/home";
-
-/** Home（feed）：列表项点击 push 进 detail。 */
-export default function HomeView({ page, controller }: { page: BasePage; controller?: AppHandle }) {
-    const feed = page.pageType === "home" ? (page as FeedPage) : null;
-    return (
-        <section>
-            <h1 style={{ margin: "0 0 0.25rem" }}>{page.title}</h1>
-            <p style={{ color: "#666", margin: "0 0 1rem" }}>{page.description}</p>
-            {feed && (
-                <ul style={{ listStyle: "none", padding: 0, display: "grid", gap: "0.5rem" }}>
-                    {feed.items.map((item) => (
-                        <li key={item.id}>
-                            <button
-                                style={{ width: "100%", textAlign: "left" }}
-                                onClick={() => void controller?.push("detail", { id: item.id })}
-                            >
-                                {item.title} →
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </section>
-    );
-}

package/templates/react-minimal/src/views/NotesView.tsx

@@ -1,11 +0,0 @@
-import type { BasePage } from "@finesoft/front";
-
-/** Notes：第二个 tab，纯展示（切 tab 保活由 islands 负责）。 */
-export default function NotesView({ page }: { page: BasePage }) {
-    return (
-        <section>
-            <h1 style={{ margin: "0 0 0.25rem" }}>{page.title}</h1>
-            <p style={{ color: "#666", margin: "0 0 1rem" }}>{page.description}</p>
-        </section>
-    );
-}

package/templates/svelte/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/svelte/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/svelte/src/components/PageRenderer.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { AppPage } from "../lib/models/product";
-	import About from "../pages/About.svelte";
-	import Home from "../pages/Home.svelte";
-	import NotFound from "../pages/NotFound.svelte";
-	import ProductDetail from "../pages/ProductDetail.svelte";
-	import Search from "../pages/Search.svelte";
-
-	let { page }: { page: AppPage } = $props();
-
-	const pageComponents: Record<string, any> = {
-		home: Home,
-		product: ProductDetail,
-		search: Search,
-		about: About,
-		error: NotFound,
-	};
-
-	const PageComponent = $derived(pageComponents[page.pageType] ?? NotFound);
-</script>
-
-<PageComponent {page} />

package/templates/svelte/src/lib/framework-svelte.ts

@@ -1,34 +0,0 @@
-/**
- * Svelte Context 集成 — Framework 实例的 Svelte context 传递
- *
- * 在根组件（App.svelte）中调用 setFrameworkContext，
- * 子组件通过 getPerform 获取 perform 函数，无需逐层传递 onaction 回调。
- */
-
-import type { Action } from "@finesoft/front";
-import { Framework } from "@finesoft/front";
-import { getContext, setContext } from "svelte";
-
-const FRAMEWORK_KEY = "framework";
-
-/** 在根组件初始化时设置 Framework 实例到 Svelte context */
-export function setFrameworkContext(framework: Framework): void {
-    setContext(FRAMEWORK_KEY, framework);
-}
-
-/** 获取 Framework 实例；SSR 或未设置时返回 undefined */
-export function getFramework(): Framework | undefined {
-    return getContext<Framework | undefined>(FRAMEWORK_KEY);
-}
-
-/**
- * 获取 perform 函数，供导航/操作类组件在事件处理器中调用。
- * 在组件初始化阶段（<script> 顶层）调用，不能在事件回调内调用。
- *
- * @returns perform 函数；SSR 或无 context 时返回 undefined
- */
-export function getPerform(): ((action: Action) => Promise<void>) | undefined {
-    const fw = getFramework();
-    if (!fw) return undefined;
-    return (action: Action) => fw.perform(action);
-}

package/templates/svelte/src/lib/render.ts

@@ -1,15 +0,0 @@
-import type { BasePage, Framework } from "@finesoft/front";
-import { render } from "svelte/server";
-import App from "../App.svelte";
-import type { AppPage } from "./models/product";
-
-export function renderApp(page: BasePage, framework: Framework) {
-    const result = render(App, { props: { page: page as AppPage, framework } });
-    return {
-        html: result.body ?? "",
-        head: `<title>${page.title}</title><meta name="description" content="${
-            page.description ?? ""
-        }">${result.head ?? ""}`,
-        css: "",
-    };
-}

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

@@ -1,6 +0,0 @@
-import { defineRoutes, type Framework } from "@finesoft/front";
-import { HomeController } from "./lib/controllers/home";
-
-export function bootstrap(framework: Framework): void {
-    defineRoutes(framework, [{ path: "/", intentId: "home", controller: new HomeController() }]);
-}

package/templates/svelte-minimal/src/lib/framework-svelte.ts

@@ -1,34 +0,0 @@
-/**
- * Svelte Context 集成 — Framework 实例的 Svelte context 传递
- *
- * 在根组件（App.svelte）中调用 setFrameworkContext，
- * 子组件通过 getPerform 获取 perform 函数，无需逐层传递 onaction 回调。
- */
-
-import type { Action } from "@finesoft/front";
-import { Framework } from "@finesoft/front";
-import { getContext, setContext } from "svelte";
-
-const FRAMEWORK_KEY = "framework";
-
-/** 在根组件初始化时设置 Framework 实例到 Svelte context */
-export function setFrameworkContext(framework: Framework): void {
-    setContext(FRAMEWORK_KEY, framework);
-}
-
-/** 获取 Framework 实例；SSR 或未设置时返回 undefined */
-export function getFramework(): Framework | undefined {
-    return getContext<Framework | undefined>(FRAMEWORK_KEY);
-}
-
-/**
- * 获取 perform 函数，供导航/操作类组件在事件处理器中调用。
- * 在组件初始化阶段（<script> 顶层）调用，不能在事件回调内调用。
- *
- * @returns perform 函数；SSR 或无 context 时返回 undefined
- */
-export function getPerform(): ((action: Action) => Promise<void>) | undefined {
-    const fw = getFramework();
-    if (!fw) return undefined;
-    return (action: Action) => fw.perform(action);
-}

package/templates/svelte-minimal/src/lib/render.ts

@@ -1,12 +0,0 @@
-import type { BasePage, Framework } from "@finesoft/front";
-import { render } from "svelte/server";
-import App from "../App.svelte";
-
-export function renderApp(page: BasePage, framework: Framework) {
-    const result = render(App, { props: { page, framework } });
-    return {
-        html: result.body ?? "",
-        head: `<title>${page.title}</title>${result.head ?? ""}`,
-        css: "",
-    };
-}

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

@@ -1,42 +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 {
-    // Global afterLoad guard — SEO URL normalization
-    framework.afterLoad(seoGuard);
-
-    defineRoutes(framework, [
-        // SSR routes (default)
-        { 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(),
-        },
-
-        // CSR-only route
-        {
-            path: "/about",
-            intentId: "about",
-            controller: new AboutController(),
-            renderMode: "csr",
-        },
-
-        // Guarded route — requires auth cookie
-        {
-            path: "/admin",
-            intentId: "home",
-            beforeLoad: [authGuard],
-        },
-    ]);
-}

package/templates/vue/src/components/PageRenderer.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { Action } from "@finesoft/front";
-import type { AppPage } from "../lib/models/product";
-import About from "../pages/About.vue";
-import Home from "../pages/Home.vue";
-import NotFound from "../pages/NotFound.vue";
-import ProductDetail from "../pages/ProductDetail.vue";
-import Search from "../pages/Search.vue";
-
-const { page, onAction } = defineProps<{
-    page: AppPage;
-    onAction?: (action: Action) => void;
-}>();
-
-const pageComponents: Record<string, unknown> = {
-    home: Home,
-    product: ProductDetail,
-    search: Search,
-    about: About,
-    error: NotFound,
-};
-</script>
-
-<template>
-    <component :is="pageComponents[page.pageType] ?? NotFound" :page="page" :on-action="onAction" />
-</template>

package/templates/vue-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")) },
-        });
-    },
-});

package/templates/vue-minimal/src/views/DetailView.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { BasePage } from "@finesoft/front";
-
-defineProps<{ page: BasePage }>();
-</script>
-
-<template>
-    <section>
-        <h1 style="margin: 0 0 0.25rem">{{ page.title }}</h1>
-        <p style="color: #666; margin: 0 0 1rem">{{ page.description }}</p>
-
-        <!--
-          零样板保活：标一个 data-restore-root，里面的裸 <input> 即自动：
-          - in-session：push 走、pop 回来值还在（islands 保活，实例没销毁）
-          - 重载：sessionStorage 回填（domRestore），合成事件驱动可能的受控绑定
-          对比重构前：需手写 entryKey + watch + getScoped/setScoped —— 现在一行不写。
-        -->
-        <div data-restore-root>
-            <label style="display: block; margin-top: 1rem">
-                Draft note for this screen:
-                <input
-                    name="note"
-                    placeholder="kept while alive; restored on reload"
-                    style="width: 100%"
-                />
-            </label>
-        </div>
-    </section>
-</template>

package/templates/vue-minimal/src/views/HomeView.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import type { BasePage } from "@finesoft/front";
-import type { FeedPage } from "../lib/controllers/home";
-import type { AppController } from "../main";
-
-const { page, controller } = defineProps<{ page: BasePage; controller?: AppController }>();
-const feed = computed(() => (page.pageType === "home" ? (page as FeedPage) : null));
-</script>
-
-<template>
-    <section>
-        <h1 style="margin: 0 0 0.25rem">{{ page.title }}</h1>
-        <p style="color: #666; margin: 0 0 1rem">{{ page.description }}</p>
-        <ul v-if="feed" style="list-style: none; padding: 0; display: grid; gap: 0.5rem">
-            <li v-for="item in feed.items" :key="item.id">
-                <button
-                    style="width: 100%; text-align: left"
-                    @click="controller?.push('detail', { id: item.id })"
-                >
-                    {{ item.title }} →
-                </button>
-            </li>
-        </ul>
-    </section>
-</template>

package/templates/vue-minimal/src/views/NotesView.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { BasePage } from "@finesoft/front";
-
-defineProps<{ page: BasePage }>();
-</script>
-
-<template>
-    <section>
-        <h1 style="margin: 0 0 0.25rem">{{ page.title }}</h1>
-        <p style="color: #666; margin: 0 0 1rem">{{ page.description }}</p>
-    </section>
-</template>