@farm.js/islx 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.0.4
+
+Promise props, and islands in a page that streams after it loaded.
+
+- A server component can pass an unawaited promise to a client component, which reads it with
+  `use()`. The promise travels as `{"$":"T","v":name}`; when it settles, a Suspense boundary after
+  the island writes `<script type="f/promise" name>` with `{"v":value}` (the same codec and values
+  sent once) or `{"e":1}`. A rejection's reason stays on the server. In the browser the prop is a
+  thenable: settled already when its outcome is on the page, so hydration does not suspend, and
+  settled when it streams in otherwise.
+- An island holding a Suspense boundary that is still streaming, after the document has loaded (a
+  framework router that streams navigations), hydrates once React reveals the boundary instead of
+  React rendering it again in the browser (error #419). `endStreamedContent(root)` from
+  `@farm.js/islx/react/client` marks boundaries a stream never completed as rendered in the
+  browser, so their islands hydrate on the next pass.
+
 ## 0.0.3
 
 Server layouts as trees.

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.3. React and Vite are supported; other renderers and framework
+> Status: 0.0.4. 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).
 

package/SPEC.md

@@ -35,8 +35,9 @@ Anything that writes and reads it, in any language or framework, is a islx imple
 | `<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. |
+| `<script type="f/promise" name>` | The outcome of a promise an island received, written when it settles: `{"v":value}`, or `{"e":1}` for a rejection (the reason stays on the server). `name` is the promise's name. It may land anywhere after the island, and stream in after the island hydrated. |
 
-A value script's and props script's JSON escapes `<`, U+2028 and U+2029.
+A value script's, props script's and promise script's JSON escapes `<`, U+2028 and U+2029.
 
 ## JSON tags
 
@@ -58,6 +59,8 @@ with any other keys is data.
 | `U` | `URL` | `href` |
 | `R` | `RegExp` | `[source, flags]` |
 | `Y` | bytes | `[type, base64]`; type is `ArrayBuffer`, `DataView` or a typed array name |
+| `T` | a promise an island receives | its name; its outcome arrives in the `f/promise` script of that name |
+| `P` | a promise inside a server tree, resolved already | its value, tagged |
 | `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 |
@@ -102,6 +105,13 @@ islands, and handles history, scroll and focus. Anything unusual loads the page
 site, `target`, `download`, `rel="external"`, modifier keys, a non-HTML answer, or a page whose
 browser entry differs, as after a deploy).
 
+A framework router may stream a navigation in: the shell first, then each Suspense boundary as
+it completes. A renderer may hydrate a boundary that is still streaming only while the document
+loads, so after that an island holding one waits, and the next hydration pass starts it once the
+boundary is revealed. When the stream ends, boundaries it never completed are marked as rendered
+in the browser, and the next pass hydrates their islands (React: a pending boundary is
+`<!--$?-->`, marked `<!--$!-->` by `endStreamedContent(root)` from `@farm.js/islx/react/client`).
+
 A server that leaves layouts out renders each kept layout as an empty boundary, and the browser
 keeps its own. If the response does not fit what is on screen, the browser loads the full
 document. All three headers make a response private, and the server sends `Vary` for each one

package/dist/_chunks/{actions-2sTj0A2T.mjs → actions-8RQfrM-p.mjs}

