gemi 0.109.0 → 0.110.0

package/dist/client/index.js

@@ -1,6 +1,6 @@
 import { A as useLocation, B as QueryManagerProvider, C as useRoute, D as I18nProvider, E as I18nContext, G as retryDelayFor, H as pickDefined, I as toVariantKey, J as Subject, K as shouldRetryQuery, L as applyParams$1, M as isAbsoluteUrl, O as ServerDataContext, P as Action, R as QueryConfigContext, S as routeDataUrl, T as useNavigate, U as DEFAULT_STALE_TIME, V as USER_QUERY_CONFIG_KEYS, W as isRetryableQueryError, _ as loadDictionary, a as useRouteTransition, b as setActiveLocale, c as ComponentsContext, d as loadViewModule, f as subscribeViewModules, g as recoverFromChunkLoadError, h as isChunkLoadError, i as RouteTransitionProvider, j as domainUrl, k as ServerDataProvider, l as ComponentsProvider, m as configureChunkLoadRecovery, n as useTheme, o as ClientRouterContext, p as CHUNK_RELOAD_MARKER, q as QueryError, r as m, s as ClientRouterProvider, t as ThemeProvider, u as initialViewModulesReady, v as loadDictionaryForRender, w as useSearchParams, x as readRoutePayload, y as registerDictionary, z as QueryManagerContext } from "../chunks/ThemeProvider-BgLyzzOL.js";
 import { n as RouteStateContext, r as RouteStateProvider, t as useParams } from "../chunks/useParams-BN3XXfmG.js";
