@hrnec06/react_utils 1.10.2 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.10.2",
+  "version": "1.11.1",
   "description": "React utilities",
   "exports": {
     ".": "./src/index.ts"

package/src/components/UI/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,82 @@
+import { Nullable, ReactUtils } from "@hrnec06/util";
+import useSignal, { Signal } from "../../../hooks/useSignal";
+import { ErrorBoundaryContext } from "./ErrorBoundaryContext";
+import React from "react";
+
+type FallbackType = React.ReactNode | ((error: Error) => React.ReactNode);
+
+type ErrorBoundaryProps = ReactUtils.Props<{
+    fallback: FallbackType,
+    children: React.ReactNode
+}>;
+export default function ErrorBoundary({
+    fallback,
+    children
+}: ErrorBoundaryProps)
+{
+    const error = useSignal<Nullable<Error>>(null);
+
+    return (
+        <ErrorBoundaryContext.Provider
+            value={{
+                error: error
+            }}
+        >
+            {
+                error.value === null ? (
+                    <ErrorCatcher
+                        error={error}
+                    >
+                        {children}
+                    </ErrorCatcher>
+                ) : (
+                    <ErrorFallback error={error.value} fallback={fallback} />
+                )
+            }
+        </ErrorBoundaryContext.Provider>
+    )
+}
+
+type ErrorCatcherProps = ReactUtils.Props<{
+    error: Signal<Nullable<Error>>,
+    children: React.ReactNode
+}>;
+class ErrorCatcher extends React.Component<ErrorCatcherProps>
+{
+	componentDidCatch(error: unknown, info: unknown)
+	{
+        if (error instanceof Error)
+        {
+            this.props.error.value = error;
+        }
+        else if (typeof error === "string")
+        {
+            this.props.error.value = new Error(error);
+        }
+        else
+        {
+            console.warn(`An unknown error has occured: `, error);
+
+            this.props.error.value = new Error("Unknown error.");
+        }
+	}
+
+	render()
+	{
+		return this.props.children;
+	}
+}
+
+type ErrorFallback = ReactUtils.Props<{
+    fallback: FallbackType,
+    error: Error
+}>;
+function ErrorFallback({ error, fallback }: ErrorFallback)
+{
+    if (typeof fallback === "function")
+    {
+        return fallback(error);
+    }
+
+    return fallback;
+}

package/src/components/UI/ErrorBoundary/ErrorBoundaryContext.ts

@@ -0,0 +1,20 @@
+import { Nullable, Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+import { Signal } from "../../../hooks/useSignal";
+import ContextError from "../../../lib/errors/ContextError";
+
+interface ErrorBoundaryContext {
+    error: Signal<Nullable<Error>>
+}
+
+export const ErrorBoundaryContext = createContext<Optional<ErrorBoundaryContext>>(undefined);
+
+export default function useErrorBoundary()
+{
+    const ctx = useContext(ErrorBoundaryContext);
+
+    if (!ctx)
+        throw new ContextError("ErrorBoundary");
+
+    return ctx;
+}

package/src/components/UI/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import { Nullable, ReactUtils, Vector2 } from "@hrnec06/util";
 import useSignal from "../../../hooks/useSignal";
 import { useEffect, useState } from "react";
 import useListener from "../../../hooks/useListener";
-import { Debugger, useLatestRef } from "../../..";
+import { useLatestRef } from "../../..";
 
 type TooltipProps = ReactUtils.Props<{
     $tooltip: React.ReactNode,
@@ -91,8 +91,6 @@ function Tooltip({
                     </div>
                 )
             }
-
-            <Debugger.Debug value={position} />
         </>
     );
 }

package/src/index.ts

@@ -31,6 +31,7 @@ import ContextMenu from "./components/ContextMenu/ContextMenu";
 import ShadowRoot from "./components/ShadowRoot/ShadowRoot";
 
 import Tooltip from "./components/UI/Tooltip/Tooltip";
+import ErrorBoundary from "./components/UI/ErrorBoundary/ErrorBoundary";
 
 import * as util from './lib/utils';
 import ContextError from "./lib/errors/ContextError";
@@ -74,6 +75,7 @@ export {
 
 	// UI
 	Tooltip,
+	ErrorBoundary,
 
 	// Shadow root
 	ShadowRoot,