@contember/react-devbar 2.1.0-alpha.3 → 2.1.0-alpha.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-devbar",
   "license": "Apache-2.0",
-  "version": "2.1.0-alpha.3",
+  "version": "2.1.0-alpha.35",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -33,22 +33,22 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/contember/interface.git",
+    "url": "git+https://github.com/contember/contember.git",
     "directory": "packages/react-devbar"
   },
   "dependencies": {
-    "@contember/react-utils": "2.1.0-alpha.3",
-    "@contember/utilities": "2.1.0-alpha.3",
-    "buffer": "6.0.3"
+    "@contember/react-utils": "workspace:*",
+    "@contember/utilities": "workspace:*",
+    "buffer": "catalog:"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "catalog:",
+    "react-dom": "catalog:"
   },
   "devDependencies": {
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
   }
 }

package/src/errorHandling.tsx

@@ -1,4 +1,3 @@
-import * as ReactDOM from 'react-dom'
 import { Buffer } from 'buffer'
 import { DevErrorManager, ErrorBus } from './DevErrorManager'
 import { ReactElement } from 'react'
@@ -9,11 +8,7 @@ const getErrorContainer = () => {
 	const errorElementId = '__contember__dev__error__container__element'
 	let errorContainer = document.getElementById(errorElementId)
 
-	if (errorContainer) {
-		// eslint-disable-next-line react/no-deprecated
-		ReactDOM.unmountComponentAtNode(errorContainer)
-
-	} else {
+	if (!errorContainer) {
 		errorContainer = document.createElement('div')
 		errorContainer.id = errorElementId
 		document.body.appendChild(errorContainer)
@@ -24,7 +19,6 @@ const getErrorContainer = () => {
 
 const devErrorHandler = (renderer: ErrorReactRenderer): TryRun => {
 	const errorBus = new ErrorBus()
-
 	;(window as any).Buffer = Buffer
 	window.addEventListener('error', e => {
 		if (e.message.startsWith('ResizeObserver')) {
@@ -77,7 +71,6 @@ const prodErrorHandler = (renderer: ErrorReactRenderer): TryRun => {
 	}
 }
 
-
 export const createErrorHandler = (renderer: ErrorReactRenderer) => {
 	if (import.meta.env.DEV) {
 		return devErrorHandler(renderer)

package/src/hooks/useCopyErrorMarkdown.ts

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import type { ParsedStackTrace, ProcessedError } from '../ui/DevError/types'
+
+const convertStackTraceToMarkdown = (stackTrace: ParsedStackTrace, lines: string[]) => {
+	stackTrace.forEach((frame, index) => {
+		lines.push(`**Frame ${index + 1}:**`)
+		lines.push('')
+		lines.push(`- **File:** ${frame.filename}${frame.line ? `:${frame.line}` : ''}`)
+
+		if (frame.callee) {
+			lines.push(`- **Function:** ${frame.callee}`)
+		}
+
+		lines.push('')
+
+		if (frame.line !== undefined && frame.sourceCodeLines) {
+			lines.push('**Source Code:**')
+			lines.push('')
+			lines.push('```typescript')
+
+			frame.sourceCodeLines.forEach((codeLine, lineIndex) => {
+				const lineNumber = lineIndex + 1
+				// Show context around the error line (similar to the UI logic)
+				if (frame.line && lineNumber + 5 >= frame.line && lineNumber - 3 <= frame.line) {
+					const isErrorLine = lineNumber === frame.line
+					const marker = isErrorLine ? '>>> ' : '    '
+					lines.push(`${marker}${lineNumber.toString().padStart(3)}: ${codeLine}`)
+				}
+			})
+
+			lines.push('```')
+			lines.push('')
+		}
+
+		lines.push('---')
+		lines.push('')
+	})
+}
+
+const convertErrorToMarkdownRecursive = (error: ProcessedError, lines: string[], level: number) => {
+	const errorObject = error.error instanceof Error ? error.error : undefined
+	const prefix = '#'.repeat(level + 1)
+
+	if (errorObject) {
+		lines.push(`${prefix} ${errorObject.name}`)
+		lines.push('')
+
+		if (errorObject.message) {
+			lines.push(`**Message:** ${errorObject.message}`)
+			lines.push('')
+		}
+
+		if ('details' in errorObject && (errorObject as Error & { details?: unknown }).details) {
+			lines.push(`**Details:** ${(errorObject as Error & { details: string }).details}`)
+			lines.push('')
+		}
+	} else {
+		lines.push(`${prefix} Unknown Error`)
+		lines.push('')
+	}
+
+	if (error.parsedStackStrace) {
+		lines.push(`${'#'.repeat(level + 2)} Stack Trace`)
+		lines.push('')
+		convertStackTraceToMarkdown(error.parsedStackStrace, lines)
+	} else if (errorObject?.stack) {
+		lines.push(`${'#'.repeat(level + 2)} Stack Trace`)
+		lines.push('')
+		lines.push('```')
+		lines.push(errorObject.stack)
+		lines.push('```')
+		lines.push('')
+	}
+
+	if (error.cause) {
+		lines.push(`${'#'.repeat(level + 2)} Caused By`)
+		lines.push('')
+		convertErrorToMarkdownRecursive(error.cause, lines, level + 1)
+	}
+}
+
+const convertErrorToMarkdown = (error: ProcessedError, source: string): string => {
+	const lines: string[] = []
+
+	lines.push('# Contember Error Report')
+	lines.push('')
+	lines.push(`**Source:** ${source}`)
+	lines.push('')
+
+	convertErrorToMarkdownRecursive(error, lines, 1)
+
+	return lines.join('\n')
+}
+
+type CopyMarkdownProps = {
+	currentError: ProcessedError
+	currentErrorSource: string
+}
+
+export const useCopyErrorMarkdown = ({ currentError, currentErrorSource }: CopyMarkdownProps) => {
+	const [copyStatus, setCopyStatus] = useState<'idle' | 'copying' | 'success' | 'error'>('idle')
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentional
+	useEffect(() => {
+		setCopyStatus('idle')
+	}, [currentError])
+
+	const handleCopyMarkdown = async () => {
+		setCopyStatus('copying')
+		try {
+			const markdown = convertErrorToMarkdown(currentError, currentErrorSource)
+			await navigator.clipboard.writeText(markdown)
+			setCopyStatus('success')
+		} catch (err) {
+			console.error('Failed to copy markdown:', err)
+			setCopyStatus('error')
+		}
+	}
+
+	const isClipboardSupported = !!navigator?.clipboard
+
+	return {
+		copyStatus,
+		handleCopyMarkdown,
+		isClipboardSupported,
+	}
+}

package/src/hooks/useParsedStacktrace.ts

@@ -36,7 +36,7 @@ export const useProcessedError = (e: ErrorType): ProcessedError => {
 				cause: e instanceof Error && 'cause' in e && (e as any).cause !== undefined ? await createErrorWithStackTrace((e as any).cause) : undefined,
 			}
 		}
-		(async () => {
+		;(async () => {
 			setError(await createErrorWithStackTrace(e))
 		})()
 	}, [e])

package/src/index.css

@@ -235,6 +235,12 @@
 	overflow: auto;
 }
 
+.cui-devError-errorSource {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
 .cui-devError-errorMessage,
 .cui-devError-errorName,
 .cui-devError-errorDetails {
@@ -284,6 +290,7 @@
 	color: #eeeeee;
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 }
 
 .cui-devError-causedBy {
@@ -294,6 +301,26 @@
 	align-items: center;
 }
 
+.cui-devError-copyButton {
+	background: transparent;
+	border: 1px solid #cbcbcb;
+	border-radius: 0.375rem;
+	color: #ffffff;
+	cursor: pointer;
+	font-size: 0.875rem;
+	font-weight: 500;
+	padding: 0.375rem 0.75rem;
+	transition: all 200ms;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.cui-devError-copyButton:hover:not(:disabled) {
+	background: #910f0f;
+	border-color: #910f0f;
+}
+
 .cui-devError-actions {
 	margin-left: auto;
 	display: flex;

package/src/ui/DevBar/DevBar.tsx

@@ -1,11 +1,6 @@
-import {
-	useId,
-	useOnElementClickOutsideCallback,
-	useReferentiallyStableCallback,
-	useWindowSize,
-} from '@contember/react-utils'
+import { useId, useOnElementClickOutsideCallback, useReferentiallyStableCallback, useWindowSize } from '@contember/react-utils'
 import { dataAttribute } from '@contember/utilities'
-import { PropsWithChildren, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 
 const className = (cls: string | null) => cls ? `cui-devBar-${cls}` : 'cui-devBar'
 
@@ -22,6 +17,7 @@ export const DevBar = ({
 		setExpanded(expanded => !expanded)
 	})
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: intentional
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
 			if (event.code === 'KeyJ' && (event.ctrlKey || event.metaKey)) {
@@ -96,12 +92,10 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 
 		const handleClickOutside = (event: MouseEvent) => {
 			const rect = dialog.getBoundingClientRect()
-			const isInDialog = (
-				rect.top <= event.clientY &&
-				event.clientY <= rect.top + rect.height &&
-				rect.left <= event.clientX &&
-				event.clientX <= rect.left + rect.width
-			)
+			const isInDialog = rect.top <= event.clientY
+				&& event.clientY <= rect.top + rect.height
+				&& rect.left <= event.clientX
+				&& event.clientX <= rect.left + rect.width
 
 			if (!isInDialog) {
 				dialog.close()
@@ -126,6 +120,7 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 	return (
 		<div className={className('trigger')}>
 			<button
+				type="button"
 				ref={triggerRef}
 				tabIndex={0}
 				aria-haspopup="dialog"
@@ -144,6 +139,7 @@ export const DevPanel = ({ heading, icon, children, preview }: DevPanelProps) =>
 					<div className={className('panel-header')}>
 						<h2 className="h4">{heading}</h2>
 						<button
+							type="button"
 							onClick={handleClose}
 							className={className('close-button')}
 							aria-label="Close"

package/src/ui/DevError/DevErrorBadge.tsx

@@ -4,7 +4,6 @@ export interface DevErrorBadgeProps {
 	errorCount: number
 }
 
-
 const className = (cls?: string | null) => cls ? `cui-devErrorBadge-${cls}` : 'cui-devErrorBadge'
 
 export function DevErrorBadge({ errorCount, onOpen, onClear }: DevErrorBadgeProps) {

package/src/ui/DevError/DevErrorCopy.tsx

@@ -0,0 +1,30 @@
+import { useCopyErrorMarkdown } from '../../hooks/useCopyErrorMarkdown'
+import { ProcessedError } from './types'
+
+export const DevErrorCopy = ({ currentError, currentErrorSource }: {
+	currentError: ProcessedError
+	currentErrorSource: string
+}) => {
+	const { copyStatus, handleCopyMarkdown, isClipboardSupported } = useCopyErrorMarkdown({ currentError, currentErrorSource })
+
+	if (!isClipboardSupported) {
+		return null
+	}
+
+	return (
+		<button
+			type="button"
+			className="cui-devError-copyButton"
+			onClick={handleCopyMarkdown}
+			disabled={copyStatus === 'copying'}
+			title="Copy current error as Markdown"
+		>
+			{{
+				success: 'Copied!',
+				copying: 'Copying...',
+				error: '❌ Copy Failed',
+				idle: 'Copy as Markdown',
+			}[copyStatus]}
+		</button>
+	)
+}

package/src/ui/DevError/DevErrorInner.tsx

@@ -6,42 +6,42 @@ export interface DevErrorInnerProps {
 	level?: number
 }
 
-
 const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
 
 export function DevErrorInner({ error, level = 1 }: DevErrorInnerProps) {
-
 	let errorObject: Error | undefined = error.error instanceof Error ? error.error : undefined
 
 	return (
 		<>
 			<div className={className('header')}>
-				{errorObject ? (
-					<>
-						<h1 className={className('errorName')}>{errorObject.name}</h1>
-						{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}
-						{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}
-						{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}
-					</>
-				) : (
-					<h1 className={className('errorName')}>Unknown error</h1>
-				)}
+				{errorObject
+					? (
+						<>
+							<h1 className={className('errorName')}>{errorObject.name}</h1>
+							{error.cause && <a href={`#error-${level}`} className={className('causeLink')}>caused by &gt;</a>}
+							{errorObject.message && <h2 className={className('errorMessage')}>{errorObject.message}</h2>}
+							{'details' in errorObject && <div className={className('errorDetails')}>{(errorObject as any).details}</div>}
+						</>
+					)
+					: <h1 className={className('errorName')}>Unknown error</h1>}
 			</div>
-			{error.parsedStackStrace ? (
-				<StackTrace stackTrace={error.parsedStackStrace} />
-			) : errorObject?.stack ? (
-				<div className={className('stack')}>
-					<div className={className('stack-dump')}>{errorObject.stack}</div>
-				</div>
-			) : null}
-			{error.cause ? (
-				<>
-					<div className={className('causedBy')} id={`error-${level}`}>
-						Caused by
+			{error.parsedStackStrace ? <StackTrace stackTrace={error.parsedStackStrace} /> : errorObject?.stack
+				? (
+					<div className={className('stack')}>
+						<div className={className('stack-dump')}>{errorObject.stack}</div>
 					</div>
-					<DevErrorInner error={error.cause} level={level + 1} />
-				</>
-			) : null}
+				)
+				: null}
+			{error.cause
+				? (
+					<>
+						<div className={className('causedBy')} id={`error-${level}`}>
+							Caused by
+						</div>
+						<DevErrorInner error={error.cause} level={level + 1} />
+					</>
+				)
+				: null}
 		</>
 	)
 }

package/src/ui/DevError/DevErrorList.tsx

@@ -1,6 +1,7 @@
-import { DevErrorInner } from './DevErrorInner'
-import { ProcessedError } from './types'
 import { useEffect } from 'react'
+import { DevErrorInner } from './DevErrorInner'
+import type { ProcessedError } from './types'
+import { DevErrorCopy } from './DevErrorCopy'
 
 export interface DevErrorListProps {
 	currentError: ProcessedError
@@ -36,31 +37,36 @@ export function DevErrorList({
 		<div className={className()}>
 			<div className={className('in')}>
 				<div className={className('bar')}>
-					<div className={className('errorSource')}>{currentErrorSource}</div>
+					<div className={className('errorSource')}>
+						{currentErrorSource}
+						<DevErrorCopy currentError={currentError} currentErrorSource={currentErrorSource} />
+					</div>
 					<div className={className('actions')}>
-						{errorCount > 1 ? (
-							<div className={className('switcher')}>
-								<p className={className('errorCount')}>
-									Error {currentErrorIndex + 1} of {errorCount}
-								</p>
-								<div className={className('switcherButtons')}>
-									<button className={className('switcherButton')} onClick={onPrevious}>
-										←
-									</button>
-									<button className={className('switcherButton')} onClick={onNext}>
-										→
-									</button>
+						{errorCount > 1
+							? (
+								<div className={className('switcher')}>
+									<p className={className('errorCount')}>
+										Error {currentErrorIndex + 1} of {errorCount}
+									</p>
+									<div className={className('switcherButtons')}>
+										<button type="button" className={className('switcherButton')} onClick={onPrevious}>
+											←
+										</button>
+										<button type="button" className={className('switcherButton')} onClick={onNext}>
+											→
+										</button>
+									</div>
 								</div>
-							</div>
-						) : null}
+							)
+							: null}
 						<div className={className('close')}>
-							<button className={className('closeButton')} onClick={onClose}>
+							<button type="button" className={className('closeButton')} onClick={onClose}>
 								✕
 							</button>
 						</div>
 					</div>
 					<div className={className('close')}>
-						<button className={className('closeButton')} onClick={onClear}>
+						<button type="button" className={className('closeButton')} onClick={onClear}>
 							Clear errors
 						</button>
 					</div>

package/src/ui/DevError/StackTrace.tsx

@@ -1,13 +1,10 @@
 import { ParsedStackFrame, ParsedStackTrace } from './types'
 
-
 const className = (cls?: string | null) => cls ? `cui-devError-${cls}` : 'cui-devError'
 export const StackTrace = ({ stackTrace }: { stackTrace: ParsedStackTrace }) => {
 	return (
 		<div className={className('stack')}>
-			{stackTrace.map((it, index) => (
-				<StackFrame stackFrame={it} key={index} />
-			))}
+			{stackTrace.map((it, index) => <StackFrame stackFrame={it} key={index} />)}
 		</div>
 	)
 }

package/dist/development/index.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const errorHandling = require("./src/errorHandling.cjs");
-const useParsedStacktrace = require("./src/hooks/useParsedStacktrace.cjs");
-const DevBar = require("./src/ui/DevBar/DevBar.cjs");
-const DevError = require("./src/ui/DevError/DevError.cjs");
-const DevErrorList = require("./src/ui/DevError/DevErrorList.cjs");
-const DevErrorBadge = require("./src/ui/DevError/DevErrorBadge.cjs");
-exports.createErrorHandler = errorHandling.createErrorHandler;
-exports.parseStacktrace = useParsedStacktrace.parseStacktrace;
-exports.useProcessedError = useParsedStacktrace.useProcessedError;
-exports.DevBar = DevBar.DevBar;
-exports.DevPanel = DevBar.DevPanel;
-exports.DevError = DevError.DevError;
-exports.DevErrorList = DevErrorList.DevErrorList;
-exports.DevErrorBadge = DevErrorBadge.DevErrorBadge;
-//# sourceMappingURL=index.cjs.map

package/dist/development/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/development/index.js

@@ -1,17 +0,0 @@
-import { createErrorHandler } from "./src/errorHandling.js";
-import { parseStacktrace, useProcessedError } from "./src/hooks/useParsedStacktrace.js";
-import { DevBar, DevPanel } from "./src/ui/DevBar/DevBar.js";
-import { DevError } from "./src/ui/DevError/DevError.js";
-import { DevErrorList } from "./src/ui/DevError/DevErrorList.js";
-import { DevErrorBadge } from "./src/ui/DevError/DevErrorBadge.js";
-export {
-  DevBar,
-  DevError,
-  DevErrorBadge,
-  DevErrorList,
-  DevPanel,
-  createErrorHandler,
-  parseStacktrace,
-  useProcessedError
-};
-//# sourceMappingURL=index.js.map

package/dist/development/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/development/src/DevErrorManager.cjs

@@ -1,110 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxDevRuntime = require("react/jsx-dev-runtime");
-const React = require("react");
-const useParsedStacktrace = require("./hooks/useParsedStacktrace.cjs");
-const DevErrorBadge = require("./ui/DevError/DevErrorBadge.cjs");
-const DevErrorList = require("./ui/DevError/DevErrorList.cjs");
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-class ErrorBus {
-  constructor() {
-    __publicField(this, "queue", []);
-    __publicField(this, "listener", null);
-  }
-  async handleError(source, error) {
-    const boxedError = { error, source };
-    if (!this.listener) {
-      this.queue.push(boxedError);
-    } else {
-      this.listener(boxedError);
-    }
-  }
-  register(listener) {
-    this.listener = listener;
-    this.queue.forEach(listener);
-    this.queue = [];
-    return () => {
-      this.listener = null;
-    };
-  }
-}
-const compareErrors = (a, b) => {
-  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
-    return false;
-  }
-  if (!("stack" in a) || !("stack" in b) || !("message" in a) || !("message" in b)) {
-    return false;
-  }
-  if (a.message !== b.message) {
-    return false;
-  }
-  if (a.stack !== b.stack) {
-    return false;
-  }
-  return true;
-};
-function DevErrorManager(props) {
-  const [errors, setErrors] = React.useState([]);
-  const [errIndex, setErrorIndex] = React.useState(0);
-  const [open, setOpen] = React.useState(false);
-  React.useEffect(
-    () => {
-      return props.bus.register((err) => {
-        setTimeout(
-          () => {
-            setErrors((errors2) => {
-              return !errors2.find((it) => compareErrors(it.error, err.error)) ? [err, ...errors2] : errors2;
-            });
-            setOpen(true);
-          },
-          0
-        );
-      });
-    },
-    [props.bus]
-  );
-  const currentError = errors[errIndex];
-  const processedError = useParsedStacktrace.useProcessedError(currentError?.error);
-  React.useEffect(() => {
-  }, []);
-  if (!currentError) {
-    return null;
-  }
-  const onPrevious = () => setErrorIndex((it) => Math.max(0, it - 1));
-  const onNext = () => setErrorIndex((it) => Math.min(errors.length - 1, it + 1));
-  const onClose = () => setOpen(false);
-  const onClear = () => setErrors([]);
-  if (!open) {
-    return /* @__PURE__ */ jsxDevRuntime.jsxDEV(DevErrorBadge.DevErrorBadge, { errorCount: errors.length, onOpen: () => setOpen(true), onClear }, void 0, false, {
-      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/DevErrorManager.tsx",
-      lineNumber: 94,
-      columnNumber: 10
-    }, this);
-  }
-  return /* @__PURE__ */ jsxDevRuntime.jsxDEV(
-    DevErrorList.DevErrorList,
-    {
-      currentError: processedError,
-      currentErrorSource: currentError.source,
-      currentErrorIndex: errIndex,
-      errorCount: errors.length,
-      onPrevious,
-      onNext,
-      onClose,
-      onClear
-    },
-    void 0,
-    false,
-    {
-      fileName: "/home/runner/work/contember/contember/packages/react-devbar/src/DevErrorManager.tsx",
-      lineNumber: 97,
-      columnNumber: 3
-    },
-    this
-  );
-}
-exports.DevErrorManager = DevErrorManager;
-exports.ErrorBus = ErrorBus;
-//# sourceMappingURL=DevErrorManager.cjs.map

package/dist/development/src/DevErrorManager.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DevErrorManager.cjs","sources":["../../../../packages/react-devbar/src/DevErrorManager.tsx"],"sourcesContent":["import { DevErrorBadge, DevErrorList, ErrorType } from './ui/DevError'\nimport { useEffect, useState } from 'react'\nimport { useProcessedError } from './hooks/useParsedStacktrace'\n\nexport class ErrorBus {\n\tprivate queue: { error: ErrorType; source: string }[] = []\n\tprivate listener: null | ((error: { error: ErrorType; source: string }) => void) = null\n\n\tasync handleError(source: string, error: ErrorType) {\n\t\tconst boxedError = { error, source }\n\n\t\tif (!this.listener) {\n\t\t\tthis.queue.push(boxedError)\n\t\t} else {\n\t\t\tthis.listener(boxedError)\n\t\t}\n\t}\n\n\tregister(listener: (error: { error: ErrorType; source: string }) => void): () => void {\n\t\tthis.listener = listener\n\t\tthis.queue.forEach(listener)\n\t\tthis.queue = []\n\t\treturn () => {\n\t\t\tthis.listener = null\n\t\t}\n\t}\n}\n\nexport interface DevErrorManagerProps {\n\tbus: ErrorBus\n}\n\nconst compareErrors = (a: ErrorType, b: ErrorType) => {\n\tif (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {\n\t\treturn false\n\t}\n\tif (!('stack' in a) || !('stack' in b) || !('message' in a) || !('message' in b)) {\n\t\treturn false\n\t}\n\tif (a.message !== b.message) {\n\t\treturn false\n\t}\n\tif (a.stack !== b.stack) {\n\t\treturn false\n\t}\n\treturn true\n}\n\nexport function DevErrorManager(props: DevErrorManagerProps) {\n\tconst [errors, setErrors] = useState<{ error: ErrorType; source: string }[]>([])\n\tconst [errIndex, setErrorIndex] = useState(0)\n\tconst [open, setOpen] = useState(false)\n\n\tuseEffect(\n\t\t() => {\n\t\t\treturn props.bus.register(err => {\n\t\t\t\tsetTimeout(\n\t\t\t\t\t() => {\n\t\t\t\t\t\tsetErrors(errors => {\n\t\t\t\t\t\t\treturn !errors.find(it => compareErrors(it.error, err.error)) ? [err, ...errors] : errors\n\t\t\t\t\t\t})\n\t\t\t\t\t\tsetOpen(true)\n\t\t\t\t\t},\n\t\t\t\t\t0,\n\t\t\t\t)\n\t\t\t})\n\t\t},\n\t\t[props.bus],\n\t)\n\n\tconst currentError = errors[errIndex]\n\tconst processedError = useProcessedError(currentError?.error)\n\n\tuseEffect(() => {\n\t\tif (import.meta.hot) {\n\t\t\tconst cb = () => {\n\t\t\t\tsetOpen(false)\n\t\t\t}\n\t\t\timport.meta.hot.on('vite:afterUpdate', cb)\n\t\t\treturn () => {\n\t\t\t\timport.meta.hot?.off('vite:afterUpdate', cb)\n\t\t\t}\n\t\t}\n\t}, [])\n\n\tif (!currentError) {\n\t\treturn null\n\t}\n\tconst onPrevious = () => setErrorIndex(it => Math.max(0, it - 1))\n\tconst onNext = () => setErrorIndex(it => Math.min(errors.length - 1, it + 1))\n\tconst onClose = () => setOpen(false)\n\tconst onClear = () => setErrors([])\n\tif (!open) {\n\t\treturn <DevErrorBadge errorCount={errors.length} onOpen={() => setOpen(true)} onClear={onClear} />\n\t}\n\treturn (\n\t\t<DevErrorList\n\t\t\tcurrentError={processedError}\n\t\t\tcurrentErrorSource={currentError.source}\n\t\t\tcurrentErrorIndex={errIndex}\n\t\t\terrorCount={errors.length}\n\t\t\tonPrevious={onPrevious}\n\t\t\tonNext={onNext}\n\t\t\tonClose={onClose}\n\t\t\tonClear={onClear}\n\t\t/>\n\t)\n}\n"],"names":["useState","useEffect","errors","useProcessedError","jsxDEV","DevErrorBadge","DevErrorList"],"mappings":"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"}