@farm.js/islx 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.0.2
+
+Streaming and hydration fixes.
+
+- Islands inside Suspense content that streams in after the browser entry has run now hydrate.
+  While the document streams, the runtime watches it: an island hydrates once React moves it out
+  of its hidden staging `<div>`, an island React removes (a replaced fallback) is released, and
+  watching stops once the document is parsed and every staged boundary is revealed. React 19.2
+  can reveal boundaries after parsing ends.
+- Islands that share a value decode it once and share the result. Props and values without tags
+  skip decoding, and decoded objects are built with plain assignment (`__proto__` stays data).
+
 ## 0.0.1
 
 The first release: the islx wire format, server actions, React islands, and the Vite plugin.

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.1, the first release. React and Vite are supported; other renderers and framework
+> Status: 0.0.2. 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/dist/_chunks/{actions-CA_K-In7.mjs → actions-2sTj0A2T.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 } from "./codec-BTDkzzPP.mjs";
+import { a as encode, r as decode, u as setOwn } from "./codec-DqfVYKsx.mjs";
 // src/client/value-store.ts
 /**
 * The browser's store of values sent once. It keeps every value it has read, parses each once,
@@ -21,7 +21,8 @@ function createValueStore() {
 		if (entry.state === "resolving") throw new Error(`islx value ${key} refers to itself`);
 		entry.state = "resolving";
 		try {
-			entry.value = resolve(JSON.parse(entry.json));
+			const parsed = JSON.parse(entry.json);
+			entry.value = entry.json.includes(`"\$"`) ? resolve(parsed) : parsed;
 		} catch (error) {
 			entry.state = "raw";
 			throw error;
@@ -44,12 +45,7 @@ function createValueStore() {
 	};
 	const resolveEntries = (object) => {
 		const resolved = {};
-		for (const key of Object.keys(object)) Object.defineProperty(resolved, key, {
-			value: resolve(object[key]),
-			enumerable: true,
-			writable: true,
-			configurable: true
-		});
+		for (const key of Object.keys(object)) setOwn(resolved, key, resolve(object[key]));
 		return resolved;
 	};
 	return {

package/dist/_chunks/{actions-C4dZ1-XD.mjs → actions-B8dJ8f7L.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-BTDkzzPP.mjs";
+import { a as encode, c as needsObjectTag, o as encodeLeaf, r as decode, t as EncodeError } from "./codec-DqfVYKsx.mjs";
 import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
 // src/server/values.ts
 /**

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

@@ -88,13 +88,21 @@ const NOT_A_VALUE = Symbol.for("islx.codec.not-a-value");
 /** A plain object from entries; `defineProperty`, so a "__proto__" key stays an ordinary key. */
 function plainObject(entries) {
 	const object = {};
-	for (const [key, value] of entries) Object.defineProperty(object, key, {
+	for (const [key, value] of entries) setOwn(object, key, value);
+	return object;
+}
+/**
+* Sets an own property. Plain assignment keeps the object fast; only a `"__proto__"` key needs
+* `defineProperty`, which assignment would turn into a prototype change.
+*/
+function setOwn(object, key, value) {
+	if (key === "__proto__") Object.defineProperty(object, key, {
 		value,
 		enumerable: true,
 		writable: true,
 		configurable: true
 	});
-	return object;
+	else object[key] = value;
 }
 /**
 * The value a tagged object stands for, decoding children (a `Map`'s or `Set`'s entries, an `o`
@@ -268,4 +276,4 @@ function decode(value, options = {}) {
 	};
 	return visit(value);
 }
-export { encode as a, needsObjectTag as c, toBase64 as d, decodeTagged as i, plainObject as l, NOT_A_VALUE as n, encodeLeaf as o, decode as r, fromBase64 as s, EncodeError as t, tagged as u };
+export { encode as a, needsObjectTag as c, tagged as d, toBase64 as f, decodeTagged as i, plainObject as l, NOT_A_VALUE as n, encodeLeaf as o, decode as r, fromBase64 as s, EncodeError as t, setOwn as u };

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

@@ -1,6 +1,6 @@
-import { i as decodeTagged, n as NOT_A_VALUE, o as encodeLeaf } from "./codec-BTDkzzPP.mjs";
+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-CA_K-In7.mjs";
+import { l as getValueStore, t as createServerReference } from "./actions-2sTj0A2T.mjs";
 import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
 import * as React from "react";
 import * as ReactDOM from "react-dom";

package/dist/client.mjs

@@ -1,4 +1,4 @@
-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-CA_K-In7.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-2sTj0A2T.mjs";
 import { F as stripRuntimeFields, P as readPostedAction, x as RENDER_HEADER } from "./_chunks/wire-CXOodE06.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.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 toBase64, i as decodeTagged, l as plainObject, n as NOT_A_VALUE, o as encodeLeaf, r as decode, s as fromBase64, t as EncodeError, u as tagged } from "./_chunks/codec-BTDkzzPP.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 };

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-CA_K-In7.mjs";
-import { i as decodeTagged, n as NOT_A_VALUE, r as decode } from "../_chunks/codec-BTDkzzPP.mjs";
+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-BEV73f_8.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 { 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";
@@ -31,8 +31,26 @@ function readFormState(document) {
 		return;
 	}
 }
+/**
+* Revived values, by the object the value store resolved. Islands that share a value (one sent
+* once for several islands) then share the revived object instead of walking it again. A value
+* with a slot is not kept: a slot's HTML belongs to one island.
+*/
+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) {
+	if (value && typeof value === "object") {
+		const cached = revivedValues.get(value);
+		if (cached !== void 0) return cached;
+		const slotsBefore = slotsRevived;
+		const revived = reviveUncached(value, container);
+		if (slotsRevived === slotsBefore) revivedValues.set(value, revived);
+		return revived;
+	}
+	return value;
+}
+function reviveUncached(value, container) {
 	if (Array.isArray(value)) {
 		let changed = false;
 		const revived = value.map((entry) => {
@@ -42,7 +60,6 @@ function revive(value, container) {
 		});
 		return changed ? revived : value;
 	}
-	if (!value || typeof value !== "object") return value;
 	const object = value;
 	const tag = getTag(object);
 	if (tag === "a" && typeof object["v"] === "string") {
@@ -50,6 +67,7 @@ function revive(value, container) {
 		return createServerReference(object["v"], typeof token === "string" ? token : void 0);
 	}
 	if (tag === "s" && typeof object["v"] === "string") {
+		slotsRevived++;
 		const name = object["v"];
 		let html = "";
 		for (const slot of container.querySelectorAll(SLOT_ELEMENT)) if (slot.getAttribute("name") === name) {
@@ -73,16 +91,16 @@ function revive(value, container) {
 	const revived = {};
 	for (const [key, entry] of Object.entries(object)) {
 		const next = revive(entry, container);
-		Object.defineProperty(revived, key, {
-			value: next,
-			enumerable: true,
-			writable: true,
-			configurable: true
-		});
+		setOwn(revived, key, next);
 		if (next !== entry) changed = true;
 	}
 	return changed ? revived : value;
 }
+/**
+* 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:\"]";
 /** The hydration runtime for one page. */
 function createHydrationRuntime(options) {
 	const roots = /* @__PURE__ */ new Map();
@@ -146,6 +164,7 @@ function createHydrationRuntime(options) {
 		const text = script.textContent || "{}";
 		let parsed = JSON.parse(text);
 		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error("props must be an object");
+		if (!text.includes(`"\$"`)) return parsed;
 		if (text.includes(`"\$":"r"`)) {
 			values.ingest(container.ownerDocument);
 			parsed = values.resolve(parsed);
@@ -160,9 +179,10 @@ function createHydrationRuntime(options) {
 			formStateRead = true;
 			formState = readFormState(scope instanceof Document ? scope : scope.ownerDocument ?? document);
 		}
+		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));
+		const islands = candidates.filter((container) => !roots.has(container) && !pending.has(container) && !container.parentElement?.closest(ISLAND_SELECTOR) && !container.closest(STREAM_STAGING));
 		await Promise.all(islands.map(async (container) => {
 			const src = container.getAttribute("src");
 			const id = container.getAttribute("props");
@@ -312,6 +332,39 @@ function createHydrationRuntime(options) {
 		return updated;
 	}
 	/** Unmounts the islands inside `scope`, and stops scheduled ones. */
+	/**
+	* A page still streaming: islands in Suspense content that arrives later hydrate as React puts it
+	* in place, and islands React removes (a replaced fallback) are released. Ends once the document
+	* is parsed and React has revealed every staged boundary (it may batch reveals past parsing).
+	*/
+	let watching = false;
+	function watchStream(document) {
+		if (watching || document.readyState !== "loading" || typeof MutationObserver !== "function") return;
+		watching = true;
+		const removed = /* @__PURE__ */ new Set();
+		let queued = false;
+		const run = () => {
+			queued = false;
+			for (const node of removed) if (!node.isConnected) dispose(node);
+			removed.clear();
+			if (document.readyState !== "loading" && !document.querySelector(STREAM_STAGING)) {
+				observer.disconnect();
+				watching = false;
+			}
+			hydrate(document).catch((error) => report("Hydrating streamed islands failed.", error));
+		};
+		const observer = new MutationObserver((records) => {
+			for (const record of records) for (const node of record.removedNodes) removed.add(node);
+			if (queued) return;
+			queued = true;
+			queueMicrotask(run);
+		});
+		observer.observe(document, {
+			childList: true,
+			subtree: true
+		});
+		document.addEventListener("DOMContentLoaded", run, { once: true });
+	}
 	function dispose(scope) {
 		for (const [container, controller] of pending) if (container === scope || scope.contains(container)) {
 			controller.abort();

package/dist/react/server.mjs

@@ -1,9 +1,9 @@
-import { a as encode } from "../_chunks/codec-BTDkzzPP.mjs";
+import { a as encode } from "../_chunks/codec-DqfVYKsx.mjs";
 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-C4dZ1-XD.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-BEV73f_8.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 * as React from "react";
 // src/react/server.ts
 /**

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-BEV73f_8.mjs";
+export { a as IslandsProvider, o as createIsland, l as isolateIslands, r as renderServerTree, p as withinClientRoot } from "./_chunks/tree-BDB5VEao.mjs";

package/dist/server.mjs

@@ -1,5 +1,5 @@
-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-C4dZ1-XD.mjs";
-import { a as encode, r as decode } from "./_chunks/codec-BTDkzzPP.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-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 { n as setBuildDefaults, t as getBuildDefaults } from "./_chunks/build-COIcs7wm.mjs";
 // src/server/hooks.ts

package/package.json

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