@farm.js/islx 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.0.9
+
+Islands behave as React Server Components do in four cases they did not.
+
+- `useId` in an island returns the ids its server HTML has, and two islands no longer share ids.
+  The props script carries the island's id position (`ids`), which the browser rebuilds before it
+  hydrates. The island wrapper no longer calls `useId` inside another island, where it moved every
+  id below it.
+- Client components in server output passed to an island (`children`, or any element prop) are
+  the island's descendants: they read its context, as a consumer below a provider does, and keep
+  their own state. Such output travels as a server tree named after its slot; plain HTML still
+  travels as HTML only.
+- An element prop the island does not render at first (a tab, a closed panel) renders when it
+  does. The server writes the slots it did not place in a `<template>` after the props.
+- `useFormStatus` in a client component inside a server component's `<form>` reports that form's
+  submit. The compiler points `useFormStatus` from `react-dom` at `@farm.js/islx/react`'s, which
+  is React's anywhere else; `rewriteFormStatusImports` in `@farm.js/islx/compiler` does it for
+  other plugins. A namespace import (`ReactDOM.useFormStatus`) keeps React's.
+
 ## 0.0.8
 
 Pages load the runtime only when they first need it, and islands that only react to clicks wait

package/README.md

@@ -15,7 +15,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.8. React, Vite and TanStack Start are supported; other renderers and framework
+> Status: 0.0.9. React, Vite and TanStack Start 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

@@ -29,9 +29,10 @@ Anything that writes and reads it, in any language or framework, is a islx imple
 | Name | Meaning |
 | --- | --- |
 | `<f-island>` | A client component's server HTML. `src` names the module the browser imports (its path from the app root; the runtime maps it to a URL), `export` the component's export name, `props` the id of its props script, `strategy` when it hydrates: `load`, `idle`, `visible` or `interaction`. A hydrated island gets a `hydrated` attribute. |
-| `<script type="f/props" for>` | An island's props, as JSON. `for` names the island's `props` id. |
+| `<script type="f/props" for [ids]>` | An island's props, as JSON. `for` names the island's `props` id. `ids` is the `useId` React gave a probe the server renders first in the island, at index 0 of a two-child array whose second child is the component: its bits and length are the island's id position, which the browser rebuilds before it hydrates the component at index 1, so the component's `useId` calls match its HTML. Without it the browser hydrates with React's own ids. |
 | `<script type="f/value" name>` | A value sent once. `name` is its key. Written before the first island that uses it. |
