@farm.js/islx 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.0.6
+
+Server action interceptor, early clicks on TanStack Start, library islands under pnpm.
+
+- `setActionInterceptor((call, next) => …)` from `@farm.js/islx/client` wraps every server
+  action call, references decoded from props included. It sees the call when it is made
+  (`{ id, name, args }`) and `next` sends it in queue order, so a framework can unwrap what its
+  server side adds to a result (cache invalidations, a query's cache entry, a declared failure).
+- TanStack Start: a click on a button, or a form submit, in an island before it hydrates is held
+  and replayed, as in a plain islx app (the pre-hydration script goes in the root route's head).
+- A library's `"use client"` components (islands the Vite plugin makes in a bundled server build)
+  import islx's island runtime from the app instead of from the library's folder. Under pnpm the
+  library's folder in the store cannot see `@farm.js/islx`, so the server build failed to resolve
+  `@farm.js/islx/react`; now it gets the same copy the app's pages use.
+
 ## 0.0.5
 
 TanStack Start.

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.5. React, Vite and TanStack Start are supported; other renderers and framework
+> Status: 0.0.6. 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).
 
@@ -186,7 +186,9 @@ export default defineConfig({ plugins: [tanstackStart(), react(), islxTanstackSt
 Routes, loaders and layouts render on the server. The browser loads islx and the `"use client"`
 components a page uses (the modules under `src/`), not the router, the route tree or loader
 data: Start's client entry becomes islx's, `<Scripts />` still loads it, and the router is not
-dehydrated. Links move between routes without loading a document. A loader's promise passed
+dehydrated. A click on a button (or a form submit) in an island before it hydrates is held and
+replayed. Links move between
+routes without loading a document. A loader's promise passed
 unawaited to a client component streams in. Islands call Start server functions
 (`createServerFn`) and islx server actions (`"use server"`).
 
@@ -197,8 +199,6 @@ unawaited to a client component streams in. Islands call Start server functions
 - Client components run without a router in the browser: they cannot use `useRouter`,
   `useNavigate` or `<Link>` (render plain `<a>` links; the server renders `<Link>` in routes).
 - A library's `"use client"` components render as server HTML.
-- A click before the islands hydrate is not replayed yet (the `interaction` strategy hydrates on
-  it, but the click itself is dropped).
 - Start sends a bot the whole page before any of it; people get it streamed.
 - Start needs Node 22.12 or later.
 

package/dist/_chunks/{actions-8RQfrM-p.mjs → actions-C-IwUCKU.mjs}

@@ -151,6 +151,10 @@ function state() {
 function setActionNavigator(navigator) {
 	state().navigator = navigator;
 }
+/** Installs the framework's interceptor for server action calls (one; a later call replaces it). */
+function setActionInterceptor(interceptor) {
+	state().interceptor = interceptor;
+}
 /** Encodes an action passed back to the server as an argument. */
 function encodeFunction(value) {
 	const reference = state().info.get(value);
@@ -252,7 +256,28 @@ function createReference(reference) {
 			reference.redirect = void 0;
 			return call(reference, args);
 		};
-		const result = client.queue.then(run).then((value) => {
+		const previous = client.queue;
+		const queued = () => previous.then(run);
+		const interceptor = client.interceptor;
+		let sent;
+		if (!interceptor) sent = queued();
+		else {
+			let stale = false;
+			const next = () => queued().then((value) => {
+				if (value === STALE) stale = true;
+				return value;
+			});
+			try {
+				sent = Promise.resolve(interceptor({
+					id,
+					name,
+					args: [...reference.bound, ...args]
+				}, next)).then((value) => stale ? STALE : value);
+			} catch (error) {
+				sent = Promise.reject(error);
+			}
+		}
+		const result = sent.then((value) => {
 			if (value !== STALE) {
 				const { redirect } = reference;
 				emit("actionEnd", {
@@ -303,4 +328,4 @@ function createServerReference(id, token, name) {
 	}
 	return reference;
 }
-export { emit as a, createValueStore as c, defineClientHooks as i, getValueStore as l, decodeActionReference as n, hookEventName as o, setActionNavigator as r, setClientHooks as s, createServerReference as t, valueHeaders as u };
+export { defineClientHooks as a, setClientHooks as c, valueHeaders as d, setActionNavigator as i, createValueStore as l, decodeActionReference as n, emit as o, setActionInterceptor as r, hookEventName as s, createServerReference as t, getValueStore as u };

package/dist/_chunks/{tree-BUkGP4AR.mjs → tree-C47p6khN.mjs}

@@ -1,6 +1,6 @@
 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 { l as getValueStore, t as createServerReference } from "./actions-8RQfrM-p.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-DVOr-OUw.mjs";
 import * as React from "react";
 // src/react/tree.ts

package/dist/_chunks/{vite-DG7hBn8A.mjs → vite-BTzYlEiY.mjs}

@@ -177,6 +177,7 @@ function transformClientModule(options) {
 const RUNTIME_ID = "virtual:islx/runtime";
 /** @internal The browser entry, for a framework whose own entry imports it. */
 const ENTRY_ID = "virtual:islx/client-entry";
+const LIBRARY_RUNTIME_ID = "virtual:islx/react-for-libraries";
 const CLIENT_HOOKS_ID = "virtual:islx/hooks-client";
 const SERVER_HOOKS_ID = "virtual:islx/hooks-server";
 const BROWSER_GLOBALS = /* @__PURE__ */ new Set([
@@ -366,6 +367,7 @@ function islx(options = {}, host = {}) {
 				preamble = resolved.plugins.some((plugin) => plugin.name === "vite:react-virtual-preamble");
 			},
 			resolveId(id) {
+				if (id === LIBRARY_RUNTIME_ID) return this.resolve("@farm.js/islx/react", path.join(config.root, "package.json"), { skipSelf: true });
 				if (id === RUNTIME_ID || id === "virtual:islx/client-entry" || id === CLIENT_HOOKS_ID || id === SERVER_HOOKS_ID) return `\0${id}`;
 			},
 			async load(id) {
@@ -425,7 +427,8 @@ function islx(options = {}, host = {}) {
 							return JSON.stringify(relative);
 						},
 						sideEffects: [RUNTIME_ID],
-						directive: clientDirective
+						directive: clientDirective,
+						...library ? { runtime: LIBRARY_RUNTIME_ID } : {}
 					});
 					if (island) {
 						if (!library) transformActions({

package/dist/client.d.mts

@@ -10,8 +10,24 @@ interface ActionNavigator {
   /** A client navigation to `href`, as the action's redirect. */
   navigate?(href: string): Promise<void> | void;
 }
+/** A call of a server action, as an interceptor sees it. */
+interface ActionCall {
+  id: string;
+  /** The export (or inline function) name, when known. */
+  name?: string;
+  /** The arguments, after any bound with `.bind`. */
+  args: readonly unknown[];
+}
+/**
+ * Wraps every server action call: call `next` to make the request, and return what the caller
+ * gets. A framework uses it to unwrap what its own server side adds to a result (cache
+ * invalidations, a query's cache entry) or to turn a returned error back into one it throws.
+ */
+type ActionInterceptor = (call: ActionCall, next: () => Promise<unknown>) => Promise<unknown>;
 /** Connects actions to the framework's router. */
 declare function setActionNavigator(navigator: ActionNavigator): void;
+/** Installs the framework's interceptor for server action calls (one; a later call replaces it). */
+declare function setActionInterceptor(interceptor: ActionInterceptor | undefined): void;
 /** Decodes an action in a result or props: `{"$":"a","v":id,"b"?:sealed}`. */
 declare function decodeActionReference(object: Record<string, unknown>): AnyFunction | undefined;
 /** The function that calls a server action; one per id and sealed values, so props keep identity. */
@@ -55,4 +71,4 @@ declare const INTERACTION_EVENT = "f:island-interaction";
 declare const REPLAYABLE_SELECTOR = "button,[role=\"button\"],input[type=\"button\"],input[type=\"submit\"],input[type=\"reset\"]";
 /** The inline script's source (no `<script>` tag): pass it to the page's head or bootstrap. */
 declare const PREHYDRATION_SCRIPT: string;
-export { type ActionNavigator, type ClientHookEvent, type ClientHookEvents, type ClientHooks, INTERACTION_EVENT, NAVIGATION_RENDER, type NavigateOptions, type NavigationOptions, PENDING_INTERACTIONS, PREHYDRATION_SCRIPT, REPLAYABLE_SELECTOR, type ValueStore, createServerReference, createValueStore, decodeActionReference, defineClientHooks, enhanceForms, getValueStore, hookEventName, navigate, setActionNavigator, setClientHooks, startNavigation, valueHeaders };
+export { type ActionCall, type ActionInterceptor, type ActionNavigator, type ClientHookEvent, type ClientHookEvents, type ClientHooks, INTERACTION_EVENT, NAVIGATION_RENDER, type NavigateOptions, type NavigationOptions, PENDING_INTERACTIONS, PREHYDRATION_SCRIPT, REPLAYABLE_SELECTOR, type ValueStore, createServerReference, createValueStore, decodeActionReference, defineClientHooks, enhanceForms, getValueStore, hookEventName, navigate, setActionInterceptor, setActionNavigator, setClientHooks, startNavigation, valueHeaders };

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-8RQfrM-p.mjs";
+import { a as defineClientHooks, c as setClientHooks, d as valueHeaders, i as setActionNavigator, l as createValueStore, n as decodeActionReference, o as emit, r as setActionInterceptor, s as hookEventName, t as createServerReference, u as getValueStore } from "./_chunks/actions-C-IwUCKU.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
@@ -194,4 +194,4 @@ function navigate(href, options = {}) {
 	else location.assign(href);
 	return Promise.resolve();
 }
-export { INTERACTION_EVENT, NAVIGATION_RENDER, PENDING_INTERACTIONS, PREHYDRATION_SCRIPT, REPLAYABLE_SELECTOR, createServerReference, createValueStore, decodeActionReference, defineClientHooks, enhanceForms, getValueStore, hookEventName, navigate, setActionNavigator, setClientHooks, startNavigation, valueHeaders };
+export { INTERACTION_EVENT, NAVIGATION_RENDER, PENDING_INTERACTIONS, PREHYDRATION_SCRIPT, REPLAYABLE_SELECTOR, createServerReference, createValueStore, decodeActionReference, defineClientHooks, enhanceForms, getValueStore, hookEventName, navigate, setActionInterceptor, setActionNavigator, setClientHooks, startNavigation, valueHeaders };

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-8RQfrM-p.mjs";
+import { d as valueHeaders, o as emit, t as createServerReference, u as getValueStore } from "../_chunks/actions-C-IwUCKU.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 { i as getContexts, o as isolateIslands, u as withinClientRoot } from "../_chunks/island-DVOr-OUw.mjs";
-import { i as createServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, o as updateServerTrees, r as createServerTreeElement } from "../_chunks/tree-BUkGP4AR.mjs";
+import { i as createServerTreeLayout, n as PAYLOAD_ONLY_ATTRIBUTE, o as updateServerTrees, r as createServerTreeElement } from "../_chunks/tree-C47p6khN.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";

package/dist/react/server.mjs

@@ -5,7 +5,7 @@ import { i as encodeActionReference } from "../_chunks/actions-BuS5jDi0.mjs";
 import { t as getBuildDefaults } from "../_chunks/build-COIcs7wm.mjs";
 import { a as parseHeldValues, n as addressValues, o as selectValuesToSend, r as escapeScriptJson } from "../_chunks/values-37UIzxM0.mjs";
 import { c as setIslandServerHook, i as getContexts, l as setRenderStateResolver, n as createIsland, o as isolateIslands, r as getClientReference, s as runtimeTagged, t as IslandsProvider, u as withinClientRoot } from "../_chunks/island-DVOr-OUw.mjs";
-import { a as renderServerTree, n as PAYLOAD_ONLY_ATTRIBUTE, t as Outlet } from "../_chunks/tree-BUkGP4AR.mjs";
+import { a as renderServerTree, n as PAYLOAD_ONLY_ATTRIBUTE, t as Outlet } from "../_chunks/tree-C47p6khN.mjs";
 import * as React from "react";
 // src/react/server.ts
 /**

package/dist/react.mjs

@@ -1,3 +1,3 @@
 import { n as createIsland, o as isolateIslands, t as IslandsProvider, u as withinClientRoot } from "./_chunks/island-DVOr-OUw.mjs";
-import { a as renderServerTree, t as Outlet } from "./_chunks/tree-BUkGP4AR.mjs";
+import { a as renderServerTree, t as Outlet } from "./_chunks/tree-C47p6khN.mjs";
 export { IslandsProvider, Outlet, createIsland, isolateIslands, renderServerTree, withinClientRoot };

package/dist/tanstack-start.mjs

@@ -1,4 +1,4 @@
-import { n as islx, t as ENTRY_ID } from "./_chunks/vite-DG7hBn8A.mjs";
+import { n as islx, t as ENTRY_ID } from "./_chunks/vite-BTzYlEiY.mjs";
 import { normalizePath } from "vite";
 // src/tanstack-start/index.ts
 /**
@@ -30,7 +30,9 @@ export default createServerEntry({
 });
 `;
 const routerWrapper = (routerPath) => `import * as app from ${JSON.stringify(routerPath)};
+import { PREHYDRATION_SCRIPT } from "@farm.js/islx/client";
 export * from ${JSON.stringify(routerPath)};
+const islxHead = new WeakSet();
 export async function getRouter(...args) {
   const router = await app.getRouter(...args);
   const lifecycle = (router.serverSsrLifecycle ??= {});
@@ -38,6 +40,16 @@ export async function getRouter(...args) {
   (lifecycle.onServerSsrAttach ??= []).push((ssr) => {
     ssr.dehydrate = async () => ssr.disableHydration();
   });
+  const root = router.routeTree;
+  if (root && !islxHead.has(root)) {
+    islxHead.add(root);
+    const head = root.options.head;
+    const add = (own) => ({ ...own, scripts: [{ children: PREHYDRATION_SCRIPT }, ...(own?.scripts ?? [])] });
+    root.options.head = (context) => {
+      const own = head?.(context);
+      return own && typeof own.then === "function" ? own.then(add) : add(own);
+    };
+  }
   return router;
 }
 `;

package/dist/vite.mjs

@@ -1 +1 @@
-export { t as ENTRY_ID, n as default, n as islx, r as resolveDirectives, i as serializeHooks } from "./_chunks/vite-DG7hBn8A.mjs";
+export { t as ENTRY_ID, n as default, n as islx, r as resolveDirectives, i as serializeHooks } from "./_chunks/vite-BTzYlEiY.mjs";

package/package.json

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