@alepha/react 0.13.6 → 0.13.8

package/dist/core/index.browser.js

@@ -200,150 +200,388 @@ var ClientOnly_default = ClientOnly;
 
 //#endregion
 //#region ../../src/core/components/ErrorViewer.tsx
+/**
+* Error viewer component that displays error details in development mode
+*/
 const ErrorViewer = ({ error, alepha }) => {
 	const [expanded, setExpanded] = useState(false);
 	if (alepha.isProduction()) return /* @__PURE__ */ jsx(ErrorViewerProduction, {});
-	const stackLines = error.stack?.split("\n") ?? [];
-	const previewLines = stackLines.slice(0, 5);
-	const hiddenLineCount = stackLines.length - previewLines.length;
-	const copyToClipboard = (text) => {
-		navigator.clipboard.writeText(text).catch((err) => {
-			console.error("Clipboard error:", err);
-		});
+	const frames = parseStackTrace(error.stack);
+	const visibleFrames = expanded ? frames : frames.slice(0, 6);
+	const hiddenCount = frames.length - 6;
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.overlay,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles.container,
+			children: [/* @__PURE__ */ jsx(Header, { error }), /* @__PURE__ */ jsx(StackTraceSection, {
+				frames,
+				visibleFrames,
+				expanded,
+				hiddenCount,
+				onToggle: () => setExpanded(!expanded)
+			})]
+		})
+	});
+};
+var ErrorViewer_default = ErrorViewer;
+/**
+* Parse stack trace string into structured frames
+*/
+function parseStackTrace(stack) {
+	if (!stack) return [];
+	const lines = stack.split("\n").slice(1);
+	const frames = [];
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (!trimmed.startsWith("at ")) continue;
+		const frame = parseStackLine(trimmed);
+		if (frame) frames.push(frame);
+	}
+	return frames;
+}
+/**
+* Parse a single stack trace line into a structured frame
+*/
+function parseStackLine(line) {
+	const withFn = line.match(/^at\s+(.+?)\s+\((.+):(\d+):(\d+)\)$/);
+	if (withFn) return {
+		fn: withFn[1],
+		file: withFn[2],
+		line: withFn[3],
+		col: withFn[4],
+		raw: line
 	};
-	const styles = {
-		container: {
-			padding: "24px",
-			backgroundColor: "#FEF2F2",
-			color: "#7F1D1D",
-			border: "1px solid #FECACA",
-			borderRadius: "16px",
-			boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
-			fontFamily: "monospace",
-			maxWidth: "768px",
-			margin: "40px auto"
-		},
-		heading: {
-			fontSize: "20px",
-			fontWeight: "bold",
-			marginBottom: "10px"
-		},
-		name: {
-			fontSize: "16px",
-			fontWeight: 600
-		},
-		message: {
-			fontSize: "14px",
-			marginBottom: "16px"
-		},
-		sectionHeader: {
-			display: "flex",
-			justifyContent: "space-between",
-			alignItems: "center",
-			fontSize: "12px",
-			marginBottom: "4px",
-			color: "#991B1B"
-		},
-		copyButton: {
-			fontSize: "12px",
-			color: "#DC2626",
-			background: "none",
-			border: "none",
-			cursor: "pointer",
-			textDecoration: "underline"
-		},
-		stackContainer: {
-			backgroundColor: "#FEE2E2",
-			padding: "12px",
-			borderRadius: "8px",
-			fontSize: "13px",
-			lineHeight: "1.4",
-			overflowX: "auto",
-			whiteSpace: "pre-wrap"
-		},
-		expandLine: {
-			color: "#F87171",
-			cursor: "pointer",
-			marginTop: "8px"
-		}
+	const withoutFn = line.match(/^at\s+(.+):(\d+):(\d+)$/);
+	if (withoutFn) return {
+		fn: "<anonymous>",
+		file: withoutFn[1],
+		line: withoutFn[2],
+		col: withoutFn[3],
+		raw: line
+	};
+	return {
+		fn: "",
+		file: line.replace(/^at\s+/, ""),
+		line: "",
+		col: "",
+		raw: line
+	};
+}
+/**
+* Copy text to clipboard
+*/
+function copyToClipboard(text) {
+	navigator.clipboard.writeText(text).catch((err) => {
+		console.error("Clipboard error:", err);
+	});
+}
+/**
+* Header section with error type and message
+*/
+function Header({ error }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = () => {
+		copyToClipboard(error.stack || error.message);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		style: styles.container,
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			/* @__PURE__ */ jsx("div", {
-				style: styles.heading,
-				children: "🔥 Error"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style: styles.name,
+		style: styles.header,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.headerTop,
+			children: [/* @__PURE__ */ jsx("div", {
+				style: styles.badge,
 				children: error.name
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style: styles.message,
-				children: error.message
-			})
-		] }), stackLines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-			style: styles.sectionHeader,
-			children: [/* @__PURE__ */ jsx("span", { children: "Stack trace" }), /* @__PURE__ */ jsx("button", {
+			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				onClick: () => copyToClipboard(error.stack),
-				style: styles.copyButton,
-				children: "Copy all"
+				onClick: handleCopy,
+				style: styles.copyBtn,
+				children: copied ? "Copied" : "Copy Stack"
 			})]
-		}), /* @__PURE__ */ jsxs("pre", {
-			style: styles.stackContainer,
-			children: [(expanded ? stackLines : previewLines).map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)), !expanded && hiddenLineCount > 0 && /* @__PURE__ */ jsxs("div", {
-				style: styles.expandLine,
-				onClick: () => setExpanded(true),
-				children: [
-					"+ ",
-					hiddenLineCount,
-					" more lines..."
-				]
-			})]
-		})] })]
+		}), /* @__PURE__ */ jsx("h1", {
+			style: styles.message,
+			children: error.message
+		})]
 	});
