@teambit/react.ui.loader-fallback 0.0.75 → 0.0.79

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { LoaderFallback } from './loader-fallback';
-export type { LoaderProps } from './loader-fallback';
+export { LoaderFallback, useFallback } from './loader-fallback';
+export type { LoaderProps, useFallbackOptions } from './loader-fallback';

package/dist/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderFallback = void 0;
+exports.useFallback = exports.LoaderFallback = void 0;
 var loader_fallback_1 = require("./loader-fallback");
 Object.defineProperty(exports, "LoaderFallback", { enumerable: true, get: function () { return loader_fallback_1.LoaderFallback; } });
+Object.defineProperty(exports, "useFallback", { enumerable: true, get: function () { return loader_fallback_1.useFallback; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,qDAAgE;AAAvD,iHAAA,cAAc,OAAA;AAAE,8GAAA,WAAW,OAAA"}

package/dist/loader-fallback.d.ts

@@ -1,12 +1,17 @@
-import { ComponentType } from 'react';
+import React, { ComponentType, ReactElement } from 'react';
 export declare type LoaderProps = {
     /** component to render */
     Target: ComponentType | undefined;
+    /** component to render when Target is undefined */
+    DefaultComponent: ComponentType;
     /** component to render when target is missing, for a grace period, until rendering the default */
     Loader?: ComponentType;
     /** cool-down period (in ms) to show Loader, before showing the default */
     timeout?: number;
-    /** component to render when Target is undefined */
-    DefaultComponent: ComponentType;
 };
-export declare function LoaderFallback({ Target, Loader, DefaultComponent, timeout }: LoaderProps): JSX.Element;
+export declare function LoaderFallback({ Target, Loader, DefaultComponent, timeout }: LoaderProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare type useFallbackOptions = {
+    timeout?: number;
+    loader?: ReactElement;
+};
+export declare function useFallback(target: ReactElement | null | undefined, fallback: ReactElement, { timeout, loader }?: useFallbackOptions): ReactElement | null;

package/dist/loader-fallback.docs.mdx

@@ -1,13 +1,25 @@
 import { LoaderFallback } from './loader-fallback';
 
-Renders a component, and show a placeholder when it is undefined.
+Safely render a component, with a default fallback when it is `undefined`.  
+The `LoaderFallback` component also provides a grace period, where it shows a loader before switching to the default.  
+Set `timeout = 0` to skip the grace period.
 
-Logic is as follows:
+#### Example usage:
 
-1. when component is defined -> render it
-1. when the initial value of the component is undefined -> show the default immediately
-1. when the component had just changed to be undefined -> show Loader for _x_ seconds
-   1. then, after _x_ seconds - show NotFound
+```tsx
+// as a hook:
+const safeTarget = useFallback(Target && <Target />, <DefaultComponent />, { timeout: 10000, loader: <Loader /> });
+
+// as a component:
+<LoaderFallback Target={Target} DefaultComponent={DefaultComponent} timeout={10000} loader={Loader}>
+```
+
+### Logic is as follows:
+
+1. when component is `defined` -> render it
+1. when the initial value of the component is `undefined` -> show the default immediately
+1. when the component changes to be `undefined` -> show Loader for _x_ seconds
+   1. then, after _x_ seconds - show the default.
 
 <!-- live playground doesn't keep state when editing :( -->
 <!-- Try it out:

package/dist/loader-fallback.js

@@ -19,51 +19,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderFallback = void 0;
+exports.useFallback = exports.LoaderFallback = void 0;
 const react_1 = __importStar(require("react"));
 const base_ui_loaders_loader_ribbon_1 = require("@teambit/base-ui.loaders.loader-ribbon");
 function LoaderFallback({ Target, Loader = LoaderComponent, DefaultComponent, timeout = 15000 }) {
-    const [ToRender, setRenderTarget] = (0, react_1.useState)(Target ? react_1.default.createElement(Target, null) : react_1.default.createElement(DefaultComponent, null));
-    const prevValue = (0, react_1.useRef)(undefined);
-    // could re-implement with a state machine or a reducer
+    return useFallback(Target && react_1.default.createElement(Target, null), react_1.default.createElement(DefaultComponent, null), { timeout, loader: react_1.default.createElement(Loader, null) });
+}
+exports.LoaderFallback = LoaderFallback;
+function useFallback(target, fallback, { timeout = 15000, loader = react_1.default.createElement(LoaderComponent, null) } = {}) {
+    const [working, setWorking] = (0, react_1.useState)(!!target);
+    const hasTarget = !!target;
     (0, react_1.useEffect)(() => {
-        const prev = prevValue.current;
-        prevValue.current = Target;
-        if (Target) {
-            setRenderTarget(react_1.default.createElement(Target, null));
+        if (timeout <= 0)
+            return () => { };
+        if (hasTarget) {
+            setWorking(true);
             return () => { };
         }
-        // else -> Target === undefined
-        // Target has changed from a value to undefined.
-        // show loader and hope webpack will supply a component
-        if (prev) {
-            setRenderTarget(react_1.default.createElement(Loader, null));
-            const tmId = setTimeout(() => setRenderTarget(react_1.default.createElement(DefaultComponent, null)), timeout);
-            return () => clearTimeout(tmId);
-        }
-        // else -> Target === undefined, prev === undefined
-        // comp changed from undefined to undefined
-        // could happen on first render, or when one of the other values change.
-        return () => { }; // nothing to do here
-    }, [Target, DefaultComponent, Loader, timeout]);
-    return ToRender;
+        const tmId = setTimeout(() => setWorking(false), timeout);
+        return () => clearTimeout(tmId);
+    }, [hasTarget, timeout]);
+    if (target)
+        return target;
+    if (working && timeout > 0)
+        return loader;
+    return fallback;
 }
-exports.LoaderFallback = LoaderFallback;
-/*
- * TIP:
- * useState() and setState() can receive a function as value.
- * So, be careful when using a react Function Component, like:
- * ```
- * useState(ButtonComponent) // will try to run ButtonComponent as a function
- * setState(ButtonComponent)
- *
- * // instead, do:
- * useState(() => ButtonComponent)
- * setState(() => ButtonComponent)
- * ```
- *
- * or don't set components as state to begin with.
- */
+exports.useFallback = useFallback;
 function LoaderComponent() {
     return react_1.default.createElement(base_ui_loaders_loader_ribbon_1.LoaderRibbon, { active: true, style: { position: 'fixed', top: 0, left: 0, right: 0 } });
 }

package/dist/loader-fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader-fallback.js","sourceRoot":"","sources":["../loader-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0E;AAC1E,0FAAsE;AAatE,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,eAAe,EAAE,gBAAgB,EAAE,OAAO,GAAG,KAAK,EAAe;IACjH,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAqB,MAAM,CAAC,CAAC,CAAC,8BAAC,MAAM,OAAG,CAAC,CAAC,CAAC,8BAAC,gBAAgB,OAAG,CAAC,CAAC;IAC7G,MAAM,SAAS,GAAG,IAAA,cAAM,EAA4B,SAAS,CAAC,CAAC;IAE/D,uDAAuD;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,IAAI,MAAM,EAAE;YACV,eAAe,CAAC,8BAAC,MAAM,OAAG,CAAC,CAAC;YAC5B,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;SACjB;QACD,+BAA+B;QAE/B,gDAAgD;QAChD,uDAAuD;QACvD,IAAI,IAAI,EAAE;YACR,eAAe,CAAC,8BAAC,MAAM,OAAG,CAAC,CAAC;YAE5B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,8BAAC,gBAAgB,OAAG,CAAC,EAAE,OAAO,CAAC,CAAC;YAC9E,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACjC;QACD,mDAAmD;QAEnD,2CAA2C;QAC3C,wEAAwE;QAExE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,qBAAqB;IACxC,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAhCD,wCAgCC;AAED;;;;;;;;;;;;;;GAcG;AAEH,SAAS,eAAe;IACtB,OAAO,8BAAC,4CAAY,IAAC,MAAM,QAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAI,CAAC;AAC1F,CAAC"}
+{"version":3,"file":"loader-fallback.js","sourceRoot":"","sources":["../loader-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgF;AAChF,0FAAsE;AAatE,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,eAAe,EAAE,gBAAgB,EAAE,OAAO,GAAG,KAAK,EAAe;IACjH,OAAO,WAAW,CAAC,MAAM,IAAI,8BAAC,MAAM,OAAG,EAAE,8BAAC,gBAAgB,OAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,8BAAC,MAAM,OAAG,EAAE,CAAC,CAAC;AAClG,CAAC;AAFD,wCAEC;AAID,SAAgB,WAAW,CACzB,MAAuC,EACvC,QAAsB,EACtB,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,8BAAC,eAAe,OAAG,KAAyB,EAAE;IAE1E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC;IAE3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,CAAC;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClC,IAAI,SAAS,EAAE;YACb,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;SACjB;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,IAAI,OAAO,IAAI,OAAO,GAAG,CAAC;QAAE,OAAO,MAAM,CAAC;IAC1C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAtBD,kCAsBC;AAED,SAAS,eAAe;IACtB,OAAO,8BAAC,4CAAY,IAAC,MAAM,QAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAI,CAAC;AAC1F,CAAC"}

package/index.ts

@@ -1,2 +1,2 @@
-export { LoaderFallback } from './loader-fallback';
-export type { LoaderProps } from './loader-fallback';
+export { LoaderFallback, useFallback } from './loader-fallback';
+export type { LoaderProps, useFallbackOptions } from './loader-fallback';

package/loader-fallback.docs.mdx

@@ -1,13 +1,25 @@
 import { LoaderFallback } from './loader-fallback';
 
-Renders a component, and show a placeholder when it is undefined.
+Safely render a component, with a default fallback when it is `undefined`.  
+The `LoaderFallback` component also provides a grace period, where it shows a loader before switching to the default.  
+Set `timeout = 0` to skip the grace period.
 
-Logic is as follows:
+#### Example usage:
 
-1. when component is defined -> render it
-1. when the initial value of the component is undefined -> show the default immediately
-1. when the component had just changed to be undefined -> show Loader for _x_ seconds
-   1. then, after _x_ seconds - show NotFound
+```tsx
+// as a hook:
+const safeTarget = useFallback(Target && <Target />, <DefaultComponent />, { timeout: 10000, loader: <Loader /> });
+
+// as a component:
+<LoaderFallback Target={Target} DefaultComponent={DefaultComponent} timeout={10000} loader={Loader}>
+```
+
+### Logic is as follows:
+
+1. when component is `defined` -> render it
+1. when the initial value of the component is `undefined` -> show the default immediately
+1. when the component changes to be `undefined` -> show Loader for _x_ seconds
+   1. then, after _x_ seconds - show the default.
 
 <!-- live playground doesn't keep state when editing :( -->
 <!-- Try it out:

package/loader-fallback.tsx

@@ -1,67 +1,47 @@
-import React, { ComponentType, useRef, useEffect, useState } from 'react';
+import React, { ComponentType, useEffect, useState, ReactElement } from 'react';
 import { LoaderRibbon } from '@teambit/base-ui.loaders.loader-ribbon';
 
 export type LoaderProps = {
   /** component to render */
   Target: ComponentType | undefined;
+  /** component to render when Target is undefined */
+  DefaultComponent: ComponentType;
   /** component to render when target is missing, for a grace period, until rendering the default */
   Loader?: ComponentType;
   /** cool-down period (in ms) to show Loader, before showing the default */
   timeout?: number;
-  /** component to render when Target is undefined */
-  DefaultComponent: ComponentType;
 };
 
 export function LoaderFallback({ Target, Loader = LoaderComponent, DefaultComponent, timeout = 15000 }: LoaderProps) {
-  const [ToRender, setRenderTarget] = useState<JSX.Element | null>(Target ? <Target /> : <DefaultComponent />);
-  const prevValue = useRef<ComponentType | undefined>(undefined);
+  return useFallback(Target && <Target />, <DefaultComponent />, { timeout, loader: <Loader /> });
+}
 
-  // could re-implement with a state machine or a reducer
-  useEffect(() => {
-    const prev = prevValue.current;
-    prevValue.current = Target;
+export type useFallbackOptions = { timeout?: number; loader?: ReactElement };
 
-    if (Target) {
-      setRenderTarget(<Target />);
-      return () => {};
-    }
-    // else -> Target === undefined
-
-    // Target has changed from a value to undefined.
-    // show loader and hope webpack will supply a component
-    if (prev) {
-      setRenderTarget(<Loader />);
+export function useFallback(
+  target: ReactElement | null | undefined,
+  fallback: ReactElement,
+  { timeout = 15000, loader = <LoaderComponent /> }: useFallbackOptions = {}
+): ReactElement | null {
+  const [working, setWorking] = useState(!!target);
+  const hasTarget = !!target;
 
-      const tmId = setTimeout(() => setRenderTarget(<DefaultComponent />), timeout);
-      return () => clearTimeout(tmId);
+  useEffect(() => {
+    if (timeout <= 0) return () => {};
+    if (hasTarget) {
+      setWorking(true);
+      return () => {};
     }
-    // else -> Target === undefined, prev === undefined
-
-    // comp changed from undefined to undefined
-    // could happen on first render, or when one of the other values change.
 
-    return () => {}; // nothing to do here
-  }, [Target, DefaultComponent, Loader, timeout]);
+    const tmId = setTimeout(() => setWorking(false), timeout);
+    return () => clearTimeout(tmId);
+  }, [hasTarget, timeout]);
 
-  return ToRender;
+  if (target) return target;
+  if (working && timeout > 0) return loader;
+  return fallback;
 }
 
-/*
- * TIP:
- * useState() and setState() can receive a function as value.
- * So, be careful when using a react Function Component, like:
- * ```
- * useState(ButtonComponent) // will try to run ButtonComponent as a function
- * setState(ButtonComponent)
- *
- * // instead, do:
- * useState(() => ButtonComponent)
- * setState(() => ButtonComponent)
- * ```
- *
- * or don't set components as state to begin with.
- */
-
 function LoaderComponent() {
   return <LoaderRibbon active style={{ position: 'fixed', top: 0, left: 0, right: 0 }} />;
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react.ui.loader-fallback",
-  "version": "0.0.75",
+  "version": "0.0.79",
   "homepage": "https://bit.dev/teambit/react/ui/loader-fallback",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "ui/loader-fallback",
-    "version": "0.0.75"
+    "version": "0.0.79"
   },
   "dependencies": {
     "core-js": "^3.0.0",
@@ -23,7 +23,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.182",
+    "@teambit/legacy": "1.0.185",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -51,7 +51,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.182",
+        "@teambit/legacy": "1.0.185",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }