@nifrajs/web-svelte 4.0.0 → 5.0.0

package/dist/Router.svelte

@@ -33,6 +33,7 @@
     const q = snapshot.path.indexOf("?")
     return {
       data: snapshot.data,
+      ...(snapshot.serverComponents === undefined ? {} : { serverComponents: snapshot.serverComponents }),
       actionData: snapshot.actionData,
       pending: snapshot.pending,
       // The same `params`/`path` the server render received, so `useMatches` reports the same chain.

package/dist/server-components/client.d.ts

@@ -0,0 +1,3 @@
+import { type NativeRangeOptions } from "@nifrajs/web/server-components/range";
+export declare function svelteComponentClient(options: Omit<NativeRangeOptions, "adapter" | "runtime">): import("@nifrajs/web/server-components/client").ComponentClientAdapter;
+//# sourceMappingURL=client.d.ts.map

package/dist/server-components/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/server-components/client.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,sCAAsC,CAAA;AAI7C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,SAAS,CAAC,0EAmD7F"}

package/dist/server-components/client.js

@@ -0,0 +1,58 @@
+import { disposeComponentPortals } from "@nifrajs/web/server-components/portal";
+import { nativeComponentClient, } from "@nifrajs/web/server-components/range";
+import { flushSync, hydrate, tick, unmount } from "svelte";
+import Island from "./Island.svelte";
+import { islandState } from "./state.svelte.js";
+export function svelteComponentClient(options) {
+    return nativeComponentClient({
+        ...options,
+        adapter: "svelte",
+        runtime: {
+            hydrate(host, contract, record) {
+                // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: Only this adapter produces its prepared tree and native root; component records and public props are validated before native preparation.
+                const state = islandState(record.props);
+                const slots = Object.fromEntries(contract.slots.map((name) => [
+                    name,
+                    '<nifra-slot data-nifra-slot="' +
+                        name +
+                        '">' +
+                        (record.slots?.[name] ?? "") +
+                        "</nifra-slot>",
+                ]));
+                const instance = hydrate(Island, {
+                    target: host,
+                    props: {
+                        // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: Only this adapter produces its prepared tree and native root; component records and public props are validated before native preparation.
+                        component: contract.component,
+                        state,
+                        slots,
+                    },
+                });
+                flushSync();
+                let disposed = false;
+                return {
+                    ready: tick(),
+                    update(next, current) {
+                        if (!disposed && current())
+                            flushSync(() => {
+                                if (current())
+                                    state.props = next;
+                            });
+                    },
+                    async dispose() {
+                        if (!disposed) {
+                            disposed = true;
+                            try {
+                                await disposeComponentPortals(host);
+                            }
+                            finally {
+                                await unmount(instance);
+                            }
+                        }
+                    },
+                };
+            },
+        },
+    });
+}
+//# sourceMappingURL=client.js.map

package/dist/server-components/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/server-components/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAA;AAC/E,OAAO,EAEL,qBAAqB,GACtB,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAkB,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAC1E,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,MAAM,UAAU,qBAAqB,CAAC,OAAwD;IAC5F,OAAO,qBAAqB,CAAC;QAC3B,GAAG,OAAO;QACV,OAAO,EAAE,QAAQ;QACjB,OAAO,EAAE;YACP,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM;gBAC5B,2MAA2M;gBAC3M,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,KAAgC,CAAC,CAAA;gBAClE,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;oBAC3B,IAAI;oBACJ,+BAA+B;wBAC7B,IAAI;wBACJ,IAAI;wBACJ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;wBAC5B,eAAe;iBAClB,CAAC,CACH,CAAA;gBACD,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,EAAE;oBAC/B,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE;wBACL,2MAA2M;wBAC3M,SAAS,EAAE,QAAQ,CAAC,SAA+C;wBACnE,KAAK;wBACL,KAAK;qBACN;iBACF,CAAC,CAAA;gBACF,SAAS,EAAE,CAAA;gBACX,IAAI,QAAQ,GAAG,KAAK,CAAA;gBACpB,OAAO;oBACL,KAAK,EAAE,IAAI,EAAE;oBACb,MAAM,CAAC,IAAI,EAAE,OAAO;wBAClB,IAAI,CAAC,QAAQ,IAAI,OAAO,EAAE;4BACxB,SAAS,CAAC,GAAG,EAAE;gCACb,IAAI,OAAO,EAAE;oCAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAA;4BACnC,CAAC,CAAC,CAAA;oBACN,CAAC;oBACD,KAAK,CAAC,OAAO;wBACX,IAAI,CAAC,QAAQ,EAAE,CAAC;4BACd,QAAQ,GAAG,IAAI,CAAA;4BACf,IAAI,CAAC;gCACH,MAAM,uBAAuB,CAAC,IAAI,CAAC,CAAA;4BACrC,CAAC;oCAAS,CAAC;gCACT,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAA;4BACzB,CAAC;wBACH,CAAC;oBACH,CAAC;iBACF,CAAA;YACH,CAAC;SACF;KACF,CAAC,CAAA;AACJ,CAAC"}

package/dist/server-components/server.d.ts

@@ -0,0 +1,3 @@
+import type { ServerComponentRenderAdapter } from "@nifrajs/web/server-components";
+export declare const svelteServerComponents: () => ServerComponentRenderAdapter;
+//# sourceMappingURL=server.d.ts.map

package/dist/server-components/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/server-components/server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAKlF,eAAO,MAAM,sBAAsB,QAAO,4BAcvC,CAAA"}

package/dist/server-components/server.js

@@ -0,0 +1,16 @@
+import { nativeServerComponents } from "@nifrajs/web/server-components/native";
+import { render } from "svelte/server";
+import Island from "./Island.svelte";
+export const svelteServerComponents = () => nativeServerComponents("svelte", (component, props, renderId) => renderId.endsWith("-view")
+    ? // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+        render(component, { props }).body
+    : render(Island, {
+        props: {
+            // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+            component: component,
+            state: { props },
+            // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+            slots: props.slots,
+        },
+    }).body);
+//# sourceMappingURL=server.js.map

package/dist/server-components/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/server-components/server.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAiC,EAAE,CACvE,sBAAsB,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,CAC9D,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC;IACxB,CAAC,CAAC,iLAAiL;QACjL,MAAM,CAAC,SAA+C,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI;IACzE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE;QACb,KAAK,EAAE;YACL,iLAAiL;YACjL,SAAS,EAAE,SAA+C;YAC1D,KAAK,EAAE,EAAE,KAAK,EAAE;YAChB,iLAAiL;YACjL,KAAK,EAAE,KAAK,CAAC,KAA+B;SAC7C;KACF,CAAC,CAAC,IAAI,CACZ,CAAA"}

package/dist/server-components/state.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare function islandState(props: Record<string, unknown>): {
+    props: Record<string, unknown>;
+};
+//# sourceMappingURL=state.svelte.d.ts.map

package/dist/server-components/state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.svelte.d.ts","sourceRoot":"","sources":["../../src/server-components/state.svelte.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;EAGzD"}

package/dist/server-components/state.svelte.js

@@ -0,0 +1,5 @@
+export function islandState(props) {
+    const state = $state({ props });
+    return state;
+}
+//# sourceMappingURL=state.svelte.js.map

package/dist/server-components/state.svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.svelte.js","sourceRoot":"","sources":["../../src/server-components/state.svelte.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,KAA8B;IACxD,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC/B,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-svelte",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Svelte 5 render adapter for @nifrajs/web - SSR + hydration, with the .svelte compiler Bun plugin (@nifrajs/web-svelte/plugin).",
   "keywords": [
     "bun",
@@ -88,6 +88,20 @@
       "bun": "./src/fn.ts",
       "types": "./dist/fn.d.ts",
       "default": "./dist/fn.js"
+    },
+    "./server-components": {
+      "bun": "./src/server-components/server.ts",
+      "types": "./dist/server-components/server.d.ts",
+      "default": "./src/server-components/server.ts"
+    },
+    "./server-components/client": {
+      "bun": "./src/server-components/client.ts",
+      "types": "./dist/server-components/client.d.ts",
+      "default": "./src/server-components/client.ts"
+    },
+    "./server-components/outlet": {
+      "types": "./src/server-components/ServerComponent.svelte.d.ts",
+      "default": "./src/server-components/ServerComponent.svelte"
     }
   },
   "files": [
@@ -96,17 +110,17 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && bun run ../../scripts/fix-dts.ts dist && cp src/*.svelte dist/ && cp src/*.svelte.d.ts dist/"
+    "build": "node ../../scripts/gen-component-svelte-types.mjs && tsc -p tsconfig.build.json && bun run ../../scripts/fix-dts.ts dist && cp src/*.svelte dist/ && cp src/*.svelte.d.ts dist/"
   },
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@nifrajs/core": "4.0.0",
-    "@nifrajs/i18n": "4.0.0",
-    "@nifrajs/image": "4.0.0",
-    "@nifrajs/web": "4.0.0"
+    "@nifrajs/core": "5.0.0",
+    "@nifrajs/i18n": "5.0.0",
+    "@nifrajs/image": "5.0.0",
+    "@nifrajs/web": "5.0.0"
   },
   "peerDependencies": {
     "mdsvex": "^0.12",
@@ -118,7 +132,8 @@
     }
   },
   "devDependencies": {
-    "svelte": "^5.3.0"
+    "svelte": "^5.3.0",
+    "svelte2tsx": "0.7.61"
   },
   "repository": {
     "type": "git",

package/src/Router.svelte

@@ -33,6 +33,7 @@
     const q = snapshot.path.indexOf("?")
     return {
       data: snapshot.data,
+      ...(snapshot.serverComponents === undefined ? {} : { serverComponents: snapshot.serverComponents }),
       actionData: snapshot.actionData,
       pending: snapshot.pending,
       // The same `params`/`path` the server render received, so `useMatches` reports the same chain.

package/src/server-components/Island.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import type { Component } from "svelte"
+  let { component: Native, state, slots }: { component: Component<Record<string, unknown>>; state: { props: Record<string, unknown> }; slots: Record<string, string> } = $props()
+</script>
+<Native {...state.props} {slots} />

package/src/server-components/Range.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { ComponentController, type ComponentClientAdapter, type ComponentState, type ComponentRecord } from "@nifrajs/web/server-components/client"
+  let { state, record, controller, clientAdapter }: { state: ComponentState; record: ComponentRecord; controller?: ComponentController | undefined | undefined; clientAdapter?: ComponentClientAdapter | undefined | undefined } = $props()
+  // svelte-ignore state_referenced_locally
+  const initial = record.html
+  // svelte-ignore state_referenced_locally
+  const instance = record.instance
+  let host: HTMLElement
+  let active: ComponentController | undefined
+  onMount(() => {
+    if (controller === undefined && clientAdapter === undefined) throw new Error("component_contract")
+    active = controller ?? new ComponentController({ state, adapter: clientAdapter! })
+    void active.mount(host, instance).catch(() => active?.reportError("component_failed"))
+    return () => { if (active !== undefined) void (controller === undefined ? active.dispose() : active.unmount(instance)) }
+  })
+  $effect(() => { const next = state; if (active !== undefined) void active.adopt(next).catch(() => active?.reportError("component_failed")) })
+</script>
+<nifra-component bind:this={host} data-nifra-component={instance}>{@html initial}</nifra-component>

package/src/server-components/ServerComponent.svelte

@@ -0,0 +1,9 @@
+<script lang="ts" generics="Input, Props, View">
+  import Range from "./Range.svelte"
+  import { ComponentController, resolveComponentRecord, type ComponentClientAdapter, type ComponentState, type ComponentKey, type ServerComponent as Handle } from "@nifrajs/web/server-components/client"
+  let { state, component, instanceKey, input, parent, controller, clientAdapter }: {
+    state: ComponentState; component: Handle<Input, Props, View>; instanceKey: ComponentKey; input: NoInfer<Input>; parent?: string; controller?: ComponentController | undefined; clientAdapter?: ComponentClientAdapter | undefined
+  } = $props()
+  const record = $derived(resolveComponentRecord(state, component, instanceKey, input, parent ?? null))
+</script>
+{#key record.instance}<Range {state} {record} {controller} {clientAdapter} />{/key}

package/src/server-components/ServerComponent.svelte.d.ts

@@ -0,0 +1,35 @@
+// Generated by scripts/gen-component-svelte-types.mjs from ServerComponent.svelte.
+import { ComponentController, type ComponentClientAdapter, type ComponentState, type ComponentKey, type ServerComponent as Handle } from "@nifrajs/web/server-components/client";
+declare function $$render<Input, Props, View>(): {
+    props: {
+        state: ComponentState;
+        component: Handle<Input, Props, View>;
+        instanceKey: ComponentKey;
+        input: NoInfer<Input>;
+        parent?: string;
+        controller?: ComponentController | undefined;
+        clientAdapter?: ComponentClientAdapter | undefined;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Input, Props, View> {
+    props(): ReturnType<typeof $$render<Input, Props, View>>['props'];
+    events(): ReturnType<typeof $$render<Input, Props, View>>['events'];
+    slots(): ReturnType<typeof $$render<Input, Props, View>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Input, Props, View>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Input, Props, View>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Input, Props, View>['props']>, ReturnType<__sveltets_Render<Input, Props, View>['events']>, ReturnType<__sveltets_Render<Input, Props, View>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Input, Props, View>['bindings']>;
+    } & ReturnType<__sveltets_Render<Input, Props, View>['exports']>;
+    <Input, Props, View>(internal: unknown, props: ReturnType<__sveltets_Render<Input, Props, View>['props']> & {}): ReturnType<__sveltets_Render<Input, Props, View>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const ServerComponent: $$IsomorphicComponent;
+type ServerComponent<Input, Props, View> = InstanceType<typeof ServerComponent<Input, Props, View>>;
+export default ServerComponent;
+//# sourceMappingURL=ServerComponent.svelte.d.ts.map

package/src/server-components/client.ts

@@ -0,0 +1,60 @@
+import { disposeComponentPortals } from "@nifrajs/web/server-components/portal"
+import {
+  type NativeRangeOptions,
+  nativeComponentClient,
+} from "@nifrajs/web/server-components/range"
+import { type Component, flushSync, hydrate, tick, unmount } from "svelte"
+import Island from "./Island.svelte"
+import { islandState } from "./state.svelte.ts"
+export function svelteComponentClient(options: Omit<NativeRangeOptions, "adapter" | "runtime">) {
+  return nativeComponentClient({
+    ...options,
+    adapter: "svelte",
+    runtime: {
+      hydrate(host, contract, record) {
+        // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: Only this adapter produces its prepared tree and native root; component records and public props are validated before native preparation.
+        const state = islandState(record.props as Record<string, unknown>)
+        const slots = Object.fromEntries(
+          contract.slots.map((name) => [
+            name,
+            '<nifra-slot data-nifra-slot="' +
+              name +
+              '">' +
+              (record.slots?.[name] ?? "") +
+              "</nifra-slot>",
+          ]),
+        )
+        const instance = hydrate(Island, {
+          target: host,
+          props: {
+            // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: Only this adapter produces its prepared tree and native root; component records and public props are validated before native preparation.
+            component: contract.component as Component<Record<string, unknown>>,
+            state,
+            slots,
+          },
+        })
+        flushSync()
+        let disposed = false
+        return {
+          ready: tick(),
+          update(next, current) {
+            if (!disposed && current())
+              flushSync(() => {
+                if (current()) state.props = next
+              })
+          },
+          async dispose() {
+            if (!disposed) {
+              disposed = true
+              try {
+                await disposeComponentPortals(host)
+              } finally {
+                await unmount(instance)
+              }
+            }
+          },
+        }
+      },
+    },
+  })
+}

package/src/server-components/server.ts

@@ -0,0 +1,20 @@
+import type { ServerComponentRenderAdapter } from "@nifrajs/web/server-components"
+import { nativeServerComponents } from "@nifrajs/web/server-components/native"
+import type { Component } from "svelte"
+import { render } from "svelte/server"
+import Island from "./Island.svelte"
+export const svelteServerComponents = (): ServerComponentRenderAdapter =>
+  nativeServerComponents("svelte", (component, props, renderId) =>
+    renderId.endsWith("-view")
+      ? // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+        render(component as Component<Record<string, unknown>>, { props }).body
+      : render(Island, {
+          props: {
+            // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+            component: component as Component<Record<string, unknown>>,
+            state: { props },
+            // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+            slots: props.slots as Record<string, string>,
+          },
+        }).body,
+  )

package/src/server-components/state.svelte.ts

@@ -0,0 +1,4 @@
+export function islandState(props: Record<string, unknown>) {
+  const state = $state({ props })
+  return state
+}