@@ -1,5 +1,5 @@
-import { A as VALUE_SCRIPT_TYPE, N as getTag, O as VALUES_HEADER, j as attachmentField, k as VALUE_KEY_PATTERN, o as BOUND_FIELD, s as CALL_FIELD, t as ACTION_HEADER } from "./wire-CXOodE06.mjs";
-import { a as encode, r as decode, u as setOwn } from "./codec-DqfVYKsx.mjs";
+import { A as VALUES_HEADER, F as getTag, M as VALUE_SCRIPT_TYPE, N as attachmentField, j as VALUE_KEY_PATTERN, o as BOUND_FIELD, s as CALL_FIELD, t as ACTION_HEADER } from "./wire-QEQWBr5s.mjs";
+import { a as encode, r as decode, u as setOwn } from "./codec-C8to-RQW.mjs";
 // src/client/value-store.ts
 /**
 * The browser's store of values sent once. It keeps every value it has read, parses each once,

package/dist/_chunks/{actions-B8dJ8f7L.mjs → actions-CtLpJPEB.mjs}

@@ -1,5 +1,5 @@
-import { M as formFieldName, O as VALUES_HEADER, d as FORM_REF_PREFIX, k as VALUE_KEY_PATTERN } from "./wire-CXOodE06.mjs";
-import { a as encode, c as needsObjectTag, o as encodeLeaf, r as decode, t as EncodeError } from "./codec-DqfVYKsx.mjs";
+import { A as VALUES_HEADER, P as formFieldName, d as FORM_REF_PREFIX, j as VALUE_KEY_PATTERN } from "./wire-QEQWBr5s.mjs";
+import { a as encode, c as needsObjectTag, o as encodeLeaf, r as decode, t as EncodeError } from "./codec-C8to-RQW.mjs";
 import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
 // src/server/values.ts
 /**

package/dist/_chunks/{codec-DqfVYKsx.mjs → codec-C8to-RQW.mjs}

@@ -1,4 +1,4 @@
-import { N as getTag } from "./wire-CXOodE06.mjs";
+import { F as getTag } from "./wire-QEQWBr5s.mjs";
 // src/protocol/codec.ts
 /**
 * Values JSON cannot hold. Each travels as a tagged object: the reserved key `$` holds a short tag
@@ -117,7 +117,8 @@ function decodeTagged(object, decodeChild) {
 		case "s":
 		case "a":
 		case "F":
-		case "K": return NOT_A_VALUE;
+		case "K":
+		case "T": return NOT_A_VALUE;
 		case "o":
 			if (data && typeof data === "object" && !Array.isArray(data)) return plainObject(Object.entries(data).map(([key, value]) => [key, decodeChild(value)]));
 			break;

package/dist/_chunks/{schedule-BFoGKRrU.mjs → schedule-CjoybS3b.mjs}

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

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

@@ -1,6 +1,6 @@
-import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-DqfVYKsx.mjs";
-import { A as VALUE_SCRIPT_TYPE, D as TREE_SCRIPT_TYPE, S as SLOT_ELEMENT, c as CHUNK_SCRIPT_TYPE, h as ISLAND_ELEMENT, p as HTML_ELEMENT, y as PROPS_SCRIPT_TYPE } from "./wire-CXOodE06.mjs";
-import { l as getValueStore, t as createServerReference } from "./actions-2sTj0A2T.mjs";
+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, h as ISLAND_ELEMENT, k as TREE_SCRIPT_TYPE, p as HTML_ELEMENT, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "./wire-QEQWBr5s.mjs";
+import { l as getValueStore, t as createServerReference } from "./actions-8RQfrM-p.mjs";
 import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -141,6 +141,64 @@ function splitSlots(value, prefix, counter) {
 	};
 }
 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));
+}
 function isThenable$1(value) {
 	return !!value && typeof value.then === "function";
 }
@@ -193,7 +251,7 @@ function createIsland(Component, src, exportName, strategy = "load") {
 			type: PROPS_SCRIPT_TYPE,
 			htmlFor: id,
 			dangerouslySetInnerHTML: { __html: hook.escape(encoded.json) }
-		}));
+		}), ...promiseBoundaries(encoded.promises, `${exportName} (${src})`));
 	}
 	Island.displayName = `Island(${Component.displayName || Component.name || exportName})`;
 	Object.defineProperty(Island, CLIENT_REFERENCE, { value: {

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

@@ -24,6 +24,11 @@ declare const TREE_SCRIPT_TYPE = "f/tree";
 declare const CHUNK_SCRIPT_TYPE = "f/chunk";
 /** The element around server HTML inside a server tree. */
 declare const HTML_ELEMENT = "f-html";
+/**
+ * The script type of a promise's outcome, written when it settles: `{"v":value}`, or `{"e":1}` for
+ * a rejection. Its `name` attribute names the promise.
+ */
+declare const PROMISE_SCRIPT_TYPE = "f/promise";
 /** The script type of React's form state after a `useActionState` form post, for hydration. */
 declare const FORM_STATE_SCRIPT_TYPE = "f/form-state";
 /** The reserved JSON key whose value is a tag. */
@@ -38,6 +43,11 @@ declare const REFERENCE_TAG = "r";
 declare const SLOT_TAG = "s";
 /** `{"$":"a","v":id}` or `{"$":"a","v":id,"b":sealed}`: a server action. */
 declare const ACTION_TAG = "a";
