@farm.js/islx 0.0.8 → 0.0.9

package/dist/_chunks/{tree-BQphP23Y.mjs → island-viWIOM1k.mjs}

@@ -1,8 +1,75 @@
-import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-C8to-RQW.mjs";
-import { M as VALUE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, k as TREE_SCRIPT_TYPE, p as HTML_ELEMENT } from "./wire-QEQWBr5s.mjs";
-import { t as createServerReference, u as getValueStore } from "./actions-C-IwUCKU.mjs";
-import { a as getIslandServerHook, o as isolateIslands, r as getClientReference } from "./island-DXAGP4FN.mjs";
+import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
+import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-DDpUvgRo.mjs";
+import { D as SLOT_TEMPLATE_ELEMENT, F as VALUE_SCRIPT_TYPE, M as TREE_SCRIPT_TYPE, S as PROPS_SCRIPT_TYPE, T as SLOT_ELEMENT, b as PROMISE_SCRIPT_TYPE, c as CHUNK_SCRIPT_TYPE, g as ISLAND_ELEMENT, p as HTML_ELEMENT } from "./wire-UUwZlUJZ.mjs";
+import { t as createServerReference, u as getValueStore } from "./actions-DAzd4PpV.mjs";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
+// src/react/ids.ts
+/**
+* `useId` in islands. React derives an id from the component's position in its root: every array
+* of children on the way pushes a fork, `(slot << length) | bits`. The server renders a page as one
+* root and the browser hydrates each island as a root of its own, so without help an island's ids
+* start again in the browser, differ from its HTML, and repeat across islands.
+*
+* The server renders `[<IdProbe/>, <Component/>]` inside the island. The probe's id is the island's
+* position with one more fork, slot 1 of 2: `(1 << length) | bits`, so its highest bit gives the
+* position's length and the rest its bits. The browser rebuilds the same position with nested
+* arrays (`null` in the slots before) and renders `[null, <Component/>]` there: React then computes
+* the ids the server did, with the server's identifier prefix.
+*/
+/** Renders nothing; records the id React gives its position. */
+function IdProbe({ record }) {
+	record.id = React.useId();
+	return null;
+}
+const MAX_BITS = 30;
+const MAX_FORK_WIDTH = 11;
+/** The island's position, from the probe's id (`_<prefix>R_<tree id>_`), or null to skip. */
+function parseIdPosition(id) {
+	const match = id ? /^_(.*)R_([0-9a-v]+)_$/.exec(id) : null;
+	if (!match) return null;
+	const probe = Number.parseInt(match[2], 32);
+	if (!Number.isSafeInteger(probe) || probe < 1) return null;
+	let length = 0;
+	while (2 ** (length + 1) <= probe) length++;
+	if (length + 2 > MAX_BITS) return null;
+	return {
+		prefix: match[1],
+		bits: probe - 2 ** length,
+		length
+	};
+}
+/**
+* `content` at `position`, as the second of two children, where the server rendered the island's
+* component. Null when the position cannot be rebuilt.
+*/
+function atIdPosition(position, content) {
+	const { bits, length } = position;
+	const forks = [];
+	let start = 0;
+	for (let bit = 0; bit < length; bit++) if (Math.floor(bits / 2 ** bit) % 2 === 1) {
+		forks.push({
+			start,
+			width: bit - start + 1
+		});
+		start = bit + 1;
+	}
+	if (start < length) {
+		const last = forks.at(-1);
+		if (!last) return null;
+		last.width += length - start;
+	}
+	let node = React.createElement(React.Fragment, { key: "island" }, [null, React.createElement(React.Fragment, { key: "component" }, content)]);
+	for (let index = forks.length - 1; index >= 0; index--) {
+		const { start: from, width } = forks[index];
+		if (width > MAX_FORK_WIDTH) return null;
+		const slot = Math.floor(bits / 2 ** from) % 2 ** width;
+		const children = Array.from({ length: 2 ** (width - 1) }, () => null);
+		children[slot - 1] = node;
+		node = React.createElement(React.Fragment, { key: `fork${index}` }, children);
+	}
+	return node;
+}
 // src/react/tree.ts
 /**
 * Server trees: a page as a serialized React tree, the role React Server Components' Flight
@@ -100,7 +167,7 @@ function callServerComponent(render, props, forwardRef) {
 		slot?.set(previous);
 	}
 }
-function isThenable(value) {
+function isThenable$1(value) {
 	return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
 }
 function serverHtmlNode(state, node, key, context) {
@@ -146,7 +213,7 @@ async function resolveValue(state, value, context, seen) {
 	}
 	if (typeof value !== "object") throw new UnsupportedNode(`passes a ${typeof value} value`);
 	if (React.isValidElement(value)) return resolveElement(state, value, context);
-	if (isThenable(value)) try {
+	if (isThenable$1(value)) try {
 		return {
 			$: "P",
 			v: await resolveValue(state, await value, context, seen)
@@ -261,7 +328,7 @@ async function resolveElement(state, element, context) {
 		if (typeof type !== "function") throw new UnsupportedNode("is not a function component");
 		if (type.prototype?.isReactComponent) throw new UnsupportedNode("is a class component");
 		let rendered = callServerComponent(type, props, forwardRef);
-		if (isThenable(rendered)) rendered = await rendered;
+		if (isThenable$1(rendered)) rendered = await rendered;
 		const resolved = await resolveValue(state, rendered, context, /* @__PURE__ */ new Set());
 		return key === null ? resolved : {
 			$: "f",
@@ -687,4 +754,430 @@ async function createServerTreeLayout(source, scope, options) {
 		}
 	};
 }
