@finesoft/front 0.5.1 → 0.5.3

package/README.md

@@ -1,13 +1,13 @@
 # @finesoft/front
 
-Full-stack TypeScript framework — router, DI, actions, SSR, and server — all in one package. Works with **Vue**, **React**, or **Svelte**. Deploys to Node.js, Vercel, Cloudflare Workers, Netlify, or static hosting.
+Portable operations, Web navigation, browser/SSR rendering, HTTP, Node/Worker hosts and Vite tooling through one public entry. React, Vue and Svelte use optional native Outlet bindings.
 
 ```bash
-npx @finesoft/create-app my-app
+vp dlx @finesoft/create-app my-app
 ```
 
-**Documentation: [English](./docs/README.md) · [简体中文](./docs/zh/README.md)** — getting started, engineering practices, pitfalls, and advanced recipes.
+[English guide](./docs/README.md) · [简体中文](./docs/zh/README.md)
 
-## License
+Import every framework API from `@finesoft/front`. Select native bindings with `Outlet("react" | "vue" | "svelte")` and `useSnapshot(renderer, app)`. Applications own their native mount and SSR render. The Vite plugin maintains a project-specific type entry so only the selected peers are needed. For standalone TypeScript tooling, run `vp exec finesoft-types` first.
 
 MIT

package/dist/Outlet.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { tick, untrack } from "svelte";
+    import type { Component } from "svelte";
+    import type { ViewProps, WebAppView } from "@finesoft/front";
+    import { useSnapshot } from "./svelte.mjs";
+    let {
+        app,
+        views,
+    }: {
+        app: WebAppView;
+        views: Readonly<Record<string, Component<never>>>;
+    } = $props();
+    const snapshot = untrack(() => useSnapshot(app));
+    $effect(() => {
+        const revision = $snapshot.revision;
+        void tick().then(() => app.commit(revision));
+    });
+</script>
+<main data-fs-outlet>
+    {#each $snapshot.entries as entry (entry.entryId)}
+        {@const View = (views[entry.page.pageType] ?? views["*"]) as Component<ViewProps> | undefined}
+        {#if View}
+            <div
+                hidden={!entry.visible}
+                data-fs-entry={entry.entryId}
+                data-fs-key={entry.entryId}
+                data-fs-intent={entry.intent}
+            >
+                {#key entry.entryId + ":" + entry.page.pageType}
+                    <View page={entry.page} {app} {entry} />
+                {/key}
+            </div>
+        {:else}
+            {@const _missing = (() => {
+                throw Error("Missing view: " + entry.page.pageType);
+            })()}
+        {/if}
+    {/each}
+</main>

package/dist/Outlet.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from "svelte";
+import type { WebAppView } from "@finesoft/front";
+declare const Outlet: Component<{
+    app: WebAppView;
+    views: Readonly<Record<string, Component<never>>>;
+}>;
+export default Outlet;