+/**
+ * `{"$":"T","v":name}`: a promise an island receives, settled by the `f/promise` script `name`.
+ * (Inside a server tree, `{"$":"P","v":value}` is a promise that resolved already.)
+ */
+declare const PROMISE_TAG = "T";
 /** `{"$":"o","v":{…}}`: app data that has its own `$` key. */
 declare const OBJECT_TAG = "o";
 /** `{"$":"F","v":n}`: a `FormData` argument, sent as fields of a multipart call. */
@@ -95,4 +105,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 { VALUE_SCRIPT_TYPE as A, SLOT_TAG as C, TREE_SCRIPT_TYPE as D, TAG_VALUE as E, stripRuntimeFields as F, formFieldName as M, getTag as N, VALUES_HEADER as O, readPostedAction as P, SLOT_ELEMENT as S, TAG_BOUND as T, MAX_HELD_VALUES as _, BLOB_TAG as a, REFERENCE_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, attachmentField as j, VALUE_KEY_PATTERN 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, TAG as w, RENDER_HEADER as x, PROPS_SCRIPT_TYPE as y };
+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 };

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

@@ -25,6 +25,11 @@ const TREE_SCRIPT_TYPE = "f/tree";
 const CHUNK_SCRIPT_TYPE = "f/chunk";
 /** The element around server HTML inside a server tree. */
 const HTML_ELEMENT = "f-html";
+/**
+* The script type of a promise's outcome, written when it settles: `{"v":value}`, or `{"e":1}` for
+* a rejection. Its `name` attribute names the promise.
+*/
+const PROMISE_SCRIPT_TYPE = "f/promise";
 /** The script type of React's form state after a `useActionState` form post, for hydration. */
 const FORM_STATE_SCRIPT_TYPE = "f/form-state";
 /** The reserved JSON key whose value is a tag. */
@@ -39,6 +44,11 @@ const REFERENCE_TAG = "r";
 const SLOT_TAG = "s";
 /** `{"$":"a","v":id}` or `{"$":"a","v":id,"b":sealed}`: a server action. */
 const ACTION_TAG = "a";
+/**
+* `{"$":"T","v":name}`: a promise an island receives, settled by the `f/promise` script `name`.
+* (Inside a server tree, `{"$":"P","v":value}` is a promise that resolved already.)
+*/
+const PROMISE_TAG = "T";
 /** `{"$":"o","v":{…}}`: app data that has its own `$` key. */
 const OBJECT_TAG = "o";
 /** `{"$":"F","v":n}`: a `FormData` argument, sent as fields of a multipart call. */
@@ -118,4 +128,4 @@ function getTag(value) {
 	if (keys.length === 2 && "v" in value) return tag;
 	if (keys.length === 3 && tag === "a" && "v" in value && "b" in value) return tag;
 }
-export { VALUE_SCRIPT_TYPE as A, SLOT_TAG as C, TREE_SCRIPT_TYPE as D, TAG_VALUE as E, stripRuntimeFields as F, formFieldName as M, getTag as N, VALUES_HEADER as O, readPostedAction as P, SLOT_ELEMENT as S, TAG_BOUND as T, MAX_HELD_VALUES as _, BLOB_TAG as a, REFERENCE_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, attachmentField as j, VALUE_KEY_PATTERN 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, TAG as w, RENDER_HEADER as x, PROPS_SCRIPT_TYPE as y };
+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 };

package/dist/client.mjs