-export { renderServerTree as a, createServerTreeLayout as i, PAYLOAD_ONLY_ATTRIBUTE as n, updateServerTrees as o, createServerTreeElement as r, Outlet as t };
+/** Whether a resolved tree needs the browser to rebuild it: it holds anything but plain HTML. */
+function needsRebuild(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Array.isArray(value)) return value.some(needsRebuild);
+	if (value.$ === "c" || value.$ === "p" || value.$ === "x" || value.$ === "a") return true;
+	return Object.values(value).some(needsRebuild);
+}
+/**
+* @internal Resolves server output passed to an island. Plain HTML renders as it is, and the
+* browser keeps it. Output holding client components (or Suspense, actions, server HTML parts)
+* renders with its payload, scoped to the slot's name, so the browser rebuilds it inside the
+* island's root: its client components are then the island's descendants and read its context,
+* as in React Server Components.
+*/
+async function renderSlotTree(element, scope, held) {
+	const hook = getIslandServerHook();
+	if (!hook) throw new Error("islx: an island rendered without @farm.js/islx/react/server");
+	const state = {
+		nextId: 0,
+		components: /* @__PURE__ */ new Map(),
+		serverHtml: /* @__PURE__ */ new Map(),
+		chunks: /* @__PURE__ */ new Map(),
+		actions: /* @__PURE__ */ new Map()
+	};
+	const tree = await resolveValue(state, element, { parserSensitive: false }, /* @__PURE__ */ new Set());
+	const encode = (payload) => {
+		const addressed = hook.address(payload, held);
+		return {
+			json: hook.escape(addressed.json),
+			values: addressed.values.map((value) => [value.key, hook.escape(value.json)])
+		};
+	};
+	const resolver = {
+		component(reference, exportName) {
+			const Component = state.components.get(`${reference}#${exportName}`);
+			if (!Component) throw new Error(`client reference ${reference}#${exportName} was not resolved`);
+			return Component;
+		},
+		chunk(id) {
+			const entry = state.chunks.get(id);
+			if (entry.chunk) return entry.chunk;
+			const chunk = {
+				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, scopedName(scope, id), payload.json, payload.values));
+					chunk.status = "fulfilled";
+					return chunk.value;
+				}, (error) => {
+					chunk.status = "rejected";
+					chunk.reason = error;
+					throw error;
+				})
+			};
+			chunk.promise.catch(() => {});
+			entry.chunk = chunk;
+			return chunk;
+		},
+		serverHtml(id, key) {
+			return React.createElement(SERVER_HTML_TAG, {
+				...key === null ? {} : { key },
+				[SERVER_HTML_ATTRIBUTE]: scopedName(scope, id),
+				style: { display: "contents" }
+			}, isolateIslands(state.serverHtml.get(id)));
+		},
+		outlet() {
+			return null;
+		},
+		action(id) {
+			return state.actions.get(id);
+		}
+	};
+	const rendered = createTreeValue(tree, resolver);
+	if (!needsRebuild(tree)) return {
+		element: React.createElement(React.Fragment, null, rendered),
+		rebuild: false
+	};
+	const payload = encode({
+		v: 1,
+		t: tree
+	});
+	return {
+		element: React.createElement(React.Fragment, null, rendered, createTreeScript(TREE_SCRIPT_TYPE, scope, payload.json, payload.values)),
+		rebuild: true
+	};
+}
+/**
+* @internal Rebuilds a slot the server rendered with `renderSlotTree`, from `root` (the slot's
+* element, or the template holding it) after loading its client modules. Null when the slot has no
+* payload there.
+*/
+async function createSlotTree(root, scope, options) {
+	const tree = await prepareTree(root, scope, options);
+	if (!tree) return null;
+	const resolver = tree.resolver();
+	const script = createTreeScript(TREE_SCRIPT_TYPE, scope, tree.json, tree.values);
+	const build = () => React.createElement(React.Fragment, null, createTreeValue(tree.payload, resolver), script);
+	build();
+	return build();
+}
+// src/react/island.ts
+/**
+* A client component, as the server renders it: its HTML inside `<f-island>`, and its props in
+* a script after it. Shared by the server and the browser: inside a hydrating island, a nested
+* client component is part of that island's React tree, not an island of its own.
+*
+* The compiler wraps every export of a `"use client"` module with `createIsland` in the server
+* build. The browser build keeps the module as it is.
+*/
+const CLIENT_REFERENCE = Symbol.for("islx.react.client-reference");
+/** The module export an island component renders, or undefined for any other type. */
+function getClientReference(type) {
+	if (!type || typeof type !== "function" && typeof type !== "object") return void 0;
+	return type[CLIENT_REFERENCE];
+}
+/**
+* Makes `element`'s client components part of the React root around it (a layout that hydrates
+* as one root), instead of islands of their own.
+*/
+function withinClientRoot(element) {
+	return React.createElement(getContexts().graph.Provider, { value: true }, element);
+}
+/**
+* Starts islands again below a `withinClientRoot`: the page a hydrating layout keeps as server
+* HTML renders its client components as islands of their own.
+*/
+function isolateIslands(element) {
+	return React.createElement(getContexts().graph.Provider, { value: false }, element);
+}
+const RENDER_STATE_RESOLVER = Symbol.for("islx.react.render-state");
+/**
+* For a framework that knows the request being rendered without React context (a request store):
+* returns the render's settings when no `IslandsProvider` or `renderToStream` gave them. Keep the
+* same `sent` set for the whole response.
+*/
+function setRenderStateResolver(resolve) {
+	globalThis[RENDER_STATE_RESOLVER] = resolve;
+}
+function resolveRenderState() {
+	const resolve = globalThis[RENDER_STATE_RESOLVER];
+	return resolve ? resolve() : null;
+}
+/**
+* Gives islands a render's settings when the framework renders the page itself (not through
+* `renderToStream`): which values the browser holds, and which this render already wrote.
+*/
+function IslandsProvider({ held = null, children }) {
+	const state = React.useMemo(() => ({
+		held: held && held.size > 0 ? held : null,
+		sent: /* @__PURE__ */ new Set()
+	}), [held]);
+	return React.createElement(getContexts().render.Provider, { value: state }, children);
+}
+const SERVER_HOOK = Symbol.for("islx.react.server");
+/** @internal */
+function getIslandServerHook() {
+	return globalThis[SERVER_HOOK];
+}
+/** @internal */
+function setIslandServerHook(hook) {
+	globalThis[SERVER_HOOK] = hook;
+}
+/** Tagged objects the runtime made (slots), as opposed to app data with a "$" key. */
+const runtimeTagged = /* @__PURE__ */ new WeakSet();
+const CONTEXTS = Symbol.for("islx.react.contexts");
+/** @internal */
+function getContexts() {
+	const scope = globalThis;
+	const all = scope[CONTEXTS] ??= /* @__PURE__ */ new WeakMap();
+	let contexts = all.get(React.createElement);
+	if (!contexts) {
+		contexts = {
+			graph: React.createContext(false),
+			render: React.createContext(null),
+			container: React.createContext(null)
+		};
+		all.set(React.createElement, contexts);
+	}
+	return contexts;
+}
+function isElement(value) {
+	const type = value?.$$typeof;
+	return type === Symbol.for("react.transitional.element") || type === Symbol.for("react.element");
+}
+const slotStyle = { display: "contents" };
+const resolvedSlots = /* @__PURE__ */ new WeakMap();
+function resolveSlots(props, elements, held) {
+	let resolved = resolvedSlots.get(props);
+	if (!resolved) {
+		resolved = Promise.all(Array.from(elements, async ([name, element]) => [name, await renderSlotTree(element, name, held)])).then((entries) => new Map(entries));
+		resolvedSlots.set(props, resolved);
+	}
+	return resolved;
+}
+/** Server output in an island, where the island placed it. */
+function Slot({ name, slots }) {
+	slots.placed.add(name);
+	return React.createElement(SLOT_ELEMENT, {
+		name,
+		style: slotStyle
+	}, slots.trees.get(name)?.element);
+}
+/**
+* Splits props into what renders on the server and what travels: server output passed to an
+* island (`children`, or any element prop) renders once inside `<f-slot>`, and travels as a
+* reference to it, so the browser reads its HTML from the page instead of receiving it twice.
+*/
+function splitSlots(value, prefix, slots) {
+	if (isElement(value)) {
+		const name = `${prefix}${slots.next++}`;
+		const reference = {
+			["$"]: "s",
+			["v"]: name
+		};
+		runtimeTagged.add(reference);
+		slots.elements.set(name, value);
+		slots.references.set(name, reference);
+		return {
+			render: React.createElement(Slot, {
+				key: value.key ?? name,
+				name,
+				slots
+			}),
+			wire: reference
+		};
+	}
+	if (Array.isArray(value)) {
+		const parts = value.map((entry) => splitSlots(entry, prefix, slots));
+		return {
+			render: parts.map((part) => part.render),
+			wire: parts.map((part) => part.wire)
+		};
+	}
+	if (value && typeof value === "object") {
+		const prototype = Object.getPrototypeOf(value);
+		if (prototype !== Object.prototype && prototype !== null) return {
+			render: value,
+			wire: value
+		};
+		const render = {};
+		const wire = {};
+		for (const [key, entry] of Object.entries(value)) {
+			const part = splitSlots(entry, prefix, slots);
+			render[key] = part.render;
+			wire[key] = part.wire;
+		}
+		return {
+			render,
+			wire
+		};
+	}
+	return {
+		render: value,
+		wire: value
+	};
+}
+const warned = /* @__PURE__ */ new Set();
+const outcomes = /* @__PURE__ */ new WeakMap();
+function settle(promise) {
+	let outcome = outcomes.get(promise);
+	if (!outcome) {
+		outcome = Promise.resolve(promise).then((value) => ({
+			ok: true,
+			value
+		}), (reason) => ({
+			ok: false,
+			reason
+		}));
+		outcomes.set(promise, outcome);
+	}
+	return outcome;
+}
+const REJECTED = "{\"e\":1}";
+/** Each promise an island received, in a boundary of its own: its outcome once it settles. */
+function promiseBoundaries(promises, label) {
+	return promises.map(({ name, promise }) => React.createElement(React.Suspense, {
+		key: name,
+		fallback: null
+	}, React.createElement(IslandPromise, {
+		name,
+		promise,
+		label
+	})));
+}
+/**
+* A promise's outcome, written when it settles. Its values are sent whether or not the page wrote
+* them already: this script may land before an earlier island's, wherever React puts it.
+*/
+function IslandPromise({ name, promise, label }) {
+	const outcome = React.use(settle(promise));
+	const state = React.useContext(getContexts().render) ?? resolveRenderState();
+	const hook = getIslandServerHook();
+	let encoded = {
+		json: REJECTED,
+		values: [],
+		promises: []
+	};
+	if (outcome.ok) try {
+		encoded = hook.encode({ v: outcome.value }, state?.held ?? null);
+	} catch (error) {
+		console.warn(`[islx] A promise passed to ${label} resolved to a value that cannot be sent to the browser: it rejects there.`, error);
+	}
+	else console.error(`[islx] A promise passed to ${label} rejected.`, outcome.reason);
+	return React.createElement(React.Fragment, null, ...encoded.values.map((value) => React.createElement("script", {
+		key: value.key,
+		type: VALUE_SCRIPT_TYPE,
+		name: value.key,
+		dangerouslySetInnerHTML: { __html: hook.escape(value.json) }
+	})), React.createElement("script", {
+		key: "outcome",
+		type: PROMISE_SCRIPT_TYPE,
+		name,
+		dangerouslySetInnerHTML: { __html: hook.escape(encoded.json) }
+	}), ...promiseBoundaries(encoded.promises, label));
+}
+/**
+* The island's props. It renders after the island, so by then the island's id position (`ids`) is
+* known, and which of its element props it placed. The others (a closed panel, a tab not shown
+* yet) render once in a `<template>` after the props, which the browser reads them from when the
+* island shows them; a slot placed later, by a part of the island that suspended first, renders in
+* both places.
+*/
+function PropsScript({ id, ids, slots, json }) {
+	const script = React.createElement("script", {
+		key: "props",
+		type: PROPS_SCRIPT_TYPE,
+		htmlFor: id,
+		["ids"]: ids.id,
+		dangerouslySetInnerHTML: { __html: json }
+	});
+	const unplaced = [...slots.elements].filter(([name]) => !slots.placed.has(name));
+	if (unplaced.length === 0) return script;
+	return React.createElement(React.Fragment, null, script, React.createElement(SLOT_TEMPLATE_ELEMENT, {
+		key: "slots",
+		htmlFor: id
+	}, unplaced.map(([name]) => React.createElement(SLOT_ELEMENT, {
+		key: name,
+		name,
+		style: slotStyle
+	}, slots.trees.get(name)?.element))));
+}
+function isThenable(value) {
+	return !!value && typeof value.then === "function";
+}
+/**
+* Wraps a client component so the server renders it as an island. `src` is the module the browser
+* imports, `exportName` the component's export there.
+*/
+function createIsland(Component, src, exportName, declared = "load", options = {}) {
+	function Island(props) {
+		const { graph, render } = getContexts();
+		const insideIsland = React.useContext(graph);
+		const state = React.useContext(render) ?? resolveRenderState();
+		if (insideIsland) return React.createElement(Component, props);
+		const id = React.useId();
+		const hook = getIslandServerHook();
+		if (!hook) throw new Error("islx: an island rendered on a server that did not import @farm.js/islx/react/server");
+		let encoded;
+		let strategy = declared;
+		const slots = {
+			next: 0,
+			elements: /* @__PURE__ */ new Map(),
+			references: /* @__PURE__ */ new Map(),
+			placed: /* @__PURE__ */ new Set(),
+			trees: /* @__PURE__ */ new Map()
+		};
+		const { render: renderProps, wire } = splitSlots(props, `${id}s`, slots);
+		if (slots.elements.size > 0) {
+			slots.trees = React.use(resolveSlots(props, slots.elements, state?.held ?? null));
+			for (const [name, reference] of slots.references) if (slots.trees.get(name)?.rebuild) reference["t"] = 1;
+		}
+		try {
+			if (options.inferred && slots.next > 0) strategy = "load";
+			const skip = state ? /* @__PURE__ */ new Set([...state.held ?? [], ...state.sent]) : null;
+			encoded = hook.encode(wire, skip);
+			for (const value of encoded.values) state?.sent.add(value.key);
+		} catch (error) {
+			if (isThenable(error)) throw error;
+			const message = error instanceof Error ? error.message : String(error);
+			const key = `${src}#${exportName}:${message}`;
+			if (!warned.has(key)) {
+				warned.add(key);
+				console.warn(`[islx] ${exportName} (${src}) was rendered without hydration: its props cannot be sent to the browser. ${message}`);
+			}
+			return React.createElement(Component, props);
+		}
+		const ids = {};
+		if (strategy === "load") {
+			const defaults = getBuildDefaults();
+			if (defaults.boot && defaults.entry) ReactDOM.preloadModule?.(defaults.entry, { as: "script" });
+			for (const href of defaults.modules?.[src] ?? []) ReactDOM.preloadModule?.(href, { as: "script" });
+		}
+		return React.createElement(React.Fragment, null, ...encoded.values.map((value) => React.createElement("script", {
+			key: value.key,
+			type: VALUE_SCRIPT_TYPE,
+			name: value.key,
+			dangerouslySetInnerHTML: { __html: hook.escape(value.json) }
+		})), React.createElement(ISLAND_ELEMENT, {
+			key: "island",
+			src,
+			export: exportName,
+			props: id,
+			strategy,
+			style: slotStyle
+		}, React.createElement(graph.Provider, { value: true }, [React.createElement(IdProbe, {
+			key: "ids",
+			record: ids
+		}), React.createElement(Component, {
+			...renderProps,
+			key: "component"
+		})])), React.createElement(PropsScript, {
+			key: "props",
+			id,
+			ids,
+			slots,
+			json: hook.escape(encoded.json)
+		}), ...promiseBoundaries(encoded.promises, `${exportName} (${src})`));
+	}
+	Island.displayName = `Island(${Component.displayName || Component.name || exportName})`;
+	Object.defineProperty(Island, CLIENT_REFERENCE, { value: {
+		src,
+		exportName,
+		Component
+	} });
+	return Island;
+}
+export { atIdPosition as _, isolateIslands as a, setRenderStateResolver as c, PAYLOAD_ONLY_ATTRIBUTE as d, createServerTreeElement as f, updateServerTrees as g, renderServerTree as h, getContexts as i, withinClientRoot as l, createSlotTree as m, createIsland as n, runtimeTagged as o, createServerTreeLayout as p, getClientReference as r, setIslandServerHook as s, IslandsProvider as t, Outlet as u, parseIdPosition as v };