-};
-var ErrorViewer_default = ErrorViewer;
-const ErrorViewerProduction = () => {
-	const styles = {
-		container: {
-			padding: "24px",
-			backgroundColor: "#FEF2F2",
-			color: "#7F1D1D",
-			border: "1px solid #FECACA",
-			borderRadius: "16px",
-			boxShadow: "0 8px 24px rgba(0,0,0,0.05)",
-			fontFamily: "monospace",
-			maxWidth: "768px",
-			margin: "40px auto",
-			textAlign: "center"
-		},
-		heading: {
-			fontSize: "20px",
-			fontWeight: "bold",
-			marginBottom: "8px"
-		},
-		name: {
-			fontSize: "16px",
-			fontWeight: 600,
-			marginBottom: "4px"
-		},
-		message: {
-			fontSize: "14px",
-			opacity: .85
-		}
-	};
+}
+/**
+* Stack trace section with expandable frames
+*/
+function StackTraceSection({ frames, visibleFrames, expanded, hiddenCount, onToggle }) {
+	if (frames.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		style: styles.container,
+		style: styles.stackSection,
 		children: [/* @__PURE__ */ jsx("div", {
-			style: styles.heading,
-			children: "🚨 An error occurred"
-		}), /* @__PURE__ */ jsx("div", {
-			style: styles.message,
-			children: "Something went wrong. Please try again later."
+			style: styles.stackHeader,
+			children: "Call Stack"
+		}), /* @__PURE__ */ jsxs("div", {
+			style: styles.frameList,
+			children: [
+				visibleFrames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, {
+					frame,
+					index: i
+				}, i)),
+				!expanded && hiddenCount > 0 && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onToggle,
+					style: styles.expandBtn,
+					children: [
+						"Show ",
+						hiddenCount,
+						" more frames"
+					]
+				}),
+				expanded && hiddenCount > 0 && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onToggle,
+					style: styles.expandBtn,
+					children: "Show less"
+				})
+			]
 		})]
 	});