@@ -1,5 +1,5 @@
-import { a as emit, c as createValueStore, i as defineClientHooks, l as getValueStore, n as decodeActionReference, o as hookEventName, r as setActionNavigator, s as setClientHooks, t as createServerReference, u as valueHeaders } from "./_chunks/actions-2sTj0A2T.mjs";
-import { F as stripRuntimeFields, P as readPostedAction, x as RENDER_HEADER } from "./_chunks/wire-CXOodE06.mjs";
+import { a as emit, c as createValueStore, i as defineClientHooks, l as getValueStore, n as decodeActionReference, o as hookEventName, r as setActionNavigator, s as setClientHooks, t as createServerReference, u as valueHeaders } from "./_chunks/actions-8RQfrM-p.mjs";
+import { C as RENDER_HEADER, I as readPostedAction, L as stripRuntimeFields } from "./_chunks/wire-QEQWBr5s.mjs";
 import { i as REPLAYABLE_SELECTOR, n as PENDING_INTERACTIONS, r as PREHYDRATION_SCRIPT, t as INTERACTION_EVENT } from "./_chunks/prehydration-B1GLTLdk.mjs";
 // src/client/forms.ts
 /**

package/dist/index.d.mts

@@ -1,3 +1,3 @@
-import { A as VALUE_SCRIPT_TYPE, C as SLOT_TAG, D as TREE_SCRIPT_TYPE, E as TAG_VALUE, F as stripRuntimeFields, M as formFieldName, N as getTag, O as VALUES_HEADER, P as readPostedAction, S as SLOT_ELEMENT, T as TAG_BOUND, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as REFERENCE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as attachmentField, k as VALUE_KEY_PATTERN, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as TAG, x as RENDER_HEADER, y as PROPS_SCRIPT_TYPE } from "./_chunks/wire-C3Rpbwl6.mjs";
+import { A as VALUES_HEADER, C as RENDER_HEADER, D as TAG_BOUND, E as TAG, F as getTag, I as readPostedAction, L as stripRuntimeFields, M as VALUE_SCRIPT_TYPE, N as attachmentField, O as TAG_VALUE, P as formFieldName, S as REFERENCE_TAG, T as SLOT_TAG, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as PROMISE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as VALUE_KEY_PATTERN, k as TREE_SCRIPT_TYPE, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "./_chunks/wire-Dipqh-EB.mjs";
 import { a as decode, c as encodeLeaf, d as plainObject, f as tagged, i as NOT_A_VALUE, l as fromBase64, n as EncodeError, o as decodeTagged, p as toBase64, r as EncodeOptions, s as encode, t as DecodeOptions, u as needsObjectTag } from "./_chunks/codec-CK8kZp4u.mjs";
-export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, type DecodeOptions, EncodeError, type EncodeOptions, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };
+export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, type DecodeOptions, EncodeError, type EncodeOptions, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { A as VALUE_SCRIPT_TYPE, C as SLOT_TAG, D as TREE_SCRIPT_TYPE, E as TAG_VALUE, F as stripRuntimeFields, M as formFieldName, N as getTag, O as VALUES_HEADER, P as readPostedAction, S as SLOT_ELEMENT, T as TAG_BOUND, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as REFERENCE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as attachmentField, k as VALUE_KEY_PATTERN, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as TAG, x as RENDER_HEADER, y as PROPS_SCRIPT_TYPE } from "./_chunks/wire-CXOodE06.mjs";
-import { a as encode, c as needsObjectTag, d as tagged, f as toBase64, i as decodeTagged, l as plainObject, n as NOT_A_VALUE, o as encodeLeaf, r as decode, s as fromBase64, t as EncodeError } from "./_chunks/codec-DqfVYKsx.mjs";
-export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, EncodeError, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };
+import { A as VALUES_HEADER, C as RENDER_HEADER, D as TAG_BOUND, E as TAG, F as getTag, I as readPostedAction, L as stripRuntimeFields, M as VALUE_SCRIPT_TYPE, N as attachmentField, O as TAG_VALUE, P as formFieldName, S as REFERENCE_TAG, T as SLOT_TAG, _ as MAX_HELD_VALUES, a as BLOB_TAG, b as PROMISE_TAG, c as CHUNK_SCRIPT_TYPE, d as FORM_REF_PREFIX, f as FORM_STATE_SCRIPT_TYPE, g as LAYOUTS_HEADER, h as ISLAND_ELEMENT, i as ACTION_TAG, j as VALUE_KEY_PATTERN, k as TREE_SCRIPT_TYPE, l as FORM_DATA_TAG, m as HYDRATED_ATTRIBUTE, n as ACTION_KEY_FIELD, o as BOUND_FIELD, p as HTML_ELEMENT, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER, u as FORM_FIELD_PREFIX, v as OBJECT_TAG, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "./_chunks/wire-QEQWBr5s.mjs";
+import { a as encode, c as needsObjectTag, d as tagged, f as toBase64, i as decodeTagged, l as plainObject, n as NOT_A_VALUE, o as encodeLeaf, r as decode, s as fromBase64, t as EncodeError } from "./_chunks/codec-C8to-RQW.mjs";
+export { ACTION_HEADER, ACTION_KEY_FIELD, ACTION_STALE_HEADER, ACTION_TAG, BLOB_TAG, BOUND_FIELD, CALL_FIELD, CHUNK_SCRIPT_TYPE, EncodeError, FORM_DATA_TAG, FORM_FIELD_PREFIX, FORM_REF_PREFIX, FORM_STATE_SCRIPT_TYPE, HTML_ELEMENT, HYDRATED_ATTRIBUTE, ISLAND_ELEMENT, LAYOUTS_HEADER, MAX_HELD_VALUES, NOT_A_VALUE, OBJECT_TAG, PROMISE_SCRIPT_TYPE, PROMISE_TAG, PROPS_SCRIPT_TYPE, REFERENCE_TAG, RENDER_HEADER, SLOT_ELEMENT, SLOT_TAG, TAG, TAG_BOUND, TAG_VALUE, TREE_SCRIPT_TYPE, VALUES_HEADER, VALUE_KEY_PATTERN, VALUE_SCRIPT_TYPE, attachmentField, decode, decodeTagged, encode, encodeLeaf, formFieldName, fromBase64, getTag, needsObjectTag, plainObject, readPostedAction, stripRuntimeFields, tagged, toBase64 };

package/dist/react/client.d.mts

@@ -1,5 +1,5 @@
 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 { m as HYDRATED_ATTRIBUTE } from "../_chunks/wire-Dipqh-EB.mjs";
 import { t as ValueStore } from "../_chunks/value-store-Dm-7xJ6W.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";
@@ -21,6 +21,12 @@ interface HydrationOptions {
    */
   schedule: typeof scheduleHydration;
 }