package/dist/_chunks/{schedule-Cwn9vQL0.mjs → schedule-IK9_RwZC.mjs}

@@ -1,5 +1,5 @@
 import { a as hasPendingInteraction, o as takePendingInteractions, t as INTERACTION_EVENT } from "./prehydration-zEYsfFxW.mjs";
-import { m as HYDRATED_ATTRIBUTE } from "./wire-QEQWBr5s.mjs";
+import { m as HYDRATED_ATTRIBUTE } from "./wire-UUwZlUJZ.mjs";
 // src/client/schedule.ts
 /**
 * When an island hydrates. Renderer-neutral: every adapter schedules through this.

package/dist/_chunks/{values-37UIzxM0.mjs → values-gxhIei_m.mjs}

@@ -1,5 +1,5 @@
-import { c as needsObjectTag, o as encodeLeaf } from "./codec-C8to-RQW.mjs";
-import { A as VALUES_HEADER, j as VALUE_KEY_PATTERN } from "./wire-QEQWBr5s.mjs";
+import { c as needsObjectTag, o as encodeLeaf } from "./codec-DDpUvgRo.mjs";
+import { N as VALUES_HEADER, P as VALUE_KEY_PATTERN } from "./wire-UUwZlUJZ.mjs";
 // src/server/values.ts
 /**
 * Values sent once: which parts of an island's props travel as values of their own, keyed by a

package/dist/_chunks/{vite-0bH_ZDys.mjs → vite-CHB6B8tP.mjs}

@@ -1,5 +1,5 @@
-import { a as transformActions, i as hasModuleDirective, n as ActionCompileError, t as inferStrategy } from "./infer-BIVT5aDz.mjs";
-import { t as ISLAND_STRATEGIES } from "./schedule-Cwn9vQL0.mjs";
+import { i as ActionCompileError, n as rewriteFormStatusImports, o as hasModuleDirective, r as inferStrategy, s as transformActions, t as rewriteFormStatusImport } from "./form-status-CRfnB7WT.mjs";
+import { t as ISLAND_STRATEGIES } from "./schedule-IK9_RwZC.mjs";
 import { randomBytes } from "node:crypto";
 import path from "node:path";
 import { walk } from "estree-walker";
@@ -86,6 +86,7 @@ function transformClientModule(options) {
 		return configured ?? strategies.byName.get(name) ?? strategies.all ?? (inference?.strategy === "interaction" ? "interaction" : "load");
 	};
 	const output = new MagicString(code);
+	rewriteFormStatusImport(program, code, output, options.runtime ?? "@farm.js/islx/react");
 	const wrapped = [];
 	for (const node of program.body ?? []) if (node.type === "ExportNamedDeclaration" && !node.source && node.exportKind !== "type") {
 		const declaration = node.declaration;
@@ -460,6 +461,14 @@ function islx(options = {}, host = {}) {
 					}
 				}
 				if (library) return null;
+				if (!server && !code.includes(directives.server) && hasModuleDirective(code, clientDirective) && !excluded(relative)) {
+					const rewritten = rewriteFormStatusImports({
+						code,
+						id: file,
+						parse: parseFile
+					});
+					if (rewritten) return rewritten;
+				}
 				const actions = transformActions({
 					code,
 					id: file,

package/dist/_chunks/{wire-Dipqh-EB.d.mts → wire-1d6wqOia.d.mts}

@@ -12,12 +12,22 @@
 declare const ISLAND_ELEMENT = "f-island";
 /** The script type of an island's props; its `for` attribute names the island. */
 declare const PROPS_SCRIPT_TYPE = "f/props";
