@tanstack/solid-router/dist/esm/CatchBoundary.js

Modern and scalable routing for Solid applications

import { renderInNonRouteComponentContext } from "./nonRouteComponentContext.js";
import { Dynamic, createComponent, delegateEvents, insert, memo, template } from "@solidjs/web";
import * as Solid from "solid-js";
//#region src/CatchBoundary.tsx
var _tmpl$ = /* @__PURE__ */ template(`<div style=padding:.5rem;max-width:100%><div style=display:flex;align-items:center;gap:.5rem><strong style=font-size:1rem>Something went wrong!</strong><button style="appearance:none;font-size:.6em;border:1px solid currentColor;padding:.1rem .2rem;font-weight:bold;border-radius:.25rem"></button></div><div style=height:.25rem>`);
var _tmpl$2 = /* @__PURE__ */ template(`<div><pre style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto">`);
var _tmpl$3 = /* @__PURE__ */ template(`<code>`);
function CatchBoundary(props) {
	const [retryKey, setRetryKey] = Solid.createSignal({});
	let resetBoundary;
	let initialized = false;
	let previousKey;
	Solid.onCleanup(() => {
		resetBoundary = void 0;
	});
	Solid.createEffect(props.getResetKey, (key) => {
		if (!initialized) {
			initialized = true;
			previousKey = key;
			return;
		}
		if (key === previousKey) return;
		previousKey = key;
		const reset = resetBoundary;
		if (reset) queueMicrotask(() => {
			if (resetBoundary !== reset) return;
			setRetryKey({});
			reset();
			Solid.flush();
		});
	});
	return createComponent(Solid.Errored, {
		fallback: (error, reset) => {
			const resolvedError = Solid.untrack(() => error());
			props.onCatch?.(resolvedError);
			resetBoundary = reset;
			return process.env.NODE_ENV !== "production" ? renderInNonRouteComponentContext(() => createComponent(Dynamic, {
				get component() {
					return props.errorComponent ?? ErrorComponent;
				},
				error: resolvedError,
				reset
			}), "errorComponent") : createComponent(Dynamic, {
				get component() {
					return props.errorComponent ?? ErrorComponent;
				},
				error: resolvedError,
				reset
			});
		},
		get children() {
			return createComponent(Solid.Show, {
				get when() {
					return retryKey();
				},
				keyed: true,
				children: (_retryKey) => props.render?.() ?? props.children
			});
		}
	});
}
function ErrorComponent({ error }) {
	const [show, setShow] = Solid.createSignal(process.env.NODE_ENV !== "production");
	var _el$ = _tmpl$();
	var _el$2 = _el$.firstChild;
	var _el$4 = _el$2.firstChild.nextSibling;
	_el$2.nextSibling;
	_el$4.$$click = () => setShow((d) => !d);
	insert(_el$4, () => {
		return show() ? "Hide Error" : "Show Error";
	});
	insert(_el$, (() => {
		var _c$ = memo(() => {
			return !!show();
		});
		return () => {
			return _c$() ? (() => {
				var _el$6 = _tmpl$2();
				var _el$7 = _el$6.firstChild;
				insert(_el$7, (() => {
					var _c$2 = memo(() => {
						return !!error.message;
					});
					return () => {
						return _c$2() ? (() => {
							var _el$8 = _tmpl$3();
							insert(_el$8, () => {
								return error.message;
							});
							return _el$8;
						})() : null;
					};
				})());
				return _el$6;
			})() : null;
		};
	})(), null);
	return _el$;
}
delegateEvents(["click"]);
//#endregion
export { CatchBoundary, ErrorComponent };

//# sourceMappingURL=CatchBoundary.js.map