import { ComponentType, ErrorInfo, PureComponent, PropsWithChildren, Ref } from 'react'; export declare const TranslationLangContext: import("react").Context; export interface LangTrls { [x: string]: string; } export interface Trls { [x: string]: LangTrls; } export interface TranslationHOCProps { trls: LangTrls; } export type TranslatedComponent> = ComponentType>; interface TProps { forwardRef?: Ref; Element: TranslatedComponent; trls: LangTrls; } interface TState { failed: boolean; } export declare class T> extends PureComponent, TState> { state: TState; /** * Хотим, чтобы при падении компонента, не падал весь сайт, а только та часть, где произошла ошибка, * чтобы остальной частью сайта можно было пользоваться * Здесь есть несколько ограничений: * 1) Error Bounding можно делать только внутри компонентов-классов, * либо оборачивать return в try-catch блоки. Что возможно делать только руками и затратно, * поэтому это решение не рассматривается далее. * * 2) У нас есть 2 инструмента: ComponentDidCatch — где можно писать отправку ошибок, setState и прочее и * getDerivedStateFromError — статический метод "что добавить в state". Других инструментов у нас нет. * * 3) Если не использовать ComponentDidCatch\getDerivedStateFromError приложение просто упадет и * пользователь увидит пустую страницу (в нашем случае только обвязку) * * 4) Если поставить ComponentDidCatch, но продолжать рендерить страницу, она после N попыток перестает * рендериться или уходит в бесконечный цикл. Поэтому проблемный компонент не должен быть отрендерен после * ошибки * * В качестве решения добавляем обработчик ошибок в translation, так как * 1) Он используется в большинстве компонентов * 2) О нем разработчик не забудет. В других случаях, про error bounding обычно забывают * 3) Мы не увеличиваем количество компонентов — за счет чего выигрываем по performance и по дереву компонентов * (проще отлаживать) * **/ static getDerivedStateFromError(): TState; componentDidCatch(error: Error, { componentStack }: ErrorInfo): void; render(): JSX.Element | null; } declare const useTranslations: (Component: TranslatedComponent | undefined, trls: Trls, defaultLang: string, isServer: boolean) => LangTrls; export default useTranslations;