alepha 0.18.2 → 0.18.3

package/dist/react/router/index.browser.js

@@ -192,124 +192,407 @@ const NotFound = (props) => /* @__PURE__ */ jsxs("div", {
 	})]
 });
 
+//#endregion
+//#region ../../src/react/router/errors/Redirection.ts
+/**
+* Used for Redirection during the page loading.
+*
+* Depends on the context, it can be thrown or just returned.
+*
+* @example
+* ```ts
+* import { Redirection } from "alepha/react";
+*
+* const MyPage = $page({
+*   loader: async () => {
+*    if (needRedirect) {
+*      throw new Redirection("/new-path");
+*    }
+*   },
+* });
+* ```
+*/
+var Redirection = class extends AlephaError {
+	redirect;
+	constructor(redirect) {
+		super("Redirection");
+		this.redirect = redirect;
+	}
+};
+
+//#endregion
+//#region ../../src/react/router/hooks/useRouterState.ts
+const useRouterState = () => {
+	const [state] = useStore("alepha.react.router.state");
+	if (!state) throw new AlephaError("Missing react router state");
+	return state;
+};
+
 //#endregion
 //#region ../../src/react/router/components/ErrorViewer.tsx
 const mono = "ui-monospace, \"JetBrains Mono\", SFMono-Regular, Menlo, Monaco, Consolas, monospace";
-const ErrorViewer = ({ error, alepha }) => {
-	if (alepha.isProduction()) return /* @__PURE__ */ jsx("div", {
-		style: s.root,
-		children: "Something went wrong."
-	});
+const ErrorViewer = (props) => {
+	if (props.alepha.isProduction()) return /* @__PURE__ */ jsx(ProdErrorPage, { error: props.error });
+	return /* @__PURE__ */ jsx(DevErrorPage, { ...props });
+};
+const DevErrorPage = (props) => {
+	const [copied, setCopied] = useState(false);
+	const pathname = useRouterState().url.pathname;
+	const handleCopy = () => {
+		const text = buildErrorText(props.error);
+		if (typeof navigator !== "undefined" && navigator.clipboard) {
+			navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2e3);
+		}
+	};
+	const status = getHttpStatus(props.error);
 	return /* @__PURE__ */ jsx("div", {
-		style: s.root,
-		children: /* @__PURE__ */ jsx(ErrorBlock, { error })
+		style: dev.overlay,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: dev.card,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: dev.header,
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: dev.headerLeft,
+						children: [/* @__PURE__ */ jsx("div", {
+							style: dev.icon,
+							children: "!"
+						}), /* @__PURE__ */ jsx("div", {
+							style: dev.title,
+							children: props.error.name || "Error"
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						style: dev.headerRight,
+						children: [props.onRetry && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							style: dev.retryBtn,
+							onClick: props.onRetry,
+							children: "Retry"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							style: dev.copyBtn,
+							onClick: handleCopy,
+							children: copied ? "Copied" : "Copy"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(ErrorBlock, { error: props.error }),
+				/* @__PURE__ */ jsxs("div", {
+					style: dev.meta,
+					children: [
+						pathname && /* @__PURE__ */ jsx("span", {
+							style: dev.metaItem,
+							children: pathname
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: dev.metaItem,
+							children: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+						}),
+						status && /* @__PURE__ */ jsx("span", {
+							style: dev.statusBadge,
+							children: status
+						})
+					]
+				})
+			]
+		})
 	});
 };
-function ErrorBlock({ error, depth = 0 }) {
+const ErrorBlock = (props) => {
+	const { error, depth = 0 } = props;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		depth > 0 && /* @__PURE__ */ jsx("div", {
-			style: s.caused,
+			style: dev.causedBy,
 			children: "Caused by:"
 		}),
-		/* @__PURE__ */ jsxs("div", {
-			style: s.name,
+		/* @__PURE__ */ jsxs("pre", {
+			style: dev.messageBlock,
 			children: [
 				error.name,
 				": ",
 				error.message
 			]
 		}),
-		error.stack && /* @__PURE__ */ jsx("pre", {
-			style: s.stack,
+		error.stack && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			style: dev.stackLabel,
+			children: "STACK TRACE"
+		}), /* @__PURE__ */ jsx("pre", {
+			style: dev.stackBlock,
 			children: cleanStack(error.stack)
-		}),
+		})] }),
 		error.cause instanceof Error && /* @__PURE__ */ jsx(ErrorBlock, {
 			error: error.cause,
 			depth: depth + 1
 		})
 	] });
