@farm.js/islx 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.0.3
+
+Server layouts as trees.
+
+- A server layout around a client provider renders as a server tree, so a framework no longer
+  ships the layout's module to hydrate it. On the server, `renderServerTree(layout, { outlets,
+  scope })` with `<Outlet />` where the page goes; in the browser, `createServerTreeLayout(source,
+  scope, { load, ServerHtml, onUpdate })` and `layout.render({ children: page })`. Rendering it
+  again with another page keeps the provider's state.
+- A layout's tree names its payload, chunks and server HTML by its scope (`f/chunk name="/:0"`),
+  so it and the page's tree at its outlet never read each other's parts. New tag `L` (outlet).
+
 ## 0.0.2
 
 Streaming and hydration fixes.

package/README.md

@@ -13,7 +13,7 @@ islx started as [Farm.js](https://github.com/farming-labs/farm.js)'s islands mod
 replaces React Server Components' Flight payload. On a 300-page docs app it ships 26% less
 JavaScript, and a client navigation sends 2.5 KB instead of 12 KB.
 
-> Status: 0.0.2. React and Vite are supported; other renderers and framework
+> Status: 0.0.3. React and Vite are supported; other renderers and framework
 > integrations follow. The wire format is in [SPEC.md](./SPEC.md), changes in
 > [CHANGELOG.md](./CHANGELOG.md).
 
@@ -180,6 +180,7 @@ A framework that renders pages itself (Farm does) uses the pieces directly inste
 | Render islands in its own render | wrap the page in `<IslandsProvider held={parseHeldValues(request)}>` |
 | A layout that hydrates as one root | `withinClientRoot(layout)`; its server-HTML page: `isolateIslands(page)` |
 | An async page under such a layout | `renderServerTree(page, { held, payloadOnly })` on the server; `createServerTreeElement(source, { load, ServerHtml })` in the browser |
+| A server layout around a client provider, without shipping the layout | `renderServerTree(<Layout><Outlet /></Layout>, { outlets: { children: page }, scope })` on the server; `createServerTreeLayout(source, scope, { load, ServerHtml, onUpdate })` in the browser, then `layout.render({ children: page })` |
 | Hydrate | `createHydrationRuntime({ load, schedule?, wrap?, report? })`, `createServerHtml(runtime)` |
 | Hold early clicks | inline `PREHYDRATION_SCRIPT` in the page |
 | Actions | `handleAction(request, { allowedOrigins, bodySizeLimit, run, mapError, renderFormState })`; `setActionNavigator({ refresh, navigate })` |

package/SPEC.md

@@ -32,9 +32,9 @@ Anything that writes and reads it, in any language or framework, is a islx imple
 | `<script type="f/props" for>` | An island's props, as JSON. `for` names the island's `props` id. |
 | `<script type="f/value" name>` | A value sent once. `name` is its key. Written before the first island that uses it. |
 | `<f-slot name>` | Server output passed to an island as children. It stays server HTML; the island renders it in place. |
-| `<script type="f/tree" [partial]>` | A page's server tree, so the browser can rebuild the page inside an existing root without its HTML. `partial` marks a navigation that sent only the tree. |
-| `<script type="f/chunk" name>` | A part of a server tree that streamed in after the tree (a resolved Suspense boundary). |
-| `<f-html name>` | Server HTML inside a server tree. |
+| `<script type="f/tree" [name] [partial]>` | A server tree, so the browser can rebuild the page inside an existing root without its HTML. A page's tree has no `name`; a layout's carries its scope and sits at its `children` outlet, or after the layout when it has none. `partial` marks a navigation that sent only the tree. |
+| `<script type="f/chunk" name>` | A part of a server tree that streamed in after the tree (a resolved Suspense boundary). `name` is its number, after `scope:` in a layout's tree. |
+| `<f-html name>` | Server HTML inside a server tree, named like a chunk. |
 
 A value script's and props script's JSON escapes `<`, U+2028 and U+2029.
 
@@ -59,6 +59,7 @@ with any other keys is data.
 | `R` | `RegExp` | `[source, flags]` |
 | `Y` | bytes | `[type, base64]`; type is `ArrayBuffer`, `DataView` or a typed array name |
 | `p` | a Suspense boundary inside a server tree | |
+| `L` | a layout tree's outlet, where the page renders | `n`: the outlet's name, `children` for the page |
 | `F` | a `FormData` action argument | its index among the call's attachments |
 | `K` | a `Blob` or `File` action argument | its index among the call's attachments |
 

package/dist/_chunks/{tree-fID6sz25.d.mts → tree-B4RMU2UX.d.mts}

@@ -58,6 +58,13 @@ declare function createIsland<P extends object>(Component: React.ComponentType<P
  * page in its layout's React root and never shows its HTML, so the server leaves the HTML out.
  */
 declare const PAYLOAD_ONLY_ATTRIBUTE = "partial";
+/**
+ * Where a layout rendered as a server tree places the page (or another outlet, by `name`). The
+ * tree records the outlet, and the server and the browser render what they are given there.
+ */
+declare function Outlet(_props: {
+  name?: string;
+}): null;
 interface ServerTreeRenderOptions {
   /**
    * Renders a part the resolver cannot represent, as server HTML whose client components are
@@ -71,6 +78,17 @@ interface ServerTreeRenderOptions {
    * streams and the server HTML parts it cannot represent, without the page's rendered HTML.
    */
   payloadOnly?: boolean;
+  /**
+   * A layout rendered as a server tree: what each `<Outlet>` renders, by name. The payload script
+   * then sits at the `children` outlet, inside the layout's markup, so a layout that renders the
+   * whole document keeps it in the body.
+   */
+  outlets?: Record<string, React.ReactNode>;
+  /**
+   * Names this tree's payload, chunks and server HTML parts, so a layout's tree and the trees at
+   * its outlet do not read each other's. A page's tree has none.
+   */
+  scope?: string;
 }
 /**
  * Resolves a server page and returns what renders in its place: the resolved tree and its
@@ -99,4 +117,23 @@ interface ServerTreeElementOptions {
  * navigation), after loading its client modules. Returns null for a page without a tree.
  */
 declare function createServerTreeElement(source: ParentNode | string, options: ServerTreeElementOptions): Promise<React.ReactElement | null>;
-export { renderServerTree as a, IslandRenderState as c, getClientReference as d, isolateIslands as f, createServerTreeElement as i, IslandsProvider as l, withinClientRoot as m, ServerTreeElementOptions as n, updateServerTrees as o, setRenderStateResolver as p, ServerTreeRenderOptions as r, ClientReference as s, PAYLOAD_ONLY_ATTRIBUTE as t, createIsland as u };
+/** A layout rebuilt from its server tree. */
+interface ServerTreeLayout {
+  /** The layout around these outlets: plain elements, the same tree the server rendered. */
+  render(outlets: Record<string, React.ReactNode>): React.ReactNode;
+  /** Stops following hot module updates. */
+  dispose(): void;
+}
+interface ServerTreeLayoutOptions extends Omit<ServerTreeElementOptions, "key"> {
+  /** Runs after a hot update to one of the layout's client modules: render the route again. */
+  onUpdate?(): void;
+}
+/**
+ * Rebuilds a layout the server rendered with `renderServerTree(..., { outlets, scope })`, from
+ * its server HTML or a navigation's HTML. The layout's own module never reaches the browser: its
+ * client components load from the tree, and `render(outlets)` places the page at its outlet.
+ * Rendering it with the same component types at the same place keeps its client state across
+ * navigations. Returns null when `source` has no tree for `scope`.
+ */
+declare function createServerTreeLayout(source: ParentNode | string, scope: string, options: ServerTreeLayoutOptions): Promise<ServerTreeLayout | null>;
+export { setRenderStateResolver as _, ServerTreeLayoutOptions as a, createServerTreeLayout as c, ClientReference as d, IslandRenderState as f, isolateIslands as g, getClientReference as h, ServerTreeLayout as i, renderServerTree as l, createIsland as m, PAYLOAD_ONLY_ATTRIBUTE as n, ServerTreeRenderOptions as o, IslandsProvider as p, ServerTreeElementOptions as r, createServerTreeElement as s, Outlet as t, updateServerTrees as u, withinClientRoot as v };

package/dist/_chunks/{tree-BDB5VEao.mjs → tree-BvYR6-PF.mjs}

@@ -228,6 +228,15 @@ const SERVER_HTML_TAG = HTML_ELEMENT;
 */
 const PAYLOAD_ONLY_ATTRIBUTE = "partial";
 const SERVER_HTML_ATTRIBUTE = "name";
+const OUTLET = Symbol.for("islx.react.outlet");
+/**
+* Where a layout rendered as a server tree places the page (or another outlet, by `name`). The
+* tree records the outlet, and the server and the browser render what they are given there.
+*/
+function Outlet(_props) {
+	return null;
+}
+Outlet[OUTLET] = true;
 const PARSER_SENSITIVE_TAGS = /* @__PURE__ */ new Set([
 	"caption",
 	"colgroup",
@@ -414,6 +423,10 @@ async function resolveElement(state, element, context) {
 				i: id
 			});
 		}
+		if (typeof type === "function" && type[OUTLET]) return withKey({
+			$: "L",
+			n: String(props.name ?? "children")
+		});
 		const clientReference = getClientReference(type);
 		if (clientReference) {
 			const { children, ...rest } = props;
@@ -511,6 +524,7 @@ function createTreeValue(value, resolver) {
 			fallback: createTreeValue(value.f, resolver)
 		}, React.createElement(getChunkComponent(), { chunk: resolver.chunk(value.i) }));
 		case "x": return resolver.serverHtml(value.i, typeof value.k === "string" ? value.k : null);
+		case "L": return resolver.outlet(value.n);
 		case "n": return Number(value.v);
 		case "a": return resolver.action(value.v, typeof value.b === "string" ? value.b : void 0);
 		case "P": return fulfilledThenable(createTreeValue(value.v, resolver));
@@ -571,6 +585,22 @@ async function createPayloadOnlyPage(state, payload, encode, resolver) {
 		return React.createElement(React.Fragment, { key: `c${id}` }, createTreeScript(CHUNK_SCRIPT_TYPE, String(id), chunk.json, chunk.values));
 	}));
 }
+/** The name of a tree part: its number, after the tree's scope. */
+function scopedName(scope, id) {
+	return scope ? `${scope}:${id}` : String(id);
+}
+function hasChildrenOutlet(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Array.isArray(value)) return value.some(hasChildrenOutlet);
+	if (value.$ === "L") return value.n === "children";
+	return Object.values(value).some(hasChildrenOutlet);
+}
+/** What renders at a layout's outlet: its content, after the layout's payload at `children`. */
+function outletContent(outlets, name, script) {
+	const content = outlets?.[name] ?? null;
+	if (name !== "children" || !script) return content;
+	return React.createElement(React.Fragment, null, script, content);
+}
 /**
 * Resolves a server page and returns what renders in its place: the resolved tree and its
 * payload. Errors from the page's own code (a framework's redirect or not-found) propagate
@@ -588,6 +618,7 @@ async function renderServerTree(element, options = {}) {
 		chunks: /* @__PURE__ */ new Map(),
 		actions: /* @__PURE__ */ new Map()
 	};
+	const scope = options.scope;
 	const tree = await resolveValue(state, element, { parserSensitive: false }, /* @__PURE__ */ new Set());
 	const held = options.held && options.held.size > 0 ? options.held : null;
 	const encode = (payload) => {
@@ -597,6 +628,7 @@ async function renderServerTree(element, options = {}) {
 			values: addressed.values.map((value) => [value.key, hook.escape(value.json)])
 		};
 	};
+	let layoutScript = null;
 	const resolver = {
 		component(reference, exportName) {
 			const Component = state.components.get(`${reference}#${exportName}`);
