@alepha/react 0.10.6 → 0.10.7

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@alepha/react",
 	"description": "Build server-side rendered (SSR) or single-page React applications.",
-	"version": "0.10.6",
+	"version": "0.10.7",
 	"type": "module",
 	"engines": {
 		"node": ">=22.0.0"
@@ -17,14 +17,14 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/core": "0.10.6",
-		"@alepha/datetime": "0.10.6",
-		"@alepha/logger": "0.10.6",
-		"@alepha/router": "0.10.6",
-		"@alepha/server": "0.10.6",
-		"@alepha/server-cache": "0.10.6",
-		"@alepha/server-links": "0.10.6",
-		"@alepha/server-static": "0.10.6"
+		"@alepha/core": "0.10.7",
+		"@alepha/datetime": "0.10.7",
+		"@alepha/logger": "0.10.7",
+		"@alepha/router": "0.10.7",
+		"@alepha/server": "0.10.7",
+		"@alepha/server-cache": "0.10.7",
+		"@alepha/server-links": "0.10.7",
+		"@alepha/server-static": "0.10.7"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.2.6",
@@ -32,7 +32,7 @@
 		"@types/react-dom": "^19.2.2",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"tsdown": "^0.15.7",
+		"tsdown": "^0.15.9",
 		"typescript": "^5.9.3",
 		"vitest": "^3.2.4"
 	},

package/src/components/ClientOnly.tsx

@@ -1,13 +1,13 @@
 import {
-	type PropsWithChildren,
-	type ReactNode,
-	useEffect,
-	useState,
+  type PropsWithChildren,
+  type ReactNode,
+  useEffect,
+  useState,
 } from "react";
 
 export interface ClientOnlyProps {
-	fallback?: ReactNode;
-	disabled?: boolean;
+  fallback?: ReactNode;
+  disabled?: boolean;
 }
 
 /**
@@ -21,15 +21,15 @@ export interface ClientOnlyProps {
  * - you want to prevent pre-rendering of a component
  */
 const ClientOnly = (props: PropsWithChildren<ClientOnlyProps>) => {
-	const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
-	useEffect(() => setMounted(true), []);
+  useEffect(() => setMounted(true), []);
 
-	if (props.disabled) {
-		return props.children;
-	}
+  if (props.disabled) {
+    return props.children;
+  }
 
-	return mounted ? props.children : props.fallback;
+  return mounted ? props.children : props.fallback;
 };
 
 export default ClientOnly;

package/src/components/ErrorBoundary.tsx

@@ -1,31 +1,31 @@
 import React, {
-	type ErrorInfo,
-	type PropsWithChildren,
-	type ReactNode,
+  type ErrorInfo,
+  type PropsWithChildren,
+  type ReactNode,
 } from "react";
 
 /**
  * Props for the ErrorBoundary component.
  */
 export interface ErrorBoundaryProps {
-	/**
-	 * Fallback React node to render when an error is caught.
-	 * If not provided, a default error message will be shown.
-	 */
-	fallback: (error: Error) => ReactNode;
+  /**
+   * Fallback React node to render when an error is caught.
+   * If not provided, a default error message will be shown.
+   */
+  fallback: (error: Error) => ReactNode;
 
-	/**
-	 * Optional callback that receives the error and error info.
-	 * Use this to log errors to a monitoring service.
-	 */
-	onError?: (error: Error, info: ErrorInfo) => void;
+  /**
+   * Optional callback that receives the error and error info.
+   * Use this to log errors to a monitoring service.
+   */
+  onError?: (error: Error, info: ErrorInfo) => void;
 }
 
 /**
  * State of the ErrorBoundary component.
  */
 interface ErrorBoundaryState {
-	error?: Error;
+  error?: Error;
 }
 
 /**
@@ -33,40 +33,40 @@ interface ErrorBoundaryState {
  * in any part of the React component tree.
  */
 export class ErrorBoundary extends React.Component<
-	PropsWithChildren<ErrorBoundaryProps>,
-	ErrorBoundaryState
+  PropsWithChildren<ErrorBoundaryProps>,
+  ErrorBoundaryState
 > {
-	constructor(props: ErrorBoundaryProps) {
-		super(props);
-		this.state = {};
-	}
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {};
+  }
 
-	/**
-	 * Update state so the next render shows the fallback UI.
-	 */
-	static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-		return {
-			error,
-		};
-	}
+  /**
+   * Update state so the next render shows the fallback UI.
+   */
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return {
+      error,
+    };
+  }
 
-	/**
-	 * Lifecycle method called when an error is caught.
-	 * You can log the error or perform side effects here.
-	 */
-	componentDidCatch(error: Error, info: ErrorInfo): void {
-		if (this.props.onError) {
-			this.props.onError(error, info);
-		}
-	}
+  /**
+   * Lifecycle method called when an error is caught.
+   * You can log the error or perform side effects here.
+   */
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    if (this.props.onError) {
+      this.props.onError(error, info);
+    }
+  }
 
-	render(): ReactNode {
-		if (this.state.error) {
-			return this.props.fallback(this.state.error);
-		}
+  render(): ReactNode {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error);
+    }
 
-		return this.props.children;
-	}
+    return this.props.children;
+  }
 }
 
 export default ErrorBoundary;

package/src/components/ErrorViewer.tsx

