@tramvai/react 1.55.2 → 1.56.0

package/lib/error/UniversalErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import type { Url } from '@tinkoff/url';
+import type { ERROR_BOUNDARY_TOKEN } from './tokens';
+declare type AnyError = Error & {
+    [key: string]: any;
+};
+export interface UniversalErrorBoundaryFallbackProps {
+    url: Url;
+    error: AnyError;
+}
+export interface UniversalErrorBoundaryProps {
+    url: Url;
+    error?: AnyError | null;
+    fallback?: React.ComponentType<UniversalErrorBoundaryFallbackProps>;
+    errorHandlers?: typeof ERROR_BOUNDARY_TOKEN | null;
+    /**
+     * @deprecated
+     */
+    fallbackFromDi?: React.ReactElement | null;
+}
+interface State {
+    error: AnyError | null;
+    url: Url;
+}
+declare type Props = UniversalErrorBoundaryProps;
+export declare class UniversalErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static displayName: string;
+    static getDerivedStateFromProps(props: Props, state: State): {
+        error: AnyError | null;
+        url: Url;
+    };
+    static getDerivedStateFromError(error: AnyError): {
+        error: AnyError;
+    };
+    componentDidCatch(error: AnyError, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export {};

package/lib/error/component.d.ts

@@ -8,6 +8,9 @@ interface Props {
 interface State {
     hasError: boolean;
 }
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 export declare class ErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     static displayName: string;

package/lib/error/hoc.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 export declare const withError: ({ fallbackComponent, }?: {
     fallbackComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) => <T extends React.ComponentType<any>>(WrappedComponent: T) => T;

package/lib/error/tokens.d.ts

@@ -1,5 +1,10 @@
 import type React from 'react';
+import type { UniversalErrorBoundaryFallbackProps } from './UniversalErrorBoundary';
 declare type ErrorBoundaryHandler = (error: Error, errorInfo: React.ErrorInfo) => void;
 export declare const ERROR_BOUNDARY_TOKEN: ErrorBoundaryHandler[];
+export declare const ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN: React.ComponentType<UniversalErrorBoundaryFallbackProps>;
+/**
+ * @deprecated
+ */
 export declare const ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/lib/react.d.ts

@@ -1,6 +1,7 @@
 export { DIContext } from './di/context';
 export { withDi } from './di/hoc';
 export { useDi, useDiContainer } from './di/hooks';
+export { UniversalErrorBoundary, UniversalErrorBoundaryProps, UniversalErrorBoundaryFallbackProps, } from './error/UniversalErrorBoundary';
 export { ErrorBoundary } from './error/component';
 export { FallbackError } from './error/fallback';
 export { withError } from './error/hoc';

package/lib/react.es.js

@@ -69,11 +69,61 @@ const FallbackError = () => {
 FallbackError.displayName = 'FallbackError';
 /* eslint-enable jsx-a11y/anchor-is-valid */
 
+class UniversalErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: props.error || null,
+            url: props.url,
+        };
+    }
+    // Reference and explanation here - https://github.com/remix-run/remix/blob/main/packages/remix-react/errorBoundaries.tsx#L35
+    static getDerivedStateFromProps(props, state) {
+        if (props.url !== state.url) {
+            return { error: props.error || null, url: props.url };
+        }
+        return { error: props.error || state.error, url: state.url };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { errorHandlers } = this.props;
+        if (errorHandlers) {
+            errorHandlers.forEach((handler) => {
+                handler(error, errorInfo);
+            });
+        }
+    }
+    render() {
+        const { children, fallback: Fallback, fallbackFromDi } = this.props;
+        const { url, error } = this.state;
+        if (!error) {
+            return children;
+        }
+        if (Fallback) {
+            return React.createElement(Fallback, { url: url, error: error });
+        }
+        if (fallbackFromDi) {
+            return fallbackFromDi;
+        }
+        return React.createElement(FallbackError, null);
+    }
+}
+UniversalErrorBoundary.displayName = 'UniversalErrorBoundary';
+
 const ERROR_BOUNDARY_TOKEN = createToken('reactErrorBoundaryHandlers', {
     multi: true,
 });
+const ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN = createToken('rootErrorBoundaryComponent');
+/**
+ * @deprecated
+ */
 const ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN = createToken('errorBoundaryFallbackComponent');
 
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 let ErrorBoundary = class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
@@ -109,6 +159,9 @@ ErrorBoundary = __decorate([
     })
 ], ErrorBoundary);
 
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 const withError = ({ fallbackComponent, } = {}) => (WrappedComponent) => {
     function WrapperWithError(props) {
         return (React.createElement(ErrorBoundary, { fallbackComponent: fallbackComponent },
@@ -131,4 +184,4 @@ the first argument should be transformed into a special object, but the current
     });
 };
 
-export { DIContext, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, ERROR_BOUNDARY_TOKEN, ErrorBoundary, FallbackError, lazy, useDi, useDiContainer, withDi, withError };
+export { DIContext, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, ERROR_BOUNDARY_TOKEN, ErrorBoundary, FallbackError, ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, UniversalErrorBoundary, lazy, useDi, useDiContainer, withDi, withError };

package/lib/react.js

@@ -80,11 +80,61 @@ const FallbackError = () => {
 FallbackError.displayName = 'FallbackError';
 /* eslint-enable jsx-a11y/anchor-is-valid */
 
+class UniversalErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: props.error || null,
+            url: props.url,
+        };
+    }
+    // Reference and explanation here - https://github.com/remix-run/remix/blob/main/packages/remix-react/errorBoundaries.tsx#L35
+    static getDerivedStateFromProps(props, state) {
+        if (props.url !== state.url) {
+            return { error: props.error || null, url: props.url };
+        }
+        return { error: props.error || state.error, url: state.url };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { errorHandlers } = this.props;
+        if (errorHandlers) {
+            errorHandlers.forEach((handler) => {
+                handler(error, errorInfo);
+            });
+        }
+    }
+    render() {
+        const { children, fallback: Fallback, fallbackFromDi } = this.props;
+        const { url, error } = this.state;
+        if (!error) {
+            return children;
+        }
+        if (Fallback) {
+            return React__default["default"].createElement(Fallback, { url: url, error: error });
+        }
+        if (fallbackFromDi) {
+            return fallbackFromDi;
+        }
+        return React__default["default"].createElement(FallbackError, null);
+    }
+}
+UniversalErrorBoundary.displayName = 'UniversalErrorBoundary';
+
 const ERROR_BOUNDARY_TOKEN = dippy.createToken('reactErrorBoundaryHandlers', {
     multi: true,
 });
