@stratal/inertia-modal 0.0.27 → 0.1.1

package/dist/react.mjs

@@ -1,35 +1,332 @@
-import { router, usePage } from "@inertiajs/react";
-import { useCallback, useEffect, useState } from "react";
+import { a as MODAL_PROP, c as isModalData, i as MODAL_MARKER_HEADER, r as MODAL_HELD_HEADER, s as encodeHeldLevels, t as MODAL_BENEATH_PROP, u as modalPropPath } from "./wire-BNVvmku4.mjs";
+import { n as samePath, t as levelPath } from "./level-path-DCJD-aS3.mjs";
+import { Deferred as Deferred$1, InfiniteScroll as InfiniteScroll$1, Link, router, usePage } from "@inertiajs/react";
+import { getSsrExcludeMatchers, isSsrExcluded } from "@stratal/inertia/services/ssr-exclusion";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { interceptors } from "@inertiajs/core";
+import { flushSync } from "react-dom";
 import { jsx } from "react/jsx-runtime";
+//#region src/react/component-registry.ts
+/**
+* The modal components resolved so far, by page-component name.
+*
+* Module-level, and safe on a server: it maps build-time names to build-time components, so nothing
+* request-scoped enters it and a render only ever reads the names its own payload carries.
+*/
+let components = {};
+function rememberModalComponents(resolved) {
+	Object.assign(components, resolved);
+}
+function readModalComponents() {
+	return components;
+}
+function clearModalComponents() {
+	components = {};
+}
+//#endregion
+//#region src/react/scroll-teardown.ts
+const byLevel = /* @__PURE__ */ new Map();
+/**
+* Register `teardown` to run when the level at `url` is dismissed.
+*
+* Returns the unsubscribe, for the ordinary unmount path.
+*/
+function onLevelDismissed(url, teardown) {
+	const existing = byLevel.get(url) ?? /* @__PURE__ */ new Set();
+	existing.add(teardown);
+	byLevel.set(url, existing);
+	return () => {
+		const current = byLevel.get(url);
+		if (current === void 0) return;
+		current.delete(teardown);
+		if (current.size === 0) byLevel.delete(url);
+	};
+}
+/**
+* Run every teardown registered for these levels, and forget them.
+*
+* Scoped to the levels actually being dismissed: closing a level above another must not end the
+* subscriptions of the one it was covering, which stays open and keeps the rows it had loaded.
+*/
+function dismissLevels(urls) {
+	for (const url of urls) {
+		const teardowns = byLevel.get(url);
+		if (teardowns === void 0) continue;
+		byLevel.delete(url);
+		for (const teardown of teardowns) teardown();
+	}
+}
+//#endregion
+//#region src/react/stack.ts
+/**
+* The stack after a response.
+*
+* `beneath` describes the chain a document response rebuilt, where there is nothing open to match
+* against and the whole chain arrives at once. It is only read while that holds: it travels in
+* props, which a partial response merges into rather than replaces, so it is still there long after
+* the response that meant it.
+*/
+function applyStack(current, incoming, beneath) {
+	if (incoming === null) return [];
+	if (current.length === 0 && beneath !== null) return [...beneath, incoming];
+	const held = current.find((level) => samePath(level.url, incoming.url));
+	if (held !== void 0) {
+		const merged = {
+			...incoming,
+			close: held.close,
+			props: {
+				...held.props,
+				...incoming.props
+			}
+		};
+		return [...current.slice(0, current.indexOf(held)), merged];
+	}
+	const parent = current.findIndex((level) => samePath(level.url, incoming.base));
+	if (parent >= 0) return [...current.slice(0, parent + 1), incoming];
+	return [incoming];
+}
+//#endregion
+//#region src/react/stack-store.ts
+/**
+* The open stack, held outside the React tree.
+*
+* CLIENT ONLY. A Workers isolate serves many requests, so a module-level value
+* read during SSR would leak one user's open sheets into another user's HTML.
+* `<Modal />` seeds from the payload on the server and consults this only in a
+* browser.
+*/
+let held = [];
+function readHeldStack() {
+	return held;
+}
+function holdStack(stack) {
+	held = stack;
+}
+function clearHeldStack() {
+	held = [];
+}
+//#endregion
+//#region src/react/graft.ts
+/** The mounted page, as `<Modal />` last saw it. Client-only; the graft never runs on a server. */
+let mounted = null;
+function holdMountedPage(page) {
+	mounted = page;
+}
+function clearMountedPage() {
+	mounted = null;
+}
+/**
+* Rewrites `incoming` in place so it reads as the mounted page carrying a modal.
+*
+* In place because Inertia captures the parsed page object before it runs its response handlers and
+* merges props against that same reference — a replacement object would be dropped.
+*
+* Only the top level of the mounted props is copied. A deep clone would walk the whole background
+* payload on every sheet open, which on a page with many resolved props is real main-thread time.
+*/
+function graftOnto(incoming, page) {
+	incoming.component = page.component;
+	const { [MODAL_BENEATH_PROP]: _seededChain, ...mounted } = page.props;
+	incoming.props = {
+		...mounted,
+		...incoming.props
+	};
+	if (page.scrollProps !== void 0 || incoming.scrollProps !== void 0) incoming.scrollProps = {
+		...page.scrollProps,
+		...incoming.scrollProps
+	};
+	if (page.onceProps !== void 0 || incoming.onceProps !== void 0) incoming.onceProps = {
+		...page.onceProps,
+		...incoming.onceProps
+	};
+}
+let installed$1 = false;
+/**
+* Starts grafting modal responses onto the mounted page.
+*
+* Idempotent, and installed from the resolver rather than at module scope so importing this package
+* has no side effect.
+*/
+function installGraft() {
+	if (installed$1 || typeof document === "undefined") return;
+	installed$1 = true;
+	interceptors.onVisitResponse((_visit, response) => {
+		const data = response.data;
+		const page = typeof data === "object" && data !== null ? data : null;
+		const isModal = response.headers[MODAL_MARKER_HEADER] === "true";
+		if (isModal && mounted !== null && page !== null) graftOnto(page, mounted);
+		if (page !== null) dropDismissedLevels(page, isModal);
+		return response;
+	});
+}
+/**
+* Take the levels this response drops off the page, before the page changes.
+*
+* A level's props sit at `modal.props.*`, and anything addressing them by path — a scroll
+* subscription, for one — reads that path off the page whenever Inertia announces a response. The
+* path exists only while the level does, so a response that drops the level leaves those reads
+* looking for something the new page does not carry.
+*
+* Here rather than at a dismissal, because a level is dropped by any navigation at all: closing it,
+* the browser's back button, a link to somewhere else entirely. Interceptors run before the page is
+* set and before that announcement, which is the only point early enough to matter — flushed, so
+* React has removed them by then rather than at the next render, which comes after.
+*/
+function dropDismissedLevels(page, isModal) {
+	const held = readHeldStack();
+	if (held.length === 0) return;
+	const carried = page.props[MODAL_PROP];
+	const incoming = isModal && isModalData(carried) ? carried : null;
+	const beneath = page.props[MODAL_BENEATH_PROP];
+	const next = applyStack(held, incoming, Array.isArray(beneath) ? beneath.filter(isModalData) : null);
+	if (next.length === 0) {
+		page.props[MODAL_PROP] = null;
+		page.props[MODAL_BENEATH_PROP] = null;
+	}
+	const dropped = held.filter((level) => !next.some((kept) => samePath(kept.url, level.url))).map((level) => level.url);
+	if (dropped.length > 0) flushSync(() => dismissLevels(dropped));
+}
+//#endregion
+//#region src/react/modal-context.ts
+/** Every open level, outermost first. */
+const ModalStackContext = createContext([]);
+/** The level the component reading it is rendered in. */
+const ModalLevelContext = createContext(null);
+//#endregion
+//#region src/react/held-header.ts
+/**
+* `config` carrying the levels the client has open.
+*
+* The visit is not consulted, and is typed as `unknown` to say so: what the client holds is a
+* property of the client, not of whichever visit happens to be leaving.
+*
+* Read here, as the request is built, rather than closed over: the stack changes with every
+* response, and a value captured earlier would describe it as it was one level ago.
+*/
+function nameHeldLevels(_visit, config) {
+	return {
+		...config,
+		headers: {
+			...config.headers,
+			[MODAL_HELD_HEADER]: encodeHeldLevels(readHeldStack().map((level) => level.url))
+		}
+	};
+}
+let installed = false;
+/**
+* Starts naming the open levels on every visit the router makes.
+*
+* Idempotent, and installed from the resolver rather than at module scope so importing this package
+* has no side effect. A server never installs it: the held stack is client-only state, and a
+* request interceptor registered in an isolate would read one visitor's sheets while answering
+* another's.
+*/
+function installHeldHeader() {
+	if (installed || typeof document === "undefined") return;
+	installed = true;
+	interceptors.onVisitRequest(nameHeldLevels);
+}
+//#endregion
 //#region src/react/resolver.ts