+}
+/**
+* Single stack frame row
+*/
+function StackFrameRow({ frame, index }) {
+	const isFirst = index === 0;
+	const fileName = frame.file.split("/").pop() || frame.file;
+	const dirPath = frame.file.substring(0, frame.file.length - fileName.length);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			...styles.frame,
+			...isFirst ? styles.frameFirst : {}
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: styles.frameIndex,
+			children: index + 1
+		}), /* @__PURE__ */ jsxs("div", {
+			style: styles.frameContent,
+			children: [frame.fn && /* @__PURE__ */ jsx("div", {
+				style: styles.fnName,
+				children: frame.fn
+			}), /* @__PURE__ */ jsxs("div", {
+				style: styles.filePath,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: styles.dirPath,
+						children: dirPath
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: styles.fileName,
+						children: fileName
+					}),
+					frame.line && /* @__PURE__ */ jsxs("span", {
+						style: styles.lineCol,
+						children: [
+							":",
+							frame.line,
+							":",
+							frame.col
+						]
+					})
+				]
+			})]
+		})]
+	});
+}
+/**
+* Production error view - minimal information
+*/
+function ErrorViewerProduction() {
+	return /* @__PURE__ */ jsx("div", {
+		style: styles.overlay,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: styles.prodContainer,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: styles.prodIcon,
+					children: "!"
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					style: styles.prodTitle,
+					children: "Application Error"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: styles.prodMessage,
+					children: "An unexpected error occurred. Please try again later."
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => window.location.reload(),
+					style: styles.prodButton,
+					children: "Reload Page"
+				})
+			]
+		})
+	});
+}
+const styles = {
+	overlay: {
+		position: "fixed",
+		inset: 0,
+		backgroundColor: "rgba(0, 0, 0, 0.8)",
+		display: "flex",
+		alignItems: "flex-start",
+		justifyContent: "center",
+		padding: "40px 20px",
+		overflow: "auto",
+		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+		zIndex: 99999
+	},
+	container: {
+		width: "100%",
+		maxWidth: "960px",
+		backgroundColor: "#1a1a1a",
+		borderRadius: "12px",
+		overflow: "hidden",
+		boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+	},
+	header: {
+		padding: "24px 28px",
+		borderBottom: "1px solid #333",
+		background: "linear-gradient(to bottom, #1f1f1f, #1a1a1a)"
+	},
+	headerTop: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		marginBottom: "16px"
+	},
+	badge: {
+		display: "inline-block",
+		padding: "6px 12px",
+		backgroundColor: "#dc2626",
+		color: "#fff",
+		fontSize: "12px",
+		fontWeight: 600,
+		borderRadius: "6px",
+		letterSpacing: "0.025em"
+	},
+	copyBtn: {
+		padding: "8px 16px",
+		backgroundColor: "transparent",
+		color: "#888",
+		fontSize: "13px",
+		fontWeight: 500,
+		border: "1px solid #444",
+		borderRadius: "6px",
+		cursor: "pointer",
+		transition: "all 0.15s"
+	},
+	message: {
+		margin: 0,
+		fontSize: "20px",
+		fontWeight: 500,
+		color: "#fff",
+		lineHeight: 1.5,
+		wordBreak: "break-word"
+	},
+	stackSection: { padding: "0" },
+	stackHeader: {
+		padding: "16px 28px",
+		fontSize: "11px",
+		fontWeight: 600,
+		color: "#666",
+		textTransform: "uppercase",
+		letterSpacing: "0.1em",
+		borderBottom: "1px solid #2a2a2a"
+	},
+	frameList: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	frame: {
+		display: "flex",
+		alignItems: "flex-start",
+		padding: "14px 28px",
+		borderBottom: "1px solid #252525",
+		transition: "background-color 0.15s"
+	},
+	frameFirst: { backgroundColor: "rgba(220, 38, 38, 0.1)" },
+	frameIndex: {
+		width: "28px",
+		flexShrink: 0,
+		fontSize: "12px",
+		fontWeight: 500,
+		color: "#555",
+		fontFamily: "monospace"
+	},
+	frameContent: {
+		flex: 1,
+		minWidth: 0
+	},
+	fnName: {
+		fontSize: "14px",
+		fontWeight: 500,
+		color: "#e5e5e5",
+		marginBottom: "4px",
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace"
+	},
+	filePath: {
+		fontSize: "13px",
+		color: "#888",
+		fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
+		wordBreak: "break-all"
+	},
+	dirPath: { color: "#555" },
+	fileName: { color: "#0ea5e9" },
+	lineCol: { color: "#eab308" },
+	expandBtn: {
+		padding: "16px 28px",
+		backgroundColor: "transparent",
+		color: "#666",
+		fontSize: "13px",
+		fontWeight: 500,
+		border: "none",
+		borderTop: "1px solid #252525",
+		cursor: "pointer",
+		textAlign: "left",
+		transition: "all 0.15s"
+	},
+	prodContainer: {
+		textAlign: "center",
+		padding: "60px 40px",
+		backgroundColor: "#1a1a1a",
+		borderRadius: "12px",
+		maxWidth: "400px"
+	},
+	prodIcon: {
+		width: "64px",
+		height: "64px",
+		margin: "0 auto 24px",
+		backgroundColor: "#dc2626",
+		borderRadius: "50%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "32px",
+		fontWeight: 700,
+		color: "#fff"
+	},
+	prodTitle: {
+		margin: "0 0 12px",
+		fontSize: "24px",
+		fontWeight: 600,
+		color: "#fff"
+	},
+	prodMessage: {
+		margin: "0 0 28px",
+		fontSize: "15px",
+		color: "#888",
+		lineHeight: 1.6
+	},
+	prodButton: {
+		padding: "12px 24px",
+		backgroundColor: "#fff",
+		color: "#000",
+		fontSize: "14px",
+		fontWeight: 600,
+		border: "none",
+		borderRadius: "8px",
+		cursor: "pointer"
+	}
 };
 
 //#endregion