+/**
+ * Marks the Suspense boundaries under `root` that still wait once their stream has ended (the
+ * connection dropped) as rendered in the browser, as React does when it finds one: the next
+ * `hydrate()` pass starts their islands. Call it when a stream that filled `root` ends.
+ */
+declare function endStreamedContent(root: ParentNode): void;
 /** The hydration runtime for one page. */
 declare function createHydrationRuntime(options: HydrationOptions): {
   hydrate: (scope?: ParentNode, signal?: AbortSignal) => Promise<void>;
@@ -46,4 +52,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, type ServerTreeLayout, type ServerTreeLayoutOptions, createHydrationRuntime, createServerHtml, createServerTreeElement, createServerTreeLayout, 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, endStreamedContent, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };

package/dist/react/client.mjs

@@ -1,8 +1,8 @@
-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 { 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 { a as emit, l as getValueStore, t as createServerReference, u as valueHeaders } from "../_chunks/actions-8RQfrM-p.mjs";
+import { i as decodeTagged, n as NOT_A_VALUE, r as decode, u as setOwn } from "../_chunks/codec-C8to-RQW.mjs";
+import { F as getTag, f as FORM_STATE_SCRIPT_TYPE, h as ISLAND_ELEMENT, m as HYDRATED_ATTRIBUTE, w as SLOT_ELEMENT, x as PROPS_SCRIPT_TYPE, y as PROMISE_SCRIPT_TYPE } from "../_chunks/wire-QEQWBr5s.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-opIpaCke.mjs";
+import { n as isIslandStrategy, r as scheduleHydration, t as ISLAND_STRATEGIES } from "../_chunks/schedule-CjoybS3b.mjs";
 import * as React from "react";
 import { hydrateRoot } from "react-dom/client";
 // src/react/hydrate.ts
@@ -39,22 +39,22 @@ function readFormState(document) {
 const revivedValues = /* @__PURE__ */ new WeakMap();
 let slotsRevived = 0;
 /** Turns travelled props back into values: slots keep their server HTML, actions become callable. */
-function revive(value, container) {
+function revive(value, container, values) {
 	if (value && typeof value === "object") {
 		const cached = revivedValues.get(value);
 		if (cached !== void 0) return cached;
 		const slotsBefore = slotsRevived;
-		const revived = reviveUncached(value, container);
+		const revived = reviveUncached(value, container, values);
 		if (slotsRevived === slotsBefore) revivedValues.set(value, revived);
 		return revived;
 	}
 	return value;
 }
-function reviveUncached(value, container) {
+function reviveUncached(value, container, values) {
 	if (Array.isArray(value)) {
 		let changed = false;
 		const revived = value.map((entry) => {
-			const next = revive(entry, container);
+			const next = revive(entry, container, values);
 			if (next !== entry) changed = true;
 			return next;
 		});
@@ -82,25 +82,152 @@ function reviveUncached(value, container) {
 			dangerouslySetInnerHTML: { __html: html }
 		});
 	}
+	if (tag === "T" && typeof object["v"] === "string") return islandPromise(object["v"], container, values);
 	if (tag === "r") throw new Error(`islx value ${String(object["v"])} was not resolved`);
 	if (tag !== void 0) {
-		const decoded = decodeTagged(object, (child) => revive(child, container));
+		const decoded = decodeTagged(object, (child) => revive(child, container, values));
 		if (decoded !== NOT_A_VALUE) return decoded;
 	}
 	let changed = false;
 	const revived = {};
 	for (const [key, entry] of Object.entries(object)) {
-		const next = revive(entry, container);
+		const next = revive(entry, container, values);
 		setOwn(revived, key, next);
 		if (next !== entry) changed = true;
 	}
 	return changed ? revived : value;
 }
+const pendingPromises = /* @__PURE__ */ new Map();
+let promiseObserver = null;
+function findPromiseScript(container, name) {
+	const documents = new Set([container.ownerDocument, globalThis.document].filter(Boolean));
+	for (const document of documents) for (const script of document.querySelectorAll(`script[type="${PROMISE_SCRIPT_TYPE}"]`)) if (script.getAttribute("name") === name) return script;
+	return null;
+}
+function readOutcome(script, container, values) {
+	try {
+		const text = script.textContent || "{}";
+		let parsed = JSON.parse(text);
+		if (!parsed || typeof parsed !== "object" || !("v" in parsed)) return {
+			ok: false,
+			reason: /* @__PURE__ */ new Error("islx: the promise rejected on the server")
+		};
+		if (text.includes(`"\$":"r"`)) {
+			values.ingest(container.ownerDocument);
+			parsed = values.resolve(parsed);
+		}
+		return {
+			ok: true,
+			value: revive(parsed, container, values).v
+		};
+	} catch (reason) {
+		return {
+			ok: false,
+			reason
+		};
+	}
+}
+/**
+* The promise an island received, as a thenable React's `use` reads: settled already when its
+* outcome is on the page, so hydration does not suspend, and settled when the outcome streams in
+* otherwise.
+*/
+function islandPromise(name, container, values) {
+	const pending = pendingPromises.get(name);
+	if (pending) return pending.thenable;
+	const script = findPromiseScript(container, name);
+	if (script) {
+		const outcome = readOutcome(script, container, values);
+		const thenable = outcome.ok ? Promise.resolve(outcome.value) : Promise.reject(outcome.reason);
+		if (outcome.ok) Object.assign(thenable, {
+			status: "fulfilled",
+			value: outcome.value
+		});
+		else {
+			thenable.catch(() => {});
+			Object.assign(thenable, {
+				status: "rejected",
+				reason: outcome.reason
+			});
+		}
+		return thenable;
+	}
+	let resolve;
+	let reject;
+	const thenable = new Promise((done, fail) => {
+		resolve = done;
+		reject = fail;
+	});
+	thenable.catch(() => {});
+	thenable.status = "pending";
+	pendingPromises.set(name, {
+		thenable,
+		container,
+		values,
+		settle(found) {
+			pendingPromises.delete(name);
+			const outcome = readOutcome(found, container, values);
+			if (outcome.ok) {
+				Object.assign(thenable, {
+					status: "fulfilled",
+					value: outcome.value
+				});
+				resolve(outcome.value);
+			} else {
+				Object.assign(thenable, {
+					status: "rejected",
+					reason: outcome.reason
+				});
+				reject(outcome.reason);
+			}
+		}
+	});
+	if (!promiseObserver && typeof MutationObserver === "function") {
+		promiseObserver = new MutationObserver(() => {
+			for (const [pendingName, entry] of pendingPromises) {
+				const found = findPromiseScript(entry.container, pendingName);
+				if (found) entry.settle(found);
+			}
+			if (pendingPromises.size === 0) {
+				promiseObserver?.disconnect();
+				promiseObserver = null;
+			}
+		});
+		promiseObserver.observe(globalThis.document ?? container.ownerDocument, {
+			childList: true,
+			subtree: true
+		});
+	}
+	return thenable;
+}
 /**
 * React streams Suspense content that resolves late into a hidden `<div id="S:n">`, then moves it
 * into place. Its islands hydrate once moved, not while staged.
 */
 const STREAM_STAGING = "div[hidden][id^=\"S:\"]";
+const PENDING_BOUNDARY = "$?";
+/**
+* Whether React still streams Suspense content into `container`. React waits for such a boundary
+* only while the document loads; later (a navigation that streams) it would render it again in
+* the browser, so the island hydrates once React has revealed it.
+*/
+function awaitsStreamedContent(container) {
+	const document = container.ownerDocument;
+	if (document.readyState === "loading") return false;
+	const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT);
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) if (node.data === PENDING_BOUNDARY) return true;
+	return false;
+}
+/**
+* Marks the Suspense boundaries under `root` that still wait once their stream has ended (the
+* connection dropped) as rendered in the browser, as React does when it finds one: the next
+* `hydrate()` pass starts their islands. Call it when a stream that filled `root` ends.
+*/
+function endStreamedContent(root) {
+	const node = root;
+	const walker = (node.nodeType === 9 ? node : node.ownerDocument).createTreeWalker(node, NodeFilter.SHOW_COMMENT);
+	for (let comment = walker.nextNode(); comment; comment = walker.nextNode()) if (comment.data === PENDING_BOUNDARY) comment.data = "$!";
+}
 /** The hydration runtime for one page. */
 function createHydrationRuntime(options) {
 	const roots = /* @__PURE__ */ new Map();
@@ -169,7 +296,7 @@ function createHydrationRuntime(options) {
 			values.ingest(container.ownerDocument);
 			parsed = values.resolve(parsed);
 		}
-		return revive(parsed, container);
+		return revive(parsed, container, values);
 	}
 	const topLevel = (scope) => Array.from(scope.querySelectorAll(ISLAND_SELECTOR)).filter((container) => !container.parentElement?.closest(ISLAND_SELECTOR));
 	const keyOf = (container) => `${container.getAttribute("src")}#${container.getAttribute("export") || "default"}`;
@@ -182,7 +309,7 @@ function createHydrationRuntime(options) {
 		if (scope instanceof Document) watchStream(scope);
 		const candidates = Array.from(scope.querySelectorAll(ISLAND_SELECTOR));
 		if (scope instanceof Element && scope.matches(ISLAND_SELECTOR)) candidates.unshift(scope);
-		const islands = candidates.filter((container) => !roots.has(container) && !pending.has(container) && !container.parentElement?.closest(ISLAND_SELECTOR) && !container.closest(STREAM_STAGING));
+		const islands = candidates.filter((container) => !roots.has(container) && !pending.has(container) && !container.parentElement?.closest(ISLAND_SELECTOR) && !container.closest(STREAM_STAGING) && !awaitsStreamedContent(container));
 		await Promise.all(islands.map(async (container) => {
 			const src = container.getAttribute("src");
 			const id = container.getAttribute("props");
@@ -350,6 +477,7 @@ function createHydrationRuntime(options) {
 			if (document.readyState !== "loading" && !document.querySelector(STREAM_STAGING)) {
 				observer.disconnect();
 				watching = false;
+				endStreamedContent(document);
 			}
 			hydrate(document).catch((error) => report("Hydrating streamed islands failed.", error));
 		};
@@ -366,6 +494,11 @@ function createHydrationRuntime(options) {
 		document.addEventListener("DOMContentLoaded", run, { once: true });
 	}
 	function dispose(scope) {
+		for (const [name, entry] of pendingPromises) if (scope.contains(entry.container)) pendingPromises.delete(name);
+		if (pendingPromises.size === 0) {
+			promiseObserver?.disconnect();
+			promiseObserver = null;
+		}
 		for (const [container, controller] of pending) if (container === scope || scope.contains(container)) {
 			controller.abort();
 			pending.delete(container);
@@ -453,4 +586,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, createServerTreeLayout, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };
+export { HYDRATED_ATTRIBUTE, ISLAND_STRATEGIES, PAYLOAD_ONLY_ATTRIBUTE, createHydrationRuntime, createServerHtml, createServerTreeElement, createServerTreeLayout, endStreamedContent, isIslandStrategy, isolateIslands, refreshDocument, scheduleHydration, swapDocument, updateServerTrees, withinClientRoot };

package/dist/react/server.mjs

@@ -1,19 +1,36 @@
-import { a as encode } from "../_chunks/codec-DqfVYKsx.mjs";
-import { f as FORM_STATE_SCRIPT_TYPE } from "../_chunks/wire-CXOodE06.mjs";
+import { a as encode } from "../_chunks/codec-C8to-RQW.mjs";
+import { f as FORM_STATE_SCRIPT_TYPE } from "../_chunks/wire-QEQWBr5s.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 { g as escapeScriptJson, h as addressValues, i as encodeActionReference, v as parseHeldValues, y as selectValuesToSend } from "../_chunks/actions-CtLpJPEB.mjs";
 import { t as getBuildDefaults } from "../_chunks/build-COIcs7wm.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 { 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-opIpaCke.mjs";
 import * as React from "react";
 // src/react/server.ts
 /**
 * @farm.js/islx/react/server: rendering a React page with islands. Importing it gives islands the
 * server code they need (values, action references); `renderToStream` renders a page.
 */
+const PROMISE_PREFIX = `${Array.from(crypto.getRandomValues(/* @__PURE__ */ new Uint32Array(2)), (part) => part.toString(36)).join("")}.`;
+let promiseCount = 0;
+function isThenable(value) {
+	return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
 setIslandServerHook({
 	encode(props, held) {
+		const promises = [];
 		const addressed = addressValues(props, { encodeSpecial: (value) => {
 			if (value && typeof value === "object" && runtimeTagged.has(value)) return value;
+			if (isThenable(value)) {
+				const name = PROMISE_PREFIX + (promiseCount++).toString(36);
+				promises.push({
+					name,
+					promise: value
+				});
+				return {
+					["$"]: "T",
+					["v"]: name
+				};
+			}
 			if (typeof value === "function") {
 				const reference = encodeActionReference(value);
 				if (reference) return reference;
@@ -26,7 +43,8 @@ setIslandServerHook({
 			values: selectValuesToSend(addressed, held).map(({ key, json }) => ({
 				key,
 				json
-			}))
+			})),
+			promises
 		};
 	},
 	escape: escapeScriptJson,

package/dist/react.mjs

@@ -1 +1 @@
-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";
+export { s as IslandsProvider, t as Outlet, c as createIsland, d as isolateIslands, a as renderServerTree, h as withinClientRoot } from "./_chunks/tree-opIpaCke.mjs";

package/dist/server.mjs

@@ -1,6 +1,6 @@
-import { _ as hashValue, a as getActionReference, c as resolveAction, d as generateActionKey, f as sealBound, g as escapeScriptJson, h as addressValues, i as encodeActionReference, l as SealError, m as VALUE_MIN_LENGTH, n as configureActionKeys, o as registerInlineAction, p as unsealBound, r as decodeActionReference, s as registerServerReference, t as bindInlineAction, u as createActionKeys, v as parseHeldValues, y as selectValuesToSend } from "./_chunks/actions-B8dJ8f7L.mjs";
-import { a as encode, r as decode } from "./_chunks/codec-DqfVYKsx.mjs";
-import { F as stripRuntimeFields, P as readPostedAction, j as attachmentField, n as ACTION_KEY_FIELD, o as BOUND_FIELD, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER } from "./_chunks/wire-CXOodE06.mjs";
+import { _ as hashValue, a as getActionReference, c as resolveAction, d as generateActionKey, f as sealBound, g as escapeScriptJson, h as addressValues, i as encodeActionReference, l as SealError, m as VALUE_MIN_LENGTH, n as configureActionKeys, o as registerInlineAction, p as unsealBound, r as decodeActionReference, s as registerServerReference, t as bindInlineAction, u as createActionKeys, v as parseHeldValues, y as selectValuesToSend } from "./_chunks/actions-CtLpJPEB.mjs";
+import { a as encode, r as decode } from "./_chunks/codec-C8to-RQW.mjs";
+import { I as readPostedAction, L as stripRuntimeFields, N as attachmentField, n as ACTION_KEY_FIELD, o as BOUND_FIELD, r as ACTION_STALE_HEADER, s as CALL_FIELD, t as ACTION_HEADER } from "./_chunks/wire-QEQWBr5s.mjs";
 import { n as setBuildDefaults, t as getBuildDefaults } from "./_chunks/build-COIcs7wm.mjs";
 // src/server/hooks.ts
 const HOOKS_KEY = Symbol.for("islx.server.hooks");

package/dist/vite.mjs

@@ -1,5 +1,5 @@
 import { i as transformActions, r as hasModuleDirective, t as ActionCompileError } from "./_chunks/actions-Eutk6UzT.mjs";
-import { t as ISLAND_STRATEGIES } from "./_chunks/schedule-BFoGKRrU.mjs";
+import { t as ISLAND_STRATEGIES } from "./_chunks/schedule-CjoybS3b.mjs";
 import { randomBytes } from "node:crypto";
 import path from "node:path";
 import { walk } from "estree-walker";

package/package.json

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