@useavalon/avalon 0.1.11 → 0.1.13

package/src/components/IslandErrorBoundary.tsx

@@ -1,145 +1,145 @@
-import { Component, ComponentChildren, ComponentType } from 'preact';
-import type { LayoutErrorInfo } from '../types/layout.ts';
-
-export interface IslandErrorBoundaryProps {
-	children: ComponentChildren;
-	islandId: string;
-	onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
-	fallback?: (error: Error, islandId: string) => ComponentChildren;
-	isolateError?: boolean;
-}
-
-export interface IslandErrorBoundaryState {
-	hasError: boolean;
-	error: Error | null;
-	errorInfo: LayoutErrorInfo | null;
-}
-
-/**
- * Specialized error boundary for island components
- * Provides error isolation to prevent island errors from affecting the main layout
- */
-export class IslandErrorBoundary extends Component<IslandErrorBoundaryProps, IslandErrorBoundaryState> {
-	constructor(props: IslandErrorBoundaryProps) {
-		super(props);
-		this.state = { hasError: false, error: null, errorInfo: null };
-	}
-
-	static override getDerivedStateFromError(error: Error): Partial<IslandErrorBoundaryState> {
-		return { hasError: true, error };
-	}
-
-	override componentDidCatch(error: Error, errorInfo: { componentStack?: string }): void {
-		const layoutErrorInfo: LayoutErrorInfo = {
-			layoutPath: `island:${this.props.islandId}`,
-			errorType: 'island',
-			timestamp: Date.now(),
-			componentStack: errorInfo.componentStack,
-			errorBoundary: 'IslandErrorBoundary',
-		};
-
-		this.setState({ errorInfo: layoutErrorInfo });
-
-		if (this.props.onError) {
-			this.props.onError(error, layoutErrorInfo);
-		}
-
-		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
-		if (isDevelopment) {
-			console.error(`Island Error [${this.props.islandId}]:`, error);
-		}
-
-		if (!this.props.isolateError) {
-			throw error;
-		}
-	}
-
-	private handleRemoveIsland = (): void => {
-		const islandElement = document.querySelector(`[data-island-id="${this.props.islandId}"]`);
-		if (islandElement) {
-			islandElement.remove();
-		}
-	};
-
-	private handleReloadIsland = (): void => {
-		this.setState({ hasError: false, error: null, errorInfo: null });
-	};
-
-	private renderFallback(): ComponentChildren {
-		const { error } = this.state;
-		const { fallback, islandId } = this.props;
-
-		if (fallback && error) {
-			return fallback(error, islandId);
-		}
-
-		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
-
-		return (
-			<div class="island-error-boundary" data-island-error={islandId}>
-				<div class="island-error-container">
-					<div class="island-error-header">
-						<span class="island-error-icon">⚠️</span>
-						<span class="island-error-title">Island Error</span>
-					</div>
-
-					<p class="island-error-message">
-						An error occurred in island "{islandId}". The rest of the page should work normally.
-					</p>
-
-					<div class="island-error-actions">
-						<button onClick={this.handleReloadIsland} class="island-reload-button">
-							Reload Island
-						</button>
-						<button onClick={this.handleRemoveIsland} class="island-remove-button">
-							Remove Island
-						</button>
-					</div>
-
-					{isDevelopment && error && (
-						<details class="island-error-details">
-							<summary>Error Details (Development)</summary>
-							<div class="island-error-info">
-								<p><strong>Island ID:</strong> {islandId}</p>
-								<p><strong>Error:</strong> {error.message}</p>
-							</div>
-							<pre class="island-error-stack">{error.stack}</pre>
-						</details>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	render() {
-		if (this.state.hasError) {
-			return this.renderFallback();
-		}
-		return this.props.children;
-	}
-}
-
-/**
- * Higher-order component to wrap islands with error boundaries
- */
-export function withIslandErrorBoundary<P extends object>(
-	WrappedComponent: ComponentType<P>,
-	islandId: string,
-	options?: {
-		fallback?: (error: Error, islandId: string) => ComponentChildren;
-		isolateError?: boolean;
-		onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
-	}
-) {
-	return function IslandWithErrorBoundary(props: P) {
-		return (
-			<IslandErrorBoundary
-				islandId={islandId}
-				fallback={options?.fallback}
-				isolateError={options?.isolateError ?? true}
-				onError={options?.onError}>
-				<WrappedComponent {...props} />
-			</IslandErrorBoundary>
-		);
-	};
-}
+import { Component, ComponentChildren, ComponentType } from 'preact';
+import type { LayoutErrorInfo } from '../types/layout.ts';
+
+export interface IslandErrorBoundaryProps {
+	children: ComponentChildren;
+	islandId: string;
+	onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
+	fallback?: (error: Error, islandId: string) => ComponentChildren;
+	isolateError?: boolean;
+}
+
+export interface IslandErrorBoundaryState {
+	hasError: boolean;
+	error: Error | null;
+	errorInfo: LayoutErrorInfo | null;
+}
+
+/**
+ * Specialized error boundary for island components
+ * Provides error isolation to prevent island errors from affecting the main layout
+ */
+export class IslandErrorBoundary extends Component<IslandErrorBoundaryProps, IslandErrorBoundaryState> {
+	constructor(props: IslandErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false, error: null, errorInfo: null };
+	}
+
+	static override getDerivedStateFromError(error: Error): Partial<IslandErrorBoundaryState> {
+		return { hasError: true, error };
+	}
+
+	override componentDidCatch(error: Error, errorInfo: { componentStack?: string }): void {
+		const layoutErrorInfo: LayoutErrorInfo = {
+			layoutPath: `island:${this.props.islandId}`,
+			errorType: 'island',
+			timestamp: Date.now(),
+			componentStack: errorInfo.componentStack,
+			errorBoundary: 'IslandErrorBoundary',
+		};
+
+		this.setState({ errorInfo: layoutErrorInfo });
+
+		if (this.props.onError) {
+			this.props.onError(error, layoutErrorInfo);
+		}
+
+		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
+		if (isDevelopment) {
+			console.error(`Island Error [${this.props.islandId}]:`, error);
+		}
+
+		if (!this.props.isolateError) {
+			throw error;
+		}
+	}
+
+	private handleRemoveIsland = (): void => {
+		const islandElement = document.querySelector(`[data-island-id="${this.props.islandId}"]`);
+		if (islandElement) {
+			islandElement.remove();
+		}
+	};
+
+	private handleReloadIsland = (): void => {
+		this.setState({ hasError: false, error: null, errorInfo: null });
+	};
+
+	private renderFallback(): ComponentChildren {
+		const { error } = this.state;
+		const { fallback, islandId } = this.props;
+
+		if (fallback && error) {
+			return fallback(error, islandId);
+		}
+
+		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
+
+		return (
+			<div class="island-error-boundary" data-island-error={islandId}>
+				<div class="island-error-container">
+					<div class="island-error-header">
+						<span class="island-error-icon">⚠️</span>
+						<span class="island-error-title">Island Error</span>
+					</div>
+
+					<p class="island-error-message">
+						An error occurred in island "{islandId}". The rest of the page should work normally.
+					</p>
+
+					<div class="island-error-actions">
+						<button onClick={this.handleReloadIsland} class="island-reload-button">
+							Reload Island
+						</button>
+						<button onClick={this.handleRemoveIsland} class="island-remove-button">
+							Remove Island
+						</button>
+					</div>
+
+					{isDevelopment && error && (
+						<details class="island-error-details">
+							<summary>Error Details (Development)</summary>
+							<div class="island-error-info">
+								<p><strong>Island ID:</strong> {islandId}</p>
+								<p><strong>Error:</strong> {error.message}</p>
+							</div>
+							<pre class="island-error-stack">{error.stack}</pre>
+						</details>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return this.renderFallback();
+		}
+		return this.props.children;
+	}
+}
+
+/**
+ * Higher-order component to wrap islands with error boundaries
+ */
+export function withIslandErrorBoundary<P extends object>(
+	WrappedComponent: ComponentType<P>,
+	islandId: string,
+	options?: {
+		fallback?: (error: Error, islandId: string) => ComponentChildren;
+		isolateError?: boolean;
+		onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
+	}
+) {
+	return function IslandWithErrorBoundary(props: P) {
+		return (
+			<IslandErrorBoundary
+				islandId={islandId}
+				fallback={options?.fallback}
+				isolateError={options?.isolateError ?? true}
+				onError={options?.onError}>
+				<WrappedComponent {...props} />
+			</IslandErrorBoundary>
+		);
+	};
+}

package/src/components/LayoutDataErrorBoundary.tsx

@@ -1,141 +1,141 @@
-import { Component, ComponentChildren } from 'preact';
-import type { LayoutErrorInfo, LayoutContext, LayoutData } from '../types/layout.ts';
-
-export interface LayoutDataErrorBoundaryProps {
-	children: ComponentChildren;
-	layoutPath: string;
-	context: LayoutContext;
-	onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
-	fallbackData?: LayoutData;
-	retryLoader?: () => Promise<LayoutData>;
-}
-
-export interface LayoutDataErrorBoundaryState {
-	hasError: boolean;
-	error: Error | null;
-	errorInfo: LayoutErrorInfo | null;
-	retryCount: number;
-	isRetrying: boolean;
-	fallbackData: LayoutData | null;
-}
-
-/**
- * Specialized error boundary for layout data loading errors
- * Provides specific handling for data loader failures with retry and fallback mechanisms
- */
-export class LayoutDataErrorBoundary extends Component<LayoutDataErrorBoundaryProps, LayoutDataErrorBoundaryState> {
-	private maxRetries = 3;
-
-	constructor(props: LayoutDataErrorBoundaryProps) {
-		super(props);
-		this.state = {
-			hasError: false,
-			error: null,
-			errorInfo: null,
-			retryCount: 0,
-			isRetrying: false,
-			fallbackData: props.fallbackData || null,
-		};
-	}
-
-	static override getDerivedStateFromError(error: Error): Partial<LayoutDataErrorBoundaryState> {
-		return { hasError: true, error };
-	}
-
-	override componentDidCatch(error: Error, errorInfo: { componentStack?: string }): void {
-		const layoutErrorInfo: LayoutErrorInfo = {
-			layoutPath: this.props.layoutPath,
-			errorType: 'loader',
-			timestamp: Date.now(),
-			componentStack: errorInfo.componentStack,
-			errorBoundary: 'LayoutDataErrorBoundary',
-		};
-
-		this.setState({ errorInfo: layoutErrorInfo });
-
-		if (this.props.onError) {
-			this.props.onError(error, layoutErrorInfo);
-		}
-	}
-
-	private handleRetry = async (): Promise<void> => {
-		if (this.state.retryCount >= this.maxRetries || !this.props.retryLoader) {
-			return;
-		}
-
-		this.setState({ isRetrying: true });
-
-		try {
-			const data = await this.props.retryLoader();
-			this.setState({
-				hasError: false,
-				error: null,
-				errorInfo: null,
-				retryCount: this.state.retryCount + 1,
-				isRetrying: false,
-				fallbackData: data,
-			});
-		} catch (retryError) {
-			this.setState({
-				retryCount: this.state.retryCount + 1,
-				isRetrying: false,
-				error: retryError instanceof Error ? retryError : new Error(String(retryError)),
-			});
-		}
-	};
-
-	private handleUseFallback = (): void => {
-		if (this.state.fallbackData) {
-			this.setState({ hasError: false, error: null, errorInfo: null });
-		}
-	};
-
-	private renderErrorUI(): ComponentChildren {
-		const { error, retryCount, isRetrying, fallbackData } = this.state;
-		const canRetry = retryCount < this.maxRetries && this.props.retryLoader;
-		const hasFallback = fallbackData !== null;
-		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
-
-		return (
-			<div class="layout-data-error-boundary">
-				<div class="error-container">
-					<h3>Data Loading Error</h3>
-					<p>Failed to load data for layout: {this.props.layoutPath}</p>
-
-					<div class="error-actions">
-						{canRetry && (
-							<button onClick={this.handleRetry} disabled={isRetrying} class="retry-button">
-								{isRetrying ? 'Retrying...' : `Retry (${this.maxRetries - retryCount} left)`}
-							</button>
-						)}
-
-						{hasFallback && (
-							<button onClick={this.handleUseFallback} class="fallback-button">
-								Use Cached Data
-							</button>
-						)}
-					</div>
-
-					{isDevelopment && error && (
-						<details class="error-details">
-							<summary>Error Details (Development)</summary>
-							<div class="error-info">
-								<p><strong>Error:</strong> {error.message}</p>
-								<p><strong>Layout:</strong> {this.props.layoutPath}</p>
-								<p><strong>Retry Count:</strong> {retryCount}</p>
-							</div>
-							<pre class="error-stack">{error.stack}</pre>
-						</details>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	render() {
-		if (this.state.hasError) {
-			return this.renderErrorUI();
-		}
-		return this.props.children;
-	}
-}
+import { Component, ComponentChildren } from 'preact';
+import type { LayoutErrorInfo, LayoutContext, LayoutData } from '../types/layout.ts';
+
+export interface LayoutDataErrorBoundaryProps {
+	children: ComponentChildren;
+	layoutPath: string;
+	context: LayoutContext;
+	onError?: (error: Error, errorInfo: LayoutErrorInfo) => void;
+	fallbackData?: LayoutData;
+	retryLoader?: () => Promise<LayoutData>;
+}
+
+export interface LayoutDataErrorBoundaryState {
+	hasError: boolean;
+	error: Error | null;
+	errorInfo: LayoutErrorInfo | null;
+	retryCount: number;
+	isRetrying: boolean;
+	fallbackData: LayoutData | null;
+}
+
+/**
+ * Specialized error boundary for layout data loading errors
+ * Provides specific handling for data loader failures with retry and fallback mechanisms
+ */
+export class LayoutDataErrorBoundary extends Component<LayoutDataErrorBoundaryProps, LayoutDataErrorBoundaryState> {
+	private maxRetries = 3;
+
+	constructor(props: LayoutDataErrorBoundaryProps) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null,
+			errorInfo: null,
+			retryCount: 0,
+			isRetrying: false,
+			fallbackData: props.fallbackData || null,
+		};
+	}
+
+	static override getDerivedStateFromError(error: Error): Partial<LayoutDataErrorBoundaryState> {
+		return { hasError: true, error };
+	}
+
+	override componentDidCatch(error: Error, errorInfo: { componentStack?: string }): void {
+		const layoutErrorInfo: LayoutErrorInfo = {
+			layoutPath: this.props.layoutPath,
+			errorType: 'loader',
+			timestamp: Date.now(),
+			componentStack: errorInfo.componentStack,
+			errorBoundary: 'LayoutDataErrorBoundary',
+		};
+
+		this.setState({ errorInfo: layoutErrorInfo });
+
+		if (this.props.onError) {
+			this.props.onError(error, layoutErrorInfo);
+		}
+	}
+
+	private handleRetry = async (): Promise<void> => {
+		if (this.state.retryCount >= this.maxRetries || !this.props.retryLoader) {
+			return;
+		}
+
+		this.setState({ isRetrying: true });
+
+		try {
+			const data = await this.props.retryLoader();
+			this.setState({
+				hasError: false,
+				error: null,
+				errorInfo: null,
+				retryCount: this.state.retryCount + 1,
+				isRetrying: false,
+				fallbackData: data,
+			});
+		} catch (retryError) {
+			this.setState({
+				retryCount: this.state.retryCount + 1,
+				isRetrying: false,
+				error: retryError instanceof Error ? retryError : new Error(String(retryError)),
+			});
+		}
+	};
+
+	private handleUseFallback = (): void => {
+		if (this.state.fallbackData) {
+			this.setState({ hasError: false, error: null, errorInfo: null });
+		}
+	};
+
+	private renderErrorUI(): ComponentChildren {
+		const { error, retryCount, isRetrying, fallbackData } = this.state;
+		const canRetry = retryCount < this.maxRetries && this.props.retryLoader;
+		const hasFallback = fallbackData !== null;
+		const isDevelopment = typeof Deno !== 'undefined' && Deno.env.get('NODE_ENV') === 'development';
+
+		return (
+			<div class="layout-data-error-boundary">
+				<div class="error-container">
+					<h3>Data Loading Error</h3>
+					<p>Failed to load data for layout: {this.props.layoutPath}</p>
+
+					<div class="error-actions">
+						{canRetry && (
+							<button onClick={this.handleRetry} disabled={isRetrying} class="retry-button">
+								{isRetrying ? 'Retrying...' : `Retry (${this.maxRetries - retryCount} left)`}
+							</button>
+						)}
+
+						{hasFallback && (
+							<button onClick={this.handleUseFallback} class="fallback-button">
+								Use Cached Data
+							</button>
+						)}
+					</div>
+
+					{isDevelopment && error && (
+						<details class="error-details">
+							<summary>Error Details (Development)</summary>
+							<div class="error-info">
+								<p><strong>Error:</strong> {error.message}</p>
+								<p><strong>Layout:</strong> {this.props.layoutPath}</p>
+								<p><strong>Retry Count:</strong> {retryCount}</p>
+							</div>
+							<pre class="error-stack">{error.stack}</pre>
+						</details>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return this.renderErrorUI();
+		}
+		return this.props.children;
+	}
+}