-}
+};
+const ProdErrorPage = (props) => {
+	const requestId = props.error.requestId;
+	const handleReload = () => {
+		if (typeof window !== "undefined") window.location.reload();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: prod.page,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: prod.card,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: prod.heading,
+					children: "Something went wrong"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: prod.subtitle,
+					children: "We're having trouble processing your request."
+				}),
+				requestId && /* @__PURE__ */ jsxs("div", {
+					style: prod.refText,
+					children: ["Reference: ", requestId]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: prod.actions,
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						style: prod.reloadBtn,
+						onClick: handleReload,
+						children: "Reload page"
+					}), /* @__PURE__ */ jsx("a", {
+						href: "/",
+						style: prod.homeLink,
+						children: "Go home"
+					})]
+				})
+			]
+		})
+	});
+};
 function cleanStack(stack) {
 	return stack.split("\n").slice(1).map((l) => l.trim()).join("\n");
 }
-const s = {
-	root: {
+function buildErrorText(error) {
+	const parts = [];
+	const append = (err, depth) => {
+		if (depth > 0) parts.push(`\nCaused by:`);
+		parts.push(`${err.name}: ${err.message}`);
+		if (err.stack) parts.push(cleanStack(err.stack));
+		if (err.cause instanceof Error) append(err.cause, depth + 1);
+	};
+	append(error, 0);
+	return parts.join("\n");
+}
+function getHttpStatus(error) {
+	if ("status" in error && typeof error.status === "number") return error.status;
+}
+const dev = {
+	overlay: {
+		position: "fixed",
+		inset: 0,
+		zIndex: 2147483647,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
 		padding: "24px",
+		backgroundColor: "rgba(0, 0, 0, 0.75)",
+		backdropFilter: "blur(4px)",
 		fontFamily: mono,
 		fontSize: "13px",
-		color: "#333",
-		backgroundColor: "#fff"
+		color: "#e5e7eb",
+		boxSizing: "border-box",
+		overflow: "auto"
 	},
-	name: {
-		color: "#dc2626",
-		fontSize: "14px",
-		fontWeight: 600,
-		marginBottom: "8px",
-		wordBreak: "break-word"
+	card: {
+		width: "100%",
+		maxWidth: "900px",
+		maxHeight: "90vh",
+		overflow: "auto",
+		padding: "24px",
+		backgroundColor: "#111",
+		borderLeft: "4px solid #ef4444",
+		borderRadius: "8px",
+		boxShadow: "0 25px 50px rgba(0, 0, 0, 0.5)"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginBottom: "20px",
+		flexWrap: "wrap",
+		gap: "12px"
+	},
+	headerLeft: {
+		display: "flex",
+		alignItems: "center",
+		gap: "12px",
+		minWidth: 0
+	},
+	headerRight: {
+		display: "flex",
+		gap: "8px",
+		flexShrink: 0
+	},
+	icon: {
+		width: "28px",
+		height: "28px",
+		borderRadius: "50%",
+		backgroundColor: "#ef4444",
+		color: "#fff",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontWeight: 700,
+		fontSize: "16px",
+		flexShrink: 0
+	},
+	title: {
+		color: "#f87171",
+		fontSize: "18px",
+		fontWeight: 700
+	},
+	retryBtn: {
+		padding: "6px 16px",
+		backgroundColor: "#2563eb",
+		color: "#fff",
+		border: "none",
+		borderRadius: "6px",
+		cursor: "pointer",
+		fontFamily: mono,
+		fontSize: "12px",
+		fontWeight: 600
+	},
+	copyBtn: {
+		padding: "6px 16px",
+		backgroundColor: "transparent",
+		color: "#9ca3af",
+		border: "1px solid #374151",
+		borderRadius: "6px",
+		cursor: "pointer",
+		fontFamily: mono,
+		fontSize: "12px",
+		fontWeight: 600
 	},
-	stack: {
+	messageBlock: {
+		margin: "0 0 12px",
+		padding: "12px",
+		backgroundColor: "#1f2937",
+		borderRadius: "6px",
+		color: "#f9fafb",
+		fontSize: "13px",
+		lineHeight: 1.6,
+		whiteSpace: "pre-wrap",
+		wordBreak: "break-word",
+		overflow: "auto"
+	},
+	stackLabel: {
+		fontSize: "10px",
+		color: "#6b7280",
+		textTransform: "uppercase",
+		letterSpacing: "1.5px",
+		marginBottom: "6px",
+		fontWeight: 600
+	},
+	stackBlock: {
 		margin: "0 0 20px",
 		padding: "12px",
-		backgroundColor: "#f5f5f5",
-		borderRadius: "4px",
-		border: "1px solid #e0e0e0",
+		backgroundColor: "#0f172a",
+		borderRadius: "6px",
+		color: "#94a3b8",
 		fontSize: "12px",
 		lineHeight: 1.6,
-		color: "#666",
-		overflow: "auto",
 		whiteSpace: "pre-wrap",
-		wordBreak: "break-all"
+		wordBreak: "break-all",
+		overflow: "auto"
 	},
-	caused: {
-		fontSize: "11px",
-		color: "#999",
+	causedBy: {
+		fontSize: "10px",
+		color: "#6b7280",
 		textTransform: "uppercase",
-		letterSpacing: "1px",
-		marginBottom: "6px",
-		paddingTop: "4px",
-		borderTop: "1px solid #e0e0e0"
+		letterSpacing: "1.5px",
+		marginBottom: "8px",
+		paddingTop: "12px",
+		borderTop: "1px solid #374151",
+		fontWeight: 600
+	},
+	meta: {
+		display: "flex",
+		gap: "16px",
+		alignItems: "center",
+		paddingTop: "12px",
+		borderTop: "1px solid #1f2937",
+		flexWrap: "wrap"
+	},
+	metaItem: {
+		fontSize: "11px",
+		color: "#6b7280"
+	},
+	statusBadge: {
+		fontSize: "11px",
+		color: "#fbbf24",
+		backgroundColor: "#422006",
+		padding: "2px 8px",
+		borderRadius: "4px",
+		fontWeight: 600
 	}
 };
-
-//#endregion
-//#region ../../src/react/router/contexts/RouterLayerContext.ts
-const RouterLayerContext = createContext(void 0);
-
-//#endregion
-//#region ../../src/react/router/errors/Redirection.ts
-/**
-* Used for Redirection during the page loading.
-*
-* Depends on the context, it can be thrown or just returned.
-*
-* @example
-* ```ts
-* import { Redirection } from "alepha/react";
-*
-* const MyPage = $page({
-*   loader: async () => {
-*    if (needRedirect) {
-*      throw new Redirection("/new-path");
-*    }
-*   },
-* });
-* ```
-*/
-var Redirection = class extends AlephaError {
-	redirect;
-	constructor(redirect) {
-		super("Redirection");
-		this.redirect = redirect;
+const prod = {
+	page: {
+		minHeight: "100vh",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: "#0f172a",
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+		padding: "24px"
+	},
+	card: {
+		textAlign: "center",
+		maxWidth: "440px"
+	},
+	heading: {
+		fontSize: "28px",
+		fontWeight: 700,
+		color: "#f1f5f9",
+		marginBottom: "12px"
+	},
+	subtitle: {
+		fontSize: "16px",
+		color: "#94a3b8",
+		marginBottom: "24px",
+		lineHeight: 1.5
+	},
+	refText: {
+		fontSize: "13px",
+		color: "#64748b",
+		marginBottom: "24px",
+		fontFamily: mono
+	},
+	actions: {
+		display: "flex",
+		gap: "12px",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	reloadBtn: {
+		padding: "10px 24px",
+		backgroundColor: "#2563eb",
+		color: "#fff",
+		border: "none",
+		borderRadius: "8px",
+		cursor: "pointer",
+		fontSize: "14px",
+		fontWeight: 600
+	},
+	homeLink: {
+		padding: "10px 24px",
+		color: "#94a3b8",
+		textDecoration: "none",
+		fontSize: "14px"
 	}
 };
 
 //#endregion
-//#region ../../src/react/router/hooks/useRouterState.ts
-const useRouterState = () => {
-	const [state] = useStore("alepha.react.router.state");
-	if (!state) throw new AlephaError("Missing react router state");
-	return state;
-};
+//#region ../../src/react/router/contexts/RouterLayerContext.ts
+const RouterLayerContext = createContext(void 0);
 
 //#endregion
 //#region ../../src/react/router/components/NestedView.tsx
@@ -340,6 +623,7 @@ const NestedView = (props) => {
 	const onError = routerLayer?.onError;
 	const state = useRouterState();
 	const alepha = useAlepha();
+	const [boundaryKey, setBoundaryKey] = useState(0);
 	const [view, setView] = useState(state.layers[index]?.element);
 	const [animation, setAnimation] = useState("");
 	const animationExitDuration = useRef(0);
@@ -400,7 +684,7 @@ const NestedView = (props) => {
 	if (props.errorBoundary) return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback: props.errorBoundary,
 		children: element
-	});
+	}, boundaryKey);
 	const fallback = (error) => {
 		const result = onError?.(error, state) ?? /* @__PURE__ */ jsx(ErrorViewer, {
 			error,
@@ -412,7 +696,7 @@ const NestedView = (props) => {
 	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		children: element
-	});
+	}, boundaryKey);
 };
 var NestedView_default = memo(NestedView);
 function parseAnimation(animationLike, state, type = "enter") {
@@ -446,17 +730,49 @@ function parseAnimation(animationLike, state, type = "enter") {
 const reactPageOptions = $atom({
 	name: "alepha.react.page.options",
 	description: "Configuration options for the React page provider.",
-	schema: t.object({ strictMode: t.boolean({ default: true }) }),
-	default: { strictMode: true }
+	schema: t.object({
+		strictMode: t.boolean({ default: true }),
+		staticFilePattern: t.string()
+	}),
+	default: {
+		strictMode: true,
+		staticFilePattern: "\\.[a-zA-Z0-9]{1,10}$"
+	}
 });
 /**
 * Handle page routes for React applications. (Browser and Server)
 */
 var ReactPageProvider = class {
+	dateTimeProvider = $inject(DateTimeProvider);
 	log = $logger();
 	options = $use(reactPageOptions);
 	alepha = $inject(Alepha);
 	pages = [];
+	nextIdCursor = 0;
+	configure = $hook({
+		on: "configure",
+		handler: () => {
+			let hasNotFoundHandler = false;
+			const pages = this.alepha.primitives($page);
+			const hasParent = (it) => {
+				if (it.options.parent) return true;
+				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
+			};
+			for (const page of pages) {
+				if (page.options.path === "/*") hasNotFoundHandler = true;
+				if (hasParent(page)) continue;
+				this.add(this.map(pages, page));
+			}
+			if (!hasNotFoundHandler && pages.length > 0) this.add({
+				path: "/*",
+				name: "notFound",
+				component: NotFound,
+				onServerResponse: ({ reply }) => {
+					reply.status = 404;
+				}
+			});
+		}
+	});
 	getPages() {
 		return this.pages;
 	}
@@ -544,13 +860,13 @@ var ReactPageProvider = class {
 				this.convertStringObjectToObject(route.schema?.query, state.query);
 				config.query = route.schema?.query ? this.alepha.codec.decode(route.schema.query, state.query) : {};
 			} catch (e) {
-				it.error = e;
+				it.error = e instanceof Error ? e : new Error(String(e));
 				break;
 			}
 			try {
 				config.params = route.schema?.params ? this.alepha.codec.decode(route.schema.params, state.params) : {};
 			} catch (e) {
-				it.error = e;
+				it.error = e instanceof Error ? e : new Error(String(e));
 				break;
 			}
 			it.config = { ...config };
@@ -574,6 +890,7 @@ var ReactPageProvider = class {
 				}
 				forceRefresh = true;
 			}
+			if (route.redirect) return { redirect: route.redirect };
 			if (!route.loader) continue;
 			try {
 				const args = Object.create(state);
@@ -587,7 +904,7 @@ var ReactPageProvider = class {
 			} catch (e) {
 				if (e instanceof Redirection) return { redirect: e.redirect };
 				this.log.error("Page loader has failed", e);
-				it.error = e;
+				it.error = e instanceof Error ? e : new Error(String(e));
 				break;
 			}
 		}
@@ -614,7 +931,7 @@ var ReactPageProvider = class {
 					...it.route.props ? it.route.props() : {},
 					...props,
 					...context
-				});
+				}, state.url);
 				state.layers.push({
 					name: it.route.name,
 					props,
@@ -627,7 +944,7 @@ var ReactPageProvider = class {
 					cache: it.cache
 				});
 			} catch (e) {
-				it.error = e;
+				it.error = e instanceof Error ? e : new Error(String(e));
 			}
 			if (it.error) try {
 				let element = await state.onError(it.error, state);
@@ -643,7 +960,8 @@ var ReactPageProvider = class {
 					element: this.renderView(i + 1, path, element, it.route),
 					index: i + 1,
 					path,
-					route: it.route
+					route: it.route,
+					cache: it.cache
 				});
 				break;
 			} catch (e) {
@@ -661,11 +979,45 @@ var ReactPageProvider = class {
 			parent = parent.parent;
 		}
 	}
-	async createElement(page, props) {
+	async createElement(page, props, targetUrl) {
 		if (page.lazy && page.component) this.log.warn(`Page ${page.name} has both lazy and component options, lazy will be used`);
-		if (page.lazy) return createElement((await page.lazy()).default, props);
+		if (page.lazy) try {
+			return createElement((await page.lazy()).default, props);
+		} catch (error) {
+			if (this.alepha.isBrowser() && this.isChunkLoadError(error)) {
+				if (this.reloadAfterChunkError(targetUrl)) return;
+			}
+			throw error;
+		}
 		if (page.component) return createElement(page.component, props);
 	}
+	/**
+	* Detect chunk load errors caused by stale dynamic imports after a deployment.
+	* When new assets are deployed with different hashes, old chunk URLs return 404.
+	*/
+	isChunkLoadError(error) {
+		if (!(error instanceof Error)) return false;
+		const msg = error.message;
+		return /Failed to fetch dynamically imported module/.test(msg) || /error loading dynamically imported module/i.test(msg) || /Unable to preload CSS/.test(msg) || /Importing a module script failed/.test(msg);
+	}
+	/**
+	* Navigate to the target URL to fetch updated assets after a chunk load failure.
+	* Uses sessionStorage to prevent infinite reload loops.
+	* Returns true if navigation was initiated.
+	*/
+	reloadAfterChunkError(url) {
+		const key = "alepha:chunk-reload";
+		const lastReload = sessionStorage.getItem(key);
+		const now = this.dateTimeProvider.nowMillis();
+		if (lastReload && now - Number(lastReload) < 1e4) {
+			this.log.error("Chunk load failed after recent reload, not retrying to avoid loop");
+			return false;
+		}
+		this.log.warn("Chunk load failed after deployment, reloading page");
+		sessionStorage.setItem(key, String(now));
+		window.location.assign(url ? url.pathname + url.search : window.location.href);
+		return true;
+	}
 	renderError(error) {
 		return createElement(ErrorViewer, {
 			error,
@@ -700,30 +1052,6 @@ var ReactPageProvider = class {
 			onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error))
 		} }, element);
 	}
-	configure = $hook({
-		on: "configure",
-		handler: () => {
-			let hasNotFoundHandler = false;
-			const pages = this.alepha.primitives($page);
-			const hasParent = (it) => {
-				if (it.options.parent) return true;
-				for (const page of pages) if ((page.options.children ? Array.isArray(page.options.children) ? page.options.children : page.options.children() : []).includes(it)) return true;
-			};
-			for (const page of pages) {
-				if (page.options.path === "/*") hasNotFoundHandler = true;
-				if (hasParent(page)) continue;
-				this.add(this.map(pages, page));
-			}
-			if (!hasNotFoundHandler && pages.length > 0) this.add({
-				path: "/*",
-				name: "notFound",
-				component: NotFound,
-				onServerResponse: ({ reply }) => {
-					reply.status = 404;
-				}
-			});
-		}
-	});
 	map(pages, target) {
 		const children = target.options.children ? Array.isArray(target.options.children) ? target.options.children : target.options.children() : [];
 		const getChildrenFromParent = (it) => {
@@ -761,10 +1089,9 @@ var ReactPageProvider = class {
 		if (path.endsWith("/") && path !== "/") path = path.slice(0, -1);
 		return path;
 	}
-	_next = 0;
 	nextId() {
-		this._next += 1;
-		return `P${this._next}`;
+		this.nextIdCursor += 1;
+		return `P${this.nextIdCursor}`;
 	}
 };
 const isPageRoute = (it) => {
@@ -787,7 +1114,7 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 	configure = $hook({
 		on: "configure",
 		handler: async () => {
-			for (const page of this.pageApi.getPages()) if (page.component || page.lazy) this.push({
+			for (const page of this.pageApi.getPages()) if (page.component || page.lazy || page.redirect) this.push({
 				path: page.match,
 				page
 			});
@@ -832,9 +1159,14 @@ var ReactBrowserRouterProvider = class extends RouterProvider {
 			await this.alepha.events.emit("react:transition:success", { state });
 		} catch (e) {
 			this.log.error("Transition has failed", e);
+			let element;
+			try {
+				const result = state.onError(e, state);
+				if (result != null && !(result instanceof Redirection)) element = result;
+			} catch {}
 			state.layers = [{
 				name: "error",
-				element: this.pageApi.renderError(e),
+				element: element ?? this.pageApi.renderError(e),
 				index: 0,
 				path: "/"
 			}];