@void/react 0.0.0

package/dist/runtime/pages-client.mjs

@@ -0,0 +1,417 @@
+import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "../context-BCeFV8Jy.mjs";
+import { n as setActionRouter } from "../action-BFWtavbf.mjs";
+import React, { Suspense, use, useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useTransition } from "react";
+import { createPageNavigationEngine, createRouterFacade, idleNavigationState, isAbortError, isCallSiteActionError } from "void/pages-client";
+import { hydrateRoot } from "react-dom/client";
+//#region src/runtime/pages-client.ts
+const deferredState = /* @__PURE__ */ new WeakMap();
+const viewTransitionWaiters = /* @__PURE__ */ new Map();
+const pendingVisitSettlers = /* @__PURE__ */ new Map();
+const committedResources = /* @__PURE__ */ new Set();
+let activePendingNavigationId = null;
+let scheduleVisit = null;
+function createDeferredResource() {
+	let resolve;
+	let reject;
+	const promise = new Promise((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+	promise.catch(() => {});
+	deferredState.set(promise, {
+		status: "pending",
+		resolve,
+		reject
+	});
+	return promise;
+}
+function resolveDeferredResource(ref, value) {
+	const state = deferredState.get(ref);
+	if (state?.status === "pending") {
+		state.resolve(value);
+		deferredState.set(ref, { status: "resolved" });
+	}
+	return ref;
+}
+function rejectDeferredResource(ref, error) {
+	const state = deferredState.get(ref);
+	if (state?.status === "pending") {
+		state.reject(new Error(error));
+		deferredState.set(ref, { status: "rejected" });
+	}
+	return ref;
+}
+function isDeferredResourceLoading(ref) {
+	return deferredState.get(ref)?.status === "pending";
+}
+function currentUrl() {
+	return window.location.pathname + window.location.search + window.location.hash;
+}
+function normalizeUrl(value) {
+	if (typeof value === "string" && value.startsWith("#")) return value;
+	const url = value instanceof URL ? value : new URL(value, window.location.origin);
+	return url.origin === window.location.origin ? url.pathname + url.search + url.hash : url.href;
+}
+function navigationForResource(resource) {
+	const method = resource.method.toUpperCase();
+	return {
+		state: method !== "GET" ? "submitting" : "loading",
+		location: new URL(resource.fetchUrl + resource.hash, window.location.origin),
+		method: method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE" ? method : "GET"
+	};
+}
+function appReducer(state, action) {
+	switch (action.type) {
+		case "begin": return {
+			resource: state.resource,
+			rollbackResource: state.resource,
+			pendingId: action.resource.id,
+			routeUrl: state.routeUrl,
+			navigation: action.navigation
+		};
+		case "reveal":
+			if (state.pendingId !== action.resource.id) return state;
+			return {
+				...state,
+				resource: action.resource
+			};
+		case "finish":
+			if (state.pendingId !== action.resource.id) return state;
+			return {
+				resource: action.resource.immediate ? state.resource : action.resource,
+				rollbackResource: null,
+				pendingId: null,
+				routeUrl: action.location,
+				navigation: idleNavigationState()
+			};
+		case "fail":
+			if (state.pendingId !== action.resource.id) return state;
+			return {
+				...state,
+				rollbackResource: null,
+				pendingId: null,
+				routeUrl: action.location,
+				navigation: idleNavigationState()
+			};
+		case "abandon":
+			if (state.pendingId !== action.resource.id) return state;
+			return {
+				resource: state.rollbackResource || state.resource,
+				rollbackResource: null,
+				pendingId: null,
+				routeUrl: action.location,
+				navigation: idleNavigationState()
+			};
+	}
+}
+function createRouter(engine) {
+	const router = {
+		_hoverDelay: engine._hoverDelay,
+		get url() {
+			return new URL(currentUrl(), window.location.origin);
+		},
+		get path() {
+			return this.url.pathname;
+		},
+		get query() {
+			return this.url.searchParams;
+		},
+		visit(url, options = {}) {
+			if (!scheduleVisit) return Promise.reject(/* @__PURE__ */ new Error("router.visit() called before router initialized"));
+			return scheduleVisit(normalizeUrl(url), options);
+		},
+		refresh(options = {}) {
+			return router.visit(window.location.pathname + window.location.search, {
+				preserveState: true,
+				preserveScroll: true,
+				...options
+			});
+		},
+		prefetch(url, options = {}) {
+			return engine.prefetch(normalizeUrl(url), options);
+		},
+		flush(url, method = "GET") {
+			engine.flush(normalizeUrl(url), method);
+		},
+		flushAll() {
+			engine.flushAll();
+		}
+	};
+	return router;
+}
+function RouteResource({ resource, onCommit }) {
+	const result = use(resource.shell);
+	useLayoutEffect(() => {
+		if (result) onCommit(resource, result);
+	}, [
+		onCommit,
+		resource,
+		result
+	]);
+	if (!result) return null;
+	const pageData = result.pageData;
+	const PageComponent = result.component;
+	let element = React.createElement(PageComponent, pageData.props);
+	for (let i = result.layouts.length - 1; i >= 0; i--) {
+		const Layout = result.layouts[i];
+		element = React.createElement(Layout, null, element);
+	}
+	return React.createElement(SharedContext.Provider, { value: pageData.shared }, React.createElement(ErrorsContext.Provider, { value: pageData.errors ?? {} }, element));
+}
+function startViewTransition(resource, reveal, enabled) {
+	if (!enabled || typeof document.startViewTransition !== "function") {
+		reveal();
+		return;
+	}
+	let resolveViewTransition;
+	const readyForCapture = new Promise((resolve) => {
+		resolveViewTransition = resolve;
+	});
+	viewTransitionWaiters.set(resource.id, resolveViewTransition);
+	document.startViewTransition(() => {
+		reveal();
+		return readyForCapture;
+	});
+}
+function App({ engine, router, viewTransitions }) {
+	const initialPageData = engine.initialPageData;
+	const sharedStateRef = useRef(initialPageData.shared);
+	const [state, dispatch] = useReducer(appReducer, {
+		resource: useMemo(() => ({
+			id: 0,
+			url: initialPageData.url || currentUrl(),
+			fetchUrl: initialPageData.url || currentUrl(),
+			hash: window.location.hash,
+			method: "GET",
+			options: {},
+			immediate: false,
+			shell: Promise.resolve({
+				pageData: {
+					...initialPageData,
+					shared: initialPageData.shared
+				},
+				component: engine.initialComponent,
+				layouts: engine.initialLayouts
+			}),
+			abort() {},
+			async commit() {},
+			dispose() {}
+		}), [engine, initialPageData]),
+		rollbackResource: null,
+		pendingId: null,
+		routeUrl: currentUrl(),
+		navigation: idleNavigationState()
+	});
+	const [isTransitionPending, startTransition] = useTransition();
+	const mergeShared = useCallback((result) => {
+		if (!result) return result;
+		sharedStateRef.current = {
+			...sharedStateRef.current,
+			...result.pageData.shared || {}
+		};
+		const shared = sharedStateRef.current;
+		result.pageData = {
+			...result.pageData,
+			shared
+		};
+		return result;
+	}, []);
+	const finishNavigation = useCallback((resource, result) => {
+		if (committedResources.has(resource.id)) return;
+		committedResources.add(resource.id);
+		resource.commit().then(() => {
+			const resolveViewTransition = viewTransitionWaiters.get(resource.id);
+			if (resolveViewTransition) {
+				viewTransitionWaiters.delete(resource.id);
+				resolveViewTransition();
+			}
+			const visitSettler = pendingVisitSettlers.get(resource.id);
+			if (visitSettler) {
+				pendingVisitSettlers.delete(resource.id);
+				visitSettler.resolve(result.pageData);
+			}
+			if (activePendingNavigationId === resource.id) activePendingNavigationId = null;
+			dispatch({
+				type: "finish",
+				resource,
+				location: currentUrl()
+			});
+		}).catch((error) => {
+			const visitSettler = pendingVisitSettlers.get(resource.id);
+			if (visitSettler) {
+				pendingVisitSettlers.delete(resource.id);
+				visitSettler.reject(error);
+			}
+		});
+	}, []);
+	const schedule = useCallback((url, options = {}) => {
+		const prepared = engine.prepareVisit(url, options);
+		if (prepared.immediate) {
+			const navigation = navigationForResource(prepared);
+			activePendingNavigationId = prepared.id;
+			dispatch({
+				type: "begin",
+				resource: prepared,
+				navigation
+			});
+			return prepared.shell.then((result) => {
+				if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
+				dispatch({
+					type: "finish",
+					resource: prepared,
+					location: currentUrl()
+				});
+				return result?.pageData;
+			}, (error) => {
+				if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
+				dispatch({
+					type: "fail",
+					resource: prepared,
+					location: currentUrl()
+				});
+				throw error;
+			});
+		}
+		let resolveVisit;
+		let rejectVisit;
+		const pagePromise = new Promise((resolve, reject) => {
+			resolveVisit = resolve;
+			rejectVisit = reject;
+		});
+		const next = {
+			...prepared,
+			shell: prepared.shell.then(mergeShared).then((result) => {
+				if (!result) {
+					const resolveViewTransition = viewTransitionWaiters.get(prepared.id);
+					if (resolveViewTransition) {
+						viewTransitionWaiters.delete(prepared.id);
+						resolveViewTransition();
+					}
+					pendingVisitSettlers.delete(prepared.id);
+					if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
+					dispatch({
+						type: "finish",
+						resource: prepared,
+						location: currentUrl()
+					});
+					resolveVisit(void 0);
+				} else if (prepared.options._resolveOnShell) {
+					pendingVisitSettlers.delete(prepared.id);
+					resolveVisit(result.pageData);
+				}
+				return result;
+			}, (error) => {
+				const resolveViewTransition = viewTransitionWaiters.get(prepared.id);
+				if (resolveViewTransition) {
+					viewTransitionWaiters.delete(prepared.id);
+					resolveViewTransition();
+				}
+				pendingVisitSettlers.delete(prepared.id);
+				rejectVisit(error);
+				if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
+				if (prepared.options._resolveOnShell || isAbortError(error) || isCallSiteActionError(error)) {
+					dispatch({
+						type: "abandon",
+						resource: prepared,
+						location: currentUrl()
+					});
+					return;
+				}
+				dispatch({
+					type: "fail",
+					resource: prepared,
+					location: currentUrl()
+				});
+				throw error;
+			})
+		};
+		const navigation = navigationForResource(next);
+		pendingVisitSettlers.set(next.id, {
+			resolve: resolveVisit,
+			reject: rejectVisit
+		});
+		activePendingNavigationId = next.id;
+		dispatch({
+			type: "begin",
+			resource: next,
+			navigation
+		});
+		const reveal = () => {
+			startTransition(() => {
+				dispatch({
+					type: "reveal",
+					resource: next
+				});
+			});
+		};
+		startViewTransition(next, reveal, options.viewTransition ?? viewTransitions);
+		return pagePromise;
+	}, [
+		engine,
+		mergeShared,
+		startTransition,
+		viewTransitions
+	]);
+	useInsertionEffect(() => {
+		scheduleVisit = schedule;
+		return () => {
+			if (scheduleVisit === schedule) scheduleVisit = null;
+		};
+	}, [schedule]);
+	useEffect(() => {
+		engine.setPopStateHandler((url, options) => {
+			router.visit(url, options);
+		});
+	}, [engine, router]);
+	const navigationValue = useMemo(() => {
+		if (state.navigation.state !== "idle" || !isTransitionPending) return state.navigation;
+		return {
+			state: "loading",
+			location: null,
+			method: "GET"
+		};
+	}, [isTransitionPending, state.navigation]);
+	const routerValue = useMemo(() => createRouterFacade(router, () => state.routeUrl), [router, state.routeUrl]);
+	return React.createElement(RouterContext.Provider, { value: routerValue }, React.createElement(NavigationContext.Provider, { value: navigationValue }, React.createElement(Suspense, { fallback: null }, React.createElement(RouteResource, {
+		resource: state.resource,
+		onCommit: finishNavigation
+	}))));
+}
+async function startReactPages(config) {
+	viewTransitionWaiters.clear();
+	pendingVisitSettlers.clear();
+	committedResources.clear();
+	committedResources.add(0);
+	activePendingNavigationId = null;
+	const engine = await createPageNavigationEngine({
+		adapter: {
+			createDeferred: createDeferredResource,
+			resolveDeferred: resolveDeferredResource,
+			rejectDeferred: rejectDeferredResource,
+			isLoading: isDeferredResourceLoading
+		},
+		components: config.components,
+		layoutTree: config.layoutTree,
+		routeMeta: config.routeMeta,
+		matchRoute: config.matchRoute,
+		staticPageData: config.staticPageData,
+		staticPageDataFastPath: config.staticPageDataFastPath,
+		viewTransitions: config.viewTransitions,
+		prefetchHoverDelay: config.prefetchHoverDelay,
+		prefetchDefaultCacheFor: config.prefetchDefaultCacheFor
+	});
+	const router = createRouter(engine);
+	setActionRouter(router);
+	const appEl = document.getElementById("app");
+	if (!appEl) throw new Error("pages: Missing #app element for Void React pages hydration.");
+	hydrateRoot(appEl, React.createElement(App, {
+		engine,
+		router,
+		viewTransitions: config.viewTransitions
+	}));
+	appEl.setAttribute("data-hydrated", "true");
+	engine.start();
+	return { router };
+}
+//#endregion
+export { startReactPages };

package/dist/runtime/pages-server.d.mts

@@ -0,0 +1,27 @@
+import { ComponentType } from "react";
+import { PageObject } from "void/pages-protocol";
+
+//#region src/runtime/pages-server.d.ts
+type ComponentModule = {
+  default: ComponentType<any>;
+};
+interface ReactPagesServerConfig {
+  pageObj: PageObject;
+  assetTags: {
+    css: string;
+    preloads: string;
+    body: string;
+  };
+  components: Record<string, () => Promise<ComponentModule>>;
+  layoutTree: Record<string, Array<string>>;
+  preambleScript?: string;
+}
+declare function renderReactPage({
+  pageObj,
+  assetTags,
+  components,
+  layoutTree,
+  preambleScript
+}: ReactPagesServerConfig): Promise<ReadableStream<Uint8Array>>;
+//#endregion
+export { ReactPagesServerConfig, renderReactPage };

package/dist/runtime/pages-server.mjs

@@ -0,0 +1,112 @@
+import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "../context-BCeFV8Jy.mjs";
+import React from "react";
+import { createSsrRouter, idleNavigationState } from "void/pages-client";
+import { renderToReadableStream } from "react-dom/server";
+import { renderBodyAttrs, renderHeadToString, renderHtmlAttrs } from "void/pages-head";
+import { serializePageData } from "void/pages-server";
+//#region src/runtime/pages-server.ts
+const DEFERRED_SHELL_CANCEL_REASON = "Void deferred shell complete";
+const DEFERRED_SHELL_END_ID = "__VOID_DEFERRED_SHELL_END__";
+const DEFERRED_SHELL_END_MARKER = `<template id="${DEFERRED_SHELL_END_ID}"></template>`;
+function createPendingDeferred() {
+	return new Promise(() => {});
+}
+function propsForReactRender(pageObj) {
+	if (!pageObj.deferredKeys) return pageObj.props;
+	const props = { ...pageObj.props };
+	for (const key of Object.keys(pageObj.deferredKeys)) props[key] = createPendingDeferred();
+	return props;
+}
+function textStream(text) {
+	const encoder = new TextEncoder();
+	return new ReadableStream({ start(controller) {
+		controller.enqueue(encoder.encode(text));
+		controller.close();
+	} });
+}
+function concatStreams(streams) {
+	return new ReadableStream({ async start(controller) {
+		try {
+			for (const stream of streams) {
+				const reader = stream.getReader();
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+					controller.enqueue(value);
+				}
+			}
+			controller.close();
+		} catch (error) {
+			controller.error(error);
+		}
+	} });
+}
+function readDeferredShell(stream) {
+	const encoder = new TextEncoder();
+	return new ReadableStream({ async start(controller) {
+		const reader = stream.getReader();
+		const decoder = new TextDecoder();
+		let buffer = "";
+		const keepLength = DEFERRED_SHELL_END_MARKER.length - 1;
+		const flush = (text) => {
+			if (text) controller.enqueue(encoder.encode(text));
+		};
+		try {
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) {
+					buffer += decoder.decode();
+					flush(buffer);
+					break;
+				}
+				buffer += decoder.decode(value, { stream: true });
+				const markerIndex = buffer.indexOf(DEFERRED_SHELL_END_MARKER);
+				if (markerIndex !== -1) {
+					flush(buffer.slice(0, markerIndex));
+					await reader.cancel(DEFERRED_SHELL_CANCEL_REASON);
+					break;
+				}
+				if (buffer.length > keepLength) {
+					flush(buffer.slice(0, -keepLength));
+					buffer = buffer.slice(-keepLength);
+				}
+			}
+			controller.close();
+		} catch (error) {
+			controller.error(error);
+		}
+	} });
+}
+async function renderReactPage({ pageObj, assetTags, components, layoutTree, preambleScript = "" }) {
+	const PageComponent = (await components[pageObj.component]()).default;
+	const layoutIds = layoutTree[pageObj.component] || [];
+	const layoutComponents = await Promise.all(layoutIds.map(async (id) => (await components[id]()).default));
+	const renderProps = propsForReactRender(pageObj);
+	let element = React.createElement(PageComponent, renderProps);
+	for (let i = layoutComponents.length - 1; i >= 0; i--) element = React.createElement(layoutComponents[i], null, element);
+	element = React.createElement(RouterContext.Provider, { value: createSsrRouter(pageObj.url || "/") }, React.createElement(NavigationContext.Provider, { value: idleNavigationState() }, React.createElement(React.Suspense, { fallback: null }, React.createElement(SharedContext.Provider, { value: pageObj.shared || {} }, React.createElement(ErrorsContext.Provider, { value: pageObj.errors || {} }, element)))));
+	const appStream = await renderToReadableStream(pageObj.deferredKeys ? React.createElement(React.Fragment, null, element, React.createElement("template", { id: DEFERRED_SHELL_END_ID })) : element, { onError(error) {
+		if (error === DEFERRED_SHELL_CANCEL_REASON) return;
+		throw error;
+	} });
+	const renderedAppStream = pageObj.deferredKeys ? readDeferredShell(appStream) : appStream;
+	const pageData = serializePageData(pageObj);
+	const headHtml = pageObj.head ? renderHeadToString(pageObj.head) : "";
+	const htmlAttrs = pageObj.head ? renderHtmlAttrs(pageObj.head) : "";
+	const bodyAttrs = pageObj.head ? renderBodyAttrs(pageObj.head) : "";
+	return concatStreams([
+		textStream(`<!doctype html>
+<html${htmlAttrs}>
+<head>${headHtml}${preambleScript}${assetTags.css}${assetTags.preloads}</head>
+<body${bodyAttrs}>
+  <script id="__VOID_PAGE_DATA__" type="application/json">${pageData}<\/script>
+  <div id="app">`),
+		renderedAppStream,
+		textStream(`</div>
+  ${assetTags.body}
+</body>
+</html>`)
+	]);
+}
+//#endregion
+export { renderReactPage };

package/dist/runtime/prefetch.d.mts

@@ -0,0 +1,2 @@
+import { CacheEntry, CacheForInput, CacheForResult, PrefetchCache, parseCacheFor } from "void/pages-prefetch";
+export { type CacheEntry, type CacheForInput, type CacheForResult, PrefetchCache, parseCacheFor };

package/dist/runtime/prefetch.mjs

@@ -0,0 +1,2 @@
+import { PrefetchCache, parseCacheFor } from "void/pages-prefetch";
+export { PrefetchCache, parseCacheFor };