react-simple-loadable 2.0.1 → 2.0.3

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 +8 -3
  2. package/loadable.d.ts.map +1 -1
  3. package/loadable.js +17 -31
  4. package/package.json +9 -11
package/loadable.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import { ComponentType } from 'react';
2
- export type LoadableComponentFunction<P = Record<string, any>> = () => Promise<ComponentType<P>>;
3
- interface LoadableConfig {
2
+ export type LoadComponentFn<P = Record<string, any>> = () => Promise<ComponentType<P>>;
3
+ export type LoadableMixin = {
4
+ preload(): void;
5
+ };
6
+ export type LoadableComponent<P = Record<string, any>> = ComponentType<P> & LoadableMixin;
7
+ export interface LoadableConfig {
4
8
  loader?: ComponentType<any>;
5
9
  /**
6
10
  * Component which renders with the lazy component
7
11
  */
8
12
  extra?: ComponentType<any>;
9
13
  }
10
- export declare function loadable<P = any>(loadFn: LoadableComponentFunction<P>, loaderOrConfig?: null | undefined | LoadableConfig['loader'] | LoadableConfig): ComponentType<P>;
14
+ type LoadableComponent$<P> = LoadableComponent<P>;
15
+ export declare function loadable<P = any>(loadFn: LoadComponentFn<P>, loaderOrConfig?: null | undefined | LoadableConfig['loader'] | LoadableConfig): LoadableComponent$<P>;
11
16
  export {};
12
17
  //# sourceMappingURL=loadable.d.ts.map
package/loadable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,OAAO,CAC5E,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AAIF,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5B;AAyID,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,EACpC,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,GAC5E,aAAa,CAAC,CAAC,CAAC,CAsBlB"}
1
+ {"version":3,"file":"loadable.d.ts","sourceRoot":"","sources":["../src/loadable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjD,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,aAAa,CAAC,CAAC,CAAC,GACvE,aAAa,CAAC;AAIhB,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5B;AA4HD,KAAK,kBAAkB,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAElD,wBAAgB,QAAQ,CAAC,CAAC,GAAG,GAAG,EAC9B,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,EAC1B,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,GAC5E,kBAAkB,CAAC,CAAC,CAAC,CAqBvB"}
package/loadable.js CHANGED
@@ -1,86 +1,73 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- /* eslint-disable sonarjs/sonar-no-unused-class-component-methods */
3
- /* eslint-disable sonarjs/no-unsafe */
4
- /* eslint-disable sonarjs/public-static-readonly */
5
- /* eslint-disable @typescript-eslint/ban-types */
6
2
  import { Component } from 'react';
7
3
  const DefaultLoader = () => null;
8
4
  const loadingStates = new WeakMap();
9
- const getOrCreateLoadingState = (loadFn) => {
5
+ const getLoadingState = (loadFn, modify) => {
10
6
  if (!loadingStates.has(loadFn)) {
11
7
  loadingStates.set(loadFn, {
12
8
  error: null,
13
9
  loading: true,
14
10
  });
15
11
  }
16
- return loadingStates.get(loadFn);
17
- };
18
- const updateLoadingState = (loadFn, update) => {
19
- const loadingState = getOrCreateLoadingState(loadFn);
20
- const updatedState = { ...loadingState, ...update };
12
+ const loadingState = loadingStates.get(loadFn);
13
+ if (modify == null) {
14
+ return loadingState;
15
+ }
16
+ const updatedState = { ...loadingState, ...modify };
21
17
  loadingStates.set(loadFn, updatedState);
22
18
  return updatedState;
23
19
  };
24
20
  const load = (loadFn) => {
25
- const state = getOrCreateLoadingState(loadFn);
21
+ const state = getLoadingState(loadFn);
26
22
  if (state.result) {
27
23
  return state;
28
24
  }
29
- updateLoadingState(loadFn, { loading: true, error: null });
25
+ getLoadingState(loadFn, { loading: true, error: null });
30
26
  state.loading = true;
31
27
  state.error = null;
32
28
  state.promise = loadFn()
33
29
  .then((result) => {
34
30
  state.loading = false;
35
31
  state.result = result;
36
- updateLoadingState(loadFn, state);
32
+ getLoadingState(loadFn, state);
37
33
  return result;
38
34
  })
39
35
  .catch((error) => {
40
36
  state.loading = false;
41
37
  state.error = error;
42
- updateLoadingState(loadFn, state);
38
+ getLoadingState(loadFn, state);
43
39
  throw error;
44
40
  });
45
- updateLoadingState(loadFn, state);
41
+ getLoadingState(loadFn, state);
46
42
  return state;
47
43
  };
48
44
  class LoadableComponentBase extends Component {
49
45
  config;
50
- constructor(config, initialState, props) {
46
+ constructor(config, props) {
51
47
  super(props);
52
48
  this.config = config;
53
- this.state = initialState;
49
+ this.state = getLoadingState(config.loadFn);
54
50
  }
55
51
  static loadFn = undefined;
56
52
  static preload() {
57
53
  load(this.loadFn);
58
54
  }
59
55
  UNSAFE_componentWillMount() {
60
- this.loadModule();
61
- }
62
- loadModule() {
63
56
  if (!this.state.loading) {
64
57
  return;
65
58
  }
66
59
  const { promise } = load(this.config.loadFn);
67
- this.syncLoadingState();
60
+ this.setState(getLoadingState(this.config.loadFn));
68
61
  promise
69
62
  .then(() => {
70
- this.syncLoadingState();
63
+ this.setState(getLoadingState(this.config.loadFn));
71
64
  return null;
72
65
  })
73
66
  .catch(() => {
74
- this.syncLoadingState();
67
+ this.setState(getLoadingState(this.config.loadFn));
75
68
  return null;
76
69
  });
77
70
  }
78
- syncLoadingState() {
79
- this.setState(getOrCreateLoadingState(this.config.loadFn));
80
- }
81
- updateLoadingState(update) {
82
- this.setState(updateLoadingState(this.config.loadFn, update));
83
- }
84
71
  render() {
85
72
  const { loader } = this.config;
86
73
  const Loader = loader || DefaultLoader;
@@ -97,7 +84,6 @@ class LoadableComponentBase extends Component {
97
84
  }
98
85
  }
99
86
  }
100
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
101
87
  export function loadable(loadFn, loaderOrConfig) {
102
88
  const config = typeof loaderOrConfig === 'object'
103
89
  ? loaderOrConfig
@@ -108,7 +94,7 @@ export function loadable(loadFn, loaderOrConfig) {
108
94
  super({
109
95
  loadFn,
110
96
  ...config,
111
- }, getOrCreateLoadingState(loadFn), props);
97
+ }, props);
112
98
  }
113
99
  }
114
100
  return LoadableComponent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-loadable",
3
- "version": "2.0.1",
3
+ "version": "2.0.3",
4
4
  "description": "Really simple React Loadable component",
5
5
  "repository": {
6
6
  "type": "git",
@@ -10,23 +10,21 @@
10
10
  "react",
11
11
  "simple",
12
12
  "loadable",
13
- "suspense"
13
+ "suspense",
14
+ "lazy"
14
15
  ],
15
16
  "author": "js2me",
16
17
  "license": "MIT",
17
18
  "type": "module",
18
- "dependencies": {
19
- "yammies": "^2.0.10"
20
- },
21
19
  "peerDependencies": {
22
- "react": "<19"
20
+ "react": "^18.3.1"
23
21
  },
24
22
  "devDependencies": {
25
- "@types/react": "<19",
26
- "eslint": "8.57.1",
27
- "js2me-exports-post-build-script": "2.0.14",
28
- "js2me-eslint-config": "1.0.4",
29
- "typescript": "5.6.2"
23
+ "@types/react": "^18.3.18",
24
+ "eslint": "^8.57.1",
25
+ "js2me-eslint-config": "^1.0.6",
26
+ "js2me-exports-post-build-script": "^2.0.17",
27
+ "typescript": "^5.7.2"
30
28
  },
31
29
  "exports": {
32
30
  ".": {