@nifrajs/web-preact 4.0.2 → 5.0.0

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

@@ -0,0 +1,3 @@
+import { type NativeRangeOptions } from "@nifrajs/web/server-components/range";
+export declare function preactComponentClient(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;AAG7C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,SAAS,CAAC,0EAiD7F"}

package/dist/server-components/client.js

@@ -0,0 +1,55 @@
+import { disposeComponentPortals } from "@nifrajs/web/server-components/portal";
+import { nativeComponentClient, } from "@nifrajs/web/server-components/range";
+import { h, hydrate, render } from "preact";
+export function preactComponentClient(options) {
+    return nativeComponentClient({
+        ...options,
+        adapter: "preact",
+        runtime: {
+            hydrate(host, contract, record, current) {
+                // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The shared range validates the registered island and projects public props before native hydration.
+                const component = contract.component;
+                // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The shared range validates the registered island and projects public props before native hydration.
+                let props = record.props;
+                const slots = Object.fromEntries(contract.slots.map((name) => [
+                    name,
+                    '<nifra-slot data-nifra-slot="' +
+                        name +
+                        '">' +
+                        (record.slots?.[name] ?? "") +
+                        "</nifra-slot>",
+                ]));
+                let isCurrent = current;
+                let previous = h(component, { ...props, slots });
+                const Island = () => {
+                    if (isCurrent())
+                        previous = h(component, { ...props, slots });
+                    return previous;
+                };
+                hydrate(h(Island, null), host);
+                let disposed = false;
+                return {
+                    update(next, valid) {
+                        if (disposed || !valid())
+                            return;
+                        isCurrent = valid;
+                        props = next;
+                        render(h(Island, null), host);
+                    },
+                    async dispose() {
+                        if (!disposed) {
+                            disposed = true;
+                            try {
+                                await disposeComponentPortals(host);
+                            }
+                            finally {
+                                render(null, host);
+                            }
+                        }
+                    },
+                };
+            },
+        },
+    });
+}
+//# 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,EAAsB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/D,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,EAAE,OAAO;gBACrC,qKAAqK;gBACrK,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAmD,CAAA;gBAC9E,qKAAqK;gBACrK,IAAI,KAAK,GAAG,MAAM,CAAC,KAAgC,CAAA;gBACnD,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,IAAI,SAAS,GAAG,OAAO,CAAA;gBACvB,IAAI,QAAQ,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;gBAChD,MAAM,MAAM,GAAG,GAAG,EAAE;oBAClB,IAAI,SAAS,EAAE;wBAAE,QAAQ,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;oBAC7D,OAAO,QAAQ,CAAA;gBACjB,CAAC,CAAA;gBACD,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;gBAC9B,IAAI,QAAQ,GAAG,KAAK,CAAA;gBACpB,OAAO;oBACL,MAAM,CAAC,IAAI,EAAE,KAAK;wBAChB,IAAI,QAAQ,IAAI,CAAC,KAAK,EAAE;4BAAE,OAAM;wBAChC,SAAS,GAAG,KAAK,CAAA;wBACjB,KAAK,GAAG,IAAI,CAAA;wBACZ,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;oBAC/B,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,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;4BACpB,CAAC;wBACH,CAAC;oBACH,CAAC;iBACF,CAAA;YACH,CAAC;SACF;KACF,CAAC,CAAA;AACJ,CAAC"}

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

@@ -0,0 +1,20 @@
+import { type ComponentClientAdapter, ComponentController, type ServerComponent as ComponentHandle, type ComponentKey, type ComponentState } from "@nifrajs/web/server-components/client";
+export interface ServerComponentProps<Input, Props, View> {
+    readonly state: ComponentState;
+    readonly component: ComponentHandle<Input, Props, View>;
+    readonly instanceKey: ComponentKey;
+    readonly input: NoInfer<Input>;
+    readonly parent?: string;
+    readonly controller?: ComponentController | undefined;
+    readonly clientAdapter?: ComponentClientAdapter | undefined;
+    readonly onError?: ((code: string) => void) | undefined;
+}
+export declare function ServerComponent<Input, Props, View>(props: ServerComponentProps<Input, Props, View>): import("preact").VNode<import("preact").Attributes & {
+    key: string;
+    state: ComponentState;
+    record: import("@nifrajs/web/server-components").ComponentRecord;
+    controller: ComponentController | undefined;
+    clientAdapter: ComponentClientAdapter | undefined;
+    onError: ((code: string) => void) | undefined;
+}>;
+//# sourceMappingURL=outlet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outlet.d.ts","sourceRoot":"","sources":["../../src/server-components/outlet.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAC3B,mBAAmB,EACnB,KAAK,eAAe,IAAI,eAAe,EACvC,KAAK,YAAY,EACjB,KAAK,cAAc,EAEpB,MAAM,uCAAuC,CAAA;AAI9C,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI;IACtD,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAA;IAC9B,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IACvD,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAA;IAClC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAA;IACrD,QAAQ,CAAC,aAAa,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAA;IAC3D,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACxD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAChD,KAAK,EAAE,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC;;;;;;qBAJpB,MAAM,KAAK,IAAI;GAqB3C"}

package/dist/server-components/outlet.js

@@ -0,0 +1,61 @@
+import { ComponentController, resolveComponentRecord, } from "@nifrajs/web/server-components/client";
+import { h } from "preact";
+import { useLayoutEffect, useRef } from "preact/hooks";
+export function ServerComponent(props) {
+    const record = resolveComponentRecord(props.state, props.component, props.instanceKey, props.input, props.parent ?? null);
+    return h(ComponentRange, {
+        key: record.instance,
+        state: props.state,
+        record,
+        controller: props.controller,
+        clientAdapter: props.clientAdapter,
+        onError: props.onError,
+    });
+}
+function ComponentRange(props) {
+    const record = props.record;
+    const host = useRef(null);
+    // Preact owns the shell while the controller owns its independently hydrated native children.
+    const initial = useRef({
+        __html: `<nifra-component data-nifra-component="${record.instance}">${record.html}</nifra-component>`,
+    });
+    const active = useRef(undefined);
+    const lifecycle = useRef(props);
+    lifecycle.current = props;
+    useLayoutEffect(() => {
+        const options = lifecycle.current;
+        if (options.controller === undefined && options.clientAdapter === undefined)
+            throw new Error("component_contract");
+        const element = host.current?.firstElementChild;
+        if (!(element instanceof HTMLElement) || element.localName !== "nifra-component")
+            throw new Error("component_contract");
+        const controller = options.controller ??
+            new ComponentController({
+                state: options.state,
+                // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The effect rejects missing adapters before creating a controller; callers with a controller bypass this expression.
+                adapter: options.clientAdapter,
+                onError: (code) => lifecycle.current.onError?.(code),
+            });
+        active.current = controller;
+        void controller
+            .mount(element, record.instance)
+            .catch(() => controller.reportError("component_failed"));
+        return () => {
+            void (options.controller === undefined
+                ? controller.dispose()
+                : controller.unmount(record.instance)).catch(() => controller.reportError("component_failed"));
+        };
+    }, [record.instance]);
+    useLayoutEffect(() => {
+        if (active.current !== undefined)
+            void active.current
+                .adopt(props.state)
+                .catch(() => active.current?.reportError("component_failed"));
+    }, [props.state]);
+    return h("nifra-component-outlet", {
+        ref: host,
+        // Record HTML passed the shared component policy before an outlet can resolve it.
+        dangerouslySetInnerHTML: initial.current,
+    });
+}
+//# sourceMappingURL=outlet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outlet.js","sourceRoot":"","sources":["../../src/server-components/outlet.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAInB,sBAAsB,GACvB,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAatD,MAAM,UAAU,eAAe,CAC7B,KAA+C;IAE/C,MAAM,MAAM,GAAG,sBAAsB,CACnC,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,SAAS,EACf,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,MAAM,IAAI,IAAI,CACrB,CAAA;IACD,OAAO,CAAC,CAAC,cAAc,EAAE;QACvB,GAAG,EAAE,MAAM,CAAC,QAAQ;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM;QACN,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,KAMvB;IACC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IACtC,8FAA8F;IAC9F,MAAM,OAAO,GAAG,MAAM,CAAC;QACrB,MAAM,EAAE,0CAA0C,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,IAAI,oBAAoB;KACtG,CAAC,CAAA;IACF,MAAM,MAAM,GAAG,MAAM,CAAkC,SAAS,CAAC,CAAA;IACjE,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;IACzB,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAA;QACjC,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,OAAO,CAAC,aAAa,KAAK,SAAS;YACzE,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAA;QACvC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAA;QAC/C,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,IAAI,OAAO,CAAC,SAAS,KAAK,iBAAiB;YAC9E,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAA;QACvC,MAAM,UAAU,GACd,OAAO,CAAC,UAAU;YAClB,IAAI,mBAAmB,CAAC;gBACtB,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,qLAAqL;gBACrL,OAAO,EAAE,OAAO,CAAC,aAAuC;gBACxD,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC;aACrD,CAAC,CAAA;QACJ,MAAM,CAAC,OAAO,GAAG,UAAU,CAAA;QAC3B,KAAK,UAAU;aACZ,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC;aAC/B,KAAK,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE;YACV,KAAK,CACH,OAAO,CAAC,UAAU,KAAK,SAAS;gBAC9B,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE;gBACtB,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CACxC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAA;QAC3D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;IACrB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS;YAC9B,KAAK,MAAM,CAAC,OAAO;iBAChB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;iBAClB,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAA;IACnE,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACjB,OAAO,CAAC,CAAC,wBAAwB,EAAE;QACjC,GAAG,EAAE,IAAI;QACT,kFAAkF;QAClF,uBAAuB,EAAE,OAAO,CAAC,OAAO;KACzC,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 preactServerComponents: () => 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,4BAKtC,CAAA"}

package/dist/server-components/server.js

@@ -0,0 +1,9 @@
+import { nativeServerComponents } from "@nifrajs/web/server-components/native";
+import { h } from "preact";
+import { preactRenderToString } from "../preact-render.js";
+export const preactServerComponents = () => nativeServerComponents("preact", async (component, props) => {
+    const renderer = await preactRenderToString();
+    // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+    return renderer.renderToString(h(component, props));
+});
+//# 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;AAC9E,OAAO,EAAsB,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAiC,EAAE,CACvE,sBAAsB,CAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAC1D,MAAM,QAAQ,GAAG,MAAM,oBAAoB,EAAE,CAAA;IAC7C,iLAAiL;IACjL,OAAO,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,SAAmD,EAAE,KAAK,CAAC,CAAC,CAAA;AAC/F,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-preact",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "Preact render adapter for @nifrajs/web - streaming SSR + hydration (no build plugin).",
   "keywords": [
     "bun",
@@ -70,6 +70,21 @@
       "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": "./dist/server-components/server.js"
+    },
+    "./server-components/client": {
+      "bun": "./src/server-components/client.ts",
+      "types": "./dist/server-components/client.d.ts",
+      "default": "./dist/server-components/client.js"
+    },
+    "./server-components/outlet": {
+      "bun": "./src/server-components/outlet.ts",
+      "types": "./dist/server-components/outlet.d.ts",
+      "default": "./dist/server-components/outlet.js"
     }
   },
   "files": [
@@ -85,10 +100,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@nifrajs/core": "4.0.2",
-    "@nifrajs/i18n": "4.0.2",
-    "@nifrajs/image": "4.0.2",
-    "@nifrajs/web": "4.0.2",
+    "@nifrajs/core": "5.0.0",
+    "@nifrajs/i18n": "5.0.0",
+    "@nifrajs/image": "5.0.0",
+    "@nifrajs/web": "5.0.0",
     "preact-render-to-string": "^6.5.0"
   },
   "peerDependencies": {

package/src/server-components/client.ts

@@ -0,0 +1,57 @@
+import { disposeComponentPortals } from "@nifrajs/web/server-components/portal"
+import {
+  type NativeRangeOptions,
+  nativeComponentClient,
+} from "@nifrajs/web/server-components/range"
+import { type ComponentType, h, hydrate, render } from "preact"
+
+export function preactComponentClient(options: Omit<NativeRangeOptions, "adapter" | "runtime">) {
+  return nativeComponentClient({
+    ...options,
+    adapter: "preact",
+    runtime: {
+      hydrate(host, contract, record, current) {
+        // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The shared range validates the registered island and projects public props before native hydration.
+        const component = contract.component as ComponentType<Record<string, unknown>>
+        // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The shared range validates the registered island and projects public props before native hydration.
+        let props = 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>",
+          ]),
+        )
+        let isCurrent = current
+        let previous = h(component, { ...props, slots })
+        const Island = () => {
+          if (isCurrent()) previous = h(component, { ...props, slots })
+          return previous
+        }
+        hydrate(h(Island, null), host)
+        let disposed = false
+        return {
+          update(next, valid) {
+            if (disposed || !valid()) return
+            isCurrent = valid
+            props = next
+            render(h(Island, null), host)
+          },
+          async dispose() {
+            if (!disposed) {
+              disposed = true
+              try {
+                await disposeComponentPortals(host)
+              } finally {
+                render(null, host)
+              }
+            }
+          },
+        }
+      },
+    },
+  })
+}