+/**
+ * On a props script: the id React gave the island's position on the server, so the browser
+ * hydrates the island where the server rendered it and `useId` matches.
+ */
+declare const ID_POSITION_ATTRIBUTE = "ids";
 /** The script type of a value sent once; its `name` attribute is the value's key. */
 declare const VALUE_SCRIPT_TYPE = "f/value";
 /** Set on an island once it hydrated (and its held interaction was replayed). */
 declare const HYDRATED_ATTRIBUTE = "hydrated";
 /** The element that keeps server output passed to an island as children. */
 declare const SLOT_ELEMENT = "f-slot";
+/**
+ * After an island's props: `<template for>` holding the `<f-slot>`s the island did not place when
+ * the server rendered it, which the browser shows when the island places them.
+ */
+declare const SLOT_TEMPLATE_ELEMENT = "template";
 /** The script type of a page's server tree, rebuilt in the browser without the page's HTML. */
 declare const TREE_SCRIPT_TYPE = "f/tree";
 /** The script type of a server tree chunk that streamed in after the tree. */
@@ -41,6 +51,11 @@ declare const TAG_BOUND = "b";
 declare const REFERENCE_TAG = "r";
 /** `{"$":"s","v":name}`: a slot. */
 declare const SLOT_TAG = "s";
+/**
+ * On a slot reference: `1` when the slot carries a server tree (`<script type="f/tree">` named
+ * after the slot) that the browser rebuilds inside the island, instead of keeping its HTML.
+ */
+declare const SLOT_TREE_FIELD = "t";
 /** `{"$":"a","v":id}` or `{"$":"a","v":id,"b":sealed}`: a server action. */
 declare const ACTION_TAG = "a";
 /**
@@ -105,4 +120,4 @@ declare const MAX_HELD_VALUES = 128;
  * `{"$":"a","v":id,"b":sealed}`), or undefined for anything else.
  */
 declare function getTag(value: unknown): string | undefined;