+const ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN = dippy.createToken('rootErrorBoundaryComponent');
+/**
+ * @deprecated
+ */
 const ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN = dippy.createToken('errorBoundaryFallbackComponent');
 
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 exports.ErrorBoundary = class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
@@ -120,6 +170,9 @@ exports.ErrorBoundary = tslib.__decorate([
     })
 ], exports.ErrorBoundary);
 
+/**
+ * @deprecated Use UniversalErrorBoundary component
+ */
 const withError = ({ fallbackComponent, } = {}) => (WrappedComponent) => {
     function WrapperWithError(props) {
         return (React__default["default"].createElement(exports.ErrorBoundary, { fallbackComponent: fallbackComponent },
@@ -146,6 +199,8 @@ exports.DIContext = DIContext;
 exports.ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN = ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN;
 exports.ERROR_BOUNDARY_TOKEN = ERROR_BOUNDARY_TOKEN;
 exports.FallbackError = FallbackError;
+exports.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN = ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN;
+exports.UniversalErrorBoundary = UniversalErrorBoundary;
 exports.lazy = lazy;
 exports.useDi = useDi;
 exports.useDiContainer = useDiContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/react",
-  "version": "1.55.2",
+  "version": "1.56.0",
   "description": "",
   "main": "lib/react.js",
   "typings": "lib/react.d.ts",
@@ -25,7 +25,8 @@
   "peerDependencies": {
     "@tinkoff/dippy": "0.7.38",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "1.55.2",
+    "@tinkoff/url": "0.7.37",
+    "@tramvai/core": "1.56.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "tslib": "^2.0.3"