@@ -610,7 +642,7 @@ async function renderServerTree(element, options = {}) {
 				status: "pending",
 				promise: entry.encoded.then((encoded) => {
 					const payload = encode({ t: encoded });
-					chunk.value = React.createElement(React.Fragment, null, createTreeValue(encoded, resolver), createTreeScript(CHUNK_SCRIPT_TYPE, String(id), payload.json, payload.values));
+					chunk.value = React.createElement(React.Fragment, null, createTreeValue(encoded, resolver), createTreeScript(CHUNK_SCRIPT_TYPE, scopedName(scope, id), payload.json, payload.values));
 					chunk.status = "fulfilled";
 					return chunk.value;
 				}, (error) => {
@@ -626,10 +658,13 @@ async function renderServerTree(element, options = {}) {
 		serverHtml(id, key) {
 			return React.createElement(SERVER_HTML_TAG, {
 				...key === null ? {} : { key },
-				[SERVER_HTML_ATTRIBUTE]: String(id),
+				[SERVER_HTML_ATTRIBUTE]: scopedName(scope, id),
 				style: { display: "contents" }
 			}, isolate(state.serverHtml.get(id)));
 		},
+		outlet(name) {
+			return outletContent(options.outlets, name, layoutScript);
+		},
 		action(id) {
 			return state.actions.get(id);
 		}
@@ -638,6 +673,16 @@ async function renderServerTree(element, options = {}) {
 		v: 1,
 		t: tree
 	});
+	if (options.outlets) {
+		const script = createTreeScript(TREE_SCRIPT_TYPE, scope ?? "", payload.json, payload.values);
+		const atOutlet = hasChildrenOutlet(tree);
+		if (atOutlet) layoutScript = script;
+		const layout = createTreeValue(tree, resolver);
+		const content = atOutlet ? layout : React.createElement(React.Fragment, null, layout, script);
+		return React.createElement(function ServerTreeLayout() {
+			return content;
+		});
+	}
 	const page = options.payloadOnly && await createPayloadOnlyPage(state, payload, encode, resolver) || createTreePage(tree, payload.json, resolver, void 0, payload.values);
 	return React.createElement(function ServerTreePage() {
 		return page;
@@ -673,14 +718,10 @@ function exportOf(module, src, exportName) {
 	if (typeof Component !== "function" && (typeof Component !== "object" || Component === null)) throw new Error(`${src} has no export ${exportName}`);
 	return Component;
 }
-/**
-* Rebuilds a server-tree page in the browser from its server HTML (an element, or the HTML of a
-* navigation), after loading its client modules. Returns null for a page without a tree.
-*/
-async function createServerTreeElement(source, options) {
+/** Reads a tree's payload, chunks and server HTML from `root` and loads its client modules. */
+async function prepareTree(root, scope, options) {
 	const values = options.values ?? getValueStore();
-	const root = typeof source === "string" ? parseHtml(source) : source;
-	const script = root.querySelector(`script[type="${TREE_SCRIPT_TYPE}"]`);
+	const script = Array.from(root.querySelectorAll(`script[type="${TREE_SCRIPT_TYPE}"]`)).find((candidate) => (candidate.getAttribute("name") ?? void 0) === scope);
 	if (!script) return null;
 	const json = script.textContent ?? "";
 	let ingested = false;
@@ -696,10 +737,19 @@ async function createServerTreeElement(source, options) {
 	const payload = parsePayload(json);
 	if (payload.v !== 1) throw new Error("unsupported server tree payload version");
 	const scripts = readTreeValueScripts(script);
+	const partId = (name) => {
+		if (name === null) return null;
+		const prefix = scope === void 0 ? "" : `${scope}:`;
+		if (!name.startsWith(prefix)) return null;
+		const id = name.slice(prefix.length);
+		return /^\d+$/.test(id) ? Number(id) : null;
+	};
 	const chunks = /* @__PURE__ */ new Map();
 	for (const chunkScript of root.querySelectorAll(`script[type="${CHUNK_SCRIPT_TYPE}"]`)) {
+		const id = partId(chunkScript.getAttribute("name"));
+		if (id === null) continue;
 		const chunkJson = chunkScript.textContent ?? "";
-		chunks.set(Number(chunkScript.getAttribute("name")), {
+		chunks.set(id, {
 			tree: parsePayload(chunkJson).t,
 			json: chunkJson,
 			values: readTreeValueScripts(chunkScript)
@@ -715,52 +765,84 @@ async function createServerTreeElement(source, options) {
 		components.set(key, exportOf(await options.load(src), src, key.slice(separator + 1)));
 	}));
 	const serverHtml = /* @__PURE__ */ new Map();
-	for (const container of root.querySelectorAll(`${SERVER_HTML_TAG}[${SERVER_HTML_ATTRIBUTE}]`)) serverHtml.set(Number(container.getAttribute(SERVER_HTML_ATTRIBUTE)), container.innerHTML);
-	const resolver = {
-		component(reference, exportName) {
-			const Component = components.get(`${reference}#${exportName}`);
-			if (!Component) throw new Error(`client reference ${reference}#${exportName} was not loaded`);
-			return Component;
-		},
-		chunk(id) {
-			const chunk = chunks.get(id);
-			if (!chunk) throw new Error(`server tree chunk ${id} was not found`);
-			const value = React.createElement(React.Fragment, null, createTreeValue(chunk.tree, resolver), createTreeScript(CHUNK_SCRIPT_TYPE, String(id), chunk.json, chunk.values));
-			return {
-				status: "fulfilled",
-				value,
-				promise: Promise.resolve(value)
-			};
-		},
-		serverHtml(id, key) {
-			const html = serverHtml.get(id);
-			if (html === void 0) throw new Error(`server HTML ${id} was not found`);
-			return React.createElement(options.ServerHtml, {
-				...key === null ? {} : { key },
-				as: SERVER_HTML_TAG,
-				[SERVER_HTML_ATTRIBUTE]: String(id),
-				style: { display: "contents" },
-				suppressHydrationWarning: true,
-				dangerouslySetInnerHTML: { __html: html }
-			});
-		},
-		action(id, sealed) {
-			return createServerReference(id, sealed);
-		}
+	for (const container of root.querySelectorAll(`${SERVER_HTML_TAG}[${SERVER_HTML_ATTRIBUTE}]`)) {
+		const id = partId(container.getAttribute(SERVER_HTML_ATTRIBUTE));
+		if (id !== null) serverHtml.set(id, container.innerHTML);
+	}
+	const resolver = (outlets, outletScript) => {
+		const treeResolver = {
+			component(reference, exportName) {
+				const Component = components.get(`${reference}#${exportName}`);
+				if (!Component) throw new Error(`client reference ${reference}#${exportName} was not loaded`);
+				return Component;
+			},
+			chunk(id) {
+				const chunk = chunks.get(id);
+				if (!chunk) throw new Error(`server tree chunk ${id} was not found`);
+				const value = React.createElement(React.Fragment, null, createTreeValue(chunk.tree, treeResolver), createTreeScript(CHUNK_SCRIPT_TYPE, scopedName(scope, id), chunk.json, chunk.values));
+				return {
+					status: "fulfilled",
+					value,
+					promise: Promise.resolve(value)
+				};
+			},
+			serverHtml(id, key) {
+				const html = serverHtml.get(id);
+				if (html === void 0) throw new Error(`server HTML ${id} was not found`);
+				return React.createElement(options.ServerHtml, {
+					...key === null ? {} : { key },
+					as: SERVER_HTML_TAG,
+					[SERVER_HTML_ATTRIBUTE]: scopedName(scope, id),
+					style: { display: "contents" },
+					suppressHydrationWarning: true,
+					dangerouslySetInnerHTML: { __html: html }
+				});
+			},
+			outlet(name) {
+				return outletContent(outlets, name, outletScript);
+			},
+			action(id, sealed) {
+				return createServerReference(id, sealed);
+			}
+		};
+		return treeResolver;
 	};
-	const build = () => createTreePage(payload.t, json, resolver, void 0, scripts);
+	return {
+		payload: payload.t,
+		json,
+		values: scripts,
+		components,
+		resolver,
+		hasOutlet: hasChildrenOutlet(payload.t)
+	};
+}
+/** Points a tree's loaded components at a hot-updated module; true when the tree renders it. */
+function updateTreeComponents(components, src, module) {
+	let changed = false;
+	for (const key of components.keys()) {
+		const separator = key.lastIndexOf("#");
+		if (key.slice(0, separator) !== src) continue;
+		components.set(key, exportOf(module, src, key.slice(separator + 1)));
+		changed = true;
+	}
+	return changed;
+}
+/**
+* Rebuilds a server-tree page in the browser from its server HTML (an element, or the HTML of a
+* navigation), after loading its client modules. Returns null for a page without a tree.
+*/
+async function createServerTreeElement(source, options) {
+	const prepared = await prepareTree(typeof source === "string" ? parseHtml(source) : source, void 0, options);
+	if (!prepared) return null;
+	const tree = prepared;
+	const resolver = tree.resolver();
+	const build = () => createTreePage(tree.payload, tree.json, resolver, void 0, tree.values);
 	build();
 	function ServerTreePage() {
 		const [, setVersion] = React.useState(0);
 		React.useEffect(() => {
 			const listener = (src, module) => {
-				let changed = false;
-				for (const key of components.keys()) {
-					const separator = key.lastIndexOf("#");
-					if (key.slice(0, separator) !== src) continue;
-					components.set(key, exportOf(module, src, key.slice(separator + 1)));
-					changed = true;
-				}
+				const changed = updateTreeComponents(tree.components, src, module);
 				if (changed) setVersion((version) => version + 1);
 				return changed;
 			};
@@ -774,4 +856,35 @@ async function createServerTreeElement(source, options) {
 	}
 	return React.createElement(ServerTreePage, options.key === void 0 ? null : { key: options.key });
 }
-export { IslandsProvider as a, getContexts as c, setIslandServerHook as d, setRenderStateResolver as f, updateServerTrees as i, isolateIslands as l, createServerTreeElement as n, createIsland as o, withinClientRoot as p, renderServerTree as r, getClientReference as s, PAYLOAD_ONLY_ATTRIBUTE as t, runtimeTagged as u };
+/**
+* Rebuilds a layout the server rendered with `renderServerTree(..., { outlets, scope })`, from
+* its server HTML or a navigation's HTML. The layout's own module never reaches the browser: its
+* client components load from the tree, and `render(outlets)` places the page at its outlet.
+* Rendering it with the same component types at the same place keeps its client state across
+* navigations. Returns null when `source` has no tree for `scope`.
+*/
+async function createServerTreeLayout(source, scope, options) {
+	const tree = await prepareTree(typeof source === "string" ? parseHtml(source) : source, scope, options);
+	if (!tree) return null;
+	const script = createTreeScript(TREE_SCRIPT_TYPE, scope, tree.json, tree.values);
+	const render = (outlets) => {
+		const resolver = tree.resolver(outlets, tree.hasOutlet ? script : void 0);
+		const layout = createTreeValue(tree.payload, resolver);
+		return tree.hasOutlet ? layout : React.createElement(React.Fragment, null, layout, script);
+	};
+	render({});
+	const listener = (src, module) => {
+		const changed = updateTreeComponents(tree.components, src, module);
+		if (changed) options.onUpdate?.();
+		return changed;
+	};
+	const listeners = treeListeners();
+	listeners.add(listener);
+	return {
+		render,
+		dispose: () => {
+			listeners.delete(listener);
+		}
+	};
+}
+export { renderServerTree as a, createIsland as c, isolateIslands as d, runtimeTagged as f, withinClientRoot as h, createServerTreeLayout as i, getClientReference as l, setRenderStateResolver as m, PAYLOAD_ONLY_ATTRIBUTE as n, updateServerTrees as o, setIslandServerHook as p, createServerTreeElement as r, IslandsProvider as s, Outlet as t, getContexts as u };

package/dist/react/client.d.mts

@@ -1,7 +1,7 @@
 import { a as scheduleHydration, i as isIslandStrategy, n as IslandStrategy, r as ScheduleOptions, t as ISLAND_STRATEGIES } from "../_chunks/schedule-Dw14dW0H.mjs";
 import { m as HYDRATED_ATTRIBUTE } from "../_chunks/wire-C3Rpbwl6.mjs";
 import { t as ValueStore } from "../_chunks/value-store-Dm-7xJ6W.mjs";
-import { f as isolateIslands, i as createServerTreeElement, m as withinClientRoot, n as ServerTreeElementOptions, o as updateServerTrees, t as PAYLOAD_ONLY_ATTRIBUTE } from "../_chunks/tree-fID6sz25.mjs";
+import { a as ServerTreeLayoutOptions, c as createServerTreeLayout, g as isolateIslands, i as ServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, r as ServerTreeElementOptions, s as createServerTreeElement, u as updateServerTrees, v as withinClientRoot } from "../_chunks/tree-B4RMU2UX.mjs";
 import * as React from "react";
 
 // src/react/hydrate.d.ts
@@ -46,4 +46,4 @@ declare function createServerHtml(runtime: Pick<HydrationRuntime, "hydrate" | "d
 declare function refreshDocument(runtime: HydrationRuntime): Promise<void>;
 /** Puts another page's body in place of this one's, and hydrates its islands. */
 declare function swapDocument(runtime: HydrationRuntime, next: Document): Promise<void>;
-export { HYDRATED_ATTRIBUTE, type HydrationOptions, type HydrationRuntime, ISLAND_STRATEGIES, type IslandStrategy, PAYLOAD_ONLY_ATTRIBUTE, type ScheduleOptions, type ServerTreeElementOptions, createHydrationRuntime, createServerHtml, createServerTreeElement, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };
+export { HYDRATED_ATTRIBUTE, type HydrationOptions, type HydrationRuntime, ISLAND_STRATEGIES, type IslandStrategy, PAYLOAD_ONLY_ATTRIBUTE, type ScheduleOptions, type ServerTreeElementOptions, type ServerTreeLayout, type ServerTreeLayoutOptions, createHydrationRuntime, createServerHtml, createServerTreeElement, createServerTreeLayout, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };

package/dist/react/client.mjs

@@ -1,7 +1,7 @@
 import { a as emit, l as getValueStore, t as createServerReference, u as valueHeaders } from "../_chunks/actions-2sTj0A2T.mjs";
 import { i as decodeTagged, n as NOT_A_VALUE, r as decode, u as setOwn } from "../_chunks/codec-DqfVYKsx.mjs";
 import { N as getTag, S as SLOT_ELEMENT, f as FORM_STATE_SCRIPT_TYPE, h as ISLAND_ELEMENT, m as HYDRATED_ATTRIBUTE, y as PROPS_SCRIPT_TYPE } from "../_chunks/wire-CXOodE06.mjs";
-import { c as getContexts, i as updateServerTrees, l as isolateIslands, n as createServerTreeElement, p as withinClientRoot, t as PAYLOAD_ONLY_ATTRIBUTE } from "../_chunks/tree-BDB5VEao.mjs";
+import { d as isolateIslands, h as withinClientRoot, i as createServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, o as updateServerTrees, r as createServerTreeElement, u as getContexts } from "../_chunks/tree-BvYR6-PF.mjs";
 import { n as isIslandStrategy, r as scheduleHydration, t as ISLAND_STRATEGIES } from "../_chunks/schedule-BFoGKRrU.mjs";
 import * as React from "react";
 import { hydrateRoot } from "react-dom/client";
@@ -453,4 +453,4 @@ async function swapDocument(runtime, next) {
 	document.body.replaceChildren(...Array.from(body.childNodes));
 	await runtime.hydrate(document);
 }
-export { HYDRATED_ATTRIBUTE, ISLAND_STRATEGIES, PAYLOAD_ONLY_ATTRIBUTE, createHydrationRuntime, createServerHtml, createServerTreeElement, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };
+export { HYDRATED_ATTRIBUTE, ISLAND_STRATEGIES, PAYLOAD_ONLY_ATTRIBUTE, createHydrationRuntime, createServerHtml, createServerTreeElement, createServerTreeLayout, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };

package/dist/react/server.d.mts

@@ -1,5 +1,5 @@
 import { r as ReactFormState } from "../_chunks/handle-C0N9ZyNV.mjs";
-import { a as renderServerTree, c as IslandRenderState, d as getClientReference, f as isolateIslands, l as IslandsProvider, m as withinClientRoot, p as setRenderStateResolver, r as ServerTreeRenderOptions, s as ClientReference, t as PAYLOAD_ONLY_ATTRIBUTE, u as createIsland } from "../_chunks/tree-fID6sz25.mjs";
+import { _ as setRenderStateResolver, d as ClientReference, f as IslandRenderState, g as isolateIslands, h as getClientReference, l as renderServerTree, m as createIsland, n as PAYLOAD_ONLY_ATTRIBUTE, o as ServerTreeRenderOptions, p as IslandsProvider, t as Outlet, v as withinClientRoot } from "../_chunks/tree-B4RMU2UX.mjs";
 import * as React from "react";
 import { RenderToReadableStreamOptions } from "react-dom/server";
 
@@ -48,4 +48,4 @@ declare function renderToStream(element: React.ReactNode, {
 }>;
 /** Whether a response rendered for `request` leaves out values its browser holds. */
 declare function isPersonalized(request: Request): boolean;
-export { type ClientReference, type IslandRenderState, IslandsProvider, PAYLOAD_ONLY_ATTRIBUTE, RenderToStreamOptions, type ServerTreeRenderOptions, createIsland, getClientReference, isPersonalized, isolateIslands, renderServerTree, renderToStream, setRenderStateResolver, withinClientRoot };
+export { type ClientReference, type IslandRenderState, IslandsProvider, Outlet, PAYLOAD_ONLY_ATTRIBUTE, RenderToStreamOptions, type ServerTreeRenderOptions, createIsland, getClientReference, isPersonalized, isolateIslands, renderServerTree, renderToStream, setRenderStateResolver, withinClientRoot };

package/dist/react/server.mjs

@@ -3,7 +3,7 @@ import { f as FORM_STATE_SCRIPT_TYPE } from "../_chunks/wire-CXOodE06.mjs";
 import { r as PREHYDRATION_SCRIPT } from "../_chunks/prehydration-B1GLTLdk.mjs";
 import { g as escapeScriptJson, h as addressValues, i as encodeActionReference, v as parseHeldValues, y as selectValuesToSend } from "../_chunks/actions-B8dJ8f7L.mjs";
 import { t as getBuildDefaults } from "../_chunks/build-COIcs7wm.mjs";
-import { a as IslandsProvider, c as getContexts, d as setIslandServerHook, f as setRenderStateResolver, l as isolateIslands, o as createIsland, p as withinClientRoot, r as renderServerTree, s as getClientReference, t as PAYLOAD_ONLY_ATTRIBUTE, u as runtimeTagged } from "../_chunks/tree-BDB5VEao.mjs";
+import { a as renderServerTree, c as createIsland, d as isolateIslands, f as runtimeTagged, h as withinClientRoot, l as getClientReference, m as setRenderStateResolver, n as PAYLOAD_ONLY_ATTRIBUTE, p as setIslandServerHook, s as IslandsProvider, t as Outlet, u as getContexts } from "../_chunks/tree-BvYR6-PF.mjs";
 import * as React from "react";
 // src/react/server.ts
 /**
@@ -81,4 +81,4 @@ async function renderToStream(element, { request, formState, bootstrap = true, p
 function isPersonalized(request) {
 	return parseHeldValues(request).size > 0;
 }
-export { IslandsProvider, PAYLOAD_ONLY_ATTRIBUTE, createIsland, getClientReference, isPersonalized, isolateIslands, renderServerTree, renderToStream, setRenderStateResolver, withinClientRoot };
+export { IslandsProvider, Outlet, PAYLOAD_ONLY_ATTRIBUTE, createIsland, getClientReference, isPersonalized, isolateIslands, renderServerTree, renderToStream, setRenderStateResolver, withinClientRoot };

package/dist/react.d.mts

@@ -1,3 +1,3 @@
-import { a as renderServerTree, c as IslandRenderState, f as isolateIslands, l as IslandsProvider, m as withinClientRoot, r as ServerTreeRenderOptions, u as createIsland } from "./_chunks/tree-fID6sz25.mjs";
+import { f as IslandRenderState, g as isolateIslands, l as renderServerTree, m as createIsland, o as ServerTreeRenderOptions, p as IslandsProvider, t as Outlet, v as withinClientRoot } from "./_chunks/tree-B4RMU2UX.mjs";
 import { n as IslandStrategy } from "./_chunks/schedule-Dw14dW0H.mjs";
-export { type IslandRenderState, type IslandStrategy, IslandsProvider, type ServerTreeRenderOptions, createIsland, isolateIslands, renderServerTree, withinClientRoot };
+export { type IslandRenderState, type IslandStrategy, IslandsProvider, Outlet, type ServerTreeRenderOptions, createIsland, isolateIslands, renderServerTree, withinClientRoot };

package/dist/react.mjs

@@ -1 +1 @@
-export { a as IslandsProvider, o as createIsland, l as isolateIslands, r as renderServerTree, p as withinClientRoot } from "./_chunks/tree-BDB5VEao.mjs";
+export { s as IslandsProvider, t as Outlet, c as createIsland, d as isolateIslands, a as renderServerTree, h as withinClientRoot } from "./_chunks/tree-BvYR6-PF.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farm.js/islx",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A renderer-agnostic wire format for server-rendered islands: typed props, values sent once, server actions, and partial navigations.",
   "keywords": [
     "islands",