-export { VALUES_HEADER as A, RENDER_HEADER as C, TAG_BOUND as D, TAG as E, getTag as F, readPostedAction as I, stripRuntimeFields as L, VALUE_SCRIPT_TYPE as M, attachmentField as N, TAG_VALUE as O, formFieldName as P, REFERENCE_TAG as S, SLOT_TAG as T, MAX_HELD_VALUES as _, BLOB_TAG as a, PROMISE_TAG as b, CHUNK_SCRIPT_TYPE as c, FORM_REF_PREFIX as d, FORM_STATE_SCRIPT_TYPE as f, LAYOUTS_HEADER as g, ISLAND_ELEMENT as h, ACTION_TAG as i, VALUE_KEY_PATTERN as j, TREE_SCRIPT_TYPE as k, FORM_DATA_TAG as l, HYDRATED_ATTRIBUTE as m, ACTION_KEY_FIELD as n, BOUND_FIELD as o, HTML_ELEMENT as p, ACTION_STALE_HEADER as r, CALL_FIELD as s, ACTION_HEADER as t, FORM_FIELD_PREFIX as u, OBJECT_TAG as v, SLOT_ELEMENT as w, PROPS_SCRIPT_TYPE as x, PROMISE_SCRIPT_TYPE as y };
+export { TAG_BOUND as A, stripRuntimeFields as B, REFERENCE_TAG as C, SLOT_TEMPLATE_ELEMENT as D, SLOT_TAG as E, VALUE_SCRIPT_TYPE as F, attachmentField as I, formFieldName as L, TREE_SCRIPT_TYPE as M, VALUES_HEADER as N, SLOT_TREE_FIELD as O, VALUE_KEY_PATTERN as P, getTag as R, PROPS_SCRIPT_TYPE as S, SLOT_ELEMENT as T, LAYOUTS_HEADER as _, BLOB_TAG as a, PROMISE_SCRIPT_TYPE as b, CHUNK_SCRIPT_TYPE as c, FORM_REF_PREFIX as d, FORM_STATE_SCRIPT_TYPE as f, ISLAND_ELEMENT as g, ID_POSITION_ATTRIBUTE as h, ACTION_TAG as i, TAG_VALUE as j, TAG as k, FORM_DATA_TAG as l, HYDRATED_ATTRIBUTE as m, ACTION_KEY_FIELD as n, BOUND_FIELD as o, HTML_ELEMENT as p, ACTION_STALE_HEADER as r, CALL_FIELD as s, ACTION_HEADER as t, FORM_FIELD_PREFIX as u, MAX_HELD_VALUES as v, RENDER_HEADER as w, PROMISE_TAG as x, OBJECT_TAG as y, readPostedAction as z };

