@tramvai/react 1.99.1 → 1.101.4

package/lib/lazy/lazy.d.ts

@@ -2,5 +2,10 @@ import type { LoadableComponent, DefaultComponent } from '@loadable/component';
 interface Options {
     loading?: JSX.Element;
 }
+/**
+ * @private Only for internal usage!
+ * The method is intended to make it possible to wait for retries to synchronously load unsuccessful CSS assets
+ */
+export declare const __lazyErrorHandler: (error: any, load: () => Promise<any>) => Promise<any>;
 export declare const lazy: <Props, Component>(load: (props?: Props | undefined) => Promise<DefaultComponent<Props>>, options?: Options) => LoadableComponent<Props>;
 export {};

package/lib/react.d.ts

@@ -6,4 +6,4 @@ export { ErrorBoundary } from './error/component';
 export { FallbackError } from './error/fallback';
 export { withError } from './error/hoc';
 export * from './error/tokens';
-export { lazy } from './lazy/lazy';
+export { lazy, __lazyErrorHandler } from './lazy/lazy';

package/lib/react.es.js

@@ -164,6 +164,27 @@ const withError = ({ fallbackComponent, } = {}) => (WrappedComponent) => {
     return hoistStatics(WrapperWithError, WrappedComponent);
 };
 
+/**
+ * @private Only for internal usage!
+ * The method is intended to make it possible to wait for retries to synchronously load unsuccessful CSS assets
+ */
+const __lazyErrorHandler = (error, load) => {
+    // This error from `mini-css-extract-plugin` fired, when a file loading initiated by this plugin failed.
+    // By default, this error will cancel the loading of the component via `loadable`.
+    // Now, we can add `__lazyErrorHandler` to catch block of any dynamic import,
+    // and if failed assets was loaded again, `loadable` will not fail
+    if ((error === null || error === void 0 ? void 0 : error.code) === 'CSS_CHUNK_LOAD_FAILED') {
+        const failedLinkUrl = error.request;
+        // `mini-css-extract-plugin` instantly removes failed link tags,
+        // so we can expect only link tag from our recovery mechanism
+        const fallbackLinkTag = document.querySelector(`link[href="${failedLinkUrl}"]`) ||
+            document.querySelector(`link[data-href="${failedLinkUrl}"]`);
+        if (fallbackLinkTag) {
+            return load();
+        }
+    }
+    throw error;
+};
 const lazy = (load, options = {}) => {
     if (process.env.NODE_ENV === 'development') {
         if (!('requireAsync' in load)) {
@@ -173,9 +194,14 @@ the first argument should be transformed into a special object, but the current
 "${load.toString()}"`);
         }
     }
+    // @ts-expect-error
+    const originalImportAsync = load.importAsync;
+    // @ts-expect-error
+    // eslint-disable-next-line no-param-reassign
+    load.importAsync = () => originalImportAsync().catch((e) => __lazyErrorHandler(e, originalImportAsync));
     return loadable(load, {
         fallback: options.loading,
     });
 };
 
-export { DIContext, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, ERROR_BOUNDARY_TOKEN, ErrorBoundary, FallbackError, ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, UniversalErrorBoundary, lazy, useDi, useDiContainer, withDi, withError };
+export { DIContext, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, ERROR_BOUNDARY_TOKEN, ErrorBoundary, FallbackError, ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, UniversalErrorBoundary, __lazyErrorHandler, lazy, useDi, useDiContainer, withDi, withError };

package/lib/react.js

@@ -174,6 +174,27 @@ const withError = ({ fallbackComponent, } = {}) => (WrappedComponent) => {
     return hoistStatics__default["default"](WrapperWithError, WrappedComponent);
 };
 
+/**
+ * @private Only for internal usage!
+ * The method is intended to make it possible to wait for retries to synchronously load unsuccessful CSS assets
+ */
+const __lazyErrorHandler = (error, load) => {
+    // This error from `mini-css-extract-plugin` fired, when a file loading initiated by this plugin failed.
+    // By default, this error will cancel the loading of the component via `loadable`.
+    // Now, we can add `__lazyErrorHandler` to catch block of any dynamic import,
+    // and if failed assets was loaded again, `loadable` will not fail
+    if ((error === null || error === void 0 ? void 0 : error.code) === 'CSS_CHUNK_LOAD_FAILED') {
+        const failedLinkUrl = error.request;
+        // `mini-css-extract-plugin` instantly removes failed link tags,
+        // so we can expect only link tag from our recovery mechanism
+        const fallbackLinkTag = document.querySelector(`link[href="${failedLinkUrl}"]`) ||
+            document.querySelector(`link[data-href="${failedLinkUrl}"]`);
+        if (fallbackLinkTag) {
+            return load();
+        }
+    }
+    throw error;
+};
 const lazy = (load, options = {}) => {
     if (process.env.NODE_ENV === 'development') {
         if (!('requireAsync' in load)) {
@@ -183,6 +204,11 @@ the first argument should be transformed into a special object, but the current
 "${load.toString()}"`);
         }
     }
+    // @ts-expect-error
+    const originalImportAsync = load.importAsync;
+    // @ts-expect-error
+    // eslint-disable-next-line no-param-reassign
+    load.importAsync = () => originalImportAsync().catch((e) => __lazyErrorHandler(e, originalImportAsync));
     return loadable__default["default"](load, {
         fallback: options.loading,
     });
@@ -194,6 +220,7 @@ 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.__lazyErrorHandler = __lazyErrorHandler;
 exports.lazy = lazy;
 exports.useDi = useDi;
 exports.useDiContainer = useDiContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/react",
-  "version": "1.99.1",
+  "version": "1.101.4",
   "description": "",
   "main": "lib/react.js",
   "typings": "lib/react.d.ts",
@@ -23,10 +23,10 @@
     "hoist-non-react-statics": "^3.3.0"
   },
   "peerDependencies": {
-    "@tinkoff/dippy": "0.7.39",
+    "@tinkoff/dippy": "0.7.40",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/url": "0.7.37",
-    "@tramvai/core": "1.99.1",
+    "@tramvai/core": "1.101.4",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "tslib": "^2.0.3"