+/**
+* Wraps the `resolve` callback `createInertiaApp` is given, so a page's modal levels are resolved
+* before the tree renders.
+*
+* Resolution is a real `import()`, so it cannot happen during render. Doing it here — the one point
+* Inertia already awaits before it swaps the page — is what puts a level in server HTML and keeps a
+* step between levels from flashing an empty sheet.
+*
+* @example
+* ```tsx
+* createInertiaApp({
+*   resolve: withModals((name) => pages[`./pages/${name}.tsx`]()),
+*   setup: ({ el, App, props }) => hydrateRoot(el, <App {...props} />),
+* })
+* ```
+*/
+function withModals(resolve) {
+	resolveCallback = resolve;
+	return async (name, page) => {
+		installGraft();
+		installHeldHeader();
+		const [component] = await Promise.all([resolve(name), prepare(resolve, page)]);
+		return component;
+	};
+}
 let resolveCallback;
-const resolver = {
-	set(cb) {
-		resolveCallback = cb;
-	},
-	resolve(name) {
-		if (!resolveCallback) throw new Error("[@stratal/inertia-modal] Resolver not registered. Call resolver.set() before createInertiaApp().");
-		return resolveCallback(name);
-	}
-};
+/**
+* Resolves one level's component after the tree has mounted.
+*
+* `<Modal />` needs this for a level the pre-pass could not reach — one excluded from SSR, on a
+* server, which by definition has no entry to resolve it from.
+*/
+function resolveModalComponent(name) {
+	if (resolveCallback === void 0) throw new Error("[@stratal/inertia-modal] no resolver registered. Pass createInertiaApp's `resolve` through withModals() before rendering <Modal />.");
+	return unwrap(resolveCallback(name));
+}
+/** Resolves every level the page carries that this runtime has an entry for. */
+async function prepare(resolve, page) {
+	if (page === void 0) return;
+	const top = page.props[MODAL_PROP];
+	const beneath = page.props[MODAL_BENEATH_PROP];
+	const levels = [...Array.isArray(beneath) ? beneath : [], top].filter(isModalData);
+	if (levels.length === 0) return;
+	const names = [...new Set(levels.map((level) => level.component))].filter(resolvableHere);
+	const resolved = await Promise.all(names.map(async (component) => {
+		try {
+			return [component, await unwrap(resolve(component))];
+		} catch (cause) {
+			throw new Error(`[@stratal/inertia-modal] could not resolve modal component "${component}".`, { cause });
+		}
+	}));
+	rememberModalComponents(Object.fromEntries(resolved));
+}
+/**
+* Whether this runtime has an entry to resolve `component` from.
+*
+* `ssrExclude` drops a page from the worker bundle, so on a server there is nothing to import —
+* which is the whole of what the option means. Every page stays in the client glob, so a browser
+* can always resolve one, and must: `<Modal />` draws nothing for a level whose component has not
+* landed, and its own resolve effect runs only once the page has already swapped. A level left to
+* that takes the sheet a visitor is looking at off the screen until the `import()` returns.
+*
+* Rendering it too early is not this decision. `<Modal />` withholds an excluded level for the
+* render that hydrates, which is the only one that has to match HTML the server produced.
+*/
+function resolvableHere(component) {
+	return typeof document !== "undefined" || !isSsrExcluded(component, getSsrExcludeMatchers());
+}
+/** A page module's default export, or the module itself when it is the component. */
+async function unwrap(loaded) {
+	const mod = await loaded;
+	return mod.default ?? mod;
+}
 //#endregion
 //#region src/react/modal.tsx