package/dist/_chunks/{wire-QEQWBr5s.mjs → wire-UUwZlUJZ.mjs}

@@ -13,12 +13,22 @@
 const ISLAND_ELEMENT = "f-island";
 /** The script type of an island's props; its `for` attribute names the island. */
 const PROPS_SCRIPT_TYPE = "f/props";
+/**
+* On a props script: the id React gave the island's position on the server, so the browser
+* hydrates the island where the server rendered it and `useId` matches.
+*/
+const ID_POSITION_ATTRIBUTE = "ids";
 /** The script type of a value sent once; its `name` attribute is the value's key. */
 const VALUE_SCRIPT_TYPE = "f/value";
 /** Set on an island once it hydrated (and its held interaction was replayed). */
 const HYDRATED_ATTRIBUTE = "hydrated";
 /** The element that keeps server output passed to an island as children. */
 const SLOT_ELEMENT = "f-slot";
+/**
+* After an island's props: `<template for>` holding the `<f-slot>`s the island did not place when
+* the server rendered it, which the browser shows when the island places them.
+*/
+const SLOT_TEMPLATE_ELEMENT = "template";
 /** The script type of a page's server tree, rebuilt in the browser without the page's HTML. */
 const TREE_SCRIPT_TYPE = "f/tree";
 /** The script type of a server tree chunk that streamed in after the tree. */