-| `<f-slot name>` | Server output passed to an island as children. It stays server HTML; the island renders it in place. |
+| `<f-slot name>` | Server output passed to an island as children (or any element prop). Plain HTML stays server HTML, and the island renders it in place. Output holding client components, Suspense boundaries, actions or `<f-html>` parts carries a server tree (`<script type="f/tree" name>` named after the slot, inside it), which the browser rebuilds inside the island's root: its client components are the island's descendants and read its context. |
+| `<template for>` | After an island's props: the `<f-slot>`s the island did not place when the server rendered it (a closed panel, a tab not shown yet). `for` names the island's `props` id. The browser reads a slot from here when the island places it. |
 | `<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. |
@@ -41,8 +42,8 @@ A value script's, props script's and promise script's JSON escapes `<`, U+2028 a
 
 ## JSON tags
 
-A tagged object is `{"$":tag}` or `{"$":tag,"v":data}`; an action may also carry `"b"`. An object
-with any other keys is data.
+A tagged object is `{"$":tag}` or `{"$":tag,"v":data}`; an action may also carry `"b"`, and a slot
+`"t":1` when it carries a server tree. An object with any other keys is data.
 
 | Tag | Stands for | Data |
 | --- | --- | --- |

package/dist/_chunks/{actions-C-IwUCKU.mjs → actions-DAzd4PpV.mjs}

@@ -1,5 +1,5 @@
-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";
+import { F as VALUE_SCRIPT_TYPE, I as attachmentField, N as VALUES_HEADER, P as VALUE_KEY_PATTERN, R as getTag, o as BOUND_FIELD, s as CALL_FIELD, t as ACTION_HEADER } from "./wire-UUwZlUJZ.mjs";
+import { a as encode, r as decode, u as setOwn } from "./codec-DDpUvgRo.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-CvQ0-zjg.mjs → actions-DzIPDecd.mjs}

@@ -1,6 +1,6 @@
-import { P as formFieldName, d as FORM_REF_PREFIX } from "./wire-QEQWBr5s.mjs";
+import { L as formFieldName, d as FORM_REF_PREFIX } from "./wire-UUwZlUJZ.mjs";
 import { t as getBuildDefaults } from "./build-COIcs7wm.mjs";
-import { a as encode, r as decode, t as EncodeError } from "./codec-C8to-RQW.mjs";
+import { a as encode, r as decode, t as EncodeError } from "./codec-DDpUvgRo.mjs";
 // src/server/seal.ts
 /**
 * Sealing an action's captured values. An inline `"use server"` function that reads a variable of

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

@@ -1,4 +1,4 @@
-import { F as getTag } from "./wire-QEQWBr5s.mjs";
+import { R as getTag } from "./wire-UUwZlUJZ.mjs";
 // src/protocol/codec.ts
 /**
 * Values JSON cannot hold. Each travels as a tagged object: the reserved key `$` holds a short tag

package/dist/_chunks/{infer-BIVT5aDz.mjs → form-status-CRfnB7WT.mjs}

@@ -591,4 +591,49 @@ function findProblem(node) {
 	}
 	return null;
 }
-export { transformActions as a, hasModuleDirective as i, ActionCompileError as n, getActionId as r, inferStrategy as t };
+// src/compiler/form-status.ts
+/**
+* Points a client module's `useFormStatus` import from `react-dom` at islx's hook, which also
+* reports a server component's form around an island (`@farm.js/islx/react` `useFormStatus`).
+* Both builds rewrite it, so the server and the browser render the same hook. A namespace import
+* (`ReactDOM.useFormStatus()`) keeps React's.
+*/
+const HOOK = "useFormStatus";
+function importedName(specifier) {
+	const imported = specifier.imported;
+	return imported?.type === "Identifier" ? imported.name : imported?.value;
+}
+/** Applies the rewrite to `output`; true when the module imported the hook. */
+function rewriteFormStatusImport(program, code, output, from) {
+	let changed = false;
+	for (const node of program.body ?? []) {
+		if (node.type !== "ImportDeclaration" || node.source?.value !== "react-dom") continue;
+		if (node.importKind === "type") continue;
+		const specifiers = node.specifiers ?? [];
+		const hooks = specifiers.filter((specifier) => specifier.type === "ImportSpecifier" && specifier.importKind !== "type" && importedName(specifier) === HOOK);
+		if (hooks.length === 0) continue;
+		const others = specifiers.filter((specifier) => !hooks.includes(specifier));
+		const defaults = others.filter((specifier) => specifier.type !== "ImportSpecifier");
+		const named = others.filter((specifier) => specifier.type === "ImportSpecifier");
+		const text = (specifier) => code.slice(specifier.start, specifier.end);
+		const clause = [...defaults.map(text), ...named.length > 0 ? [`{ ${named.map(text).join(", ")} }`] : []].join(", ");
+		const lines = [...clause ? [`import ${clause} from "react-dom";`] : [], `import { ${hooks.map((hook) => `${HOOK} as ${hook.local.name}`).join(", ")} } from ${JSON.stringify(from)};`];
+		output.overwrite(node.start, node.end, lines.join("\n"));
+		changed = true;
+	}
+	return changed;
+}
+/** The rewrite for a framework's own transform: the module's new code and map, or null. */
+function rewriteFormStatusImports(options) {
+	if (!options.code.includes(HOOK)) return null;
+	const output = new MagicString(options.code);
+	if (!rewriteFormStatusImport(options.parse(options.code), options.code, output, options.from ?? "@farm.js/islx/react")) return null;
+	return {
+		code: output.toString(),
+		map: output.generateMap({
+			source: options.id,
+			hires: true
+		})
+	};
+}
+export { getActionId as a, ActionCompileError as i, rewriteFormStatusImports as n, hasModuleDirective as o, inferStrategy as r, transformActions as s, rewriteFormStatusImport as t };

package/dist/_chunks/forms-CCDY9QHC.mjs

@@ -0,0 +1,63 @@
+import { B as stripRuntimeFields, z as readPostedAction } from "./wire-UUwZlUJZ.mjs";
+import { t as createServerReference } from "./actions-DAzd4PpV.mjs";
+// src/client/forms.ts
+/**
+* Forms written in server components submit without reloading the page once JavaScript runs.
+* No island owns them, so nothing else would: a submit of a form that posts an action is sent as
+* a call, and the page refreshes as after any action, keeping island state. Forms inside islands
+* are React's, which handles them first.
+*/
+let enhanced = false;
+/** No submission in flight. */
+const IDLE_FORM_STATUS = Object.freeze({
+	pending: false,
+	data: null,
+	method: null,
+	action: null
+});
+const statuses = /* @__PURE__ */ new WeakMap();
+const listeners = /* @__PURE__ */ new Set();
+function setStatus(form, status) {
+	if (status) statuses.set(form, status);
+	else statuses.delete(form);
+	for (const listener of listeners) listener();
+}
+/** The submission in flight for a server form, or the idle status. */
+function getServerFormStatus(form) {
+	return statuses.get(form) ?? IDLE_FORM_STATUS;
+}
+/** Calls `listener` whenever a server form starts or settles a submission. */
+function subscribeServerForms(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+/** Starts handling server-component forms on this page. Safe to call more than once. */
+function enhanceForms() {
+	if (enhanced) return;
+	enhanced = true;
+	document.addEventListener("submit", (event) => {
+		if (event.defaultPrevented || !(event.target instanceof HTMLFormElement)) return;
+		const form = event.target;
+		const submitter = event.submitter ?? null;
+		const data = new FormData(form, submitter);
+		const posted = readPostedAction(data);
+		if (!posted) return;
+		event.preventDefault();
+		stripRuntimeFields(data);
+		form.setAttribute("aria-busy", "true");
+		const action = createServerReference(posted.id, posted.token);
+		setStatus(form, {
+			pending: true,
+			data,
+			method: form.method || "get",
+			action
+		});
+		action(data).then(() => form.reset()).catch((error) => console.error("[islx] The form's action failed:", error)).finally(() => {
+			form.removeAttribute("aria-busy");
+			setStatus(form, null);
+		});
+	});
+}
+export { subscribeServerForms as i, enhanceForms as n, getServerFormStatus as r, IDLE_FORM_STATUS as t };