+/** The store below never changes, so there is nothing to subscribe to. */
+const unchanging = () => () => {};
+/**
+* Whether React is past the render that hydrates.
+*
+* `useSyncExternalStore`'s third argument is the value React reads while server-rendering and
+* while hydrating, and its second is what it switches to once hydration is over — so this asks
+* React which phase it is in rather than asking something to remember. Nothing to set, nothing to
+* reset between documents, and no answer that can outlive the render it describes.
+*/
+function usePastHydration() {
+	return useSyncExternalStore(unchanging, () => true, () => false);
+}
 /**
-* Headless modal component. Place this anywhere in your layout.
+* Headless modal host. Place it once in your layout.
 *
-* When the current Inertia page has `props.modal` (set by `ctx.inertiaModal()`
-* on the server), this component dynamically loads the modal page component and
-* renders it as an overlay. The background page is what Inertia renders normally.
+* Renders every open level, so a modal opened from inside another appears above it with the one
+* below still mounted.
 *
 * @example
 * ```tsx
-* // dashboard-layout.tsx
-* import { Modal } from '@stratal/inertia-modal/react'
-*
 * export function DashboardLayout({ children }) {
 *   return (
 *     <>
-*       <Sidebar />
 *       <main>{children}</main>
 *       <Modal />
 *     </>
@@ -38,46 +335,260 @@ const resolver = {
 * ```
 */
 function Modal() {
-	const modal = usePage().props.modal;
-	const [Component, setComponent] = useState(null);
+	const page = usePage();
+	const carried = page.props[MODAL_PROP];
+	const incoming = isModalData(carried) ? carried : null;
+	const beneath = page.props["modalBeneath"] ?? null;
+	const pastHydration = usePastHydration();
+	const [stack, setStack] = useState(() => {
+		return applyStack(typeof document !== "undefined" ? readHeldStack() : [], incoming, beneath);
+	});
+	const stackRef = useRef(stack);
+	const components = readModalComponents();
+	const [, redrawWithResolved] = useState(0);
 	useEffect(() => {
-		if (!modal?.component) {
-			setComponent(null);
-			return;
-		}
-		Promise.resolve(resolver.resolve(modal.component)).then((mod) => {
-			const component = mod?.default ?? mod;
-			setComponent(() => component);
-		}).catch(() => setComponent(null));
-	}, [modal?.component]);
+		holdMountedPage(page);
+	}, [page]);
 	useEffect(() => {
-		if (!modal?.key) return;
-		return router.on("before", (event) => {
-			event.detail.visit.headers["x-inertia-modal-key"] = modal.key;
+		const next = applyStack(stackRef.current, incoming, beneath);
+		stackRef.current = next;
+		if (typeof document !== "undefined") holdStack(next);
+		setStack(next);
+	}, [incoming, beneath]);
+	const missing = [...new Set(stack.map((level) => level.component))].filter((name) => !components[name]).join("\0");
+	useEffect(() => {
+		const wanted = missing === "" ? [] : missing.split("\0");
+		if (wanted.length === 0) return;
+		let cancelled = false;
+		const held = readModalComponents();
+		Promise.allSettled(wanted.map(async (name) => [name, await resolveModalComponent(name)])).then((results) => {
+			if (cancelled) return;
+			const next = { ...held };
+			for (const result of results) if (result.status === "fulfilled") {
+				const [name, component] = result.value;
+				next[name] = component;
+			}
+			rememberModalComponents(next);
+			redrawWithResolved((n) => n + 1);
+			for (const [index, result] of results.entries()) if (result.status === "rejected") console.error(`inertia-modal: failed to resolve component "${wanted[index]}"`, result.reason);
 		});
-	}, [modal?.key]);
-	if (!Component || !modal) return null;
-	return /* @__PURE__ */ jsx(Component, { ...modal.props }, modal.component);
+		return () => {
+			cancelled = true;
+		};
+	}, [missing]);
+	if (stack.length === 0) return null;
+	return /* @__PURE__ */ jsx(ModalStackContext.Provider, {
+		value: stack,
+		children: stack.map((level, index) => {
+			const Component = components[level.component];
+			if (!Component) return null;
+			if (!pastHydration && isSsrExcluded(level.component, getSsrExcludeMatchers())) return null;
+			return /* @__PURE__ */ jsx(ModalLevelContext.Provider, {
+				value: {
+					modal: level,
+					depth: index,
+					isTop: index === stack.length - 1
+				},
+				children: /* @__PURE__ */ jsx(Component, { ...level.props })
+			}, levelPath(level.url));
+		})
+	});
+}
+//#endregion
+//#region src/react/modal-link.tsx
+/**
+* Opens a modal route as a sheet over the current page.
+*
+* @example
+* ```tsx
+* <ModalLink href="/parent/1/edit">Edit</ModalLink>
+* <ModalLink href="/parent/1/edit" prefetch>Edit</ModalLink>
+* ```
+*/
+function ModalLink({ children, ...rest }) {
+	return /* @__PURE__ */ jsx(Link, {
+		only: [MODAL_PROP],
+		preserveState: true,
+		preserveScroll: true,
+		...rest,
+		children
+	});
 }
 //#endregion
 //#region src/react/use-modal.ts
