From fa8aab4075f65a436d519993b3164ba6923fdf0c Mon Sep 17 00:00:00 2001 From: Abdul Rehman Talat Date: Mon, 19 Aug 2019 15:56:48 +0500 Subject: [PATCH] feat(ComponentRegistry): Replaces react-loadable with loadable-components --- package.json | 2 + ...onentRegistry.ts => ComponentRegistry.tsx} | 12 ++-- src/utils/index.ts | 1 + src/utils/withLoadable.tsx | 57 +++++++++++++++++++ yarn.lock | 17 +++++- 5 files changed, 84 insertions(+), 5 deletions(-) rename src/registries/{ComponentRegistry.ts => ComponentRegistry.tsx} (94%) create mode 100644 src/utils/withLoadable.tsx diff --git a/package.json b/package.json index e943abd1..2c69425c 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "node": ">=8.9" }, "dependencies": { + "@loadable/component": "^5.10.2", "deepmerge": "^4.0.0", "expo": "^33.0.0", "hoist-non-react-statics": "^3.3.0", @@ -134,6 +135,7 @@ "@types/enzyme-async-helpers": "^0.9.1", "@types/hoist-non-react-statics": "^3.3.0", "@types/jest": "^24.0.15", + "@types/loadable__component": "^5.10.0", "@types/lodash.flowright": "^3.5.6", "@types/lodash.isboolean": "^3.0.6", "@types/lodash.isfunction": "^3.0.6", diff --git a/src/registries/ComponentRegistry.ts b/src/registries/ComponentRegistry.tsx similarity index 94% rename from src/registries/ComponentRegistry.ts rename to src/registries/ComponentRegistry.tsx index 48bbf9ec..9a35407d 100644 --- a/src/registries/ComponentRegistry.ts +++ b/src/registries/ComponentRegistry.tsx @@ -4,11 +4,15 @@ import { BlueBaseModuleRegistryItem, } from './BlueBaseModuleRegistry'; import { ComponentStyles, applyStyles } from '../themes'; -import { MaybeThunk, Thunk, getDefiniteBlueBaseModule, isBlueBaseModule } from '../utils'; +import { + MaybeThunk, + Thunk, + getDefiniteBlueBaseModule, + isBlueBaseModule, + withLoadable, +} from '../utils'; import { ItemCollection } from './Registry'; -import Loadable from 'react-loadable'; -import { ReactLoadableLoading } from '../components/'; import flowRight from 'lodash.flowright'; import hoistNonReactStatics from 'hoist-non-react-statics'; @@ -73,7 +77,7 @@ export class ComponentRegistry extends BlueBaseModuleRegistry< // If component bundle has to be downloaded, wrap into lazy const rawComponent = item.value.isAsync - ? Loadable({ loader: () => item.value, loading: ReactLoadableLoading }) + ? withLoadable(item.value) : (item.value.module as React.ComponentType); let themedComponent = rawComponent; diff --git a/src/utils/index.ts b/src/utils/index.ts index 750bfad3..549e2cbf 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -8,3 +8,4 @@ export * from './Promises'; export * from './Screen'; export * from './Thunks'; export * from './Typescript'; +export * from './withLoadable'; diff --git a/src/utils/withLoadable.tsx b/src/utils/withLoadable.tsx new file mode 100644 index 00000000..8e3738cf --- /dev/null +++ b/src/utils/withLoadable.tsx @@ -0,0 +1,57 @@ +import { StatefulComponent, StatefulComponentProps } from '@bluebase/components'; + +import { Omit } from './'; +import React from 'react'; +import loadable from '@loadable/component'; + +export function withLoadable( + promise: Promise>, + options: Omit< + StatefulComponentProps, + 'children' | 'component' | 'data' | 'isEmpty' | 'onRetry' + > = {} +) { + const Component = loadable(() => promise); + const { + checkError, + delay, + emptyComponent, + error, + errorComponent, + isLoading, + loading, + loadingComponent, + onTimeout, + timeout, + } = options; + + return class InnerLoadable extends React.Component { + render() { + const onRetry = this.forceUpdate; + + return ( + false, onRetry }} + > + + } + {...this.props} + /> + + ); + } + }; +} diff --git a/yarn.lock b/yarn.lock index f28c8a37..3cff02c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1269,7 +1269,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5": +"@babel/runtime@^7.4.3", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5": version "7.5.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== @@ -1742,6 +1742,14 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^12.0.9" +"@loadable/component@^5.10.2": + version "5.10.2" + resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.2.tgz#1f51e7a0064cc0f59604b1933bbc7a1bbfd84d18" + integrity sha512-pUzGRc/mhGzZ0+xJPQErnS68BQEApFYGwn10iSDqBHdDhOruCASTer1J+rYI4jaJJcegJwnuzh7j/SqMoiCyAQ== + dependencies: + "@babel/runtime" "^7.4.4" + hoist-non-react-statics "^3.3.0" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -2534,6 +2542,13 @@ dependencies: "@types/jest-diff" "*" +"@types/loadable__component@^5.10.0": + version "5.10.0" + resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.10.0.tgz#178fdc401983f4f93647fac778226da7b8c1e080" + integrity sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA== + dependencies: + "@types/react" "*" + "@types/lodash.flowright@^3.5.6": version "3.5.6" resolved "https://registry.yarnpkg.com/@types/lodash.flowright/-/lodash.flowright-3.5.6.tgz#97c8c80719b38fee666dbd80ea6273986e64d17a"