@voltro/web 0.50.1 → 0.52.0

package/dist/index.js

@@ -1,10 +1,11 @@
-import { t as e } from "./globalContext-d4A-ugDg.js";
+import { t as e } from "./globalContext-AuflFFmy.js";
 import { AppClientsContext as t, useAppClient as n } from "./hooks.js";
-import { a as r, c as i, i as a, l as o, o as s, r as c, s as l, u } from "./frameworkBoot-CV_o2tIk.js";
-import { a as d, c as f, i as p, l as m, o as h, u as g } from "./defaultFallbacks-B4Ak-R6R.js";
-import { a as _, i as ee, n as te, r as ne, t as re } from "./mount-nudb4UCl.js";
-import { c as ie, d as ae, h as oe, l as se, p as ce, u as le } from "./routerState-DAT472IC.js";
-import { A as ue, B as de, C as fe, D as pe, E as me, F as he, G as ge, H as _e, I as v, K as y, L as b, M as x, N as S, O as C, P as w, R as T, S as E, T as D, U as O, V as k, W as A, _ as j, a as M, b as N, c as P, d as F, f as I, g as ve, h as ye, i as be, j as xe, k as Se, l as Ce, m as we, n as Te, o as Ee, p as De, q as Oe, r as ke, s as Ae, t as je, u as Me, v as Ne, w as Pe, x as Fe, y as Ie, z as Le } from "./serverContext-38JTbYPa.js";
+import { a as r, c as i, i as a, l as o, o as s, r as c, s as l, u } from "./frameworkBoot-CnE9vzLQ.js";
+import { a as d, c as f, i as p, l as m, o as h, u as g } from "./defaultFallbacks-SQ45vAhz.js";
+import { getIslandComponent as _, hydrateIslandsOnPage as ee, island as te } from "./islands.js";
+import { c as ne, d as re, h as ie, l as ae, p as oe, u as se } from "./routerState-DAT472IC.js";
+import { mount as ce, noticeIslandsShipTheFullBundle as le } from "./mount.js";
+import { A as ue, B as de, C as fe, D as pe, E as me, F as he, G as ge, H as _e, I as v, K as y, L as b, M as x, N as S, O as C, P as w, R as T, S as E, T as D, U as O, V as k, W as A, _ as j, a as M, b as N, c as P, d as F, f as I, g as ve, h as ye, i as be, j as xe, k as Se, l as Ce, m as we, n as Te, o as Ee, p as De, q as Oe, r as ke, s as Ae, t as je, u as Me, v as Ne, w as Pe, x as Fe, y as Ie, z as Le } from "./serverContext-CzmZZwuQ.js";
 import { Component as Re, Suspense as ze, createElement as L, use as Be, useCallback as Ve, useContext as He, useSyncExternalStore as Ue } from "react";
 import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
 export * from "@voltro/client";