+/**
+* Closing is always an explicit visit, never `history.back()`.
+*
+* Going back is cheaper — the entry below is already in history, and Inertia answers it from cache
+* without touching the server. But a cached entry is a SNAPSHOT of the whole page as it was when
+* that entry was stored, and restoring it replaces every prop the page holds, not merely the modal
+* ones. A page that has changed since — an autosaving draft, a filtered list — is rewound to the
+* moment it was cached, with no sign that it happened. Landing on a URL asks the server instead:
+* what comes back cannot disagree with what is stored.
+*/
+const CLOSE_OPTIONS = {
+	replace: true,
+	preserveScroll: true,
+	preserveState: true
+};
 function useModal() {
-	const modal = usePage().props.modal;
-	const redirect = useCallback(() => {
-		if (!modal) return;
-		if (modal.nativeBack) window.history.back();
-		else router.visit(modal.redirectURL ?? modal.baseURL, {
+	const level = useContext(ModalLevelContext);
+	const stack = useContext(ModalStackContext);
+	const modal = level?.modal;
+	const close = useCallback((options = {}) => {
+		if (modal === void 0) return;
+		router.visit(modal.close, {
+			...CLOSE_OPTIONS,
+			...options
+		});
+	}, [modal]);
+	/**
+	* Dismissing the whole stack is the outermost level closing: every level above it goes with it,
+	* and it lands where it would have landed alone.
+	*/
+	const closeAll = useCallback((options = {}) => {
+		const outermost = stack[0];
+		if (outermost === void 0) return;
+		router.visit(outermost.close, {
+			...CLOSE_OPTIONS,
+			...options
+		});
+	}, [stack]);
+	/**
+	* A refined re-read is an ordinary visit to this level's own url. The client recognises the
+	* answer as this level by that url, so nothing has to declare the intent.
+	*/
+	const refresh = useCallback((query, options = {}) => {
+		if (modal === void 0) return;
+		router.get(modal.url, query, {
+			preserveState: true,
 			preserveScroll: true,
-			preserveState: true
+			replace: true,
+			...options
 		});
 	}, [modal]);
+	const reload = useCallback((options = {}) => {
+		router.reload({
+			...options,
+			...options.only && { only: options.only.map(modalPropPath) },
+			...options.except && { except: options.except.map(modalPropPath) },
+			...options.reset && { reset: options.reset.map(modalPropPath) }
+		});
+	}, []);
+	/**
+	* The options `<ModalLink>` sets, applied to a visit made from code. Spread first so a caller
+	* can override any of them, exactly as passing the prop to the component would.
+	*/
+	const visit = useCallback((href, options = {}) => {
+		router.visit(href, {
+			only: [MODAL_PROP],
+			preserveState: true,
+			preserveScroll: true,
+			...options
+		});
+	}, []);
 	return {
-		show: !!modal,
-		redirect,
-		props: modal?.props
+		modal,
+		depth: level?.depth ?? 0,
+		isTop: level?.isTop ?? false,
+		close,
+		closeAll,
+		refresh,
+		reload,
+		visit
 	};
 }
 //#endregion
-export { Modal, resolver, useModal };
+//#region src/react/deferred.tsx
+function resolve(data, nested) {
+	if (!nested) return data;
+	return Array.isArray(data) ? data.map(modalPropPath) : modalPropPath(data);
+}
+/**
+* `@inertiajs/react`'s `<Deferred>`, with `data` resolved against the modal it is rendered in.
+*
+* The component addresses its prop by name at the page root, and a level's props are nested under
+* one page prop. Import this one instead of the Inertia component and the same JSX works in a sheet
+* and on a page — outside a modal the name is already the path.
+*
+* @example
+* ```tsx
+* import { Deferred } from '@stratal/inertia-modal/react'
+*
+* <Deferred data="entries" fallback={<Skeleton />}>
+*   <Entries entries={entries} />
+* </Deferred>
+* ```
+*/
+const Deferred = Object.assign(function Deferred({ data, ...props }) {
+	const level = useContext(ModalLevelContext);
+	return /* @__PURE__ */ jsx(Deferred$1, {
+		...props,
+		data: resolve(data, level !== null)
+	});
+}, { displayName: "Deferred" });
+//#endregion
+//#region src/react/infinite-scroll.tsx
+/**
+* `@inertiajs/react`'s `<InfiniteScroll>`, with `data` resolved against the modal it is rendered in.
+*
+* The component addresses its prop by name at the page root, and a level's props are nested under
+* one page prop. Import this one instead of the Inertia component and the same JSX works in a sheet
+* and on a page — outside a modal the name is already the path.
+*
+* @example
+* ```tsx
+* import { InfiniteScroll } from '@stratal/inertia-modal/react'
+*
+* <InfiniteScroll data="items">
+*   {items.data.map((item) => <Row key={item.id} item={item} />)}
+* </InfiniteScroll>
+* ```
+*/
+const InfiniteScroll = forwardRef(function InfiniteScroll({ data, ...props }, ref) {
+	const level = useContext(ModalLevelContext);
+	const url = level?.modal.url;
+	const [dismissed, setDismissed] = useState(false);
+	useEffect(() => {
+		if (url === void 0) return;
+		setDismissed(false);
+		return onLevelDismissed(url, () => setDismissed(true));
+	}, [url]);
+	if (dismissed) return null;
+	return /* @__PURE__ */ jsx(InfiniteScroll$1, {
+		...props,
+		data: level ? modalPropPath(data) : data,
+		ref
+	});
+});
+//#endregion
+//#region src/react/reset.ts
+/**
+* Discard everything this package holds outside the React tree.
+*
+* Three stores survive unmounting, because each exists precisely to outlive a render: the open
+* stack, the page a level grafts onto, and the components resolved so far. In a browser that is
+* what they are for — one document, one visitor, state that must not reset when a sheet closes.
+* Under a test runner the same module is reused across files, so one test's open sheet is the next
+* test's starting state: a sheet nothing opened, or a component a test meant to leave unresolved
+* answering instantly from an earlier test's resolution.
+*
+* Call it between tests. It is the only supported way to empty them; the individual stores are
+* internal so that resetting cannot drift out of step with what the package holds.
+*
+* @example
+* ```ts
+* import { resetModalState } from '@stratal/inertia-modal/react'
+*
+* beforeEach(() => resetModalState())
+* ```
+*/
+function resetModalState() {
+	clearHeldStack();
+	clearMountedPage();
+	clearModalComponents();
+}
+//#endregion
+export { Deferred, InfiniteScroll, MODAL_PROP, Modal, ModalLink, resetModalState, useModal, withModals };
 
 //# sourceMappingURL=react.mjs.map