package/src/server-components/outlet.ts

@@ -0,0 +1,97 @@
+import {
+  type ComponentClientAdapter,
+  ComponentController,
+  type ServerComponent as ComponentHandle,
+  type ComponentKey,
+  type ComponentState,
+  resolveComponentRecord,
+} from "@nifrajs/web/server-components/client"
+import { h } from "preact"
+import { useLayoutEffect, useRef } from "preact/hooks"
+
+export interface ServerComponentProps<Input, Props, View> {
+  readonly state: ComponentState
+  readonly component: ComponentHandle<Input, Props, View>
+  readonly instanceKey: ComponentKey
+  readonly input: NoInfer<Input>
+  readonly parent?: string
+  readonly controller?: ComponentController | undefined
+  readonly clientAdapter?: ComponentClientAdapter | undefined
+  readonly onError?: ((code: string) => void) | undefined
+}
+
+export function ServerComponent<Input, Props, View>(
+  props: ServerComponentProps<Input, Props, View>,
+) {
+  const record = resolveComponentRecord(
+    props.state,
+    props.component,
+    props.instanceKey,
+    props.input,
+    props.parent ?? null,
+  )
+  return h(ComponentRange, {
+    key: record.instance,
+    state: props.state,
+    record,
+    controller: props.controller,
+    clientAdapter: props.clientAdapter,
+    onError: props.onError,
+  })
+}
+
+function ComponentRange(props: {
+  readonly state: ComponentState
+  readonly record: import("@nifrajs/web/server-components/client").ComponentRecord
+  readonly controller?: ComponentController | undefined
+  readonly clientAdapter?: ComponentClientAdapter | undefined
+  readonly onError?: ((code: string) => void) | undefined
+}) {
+  const record = props.record
+  const host = useRef<HTMLElement>(null)
+  // Preact owns the shell while the controller owns its independently hydrated native children.
+  const initial = useRef({
+    __html: `<nifra-component data-nifra-component="${record.instance}">${record.html}</nifra-component>`,
+  })
+  const active = useRef<ComponentController | undefined>(undefined)
+  const lifecycle = useRef(props)
+  lifecycle.current = props
+  useLayoutEffect(() => {
+    const options = lifecycle.current
+    if (options.controller === undefined && options.clientAdapter === undefined)
+      throw new Error("component_contract")
+    const element = host.current?.firstElementChild
+    if (!(element instanceof HTMLElement) || element.localName !== "nifra-component")
+      throw new Error("component_contract")
+    const controller =
+      options.controller ??
+      new ComponentController({
+        state: options.state,
+        // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The effect rejects missing adapters before creating a controller; callers with a controller bypass this expression.
+        adapter: options.clientAdapter as ComponentClientAdapter,
+        onError: (code) => lifecycle.current.onError?.(code),
+      })
+    active.current = controller
+    void controller
+      .mount(element, record.instance)
+      .catch(() => controller.reportError("component_failed"))
+    return () => {
+      void (
+        options.controller === undefined
+          ? controller.dispose()
+          : controller.unmount(record.instance)
+      ).catch(() => controller.reportError("component_failed"))
+    }
+  }, [record.instance])
+  useLayoutEffect(() => {
+    if (active.current !== undefined)
+      void active.current
+        .adopt(props.state)
+        .catch(() => active.current?.reportError("component_failed"))
+  }, [props.state])
+  return h("nifra-component-outlet", {
+    ref: host,
+    // Record HTML passed the shared component policy before an outlet can resolve it.
+    dangerouslySetInnerHTML: initial.current,
+  })
+}

package/src/server-components/server.ts

@@ -0,0 +1,11 @@
+import type { ServerComponentRenderAdapter } from "@nifrajs/web/server-components"
+import { nativeServerComponents } from "@nifrajs/web/server-components/native"
+import { type ComponentType, h } from "preact"
+import { preactRenderToString } from "../preact-render.ts"
+
+export const preactServerComponents = (): ServerComponentRenderAdapter =>
+  nativeServerComponents("preact", async (component, props) => {
+    const renderer = await preactRenderToString()
+    // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The native renderer receives only its registered component and schema-projected props from the shared executor.
+    return renderer.renderToString(h(component as ComponentType<Record<string, unknown>>, props))
+  })