@@ -42,6 +52,11 @@ const TAG_BOUND = "b";
 const REFERENCE_TAG = "r";
 /** `{"$":"s","v":name}`: a slot. */
 const SLOT_TAG = "s";
+/**
+* On a slot reference: `1` when the slot carries a server tree (`<script type="f/tree">` named
+* after the slot) that the browser rebuilds inside the island, instead of keeping its HTML.
+*/
+const SLOT_TREE_FIELD = "t";
 /** `{"$":"a","v":id}` or `{"$":"a","v":id,"b":sealed}`: a server action. */
 const ACTION_TAG = "a";
 /**
@@ -127,5 +142,6 @@ function getTag(value) {
 	if (keys.length === 1) return tag;
 	if (keys.length === 2 && "v" in value) return tag;
 	if (keys.length === 3 && tag === "a" && "v" in value && "b" in value) return tag;
+	if (keys.length === 3 && tag === "s" && "v" in value && "t" in value) return tag;
 }
-export { VALUES_HEADER as A, RENDER_HEADER as C, TAG_BOUND as D, TAG as E, getTag as F, readPostedAction as I, stripRuntimeFields as L, VALUE_SCRIPT_TYPE as M, attachmentField as N, TAG_VALUE as O, formFieldName as P, REFERENCE_TAG as S, SLOT_TAG as T, MAX_HELD_VALUES as _, BLOB_TAG as a, PROMISE_TAG as b, CHUNK_SCRIPT_TYPE as c, FORM_REF_PREFIX as d, FORM_STATE_SCRIPT_TYPE as f, LAYOUTS_HEADER as g, ISLAND_ELEMENT as h, ACTION_TAG as i, VALUE_KEY_PATTERN as j, TREE_SCRIPT_TYPE as k, FORM_DATA_TAG as l, HYDRATED_ATTRIBUTE as m, ACTION_KEY_FIELD as n, BOUND_FIELD as o, HTML_ELEMENT as p, ACTION_STALE_HEADER as r, CALL_FIELD as s, ACTION_HEADER as t, FORM_FIELD_PREFIX as u, OBJECT_TAG as v, SLOT_ELEMENT as w, PROPS_SCRIPT_TYPE as x, PROMISE_SCRIPT_TYPE as y };
+export { TAG_BOUND as A, stripRuntimeFields as B, REFERENCE_TAG as C, SLOT_TEMPLATE_ELEMENT as D, SLOT_TAG as E, VALUE_SCRIPT_TYPE as F, attachmentField as I, formFieldName as L, TREE_SCRIPT_TYPE as M, VALUES_HEADER as N, SLOT_TREE_FIELD as O, VALUE_KEY_PATTERN as P, getTag as R, PROPS_SCRIPT_TYPE as S, SLOT_ELEMENT as T, LAYOUTS_HEADER as _, BLOB_TAG as a, PROMISE_SCRIPT_TYPE as b, CHUNK_SCRIPT_TYPE as c, FORM_REF_PREFIX as d, FORM_STATE_SCRIPT_TYPE as f, ISLAND_ELEMENT as g, ID_POSITION_ATTRIBUTE as h, ACTION_TAG as i, TAG_VALUE as j, TAG as k, FORM_DATA_TAG as l, HYDRATED_ATTRIBUTE as m, ACTION_KEY_FIELD as n, BOUND_FIELD as o, HTML_ELEMENT as p, ACTION_STALE_HEADER as r, CALL_FIELD as s, ACTION_HEADER as t, FORM_FIELD_PREFIX as u, MAX_HELD_VALUES as v, RENDER_HEADER as w, PROMISE_TAG as x, OBJECT_TAG as y, readPostedAction as z };