react-simple-loadable 2.3.9 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/loadable.d.ts +15 -3
  2. package/loadable.d.ts.map +1 -1
  3. package/loadable.js +29 -14
  4. package/package.json +1 -1
package/loadable.d.ts CHANGED
@@ -6,9 +6,12 @@ export type LoadableMixin = {
6
6
  export type LoadableComponent<P = Record<string, any>> = ((props: P) => ReactNode) & LoadableMixin;
7
7
  export interface LoadingComponentProps {
8
8
  error?: any;
9
- isLoading?: boolean;
10
9
  }
11
10
  export type LoadingComponent = ComponentType<LoadingComponentProps>;
11
+ export interface ErrorComponentProps {
12
+ error?: any;
13
+ }
14
+ export type ErrorComponent = ComponentType<ErrorComponentProps>;
12
15
  export interface LoadableConfig {
13
16
  /**
14
17
  * Whether or not to throw the error when it happens.
@@ -26,13 +29,22 @@ export interface LoadableConfig {
26
29
  */
27
30
  loading?: LoadingComponent | ComponentType<Record<string, any>>;
28
31
  /**
29
- * @deprecated use {loading}
32
+ * Custom component for error boundary
33
+ *
34
+ * Catch error statement (when failed to load component)
30
35
  */
31
- loader?: LoadingComponent | ComponentType<Record<string, any>>;
36
+ error?: ErrorComponent;
32
37
  /**
33
38
  * Component which renders with the lazy component
34
39
  */
35
40
  extra?: ComponentType<any>;
41
+ /**
42
+ * Use cache for input import functions
43
+ * @example
44
+ * const Comp = loadable(() => import().then(m => m));
45
+ * // cached Comp by `'() => import().then(m => m)'`
46
+ */
47
+ cache?: boolean | string;
36
48
  }
37
49
  export interface LoadableConfigWithLoad<P = any> extends LoadableConfig {
38
50
  load: LoadComponentFn<P>;
package/loadable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAClE,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CACxD,KAAK,EAAE,CAAC,KACL,SAAS,CAAC,GACb,aAAa,CAAC;AAIhB,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAChE;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc;IACrE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC1B;AAgID,KAAK,kBAAkB,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAElD,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAEzD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACzB,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EACxB,eAAe,CAAC,EACZ,IAAI,GACJ,SAAS,GACT,cAAc,CAAC,SAAS,CAAC,GACzB,cAAc,GACjB,kBAAkB,CAAC,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAClE,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CACxD,KAAK,EAAE,CAAC,KACL,SAAS,CAAC,GACb,aAAa,CAAC;AAIhB,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,CAAC,CAAC;AAEpE,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAIhE,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAChE;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc;IACrE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC1B;AAiID,KAAK,kBAAkB,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAElD,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAEzD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACzB,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EACxB,eAAe,CAAC,EACZ,IAAI,GACJ,SAAS,GACT,cAAc,CAAC,SAAS,CAAC,GACzB,cAAc,GACjB,kBAAkB,CAAC,CAAC,CAAC,CAAC"}
package/loadable.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Component } from 'react';
3
3
  const DefaultLoadingComponent = () => null;
4
+ const componentsCache = new Map();
4
5
  const loadingStates = new WeakMap();
5
6
  const getLoadingState = (loadFn, modify) => {
6
7
  if (!loadingStates.has(loadFn)) {
@@ -63,21 +64,21 @@ class LoadableComponentBase extends Component {
63
64
  });
64
65
  }
65
66
  render() {
66
- const { loading, loader, throwOnError } = this.config;
67
- const Loader = loading || loader || DefaultLoadingComponent;
68
- if (throwOnError && this.state.error) {
69
- throw this.state.error;
67
+ const { loading, throwOnError, error: ErrorComponent } = this.config;
68
+ const Loader = loading || DefaultLoadingComponent;
69
+ if (this.state.error) {
70
+ if (throwOnError) {
71
+ throw this.state.error;
72
+ }
73
+ if (ErrorComponent) {
74
+ return _jsx(ErrorComponent, { error: this.state.error });
75
+ }
70
76
  }
71
77
  if (this.state.loading || this.state.error) {
72
78
  const loaderProps = {
73
79
  ...this.props,
80
+ error: this.state.error || this.props.error,
74
81
  };
75
- if (this.state.error) {
76
- loaderProps.error = this.state.error;
77
- }
78
- else if (!loaderProps.isLoading) {
79
- loaderProps.isLoading = true;
80
- }
81
82
  return _jsx(Loader, { ...loaderProps });
82
83
  }
83
84
  else if (this.state.result) {
@@ -113,12 +114,26 @@ export function loadable(...args) {
113
114
  Object.assign(config, args[1] || {});
114
115
  }
115
116
  }
116
- class LoadableComponent extends LoadableComponentBase {
117
- static loadFn = config.load;
118
- constructor(props) {
119
- super(config, props);
117
+ let cacheKey;
118
+ if (config.cache) {
119
+ cacheKey =
120
+ typeof config.cache === 'string' ? config.cache : config.load.toString();
121
+ }
122
+ let LoadableComponent;
123
+ if (!cacheKey || !componentsCache.has(cacheKey)) {
124
+ LoadableComponent = class LoadableComponent extends (LoadableComponentBase) {
125
+ static loadFn = config.load;
126
+ constructor(props) {
127
+ super(config, props);
128
+ }
129
+ };
130
+ if (cacheKey) {
131
+ componentsCache.set(cacheKey, LoadableComponent);
120
132
  }
121
133
  }
134
+ else if (cacheKey) {
135
+ LoadableComponent = componentsCache.get(cacheKey);
136
+ }
122
137
  if (config.preload) {
123
138
  LoadableComponent.preload();
124
139
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-loadable",
3
- "version": "2.3.9",
3
+ "version": "3.1.0",
4
4
  "description": "Really simple React Loadable component",
5
5
  "repository": {
6
6
  "type": "git",