-import { Fragment, StrictMode, Suspense, createContext, createElement, isValidElement, memo, use, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
+import { Fragment, StrictMode, Suspense, createContext, createElement, isValidElement, lazy, memo, use, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createRoot as createRoot$1, hydrateRoot } from "react-dom/client";
 //#region client/ServerQueryContext.tsx
@@ -2645,71 +2645,125 @@ function useAppIdMissmatch() {
 }
 //#endregion
 //#region client/islands.tsx
+/** @internal The element an island's static children land in. */
+var ISLAND_SLOT_TAG = "gemi-slot";
+/** @internal On the empty slot an island's own render leaves for its children. */
+var ISLAND_SLOT_ATTRIBUTE = "data-slot";
+/** @internal On the template holding the children the page tree rendered. */
+var ISLAND_SLOT_TEMPLATE_ATTRIBUTE = "data-gemi-slot";
 /** The property gemi's Vite plugin attaches to an island's loader. */
 var ISLAND_MODULE_KEY = "gemiIsland";
 var CONTEXT_KEY = Symbol.for("gemi.staticRender");
 /**
-* @internal Provided by the view router around a static view's render; `null`
-* everywhere else, which is how `island()` knows to render a plain component.
-*
-* On `globalThis` rather than a module-level `createContext`: the published
-* package bundles `gemi/client` and the server side separately, so a plain
-* module singleton would give the provider and the islands two different
+* @internal On `globalThis` rather than a module-level `createContext`: the
+* published package bundles `gemi/client` and the server side separately, so a
+* plain module singleton would give the provider and the islands two different
 * context objects.
 */
 var StaticRenderContext = globalThis[CONTEXT_KEY] ??= createContext(null);
-function serialiseProps(props, option) {
-	if (!option) return;
-	let value;
-	if (option === true) {
-		const { children: _children, ...rest } = props ?? {};
-		value = rest;
-	} else value = option(props);
-	return JSON.stringify(value);
-}
+var isProduction = () => typeof process !== "undefined" && process.env.NODE_ENV === "production";
 /**
-* Declares an interactive part of a page.
-*
-* ```tsx
-* export const NavMenu = island("nav-menu", NavMenuView, () => import("./navMenu.island"));
-* ```
-*
-* - In a **static** view (`this.view(...).static()`), it server-renders
-*   `Component` inside a `<gemi-island name="nav-menu">` marker and records
-*   that the page uses it. The document then carries a tiny loader plus the
-*   island's own module — and only for islands that rendered. The module's
-*   default export (`IslandMount`) is called once per marker.
-* - In a **hydrated** view, it renders `Component` as an ordinary component and
-*   loads nothing: the same component works in both kinds of page.
-*
-* The client module must be a file named `*.island.ts` (or `.tsx`/`.js`)
-* under `app/`, imported exactly as `() => import("./path.island")`: gemi's
-* Vite plugin finds that call, builds the file as its own entry, and tells the
-* server which built file it is.
-*
-* `name` identifies the island in the markup and must be unique per module.
+* Throws when `value` would not survive `JSON.stringify` and `JSON.parse`
+* unchanged, naming the prop. An island's props cross from the server to the
+* browser as JSON: a function would vanish and a `Date` would arrive as a
+* string, so the island would hydrate with other props than it rendered with.
 */
-function island(name, Component, loader, options = {}) {
-	if (typeof name !== "string" || name.length === 0) throw new Error("island(): the name must be a non-empty string.");
+function assertSerialisableProps(value, island) {
+	const seen = /* @__PURE__ */ new Set();
+	const fail = (path, what) => {
+		throw new Error(`${island}: the prop \`${path}\` is ${what}. An island's props are sent to the browser as JSON, so they must be plain data: strings, finite numbers, booleans, null, arrays and plain objects. Pass static markup as children instead.`);
+	};
+	const walk = (v, path, inArray) => {
+		switch (typeof v) {
+			case "string":
+			case "boolean": return;
+			case "number":
+				if (!Number.isFinite(v)) fail(path, String(v));
+				return;
+			case "undefined":
+				if (inArray) fail(path, "undefined (it would arrive as null)");
+				return;
+			case "function":
+				fail(path, "a function");
+				return;
+			case "symbol":
+			case "bigint":
+				fail(path, `a ${typeof v}`);
+				return;
+		}
+		if (v === null) return;
+		const object = v;
+		if (seen.has(object)) fail(path, "a circular reference");
+		if ("$$typeof" in object) fail(path, "a React element");
+		seen.add(object);
+		if (Array.isArray(object)) object.forEach((item, i) => walk(item, `${path}[${i}]`, true));
+		else {
+			const proto = Object.getPrototypeOf(object);
+			if (proto !== Object.prototype && proto !== null) fail(path, `an instance of ${proto?.constructor?.name || "a class"}`);
+			for (const [key, item] of Object.entries(object)) walk(item, path ? `${path}.${key}` : key, false);
+		}
+		seen.delete(object);
+	};
+	walk(value, "", false);
+}
+var hasChildren = (children) => children !== void 0 && children !== null && typeof children !== "boolean";
+function island(loader, options = {}) {
+	if (typeof loader !== "function") throw new Error("island() takes `() => import(\"./Component\")` and options since gemi 0.110. The island(\"name\", Component, () => import(\"./x.island\")) form was removed: see UPGRADE.md.");
+	const exportName = options.export ?? "default";
 	const load = options.load ?? "eager";
+	const key = loader[ISLAND_MODULE_KEY];
+	const label = `island(${key ?? "() => import(…)"}${exportName === "default" ? "" : `#${exportName}`})`;
+	const pick = (mod) => {
+		const component = mod?.[exportName];
+		if (typeof component !== "function" && (typeof component !== "object" || component === null)) throw new Error(`${label}: the module has no component export \`${exportName}\`.`);
+		return component;
+	};
+	let inline;
+	const inlineComponent = () => inline ??= loader.gemiModule ? pick(loader.gemiModule) : lazy(() => loader().then((mod) => ({ default: pick(mod) })));
+	const register = (collector) => {
+		const known = collector.islands.findIndex((entry) => key !== void 0 && entry.module === key && entry.export === exportName && entry.load === load);
+		return known !== -1 ? known : collector.islands.push({
+			module: key,
+			export: exportName,
+			load
+		}) - 1;
+	};
+	const start = (collector, props) => {
+		const { children, ...rest } = props;
+		if (!isProduction()) assertSerialisableProps(rest, label);
+		const uid = `i${collector.count++}-`;
+		const html = (loader.gemiModule ? Promise.resolve(pick(loader.gemiModule)) : loader().then(pick)).then((Component) => collector.render(createElement(StaticRenderContext.Provider, { value: null }, hasChildren(children) ? createElement(Component, rest, createElement(ISLAND_SLOT_TAG, {
+			[ISLAND_SLOT_ATTRIBUTE]: uid,
+			style: { display: "contents" }
+		})) : createElement(Component, rest)), uid));
+		html.catch(() => {});
+		const json = JSON.stringify(rest);
+		return {
+			html,
+			index: register(collector),
+			uid,
+			props: json === "{}" ? void 0 : json
+		};
+	};
 	function Island(props) {
 		const collector = useContext(StaticRenderContext);
-		if (!collector) return createElement(Component, props);
-		const module = loader[ISLAND_MODULE_KEY];
-		if (typeof module !== "string") throw new Error(`island("${name}"): the client module could not be identified. Pass the loader as \`() => import("./name.island")\` — a file named *.island.ts(x) under app/ — so gemi's Vite plugin can map it to its built file.`);
-		const known = collector.islands.get(name);
-		if (known && known.module !== module) throw new Error(`island("${name}") is declared for two modules (${known.module} and ${module}). Island names must be unique.`);
-		collector.islands.set(name, {
-			module,
-			load
+		if (!collector) return createElement(inlineComponent(), props);
+		let instance = collector.instances.get(props);
+		if (!instance) {
+			instance = start(collector, props);
+			collector.instances.set(props, instance);
+		}
+		const marker = createElement("gemi-island", {
+			"data-island": instance.index,
+			"data-uid": instance.uid,
+			"data-props": instance.props,
+			style: { display: "contents" },
+			dangerouslySetInnerHTML: { __html: use(instance.html) }
 		});
-		return createElement("gemi-island", {
-			name,
-			"data-props": serialiseProps(props, options.props),
-			style: { display: "contents" }
-		}, createElement(Component, props));
+		if (!hasChildren(props.children)) return marker;
+		return createElement(Fragment, null, marker, createElement("template", { [ISLAND_SLOT_TEMPLATE_ATTRIBUTE]: instance.uid }, props.children));
 	}
-	Island.displayName = `Island(${name})`;
+	Island.displayName = label;
 	return Island;
 }
 //#endregion