@@ -509,8 +747,11 @@ var ErrorBoundary_default = ErrorBoundary;
 * ```
 */
 const NestedView = (props) => {
-	const index = use(RouterLayerContext)?.index ?? 0;
+	const routerLayer = use(RouterLayerContext);
+	const index = routerLayer?.index ?? 0;
+	const onError = routerLayer?.onError;
 	const state = useRouterState();
+	const alepha = useAlepha();
 	const [view, setView] = useState(state.layers[index]?.element);
 	const [animation, setAnimation] = useState("");
 	const animationExitDuration = useRef(0);
@@ -572,12 +813,16 @@ const NestedView = (props) => {
 		fallback: props.errorBoundary,
 		children: element
 	});
+	const fallback = (error) => {
+		const result = onError?.(error, state) ?? /* @__PURE__ */ jsx(ErrorViewer_default, {
+			error,
+			alepha
+		});
+		if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
+		return result;
+	};
 	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
-		fallback: (error) => {
-			const result = state.onError(error, state);
-			if (result instanceof Redirection) return "Redirection inside ErrorBoundary is not allowed.";
-			return result;
-		},
+		fallback,
 		children: element
 	});
 };
@@ -770,6 +1015,7 @@ var ReactPageProvider = class {
 			}
 			if (!it.error) try {
 				const element = await this.createElement(it.route, {
+					...it.route.props ? it.route.props() : {},
 					...props,
 					...context
 				});
@@ -811,9 +1057,6 @@ var ReactPageProvider = class {
 		}
 		return { state };
 	}
-	createRedirectionLayer(redirect) {
-		return { redirect };
-	}
 	getErrorHandler(route) {
 		if (route.errorHandler) return route.errorHandler;
 		let parent = route.parent;
@@ -838,7 +1081,7 @@ var ReactPageProvider = class {
 	}
 	href(page, params = {}) {
 		const found = this.pages.find((it) => it.name === page.options.name);
-		if (!found) throw new Error(`Page ${page.options.name} not found`);
+		if (!found) throw new AlephaError(`Page ${page.options.name} not found`);
 		let url = found.path ?? "";
 		let parent = found.parent;
 		while (parent) {
@@ -857,7 +1100,8 @@ var ReactPageProvider = class {
 		const element = page.client ? createElement(ClientOnly_default, typeof page.client === "object" ? page.client : {}, view) : view;
 		return createElement(RouterLayerContext.Provider, { value: {
 			index,
-			path
+			path,
+			onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error))
 		} }, element);
 	}
 	configure = $hook({
@@ -1321,6 +1565,27 @@ var ReactRouter = class {
 	}
 };
 
+//#endregion
+//#region ../../src/core/contexts/AlephaProvider.tsx
+/**
+* AlephaProvider component to initialize and provide Alepha instance to the app.
+* This isn't recommended for apps using alepha/react/router, as Router will handle this for you.
+*/
+const AlephaProvider = (props) => {
+	const alepha = useMemo(() => Alepha.create(), []);
+	const [started, setStarted] = useState(false);
+	const [error, setError] = useState();
+	useEffect(() => {
+		alepha.start().then(() => setStarted(true)).catch((err) => setError(err));
+	}, [alepha]);
+	if (error) return props.onError(error);
+	if (!started) return props.onLoading();
+	return /* @__PURE__ */ jsx(AlephaContext.Provider, {
+		value: alepha,
+		children: props.children
+	});
+};
+
 //#endregion
 //#region ../../src/core/hooks/useInject.ts
 /**
@@ -1721,5 +1986,5 @@ const AlephaReact = $module({
 });
 
 //#endregion
-export { $page, AlephaContext, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PagePrimitive, ReactBrowserProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
+export { $page, AlephaContext, AlephaProvider, AlephaReact, ClientOnly_default as ClientOnly, ErrorBoundary_default as ErrorBoundary, ErrorViewer_default as ErrorViewer, Link_default as Link, NestedView_default as NestedView, NotFoundPage as NotFound, PagePrimitive, ReactBrowserProvider, ReactBrowserRouterProvider, ReactPageProvider, ReactRouter, Redirection, RouterLayerContext, isPageRoute, reactBrowserOptions, ssrSchemaLoading, useAction, useActive, useAlepha, useClient, useEvents, useInject, useQueryParams, useRouter, useRouterState, useSchema, useStore };
 //# sourceMappingURL=index.browser.js.map