@@ -21,8 +22,8 @@ var We = ({ value: e, fallback: t, children: n, errorFallback: r }) => /* @__PUR
 		})
 	})
 }), V = ({ body: e }) => /* @__PURE__ */ z("script", { dangerouslySetInnerHTML: { __html: e } }), Ge = ({ value: e, errorFallback: t, children: n }) => {
-	let r = Be(e), i = le(e), a = oe(r);
-	return a === void 0 ? /* @__PURE__ */ B(R, { children: [i === void 0 ? null : /* @__PURE__ */ z(V, { body: ae(i, r) }), n(r)] }) : /* @__PURE__ */ B(R, { children: [i === void 0 ? null : /* @__PURE__ */ z(V, { body: se(i, a) }), t] });
+	let r = Be(e), i = se(e), a = ie(r);
+	return a === void 0 ? /* @__PURE__ */ B(R, { children: [i === void 0 ? null : /* @__PURE__ */ z(V, { body: re(i, r) }), n(r)] }) : /* @__PURE__ */ B(R, { children: [i === void 0 ? null : /* @__PURE__ */ z(V, { body: ae(i, a) }), t] });
 }, Ke = class extends Re {
 	state = { error: void 0 };
 	static getDerivedStateFromError(e) {
@@ -231,4 +232,4 @@ var We = ({ value: e, fallback: t, children: n, errorFallback: r }) => /* @__PUR
 	};
 }, ct = "framework-web";
 //#endregion
-export { t as AppClientsContext, We as Await, $e as BlogLayout, p as FallbackStringsProvider, Ye as Image, qe as ImageConfigProvider, Ee as Link, Ae as LoaderCache, P as LoaderDataContext, Ce as NO_LOADER_DATA, i as NavigationIndicator, Le as NotFoundError, Me as PAGE_SLOT_ATTR, F as PageSlot, I as PlainLink, De as RENDER_MODES, o as ReconnectContext, de as RedirectError, we as Router, ye as RouterContext, je as ServerRequestContext, Te as ServerRequestProvider, Y as THEME_COOKIE, ct as WEB_NAME, J as canonicalUrl, ve as compileRoute, d as defaultFallbackStrings, ie as defer, j as externalUrl, Ne as findNotFound, c as formatPrintf, ne as getIslandComponent, ge as getRouteSnapshot, f as getStatuses, ee as hydrateIslandsOnPage, a as installBrowserConsoleBridge, r as installServerLogRelay, ce as isDeferredLoaderResult, k as isNotFound, _e as isRedirect, _ as island, K as joinUrl, Ie as lazyPageRoute, N as loaderCacheKey, q as localizedPath, Fe as matchRoute, re as mount, G as normalizePath, O as notFound, te as noticeIslandsShipTheFullBundle, E as pageRoute, ke as parseCookieHeader, H as passthroughImageLoader, fe as preloadRouteModule, m as pushStatus, A as redirect, s as registerClientTrace, Pe as renderRouterProviderTree, D as resolveAnchorNavigation, me as resolveMeta, pe as segmentLoaderKey, et as seoAlternates, y as setRouteSnapshot, C as sortRoutesByPriority, Oe as subscribeRouteSnapshot, g as subscribeStatuses, l as subscribeTraceErrors, n as useAppClient, Se as useBlocker, h as useFallbackStrings, ue as useLoaderData, xe as useLocation, x as useNavigate, S as useOptionalLoaderData, w as useParams, he as usePrefetch, u as useReconnect, be as useSearchParams, M as useServerRequest, v as useSetSearchParams, st as useTheme, b as withHash, T as withQuery };
+export { t as AppClientsContext, We as Await, $e as BlogLayout, p as FallbackStringsProvider, Ye as Image, qe as ImageConfigProvider, ke as Link, be as LoaderCache, M as LoaderDataContext, Ee as NO_LOADER_DATA, i as NavigationIndicator, Le as NotFoundError, Ae as PAGE_SLOT_ATTR, P as PageSlot, Ce as PlainLink, Me as RENDER_MODES, o as ReconnectContext, de as RedirectError, F as Router, I as RouterContext, Y as THEME_COOKIE, ct as WEB_NAME, J as canonicalUrl, De as compileRoute, v as decodeSearchParams, d as defaultFallbackStrings, ne as defer, b as encodeSearchParams, we as externalUrl, ye as findNotFound, c as formatPrintf, _ as getIslandComponent, ge as getRouteSnapshot, f as getStatuses, ee as hydrateIslandsOnPage, a as installBrowserConsoleBridge, r as installServerLogRelay, oe as isDeferredLoaderResult, k as isNotFound, _e as isRedirect, te as island, K as joinUrl, ve as lazyPageRoute, j as loaderCacheKey, q as localizedPath, Ne as matchRoute, ce as mount, G as normalizePath, O as notFound, le as noticeIslandsShipTheFullBundle, Ie as pageRoute, je as parseCookieHeader, H as passthroughImageLoader, N as preloadRouteModule, m as pushStatus, A as redirect, s as registerClientTrace, Fe as renderRouterProviderTree, E as resolveAnchorNavigation, fe as resolveMeta, T as searchParamsToObject, Pe as segmentLoaderKey, et as seoAlternates, y as setRouteSnapshot, D as sortRoutesByPriority, Oe as subscribeRouteSnapshot, g as subscribeStatuses, l as subscribeTraceErrors, n as useAppClient, me as useBlocker, h as useFallbackStrings, pe as useLoaderData, C as useLocation, Se as useNavigate, ue as useOptionalLoaderData, xe as useParams, x as usePrefetch, u as useReconnect, Te as useSearchParams, S as useSetSearchParams, st as useTheme, w as withHash, he as withQuery };

package/dist/islands.d.ts

@@ -0,0 +1,66 @@
+import { ComponentType } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Look up a registered island Component by name. Returns undefined if
+ * the name isn't registered (typically means the user forgot to import
+ * the island file in this bundle).
+ */
+export declare const getIslandComponent: (name: string) => ComponentType<unknown> | undefined;
+
+/**
+ * Client-side runtime: scan the document for `[data-voltro-island]`
+ * markers and schedule each for hydration per its strategy. Called by the
+ * per-page islands entry, and by `@voltro/web/mount` when an islands page
+ * is reached through the full app bundle (SPA navigation). Idempotent —
+ * running twice is a no-op (we mark elements as visited).
+ */
+export declare const hydrateIslandsOnPage: (options?: HydrateIslandsOptions) => void;
+
+export declare interface HydrateIslandsOptions {
+    /** Wrap every island root — the per-page islands entry of a page whose
+     *  islands use framework hooks passes a `<VoltroRuntimeProvider>` here so
+     *  a `useSubscription` island gets a live runtime. Purely presentational
+     *  entries pass nothing and never load the client core. */
+    readonly wrap?: (children: ReactNode) => ReactNode;
+}
+
+export declare type HydrateStrategy = 
+/** Hydrate as soon as the client runtime mounts (after main script load). */
+'load'
+/** Hydrate when the browser is idle (via `requestIdleCallback`, with a
+*  setTimeout fallback for browsers that lack it). */
+| 'idle'
+/** Hydrate when the element scrolls into the viewport (IntersectionObserver). */
+| 'visible'
+/** Hydrate on the first pointer / keyboard interaction with the element. */
+| 'interaction'
+/** Never hydrate. Useful for fully-static islands (e.g. SSR-only data
+*  display that never changes). */
+| 'never'
+/** CLIENT-ONLY: the server renders an empty placeholder (never the
+*  component — a browser-only lib touching `window` in render would
+*  crash the SSR pass), and the client mounts fresh with `createRoot`
+*  instead of hydrating. Astro's `client:only`. */
+| 'only';
+
+/**
+ * Wrap a Component as an island. The returned Component renders the
+ * inner content wrapped in a marker `<div data-voltro-island>` that
+ * carries the island's name + props + hydrate strategy. The same
+ * call also registers the Component under its name so the client
+ * runtime can find it when hydrating.
+ */
+export declare const island: <P extends Record<string, unknown>>(Component: ComponentType<P>, options: IslandOptions) => ComponentType<P>;
+
+export declare interface IslandOptions {
+    /** Stable id of this island. Must be unique within an app. The framework
+     *  uses it to match the server-rendered marker with the client-side
+     *  Component. */
+    readonly name: string;
+    /** When the client runtime should hydrate this island. Defaults to
+     *  `visible` — matches Astro's default and is the best perf/UX balance. */
+    readonly hydrate?: HydrateStrategy;
+}
+
+export { }

package/dist/islands.js

@@ -0,0 +1,60 @@
+import { createElement as e } from "react";
+import { createRoot as t, hydrateRoot as n } from "react-dom/client";
+//#region src/islands.tsx
+var r = /* @__PURE__ */ new Map(), i = (t, n) => {
+	r.set(n.name, t);
+	let i = n.hydrate ?? "visible", a = (r) => e("div", {
+		"data-voltro-island": "",
+		"data-island-name": n.name,
+		"data-island-hydrate": i,
+		"data-island-props": o(r, n.name)
+	}, i === "only" ? null : e(t, r));
+	return a.displayName = `Island(${n.name})`, a;
+}, a = (e) => r.get(e), o = (e, t) => {
+	if (process.env.NODE_ENV !== "production" && typeof e == "object" && e) for (let [n, r] of Object.entries(e)) {
+		let e = typeof r == "function" ? "a function" : r instanceof Date ? "a Date (arrives as an ISO string)" : r instanceof Map || r instanceof Set ? "a Map/Set (arrives as {})" : void 0;
+		e !== void 0 && console.warn(`[voltro] island "${t}" prop "${n}" is ${e} — island props cross an HTML attribute as JSON. Pass a JSON shape (string/number/boolean/array/plain object) and reconstruct richer types inside the island.`);
+	}
+	return JSON.stringify(e ?? {}).replace(/</g, "\\u003c");
+}, s = (e) => {
+	if (!e) return {};
+	try {
+		return JSON.parse(e);
+	} catch {
+		return {};
+	}
+}, c = (i) => {
+	let a = document.querySelectorAll("[data-voltro-island]:not([data-voltro-hydrated])");
+	for (let o of a) {
+		let a = o.dataset.islandName ?? "", c = r.get(a);
+		if (!c) {
+			console.warn(`[voltro] island "${a}" referenced in DOM but not registered. Did the island file get imported in this bundle?`);
+			continue;
+		}
+		let l = s(o.dataset.islandProps ?? null), u = o.dataset.islandHydrate ?? "visible";
+		o.setAttribute("data-voltro-hydrated", "pending");
+		let d = () => {
+			if (o.getAttribute("data-voltro-hydrated") === "done") return;
+			o.setAttribute("data-voltro-hydrated", "done");
+			let r = i?.wrap === void 0 ? e(c, l) : i.wrap(e(c, l));
+			u === "only" ? t(o).render(r) : n(o, r);
+		};
+		if (u === "load" || u === "only") d();
+		else if (u === "idle") {
+			let e = globalThis.requestIdleCallback;
+			e ? e(d) : setTimeout(d, 0);
+		} else if (u === "visible") {
+			let e = new IntersectionObserver((t) => {
+				t.some((e) => e.isIntersecting) && (e.disconnect(), d());
+			}, { rootMargin: "64px" });
+			e.observe(o);
+		} else if (u === "interaction") {
+			let e = () => {
+				o.removeEventListener("pointerdown", e), o.removeEventListener("keydown", e), d();
+			};
+			o.addEventListener("pointerdown", e, { passive: !0 }), o.addEventListener("keydown", e);
+		}
+	}
+};
+//#endregion
+export { a as getIslandComponent, c as hydrateIslandsOnPage, i as island };

package/dist/mount.js

@@ -1,2 +1,37 @@
-import { n as e, t } from "./mount-nudb4UCl.js";
-export { t as mount, e as noticeIslandsShipTheFullBundle };
+import { t as e } from "./frameworkBoot-CnE9vzLQ.js";
+import { hydrateIslandsOnPage as t } from "./islands.js";
+import { o as n, r, t as i } from "./routerState-DAT472IC.js";
+import { StrictMode as a } from "react";
+import { createRoot as o, hydrateRoot as s } from "react-dom/client";
+import { applyPreloadSeeds as c, applyStoreSeeds as l } from "@voltro/client";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/mount.tsx
+var d = () => !1, f = "__voltroIslandsBundleNoticeShown", p = (e) => {
+	if (!e) return;
+	let t = globalThis;
+	t[f] !== !0 && (t[f] = !0, console.info("[voltro] islands mode: hydration is scoped to this page's islands, but the JS payload is NOT reduced — the full app bundle is still downloaded and evaluated. Islands buy CPU, not bytes, today. See the \"Render modes\" docs page."));
+}, m = (e) => `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/ws/${e}`, h = (f, h) => {
+	let g = document.getElementById(h.rootId ?? "root");
+	if (!g) throw Error(`@voltro/web: no #${h.rootId ?? "root"} element in the document`);
+	let _ = Object.entries(h.apis).map(([e, t]) => ({
+		name: e,
+		group: t.group,
+		descriptors: t.descriptors ?? {},
+		wsUrl: t.wsUrl ?? m(e),
+		headers: t.headers
+	})), v = document.getElementById(i), y = r(v?.textContent, window.location.pathname), b = y !== null && g.children.length > 0, x = document.querySelector("meta[name=\"voltro-interactive\"]")?.getAttribute("content") ?? "full";
+	if (x === "none") return;
+	if (x === "islands") {
+		p(d()), t();
+		return;
+	}
+	b && n(y), l(y?.storeSeeds), c(y?.preloadSeeds);
+	let S = /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u(e, {
+		App: f,
+		apis: _,
+		...h.Devtools ? { Devtools: h.Devtools } : {}
+	}) });
+	b ? s(g, S) : o(g).render(S);
+};
+//#endregion
+export { h as mount, p as noticeIslandsShipTheFullBundle };