@@ -2,161 +2,161 @@ import type { Alepha } from "@alepha/core";
 import { useState } from "react";
 
 interface ErrorViewerProps {
-	error: Error;
-	alepha: Alepha;
+  error: Error;
+  alepha: Alepha;
 }
 
 // TODO: design this better
 
 const ErrorViewer = ({ error, alepha }: ErrorViewerProps) => {
-	const [expanded, setExpanded] = useState(false);
-	const isProduction = alepha.isProduction();
-	// const status = isHttpError(error) ? error.status : 500;
+  const [expanded, setExpanded] = useState(false);
+  const isProduction = alepha.isProduction();
+  // const status = isHttpError(error) ? error.status : 500;
 
-	if (isProduction) {
-		return <ErrorViewerProduction />;
-	}
+  if (isProduction) {
+    return <ErrorViewerProduction />;
+  }
 
-	const stackLines = error.stack?.split("\n") ?? [];
-	const previewLines = stackLines.slice(0, 5);
-	const hiddenLineCount = stackLines.length - previewLines.length;
+  const stackLines = error.stack?.split("\n") ?? [];
+  const previewLines = stackLines.slice(0, 5);
+  const hiddenLineCount = stackLines.length - previewLines.length;
 
-	const copyToClipboard = (text: string) => {
-		navigator.clipboard.writeText(text).catch((err) => {
-			console.error("Clipboard error:", err);
-		});
-	};
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).catch((err) => {
+      console.error("Clipboard error:", err);
+    });
+  };
 
-	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" as const,
-			whiteSpace: "pre-wrap" as const,
-		},
-		expandLine: {
-			color: "#F87171",
-			cursor: "pointer",
-			marginTop: "8px",
-		},
-	};
+  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" as const,
+      whiteSpace: "pre-wrap" as const,
+    },
+    expandLine: {
+      color: "#F87171",
+      cursor: "pointer",
+      marginTop: "8px",
+    },
+  };
 
-	return (
-		<div style={styles.container}>
-			<div>
-				<div style={styles.heading}>🔥 Error</div>
-				<div style={styles.name}>{error.name}</div>
-				<div style={styles.message}>{error.message}</div>
-			</div>
+  return (
+    <div style={styles.container}>
+      <div>
+        <div style={styles.heading}>🔥 Error</div>
+        <div style={styles.name}>{error.name}</div>
+        <div style={styles.message}>{error.message}</div>
+      </div>
 
-			{stackLines.length > 0 && (
-				<div>
-					<div style={styles.sectionHeader}>
-						<span>Stack trace</span>
-						<button
-							onClick={() => copyToClipboard(error.stack!)}
-							style={styles.copyButton}
-						>
-							Copy all
-						</button>
-					</div>
-					<pre style={styles.stackContainer}>
-						{(expanded ? stackLines : previewLines).map((line, i) => (
-							<div key={i}>{line}</div>
-						))}
-						{!expanded && hiddenLineCount > 0 && (
-							<div style={styles.expandLine} onClick={() => setExpanded(true)}>
-								+ {hiddenLineCount} more lines...
-							</div>
-						)}
-					</pre>
-				</div>
-			)}
-		</div>
-	);
+      {stackLines.length > 0 && (
+        <div>
+          <div style={styles.sectionHeader}>
+            <span>Stack trace</span>
+            <button
+              onClick={() => copyToClipboard(error.stack!)}
+              style={styles.copyButton}
+            >
+              Copy all
+            </button>
+          </div>
+          <pre style={styles.stackContainer}>
+            {(expanded ? stackLines : previewLines).map((line, i) => (
+              <div key={i}>{line}</div>
+            ))}
+            {!expanded && hiddenLineCount > 0 && (
+              <div style={styles.expandLine} onClick={() => setExpanded(true)}>
+                + {hiddenLineCount} more lines...
+              </div>
+            )}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export 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" as const,
-		},
-		heading: {
-			fontSize: "20px",
-			fontWeight: "bold",
-			marginBottom: "8px",
-		},
-		name: {
-			fontSize: "16px",
-			fontWeight: 600,
-			marginBottom: "4px",
-		},
-		message: {
-			fontSize: "14px",
-			opacity: 0.85,
-		},
-	};
+  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" as const,
+    },
+    heading: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      marginBottom: "8px",
+    },
+    name: {
+      fontSize: "16px",
+      fontWeight: 600,
+      marginBottom: "4px",
+    },
+    message: {
+      fontSize: "14px",
+      opacity: 0.85,
+    },
+  };
 
-	return (
-		<div style={styles.container}>
-			<div style={styles.heading}>🚨 An error occurred</div>
-			<div style={styles.message}>
-				Something went wrong. Please try again later.
-			</div>
-		</div>
-	);
+  return (
+    <div style={styles.container}>
+      <div style={styles.heading}>🚨 An error occurred</div>
+      <div style={styles.message}>
+        Something went wrong. Please try again later.
+      </div>
+    </div>
+  );
 };

package/src/components/Link.tsx

@@ -2,17 +2,17 @@ import type { AnchorHTMLAttributes } from "react";
 import { useRouter } from "../hooks/useRouter.ts";
 
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-	href: string;
+  href: string;
 }
 
 const Link = (props: LinkProps) => {
-	const router = useRouter();
+  const router = useRouter();
 
-	return (
-		<a {...props} {...router.anchor(props.href)}>
-			{props.children}
-		</a>
-	);
+  return (
+    <a {...props} {...router.anchor(props.href)}>
+      {props.children}
+    </a>
+  );
 };
 
 export default Link;