@modern-js/plugin-garfish 1.8.0 → 1.16.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 (14) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/js/modern/cli/index.js +2 -1
  3. package/dist/js/modern/cli/utils.js +7 -3
  4. package/dist/js/modern/runtime/loadable.js +88 -113
  5. package/dist/js/node/cli/index.js +2 -1
  6. package/dist/js/node/cli/utils.js +7 -3
  7. package/dist/js/node/runtime/loadable.js +89 -115
  8. package/dist/js/treeshaking/cli/index.js +3 -1
  9. package/dist/js/treeshaking/cli/utils.js +2 -2
  10. package/dist/js/treeshaking/runtime/loadable.js +98 -146
  11. package/dist/types/cli/index.d.ts +2 -0
  12. package/dist/types/runtime/loadable.d.ts +2 -76
  13. package/dist/types/runtime/utils/MApp.d.ts +2 -87
  14. package/package.json +8 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,47 @@
1
1
  # @modern-js/plugin-garfish
2
2
 
3
+ ## 1.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 1100dd58c: chore: support react 18
8
+
9
+ chore: 支持 React 18
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [641592f52]
14
+ - Updated dependencies [3904b30a5]
15
+ - Updated dependencies [1100dd58c]
16
+ - Updated dependencies [a480d6ad0]
17
+ - Updated dependencies [e04e6e76a]
18
+ - Updated dependencies [81c66e4a4]
19
+ - Updated dependencies [2c305b6f5]
20
+ - @modern-js/utils@1.16.0
21
+ - @modern-js/runtime@1.16.0
22
+
23
+ ## 1.15.0
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies [8658a78]
28
+ - Updated dependencies [335c97c]
29
+ - Updated dependencies [05d4a4f]
30
+ - Updated dependencies [ad05af9]
31
+ - Updated dependencies [5d53d1c]
32
+ - Updated dependencies [37cd159]
33
+ - Updated dependencies [a04a11b]
34
+ - @modern-js/utils@1.15.0
35
+ - @modern-js/runtime@1.15.0
36
+
37
+ ## 1.8.1
38
+
39
+ ### Patch Changes
40
+
41
+ - fix: `@modern-js/plugin-garfish` support `pluginName` params
42
+
43
+ fix: `@modern-js/plugin-garfish` 支持 `pluginName` 参数
44
+
3
45
  ## 1.8.0
4
46
 
5
47
  ### Minor Changes
package/dist/js/modern/cli/index.js CHANGED
@@ -27,6 +27,7 @@ export function getDefaultMicroFrontedConfig(microFrontend) {
27
27
  }, microFrontend);
28
28
  }
29
29
  export default (({
30
+ pluginName: _pluginName = '@modern-js/plugin-garfish',
30
31
  runtimePluginName: _runtimePluginName = '@modern-js/runtime/plugins',
31
32
  mfPackagePath: _mfPackagePath = path.resolve(__dirname, '../../../../')
32
33
  } = {}) => ({
@@ -173,7 +174,7 @@ export default (({
173
174
  },
174
175
 
175
176
  addRuntimeExports() {
176
- const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '@modern-js/plugin-garfish'`;
177
+ const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${_pluginName}'`;
177
178
  logger('exportStatement', addExportStatement);
178
179
  pluginsExportsUtils.addExport(addExportStatement);
179
180
  runtimeExportsUtils.addExport(`export * from '${_mfPackagePath}'`);
package/dist/js/modern/cli/utils.js CHANGED
@@ -8,7 +8,11 @@ export const provider = function ({basename, dom}) {
8
8
  const node = dom.querySelector('#' + MOUNT_ID) || dom;
9
9
 
10
10
  if (node) {
11
- unmountComponentAtNode(node);
11
+ if (IS_REACT18) {
12
+ root.unmount();
13
+ } else {
14
+ unmountComponentAtNode(node);
15
+ }
12
16
  }
13
17
  },
14
18
  SubModuleComponent: (props) => {
@@ -71,7 +75,7 @@ function generateAppWrapperAndRootDom ({ App, props, dom }) {
71
75
  };
72
76
  AppWrapper = hoistNonReactStatics(AppWrapper, App);
73
77
  }
74
- const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;
78
+ const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : document.getElementById(MOUNT_ID);
75
79
  return { AppWrapper, mountNode }
76
80
  }
77
81
  `;
@@ -81,7 +85,7 @@ export const makeRenderFunction = code => {
81
85
  if (!canContinueRender({ dom, appName })) return null;
82
86
  let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});
83
87
  `;
84
- return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replace('MOUNT_ID', 'mountNode');
88
+ return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replaceAll('MOUNT_ID', 'mountNode').replace(`document.getElementById(mountNode || 'root')`, 'mountNode');
85
89
  }; // support legacy config
86
90
 
87
91
  export function getRuntimeConfig(config) {
package/dist/js/modern/runtime/loadable.js CHANGED
@@ -4,70 +4,54 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
4
4
 
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
6
 
7
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
8
+
7
9
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
8
10
 
9
11
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
10
12
 
11
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
12
-
13
13
  // logical reference to https://github.com/jamiebuilds/react-loadable/blob/6201c5837b212d6244c57f3748f2b1375096beeb/src/index.js
14
- import React from 'react';
14
+ import { useState, useRef, useEffect, useCallback } from 'react';
15
15
  import { logger } from "../util";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { Fragment as _Fragment } from "react/jsx-runtime";
18
18
  import { jsxs as _jsxs } from "react/jsx-runtime";
19
+ const DEFAULT_LOADABLE = {
20
+ delay: 200,
21
+ timeout: 10000,
22
+ loading: null
23
+ };
19
24
  export function Loadable(WrapComponent) {
20
25
  return function (defaultLoadable) {
21
- return class LoadableComponent extends React.Component {
22
- constructor(...args) {
23
- super(...args);
24
-
25
- _defineProperty(this, "state", {
26
- error: null,
27
- pastDelay: false,
28
- timedOut: false,
29
- isLoading: false
30
- });
31
-
32
- _defineProperty(this, "mounted", false);
33
-
34
- _defineProperty(this, "delay", void 0);
35
-
36
- _defineProperty(this, "timeout", void 0);
37
-
38
- _defineProperty(this, "retry", () => {
39
- this.setState({
40
- error: null,
41
- isLoading: true,
42
- timedOut: false
43
- }); // res = loadFn(opts.loader);
44
- // this._loadModule();
45
- });
46
- }
47
-
48
- // eslint-disable-next-line @typescript-eslint/naming-convention
49
- UNSAFE_componentWillMount() {
50
- this.mounted = true;
51
- const {
52
- loadable = defaultLoadable || {
53
- delay: 200,
54
- timeout: 10000,
55
- loading: null
56
- }
57
- } = this.props;
26
+ return function Lodable(props) {
27
+ var _props$loadable;
28
+
29
+ const {
30
+ loadable = defaultLoadable !== null && defaultLoadable !== void 0 ? defaultLoadable : DEFAULT_LOADABLE
31
+ } = props,
32
+ otherProps = _objectWithoutProperties(props, _excluded);
33
+
34
+ const mountRef = useRef(false);
35
+ let delayTimer = null;
36
+ let timeoutTimer = null;
37
+ const [state, setState] = useState(() => {
58
38
  const {
59
39
  delay,
60
40
  timeout
61
41
  } = loadable;
42
+ const initState = {
43
+ error: null,
44
+ pastDelay: false,
45
+ timedOut: false,
46
+ isLoading: false
47
+ };
62
48
 
63
49
  if (typeof delay === 'number') {
64
50
  if (delay === 0) {
65
- this.setState({
66
- pastDelay: true
67
- });
51
+ initState.pastDelay = true;
68
52
  } else {
69
- this.delay = setTimeout(() => {
70
- this.setStateWithMountCheck({
53
+ delayTimer = setTimeout(() => {
54
+ setStateWithMountCheck({
71
55
  pastDelay: true
72
56
  });
73
57
  }, delay);
@@ -75,87 +59,78 @@ export function Loadable(WrapComponent) {
75
59
  }
76
60
 
77
61
  if (typeof timeout === 'number') {
78
- this.timeout = setTimeout(() => {
79
- this.setStateWithMountCheck({
62
+ timeoutTimer = setTimeout(() => {
63
+ setStateWithMountCheck({
80
64
  timedOut: true
81
65
  });
82
66
  }, timeout);
83
67
  }
84
- }
85
-
86
- componentWillUnmount() {
87
- this.mounted = false;
88
- this.setStateWithMountCheck({
89
- isLoading: false,
90
- error: null
91
- });
92
- this.clearTimeouts();
93
- }
94
-
95
- setStateWithMountCheck(newState) {
96
- if (!this.mounted) {
97
- return;
98
- }
99
-
100
- this.setState(newState);
101
- }
102
-
103
- clearTimeouts() {
104
- this.delay && clearTimeout(this.delay);
105
- this.timeout && clearTimeout(this.timeout);
106
- }
107
-
108
- render() {
109
- const {
110
- isLoading,
111
- error,
112
- pastDelay,
113
- timedOut
114
- } = this.state;
115
-
116
- const _this$props = this.props,
117
- {
118
- loadable = defaultLoadable || {
119
- delay: 200,
120
- timeout: 10000,
121
- loading: null
122
- }
123
- } = _this$props,
124
- otherProps = _objectWithoutProperties(_this$props, _excluded);
125
68
 
126
- const {
127
- loading: LoadingComponent
128
- } = loadable;
69
+ return initState;
70
+ });
71
+ const LoadingComponent = (_props$loadable = props.loadable) === null || _props$loadable === void 0 ? void 0 : _props$loadable.loading;
72
+ useEffect(() => {
73
+ mountRef.current = true;
129
74
  logger('Loadable render state', {
130
- state: this.state,
75
+ state,
131
76
  props: otherProps,
132
77
  loadable,
133
78
  defaultLoadable
134
79
  });
135
- const showLoading = (isLoading || error) && LoadingComponent;
136
- return /*#__PURE__*/_jsxs(_Fragment, {
137
- children: [showLoading && /*#__PURE__*/_jsx(LoadingComponent, {
138
- isLoading: isLoading,
139
- pastDelay: pastDelay,
140
- timedOut: timedOut,
141
- error: error,
142
- retry: this.retry
143
- }), /*#__PURE__*/_jsx(WrapComponent, _objectSpread({
144
- style: {
145
- display: showLoading ? 'none' : 'block'
146
- },
147
- setLoadingState: props => {
148
- // loading is not provided and there is a rendering exception
149
- if (props.error && !LoadingComponent) {
150
- throw props.error;
151
- }
80
+ return () => {
81
+ mountRef.current = false;
82
+ setStateWithMountCheck({
83
+ isLoading: false,
84
+ error: null
85
+ });
86
+
87
+ if (delayTimer) {
88
+ clearTimeout(delayTimer);
89
+ delayTimer = null;
90
+ }
152
91
 
153
- this.setStateWithMountCheck(props);
92
+ if (timeoutTimer) {
93
+ clearTimeout(timeoutTimer);
94
+ timeoutTimer = null;
95
+ }
96
+ };
97
+ }, []);
98
+ const retry = useCallback(() => {
99
+ setState(_objectSpread(_objectSpread({}, state), {}, {
100
+ error: null,
101
+ isLoading: true,
102
+ timedOut: false
103
+ }));
104
+ }, [state]);
105
+ const setStateWithMountCheck = useCallback(newState => {
106
+ if (!mountRef.current) {
107
+ return;
108
+ }
109
+
110
+ setState(_objectSpread(_objectSpread({}, state), newState));
111
+ }, [state]);
112
+ const showLoading = (state.isLoading || state.error) && LoadingComponent;
113
+ return /*#__PURE__*/_jsxs(_Fragment, {
114
+ children: [showLoading && /*#__PURE__*/_jsx(LoadingComponent, {
115
+ isLoading: state.isLoading,
116
+ pastDelay: state.pastDelay,
117
+ timedOut: state.timedOut,
118
+ error: state === null || state === void 0 ? void 0 : state.error,
119
+ retry: retry
120
+ }), /*#__PURE__*/_jsx(WrapComponent, _objectSpread({
121
+ style: {
122
+ display: showLoading ? 'none' : 'block'
123
+ },
124
+ setLoadingState: props => {
125
+ // loading is not provided and there is a rendering exception
126
+ if (props.error && !LoadingComponent) {
127
+ throw props.error;
154
128
  }
155
- }, otherProps))]
156
- });
157
- }
158
129
 
130
+ setStateWithMountCheck(props);
131
+ }
132
+ }, otherProps))]
133
+ });
159
134
  };
160
135
  };
161
136
  }
package/dist/js/node/cli/index.js CHANGED
@@ -44,6 +44,7 @@ function getDefaultMicroFrontedConfig(microFrontend) {
44
44
  }
45
45
 
46
46
  var _default = ({
47
+ pluginName: _pluginName = '@modern-js/plugin-garfish',
47
48
  runtimePluginName: _runtimePluginName = '@modern-js/runtime/plugins',
48
49
  mfPackagePath: _mfPackagePath = _path.default.resolve(__dirname, '../../../../')
49
50
  } = {}) => ({
@@ -190,7 +191,7 @@ var _default = ({
190
191
  },
191
192
 
192
193
  addRuntimeExports() {
193
- const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '@modern-js/plugin-garfish'`;
194
+ const addExportStatement = `export { default as garfish, default as masterApp, hoistNonReactStatics } from '${_pluginName}'`;
194
195
  (0, _util.logger)('exportStatement', addExportStatement);
195
196
  pluginsExportsUtils.addExport(addExportStatement);
196
197
  runtimeExportsUtils.addExport(`export * from '${_mfPackagePath}'`);
package/dist/js/node/cli/utils.js CHANGED
@@ -17,7 +17,11 @@ export const provider = function ({basename, dom}) {
17
17
  const node = dom.querySelector('#' + MOUNT_ID) || dom;
18
18
 
19
19
  if (node) {
20
- unmountComponentAtNode(node);
20
+ if (IS_REACT18) {
21
+ root.unmount();
22
+ } else {
23
+ unmountComponentAtNode(node);
24
+ }
21
25
  }
22
26
  },
23
27
  SubModuleComponent: (props) => {
@@ -80,7 +84,7 @@ function generateAppWrapperAndRootDom ({ App, props, dom }) {
80
84
  };
81
85
  AppWrapper = hoistNonReactStatics(AppWrapper, App);
82
86
  }
83
- const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;
87
+ const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : document.getElementById(MOUNT_ID);
84
88
  return { AppWrapper, mountNode }
85
89
  }
86
90
  `;
@@ -93,7 +97,7 @@ const makeRenderFunction = code => {
93
97
  if (!canContinueRender({ dom, appName })) return null;
94
98
  let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});
95
99
  `;
96
- return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replace('MOUNT_ID', 'mountNode');
100
+ return inGarfishToRender + code.replace(`router(`, `generateRouterPlugin(basename,`).replace('(App)', `(AppWrapper)`).replaceAll('MOUNT_ID', 'mountNode').replace(`document.getElementById(mountNode || 'root')`, 'mountNode');
97
101
  }; // support legacy config
98
102
 
99
103
 
package/dist/js/node/runtime/loadable.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Loadable = Loadable;
7
7
 
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = require("react");
9
9
 
10
10
  var _util = require("../util");
11
11
 
@@ -13,70 +13,53 @@ var _jsxRuntime = require("react/jsx-runtime");
13
13
 
14
14
  const _excluded = ["loadable"];
15
15
 
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
16
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
17
 
20
18
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
19
 
20
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
+
22
22
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
23
23
 
24
24
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
25
25
 
26
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
26
+ const DEFAULT_LOADABLE = {
27
+ delay: 200,
28
+ timeout: 10000,
29
+ loading: null
30
+ };
27
31
 
28
32
  function Loadable(WrapComponent) {
29
33
  return function (defaultLoadable) {
30
- return class LoadableComponent extends _react.default.Component {
31
- constructor(...args) {
32
- super(...args);
33
-
34
- _defineProperty(this, "state", {
35
- error: null,
36
- pastDelay: false,
37
- timedOut: false,
38
- isLoading: false
39
- });
40
-
41
- _defineProperty(this, "mounted", false);
42
-
43
- _defineProperty(this, "delay", void 0);
44
-
45
- _defineProperty(this, "timeout", void 0);
46
-
47
- _defineProperty(this, "retry", () => {
48
- this.setState({
49
- error: null,
50
- isLoading: true,
51
- timedOut: false
52
- }); // res = loadFn(opts.loader);
53
- // this._loadModule();
54
- });
55
- }
56
-
57
- // eslint-disable-next-line @typescript-eslint/naming-convention
58
- UNSAFE_componentWillMount() {
59
- this.mounted = true;
60
- const {
61
- loadable = defaultLoadable || {
62
- delay: 200,
63
- timeout: 10000,
64
- loading: null
65
- }
66
- } = this.props;
34
+ return function Lodable(props) {
35
+ var _props$loadable;
36
+
37
+ const {
38
+ loadable = defaultLoadable !== null && defaultLoadable !== void 0 ? defaultLoadable : DEFAULT_LOADABLE
39
+ } = props,
40
+ otherProps = _objectWithoutProperties(props, _excluded);
41
+
42
+ const mountRef = (0, _react.useRef)(false);
43
+ let delayTimer = null;
44
+ let timeoutTimer = null;
45
+ const [state, setState] = (0, _react.useState)(() => {
67
46
  const {
68
47
  delay,
69
48
  timeout
70
49
  } = loadable;
50
+ const initState = {
51
+ error: null,
52
+ pastDelay: false,
53
+ timedOut: false,
54
+ isLoading: false
55
+ };
71
56
 
72
57
  if (typeof delay === 'number') {
73
58
  if (delay === 0) {
74
- this.setState({
75
- pastDelay: true
76
- });
59
+ initState.pastDelay = true;
77
60
  } else {
78
- this.delay = setTimeout(() => {
79
- this.setStateWithMountCheck({
61
+ delayTimer = setTimeout(() => {
62
+ setStateWithMountCheck({
80
63
  pastDelay: true
81
64
  });
82
65
  }, delay);
@@ -84,87 +67,78 @@ function Loadable(WrapComponent) {
84
67
  }
85
68
 
86
69
  if (typeof timeout === 'number') {
87
- this.timeout = setTimeout(() => {
88
- this.setStateWithMountCheck({
70
+ timeoutTimer = setTimeout(() => {
71
+ setStateWithMountCheck({
89
72
  timedOut: true
90
73
  });
91
74
  }, timeout);
92
75
  }
93
- }
94
-
95
- componentWillUnmount() {
96
- this.mounted = false;
97
- this.setStateWithMountCheck({
98
- isLoading: false,
99
- error: null
100
- });
101
- this.clearTimeouts();
102
- }
103
-
104
- setStateWithMountCheck(newState) {
105
- if (!this.mounted) {
106
- return;
107
- }
108
-
109
- this.setState(newState);
110
- }
111
-
112
- clearTimeouts() {
113
- this.delay && clearTimeout(this.delay);
114
- this.timeout && clearTimeout(this.timeout);
115
- }
116
-
117
- render() {
118
- const {
119
- isLoading,
120
- error,
121
- pastDelay,
122
- timedOut
123
- } = this.state;
124
-
125
- const _this$props = this.props,
126
- {
127
- loadable = defaultLoadable || {
128
- delay: 200,
129
- timeout: 10000,
130
- loading: null
131
- }
132
- } = _this$props,
133
- otherProps = _objectWithoutProperties(_this$props, _excluded);
134
76
 
135
- const {
136
- loading: LoadingComponent
137
- } = loadable;
77
+ return initState;
78
+ });
79
+ const LoadingComponent = (_props$loadable = props.loadable) === null || _props$loadable === void 0 ? void 0 : _props$loadable.loading;
80
+ (0, _react.useEffect)(() => {
81
+ mountRef.current = true;
138
82
  (0, _util.logger)('Loadable render state', {
139
- state: this.state,
83
+ state,
140
84
  props: otherProps,
141
85
  loadable,
142
86
  defaultLoadable
143
87
  });
144
- const showLoading = (isLoading || error) && LoadingComponent;
145
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
146
- children: [showLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingComponent, {
147
- isLoading: isLoading,
148
- pastDelay: pastDelay,
149
- timedOut: timedOut,
150
- error: error,
151
- retry: this.retry
152
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapComponent, _objectSpread({
153
- style: {
154
- display: showLoading ? 'none' : 'block'
155
- },
156
- setLoadingState: props => {
157
- // loading is not provided and there is a rendering exception
158
- if (props.error && !LoadingComponent) {
159
- throw props.error;
160
- }
161
-
162
- this.setStateWithMountCheck(props);
88
+ return () => {
89
+ mountRef.current = false;
90
+ setStateWithMountCheck({
91
+ isLoading: false,
92
+ error: null
93
+ });
94
+
95
+ if (delayTimer) {
96
+ clearTimeout(delayTimer);
97
+ delayTimer = null;
98
+ }
99
+
100
+ if (timeoutTimer) {
101
+ clearTimeout(timeoutTimer);
102
+ timeoutTimer = null;
103
+ }
104
+ };
105
+ }, []);
106
+ const retry = (0, _react.useCallback)(() => {
107
+ setState(_objectSpread(_objectSpread({}, state), {}, {
108
+ error: null,
109
+ isLoading: true,
110
+ timedOut: false
111
+ }));
112
+ }, [state]);
113
+ const setStateWithMountCheck = (0, _react.useCallback)(newState => {
114
+ if (!mountRef.current) {
115
+ return;
116
+ }
117
+
118
+ setState(_objectSpread(_objectSpread({}, state), newState));
119
+ }, [state]);
120
+ const showLoading = (state.isLoading || state.error) && LoadingComponent;
121
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
122
+ children: [showLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingComponent, {
123
+ isLoading: state.isLoading,
124
+ pastDelay: state.pastDelay,
125
+ timedOut: state.timedOut,
126
+ error: state === null || state === void 0 ? void 0 : state.error,
127
+ retry: retry
128
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapComponent, _objectSpread({
129
+ style: {
130
+ display: showLoading ? 'none' : 'block'
131
+ },
132
+ setLoadingState: props => {
133
+ // loading is not provided and there is a rendering exception
134
+ if (props.error && !LoadingComponent) {
135
+ throw props.error;
163
136
  }
164
- }, otherProps))]
165
- });
166
- }
167
137
 
138
+ setStateWithMountCheck(props);
139
+ }
140
+ }, otherProps))]
141
+ });
168
142
  };
169
143
  };
170
144
  }
package/dist/js/treeshaking/cli/index.js CHANGED
@@ -26,6 +26,8 @@ export function getDefaultMicroFrontedConfig(microFrontend) {
26
26
  }
27
27
  export default (function () {
28
28
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
29
+ _ref$pluginName = _ref.pluginName,
30
+ pluginName = _ref$pluginName === void 0 ? '@modern-js/plugin-garfish' : _ref$pluginName,
29
31
  _ref$runtimePluginNam = _ref.runtimePluginName,
30
32
  runtimePluginName = _ref$runtimePluginNam === void 0 ? '@modern-js/runtime/plugins' : _ref$runtimePluginNam,
31
33
  _ref$mfPackagePath = _ref.mfPackagePath,
@@ -184,7 +186,7 @@ export default (function () {
184
186
  };
185
187
  },
186
188
  addRuntimeExports: function addRuntimeExports() {
187
- var addExportStatement = "export { default as garfish, default as masterApp, hoistNonReactStatics } from '@modern-js/plugin-garfish'";
189
+ var addExportStatement = "export { default as garfish, default as masterApp, hoistNonReactStatics } from '".concat(pluginName, "'");
188
190
  logger('exportStatement', addExportStatement);
189
191
  pluginsExportsUtils.addExport(addExportStatement);
190
192
  runtimeExportsUtils.addExport("export * from '".concat(mfPackagePath, "'"));
package/dist/js/treeshaking/cli/utils.js CHANGED
@@ -1,9 +1,9 @@
1
1
  export var makeProvider = function makeProvider() {
2
- return "\nexport const provider = function ({basename, dom}) {\n return {\n render({basename, dom, props, appName}) {\n render({ props, basename, dom, appName });\n },\n destroy({ dom }) {\n const node = dom.querySelector('#' + MOUNT_ID) || dom;\n\n if (node) {\n unmountComponentAtNode(node);\n }\n },\n SubModuleComponent: (props) => {\n const SubApp = render({props, basename});\n\n return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID) || dom);\n },\n jupiter_submodule_app_key: (props) => {\n const SubApp = render({props, basename});\n\n return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID) || dom);\n }\n }\n};\n\nif (typeof __GARFISH_EXPORTS__ !== 'undefined') {\n __GARFISH_EXPORTS__.provider = provider;\n}\n\nfunction canContinueRender ({ dom, appName }) {\n var renderByGarfish =\n typeof __GARFISH_EXPORTS__ !== 'undefined'\n || typeof window !== 'undefined' && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.some((app)=>app.appInfo.name === appName);\n let renderByProvider = dom || appName;\n if (renderByGarfish) {\n // Runs in the Garfish environment and is rendered by the provider\n if (renderByProvider) {\n return true;\n } else {\n // Runs in the Garfish environment and is not rendered by the provider\n return false;\n }\n } else {\n // Running in a non-Garfish environment\n return true;\n }\n}\n\nfunction generateRouterPlugin (basename,routerConfig) {\n if (basename) {\n routerConfig.basename = basename;\n if (routerConfig.supportHtml5History !== false) {\n if (!routerConfig.historyOptions) {\n routerConfig.historyOptions = {\n basename: basename\n };\n } else {\n routerConfig.historyOptions.basename = basename;\n }\n }\n }\n return router(routerConfig);\n}\n\nfunction generateAppWrapperAndRootDom ({ App, props, dom }) {\n let AppWrapper = App;\n if (props) {\n AppWrapper = function () {\n return React.createElement(App, props);\n };\n AppWrapper = hoistNonReactStatics(AppWrapper, App);\n }\n const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : MOUNT_ID;\n return { AppWrapper, mountNode }\n}\n";
2
+ return "\nexport const provider = function ({basename, dom}) {\n return {\n render({basename, dom, props, appName}) {\n render({ props, basename, dom, appName });\n },\n destroy({ dom }) {\n const node = dom.querySelector('#' + MOUNT_ID) || dom;\n\n if (node) {\n if (IS_REACT18) {\n root.unmount();\n } else {\n unmountComponentAtNode(node);\n }\n }\n },\n SubModuleComponent: (props) => {\n const SubApp = render({props, basename});\n\n return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID) || dom);\n },\n jupiter_submodule_app_key: (props) => {\n const SubApp = render({props, basename});\n\n return createPortal(<SubApp />, dom.querySelector('#' + MOUNT_ID) || dom);\n }\n }\n};\n\nif (typeof __GARFISH_EXPORTS__ !== 'undefined') {\n __GARFISH_EXPORTS__.provider = provider;\n}\n\nfunction canContinueRender ({ dom, appName }) {\n var renderByGarfish =\n typeof __GARFISH_EXPORTS__ !== 'undefined'\n || typeof window !== 'undefined' && window.Garfish && window.Garfish.activeApps && window.Garfish.activeApps.some((app)=>app.appInfo.name === appName);\n let renderByProvider = dom || appName;\n if (renderByGarfish) {\n // Runs in the Garfish environment and is rendered by the provider\n if (renderByProvider) {\n return true;\n } else {\n // Runs in the Garfish environment and is not rendered by the provider\n return false;\n }\n } else {\n // Running in a non-Garfish environment\n return true;\n }\n}\n\nfunction generateRouterPlugin (basename,routerConfig) {\n if (basename) {\n routerConfig.basename = basename;\n if (routerConfig.supportHtml5History !== false) {\n if (!routerConfig.historyOptions) {\n routerConfig.historyOptions = {\n basename: basename\n };\n } else {\n routerConfig.historyOptions.basename = basename;\n }\n }\n }\n return router(routerConfig);\n}\n\nfunction generateAppWrapperAndRootDom ({ App, props, dom }) {\n let AppWrapper = App;\n if (props) {\n AppWrapper = function () {\n return React.createElement(App, props);\n };\n AppWrapper = hoistNonReactStatics(AppWrapper, App);\n }\n const mountNode = dom ? (dom.querySelector('#' + MOUNT_ID) || dom) : document.getElementById(MOUNT_ID);\n return { AppWrapper, mountNode }\n}\n";
3
3
  };
4
4
  export var makeRenderFunction = function makeRenderFunction(code) {
5
5
  var inGarfishToRender = "\n const { basename, props, dom, appName } = typeof arguments[0] === 'object' && arguments[0] || {};\n if (!canContinueRender({ dom, appName })) return null;\n let { AppWrapper, mountNode } = generateAppWrapperAndRootDom({App, props, dom});\n ";
6
- return inGarfishToRender + code.replace("router(", "generateRouterPlugin(basename,").replace('(App)', "(AppWrapper)").replace('MOUNT_ID', 'mountNode');
6
+ return inGarfishToRender + code.replace("router(", "generateRouterPlugin(basename,").replace('(App)', "(AppWrapper)").replaceAll('MOUNT_ID', 'mountNode').replace("document.getElementById(mountNode || 'root')", 'mountNode');
7
7
  }; // support legacy config
8
8
 
9
9
  export function getRuntimeConfig(config) {
package/dist/js/treeshaking/runtime/loadable.js CHANGED
@@ -1,178 +1,130 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
4
- import _createClass from "@babel/runtime/helpers/esm/createClass";
5
- import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
6
- import _inherits from "@babel/runtime/helpers/esm/inherits";
7
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
8
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
9
4
  var _excluded = ["loadable"];
10
5
  // logical reference to https://github.com/jamiebuilds/react-loadable/blob/6201c5837b212d6244c57f3748f2b1375096beeb/src/index.js
11
- import React from 'react';
6
+ import { useState, useRef, useEffect, useCallback } from 'react';
12
7
  import { logger } from "../util";
13
8
  import { jsx as _jsx } from "react/jsx-runtime";
14
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
15
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ var DEFAULT_LOADABLE = {
12
+ delay: 200,
13
+ timeout: 10000,
14
+ loading: null
15
+ };
16
16
  export function Loadable(WrapComponent) {
17
17
  return function (defaultLoadable) {
18
- return /*#__PURE__*/function (_React$Component) {
19
- _inherits(LoadableComponent, _React$Component);
18
+ return function Lodable(props) {
19
+ var _props$loadable2;
20
20
 
21
- var _super = _createSuper(LoadableComponent);
21
+ var _props$loadable = props.loadable,
22
+ loadable = _props$loadable === void 0 ? defaultLoadable !== null && defaultLoadable !== void 0 ? defaultLoadable : DEFAULT_LOADABLE : _props$loadable,
23
+ otherProps = _objectWithoutProperties(props, _excluded);
22
24
 
23
- function LoadableComponent() {
24
- var _this;
25
+ var mountRef = useRef(false);
26
+ var delayTimer = null;
27
+ var timeoutTimer = null;
25
28
 
26
- _classCallCheck(this, LoadableComponent);
27
-
28
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
29
- args[_key] = arguments[_key];
30
- }
31
-
32
- _this = _super.call.apply(_super, [this].concat(args));
33
-
34
- _defineProperty(_assertThisInitialized(_this), "state", {
29
+ var _useState = useState(function () {
30
+ var delay = loadable.delay,
31
+ timeout = loadable.timeout;
32
+ var initState = {
35
33
  error: null,
36
34
  pastDelay: false,
37
35
  timedOut: false,
38
36
  isLoading: false
39
- });
40
-
41
- _defineProperty(_assertThisInitialized(_this), "mounted", false);
42
-
43
- _defineProperty(_assertThisInitialized(_this), "delay", void 0);
44
-
45
- _defineProperty(_assertThisInitialized(_this), "timeout", void 0);
46
-
47
- _defineProperty(_assertThisInitialized(_this), "retry", function () {
48
- _this.setState({
49
- error: null,
50
- isLoading: true,
51
- timedOut: false
52
- }); // res = loadFn(opts.loader);
53
- // this._loadModule();
54
-
55
- });
56
-
57
- return _this;
58
- }
59
-
60
- _createClass(LoadableComponent, [{
61
- key: "UNSAFE_componentWillMount",
62
- value: // eslint-disable-next-line @typescript-eslint/naming-convention
63
- function UNSAFE_componentWillMount() {
64
- var _this2 = this;
65
-
66
- this.mounted = true;
67
- var _this$props$loadable = this.props.loadable,
68
- loadable = _this$props$loadable === void 0 ? defaultLoadable || {
69
- delay: 200,
70
- timeout: 10000,
71
- loading: null
72
- } : _this$props$loadable;
73
- var delay = loadable.delay,
74
- timeout = loadable.timeout;
75
-
76
- if (typeof delay === 'number') {
77
- if (delay === 0) {
78
- this.setState({
37
+ };
38
+
39
+ if (typeof delay === 'number') {
40
+ if (delay === 0) {
41
+ initState.pastDelay = true;
42
+ } else {
43
+ delayTimer = setTimeout(function () {
44
+ setStateWithMountCheck({
79
45
  pastDelay: true
80
46
  });
81
- } else {
82
- this.delay = setTimeout(function () {
83
- _this2.setStateWithMountCheck({
84
- pastDelay: true
85
- });
86
- }, delay);
87
- }
47
+ }, delay);
88
48
  }
49
+ }
89
50
 
90
- if (typeof timeout === 'number') {
91
- this.timeout = setTimeout(function () {
92
- _this2.setStateWithMountCheck({
93
- timedOut: true
94
- });
95
- }, timeout);
96
- }
51
+ if (typeof timeout === 'number') {
52
+ timeoutTimer = setTimeout(function () {
53
+ setStateWithMountCheck({
54
+ timedOut: true
55
+ });
56
+ }, timeout);
97
57
  }
98
- }, {
99
- key: "componentWillUnmount",
100
- value: function componentWillUnmount() {
101
- this.mounted = false;
102
- this.setStateWithMountCheck({
58
+
59
+ return initState;
60
+ }),
61
+ _useState2 = _slicedToArray(_useState, 2),
62
+ state = _useState2[0],
63
+ setState = _useState2[1];
64
+
65
+ var LoadingComponent = (_props$loadable2 = props.loadable) === null || _props$loadable2 === void 0 ? void 0 : _props$loadable2.loading;
66
+ useEffect(function () {
67
+ mountRef.current = true;
68
+ logger('Loadable render state', {
69
+ state: state,
70
+ props: otherProps,
71
+ loadable: loadable,
72
+ defaultLoadable: defaultLoadable
73
+ });
74
+ return function () {
75
+ mountRef.current = false;
76
+ setStateWithMountCheck({
103
77
  isLoading: false,
104
78
  error: null
105
79
  });
106
- this.clearTimeouts();
107
- }
108
- }, {
109
- key: "setStateWithMountCheck",
110
- value: function setStateWithMountCheck(newState) {
111
- if (!this.mounted) {
112
- return;
80
+
81
+ if (delayTimer) {
82
+ clearTimeout(delayTimer);
83
+ delayTimer = null;
113
84
  }
114
85
 
115
- this.setState(newState);
116
- }
117
- }, {
118
- key: "clearTimeouts",
119
- value: function clearTimeouts() {
120
- this.delay && clearTimeout(this.delay);
121
- this.timeout && clearTimeout(this.timeout);
86
+ if (timeoutTimer) {
87
+ clearTimeout(timeoutTimer);
88
+ timeoutTimer = null;
89
+ }
90
+ };
91
+ }, []);
92
+ var retry = useCallback(function () {
93
+ setState(_objectSpread(_objectSpread({}, state), {}, {
94
+ error: null,
95
+ isLoading: true,
96
+ timedOut: false
97
+ }));
98
+ }, [state]);
99
+ var setStateWithMountCheck = useCallback(function (newState) {
100
+ if (!mountRef.current) {
101
+ return;
122
102
  }
123
- }, {
124
- key: "render",
125
- value: function render() {
126
- var _this3 = this;
127
103
 
128
- var _this$state = this.state,
129
- isLoading = _this$state.isLoading,
130
- error = _this$state.error,
131
- pastDelay = _this$state.pastDelay,
132
- timedOut = _this$state.timedOut;
133
-
134
- var _this$props = this.props,
135
- _this$props$loadable2 = _this$props.loadable,
136
- loadable = _this$props$loadable2 === void 0 ? defaultLoadable || {
137
- delay: 200,
138
- timeout: 10000,
139
- loading: null
140
- } : _this$props$loadable2,
141
- otherProps = _objectWithoutProperties(_this$props, _excluded);
142
-
143
- var LoadingComponent = loadable.loading;
144
- logger('Loadable render state', {
145
- state: this.state,
146
- props: otherProps,
147
- loadable: loadable,
148
- defaultLoadable: defaultLoadable
149
- });
150
- var showLoading = (isLoading || error) && LoadingComponent;
151
- return /*#__PURE__*/_jsxs(_Fragment, {
152
- children: [showLoading && /*#__PURE__*/_jsx(LoadingComponent, {
153
- isLoading: isLoading,
154
- pastDelay: pastDelay,
155
- timedOut: timedOut,
156
- error: error,
157
- retry: this.retry
158
- }), /*#__PURE__*/_jsx(WrapComponent, _objectSpread({
159
- style: {
160
- display: showLoading ? 'none' : 'block'
161
- },
162
- setLoadingState: function setLoadingState(props) {
163
- // loading is not provided and there is a rendering exception
164
- if (props.error && !LoadingComponent) {
165
- throw props.error;
166
- }
167
-
168
- _this3.setStateWithMountCheck(props);
169
- }
170
- }, otherProps))]
171
- });
172
- }
173
- }]);
104
+ setState(_objectSpread(_objectSpread({}, state), newState));
105
+ }, [state]);
106
+ var showLoading = (state.isLoading || state.error) && LoadingComponent;
107
+ return /*#__PURE__*/_jsxs(_Fragment, {
108
+ children: [showLoading && /*#__PURE__*/_jsx(LoadingComponent, {
109
+ isLoading: state.isLoading,
110
+ pastDelay: state.pastDelay,
111
+ timedOut: state.timedOut,
112
+ error: state === null || state === void 0 ? void 0 : state.error,
113
+ retry: retry
114
+ }), /*#__PURE__*/_jsx(WrapComponent, _objectSpread({
115
+ style: {
116
+ display: showLoading ? 'none' : 'block'
117
+ },
118
+ setLoadingState: function setLoadingState(props) {
119
+ // loading is not provided and there is a rendering exception
120
+ if (props.error && !LoadingComponent) {
121
+ throw props.error;
122
+ }
174
123
 
175
- return LoadableComponent;
176
- }(React.Component);
124
+ setStateWithMountCheck(props);
125
+ }
126
+ }, otherProps))]
127
+ });
128
+ };
177
129
  };
178
130
  }
package/dist/types/cli/index.d.ts CHANGED
@@ -13,9 +13,11 @@ export declare function getDefaultMicroFrontedConfig(microFrontend: NonInValidAb
13
13
  };
14
14
 
15
15
  declare const _default: ({
16
+ pluginName,
16
17
  runtimePluginName,
17
18
  mfPackagePath
18
19
  }?: {
20
+ pluginName?: string | undefined;
19
21
  runtimePluginName?: string | undefined;
20
22
  mfPackagePath?: string | undefined;
21
23
  }) => CliPlugin;
package/dist/types/runtime/loadable.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { RouteComponentProps } from '@modern-js/runtime/router';
3
3
  import { LoadableConfig, MicroComponentProps } from './useModuleApps';
4
4
  export interface MicroProps extends RouteComponentProps {
@@ -8,78 +8,4 @@ export interface MicroProps extends RouteComponentProps {
8
8
  }) => void;
9
9
  [key: string]: any;
10
10
  }
11
- export declare function Loadable(WrapComponent: any): (defaultLoadable?: LoadableConfig) => {
12
- new (props: MicroComponentProps | Readonly<MicroComponentProps>): {
13
- state: {
14
- error: any;
15
- pastDelay: boolean;
16
- timedOut: boolean;
17
- isLoading: boolean;
18
- };
19
- mounted: boolean;
20
- delay: NodeJS.Timeout | undefined;
21
- timeout: NodeJS.Timeout | undefined;
22
- UNSAFE_componentWillMount(): void;
23
- componentWillUnmount(): void;
24
- setStateWithMountCheck(newState: Partial<typeof this.state>): void;
25
- readonly retry: () => void;
26
- clearTimeouts(): void;
27
- render(): JSX.Element;
28
- context: any;
29
- setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
30
- forceUpdate(callback?: (() => void) | undefined): void;
31
- readonly props: Readonly<MicroComponentProps> & Readonly<{
32
- children?: React.ReactNode;
33
- }>;
34
- refs: {
35
- [key: string]: React.ReactInstance;
36
- };
37
- componentDidMount?(): void;
38
- shouldComponentUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): boolean;
39
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
40
- getSnapshotBeforeUpdate?(prevProps: Readonly<MicroComponentProps>, prevState: Readonly<any>): any;
41
- componentDidUpdate?(prevProps: Readonly<MicroComponentProps>, prevState: Readonly<any>, snapshot?: any): void;
42
- componentWillMount?(): void;
43
- componentWillReceiveProps?(nextProps: Readonly<MicroComponentProps>, nextContext: any): void;
44
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MicroComponentProps>, nextContext: any): void;
45
- componentWillUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
46
- UNSAFE_componentWillUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
47
- };
48
- new (props: MicroComponentProps, context: any): {
49
- state: {
50
- error: any;
51
- pastDelay: boolean;
52
- timedOut: boolean;
53
- isLoading: boolean;
54
- };
55
- mounted: boolean;
56
- delay: NodeJS.Timeout | undefined;
57
- timeout: NodeJS.Timeout | undefined;
58
- UNSAFE_componentWillMount(): void;
59
- componentWillUnmount(): void;
60
- setStateWithMountCheck(newState: Partial<typeof this.state>): void;
61
- readonly retry: () => void;
62
- clearTimeouts(): void;
63
- render(): JSX.Element;
64
- context: any;
65
- setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
66
- forceUpdate(callback?: (() => void) | undefined): void;
67
- readonly props: Readonly<MicroComponentProps> & Readonly<{
68
- children?: React.ReactNode;
69
- }>;
70
- refs: {
71
- [key: string]: React.ReactInstance;
72
- };
73
- componentDidMount?(): void;
74
- shouldComponentUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): boolean;
75
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
76
- getSnapshotBeforeUpdate?(prevProps: Readonly<MicroComponentProps>, prevState: Readonly<any>): any;
77
- componentDidUpdate?(prevProps: Readonly<MicroComponentProps>, prevState: Readonly<any>, snapshot?: any): void;
78
- componentWillMount?(): void;
79
- componentWillReceiveProps?(nextProps: Readonly<MicroComponentProps>, nextContext: any): void;
80
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MicroComponentProps>, nextContext: any): void;
81
- componentWillUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
82
- UNSAFE_componentWillUpdate?(nextProps: Readonly<MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
83
- };
84
- contextType?: React.Context<any> | undefined;
85
- };
11
+ export declare function Loadable(WrapComponent: any): (defaultLoadable?: LoadableConfig) => (props: MicroComponentProps) => JSX.Element;
package/dist/types/runtime/utils/MApp.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- /// <reference types="node" />
2
- import React from 'react';
1
+ /// <reference types="react" />
3
2
  import Garfish from 'garfish';
4
3
  import { Manifest, ModulesInfo } from '../useModuleApps';
5
4
  declare global {
@@ -9,88 +8,4 @@ declare global {
9
8
  };
10
9
  }
11
10
  }
12
- export declare function generateMApp(options: typeof Garfish.options, manifest?: Manifest): {
13
- new (props: import("../useModuleApps").MicroComponentProps | Readonly<import("../useModuleApps").MicroComponentProps>): {
14
- state: {
15
- error: any;
16
- pastDelay: boolean;
17
- timedOut: boolean;
18
- isLoading: boolean;
19
- };
20
- mounted: boolean;
21
- delay: NodeJS.Timeout | undefined;
22
- timeout: NodeJS.Timeout | undefined;
23
- UNSAFE_componentWillMount(): void;
24
- componentWillUnmount(): void;
25
- setStateWithMountCheck(newState: Partial<{
26
- error: any;
27
- pastDelay: boolean;
28
- timedOut: boolean;
29
- isLoading: boolean;
30
- }>): void;
31
- readonly retry: () => void;
32
- clearTimeouts(): void;
33
- render(): JSX.Element;
34
- context: any;
35
- setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
36
- forceUpdate(callback?: (() => void) | undefined): void;
37
- readonly props: Readonly<import("../useModuleApps").MicroComponentProps> & Readonly<{
38
- children?: React.ReactNode;
39
- }>;
40
- refs: {
41
- [key: string]: React.ReactInstance;
42
- };
43
- componentDidMount?(): void;
44
- shouldComponentUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): boolean;
45
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
46
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("../useModuleApps").MicroComponentProps>, prevState: Readonly<any>): any;
47
- componentDidUpdate?(prevProps: Readonly<import("../useModuleApps").MicroComponentProps>, prevState: Readonly<any>, snapshot?: any): void;
48
- componentWillMount?(): void;
49
- componentWillReceiveProps?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextContext: any): void;
50
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextContext: any): void;
51
- componentWillUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
52
- UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
53
- };
54
- new (props: import("../useModuleApps").MicroComponentProps, context: any): {
55
- state: {
56
- error: any;
57
- pastDelay: boolean;
58
- timedOut: boolean;
59
- isLoading: boolean;
60
- };
61
- mounted: boolean;
62
- delay: NodeJS.Timeout | undefined;
63
- timeout: NodeJS.Timeout | undefined;
64
- UNSAFE_componentWillMount(): void;
65
- componentWillUnmount(): void;
66
- setStateWithMountCheck(newState: Partial<{
67
- error: any;
68
- pastDelay: boolean;
69
- timedOut: boolean;
70
- isLoading: boolean;
71
- }>): void;
72
- readonly retry: () => void;
73
- clearTimeouts(): void;
74
- render(): JSX.Element;
75
- context: any;
76
- setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
77
- forceUpdate(callback?: (() => void) | undefined): void;
78
- readonly props: Readonly<import("../useModuleApps").MicroComponentProps> & Readonly<{
79
- children?: React.ReactNode;
80
- }>;
81
- refs: {
82
- [key: string]: React.ReactInstance;
83
- };
84
- componentDidMount?(): void;
85
- shouldComponentUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): boolean;
86
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
87
- getSnapshotBeforeUpdate?(prevProps: Readonly<import("../useModuleApps").MicroComponentProps>, prevState: Readonly<any>): any;
88
- componentDidUpdate?(prevProps: Readonly<import("../useModuleApps").MicroComponentProps>, prevState: Readonly<any>, snapshot?: any): void;
89
- componentWillMount?(): void;
90
- componentWillReceiveProps?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextContext: any): void;
91
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextContext: any): void;
92
- componentWillUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
93
- UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../useModuleApps").MicroComponentProps>, nextState: Readonly<any>, nextContext: any): void;
94
- };
95
- contextType?: React.Context<any> | undefined;
96
- };
11
+ export declare function generateMApp(options: typeof Garfish.options, manifest?: Manifest): (props: import("../useModuleApps").MicroComponentProps) => JSX.Element;
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "modern",
12
12
  "modern.js"
13
13
  ],
14
- "version": "1.8.0",
14
+ "version": "1.16.0",
15
15
  "jsnext:source": "./src/index.ts",
16
16
  "types": "./dist/types/runtime/index.d.ts",
17
17
  "typesVersions": {
@@ -50,7 +50,7 @@
50
50
  },
51
51
  "dependencies": {
52
52
  "@babel/runtime": "^7.18.0",
53
- "@modern-js/utils": "^1.9.0",
53
+ "@modern-js/utils": "1.16.0",
54
54
  "@types/debug": "^4.1.7",
55
55
  "@types/react-loadable": "^5.5.6",
56
56
  "debug": "^4.3.2",
@@ -59,7 +59,7 @@
59
59
  "react-loadable": "^5.5.0"
60
60
  },
61
61
  "peerDependencies": {
62
- "@modern-js/runtime": "^1.5.0"
62
+ "@modern-js/runtime": "^1.16.0"
63
63
  },
64
64
  "peerDependenciesMeta": {
65
65
  "@modern-js/runtime": {
@@ -67,11 +67,11 @@
67
67
  }
68
68
  },
69
69
  "devDependencies": {
70
- "@modern-js/core": "1.14.0",
71
- "@modern-js/runtime": "1.5.0",
72
- "@modern-js/types": "1.6.2",
73
- "@scripts/build": "0.0.0",
74
- "@scripts/jest-config": "0.0.0",
70
+ "@modern-js/core": "1.16.0",
71
+ "@modern-js/runtime": "1.16.0",
72
+ "@modern-js/types": "1.16.0",
73
+ "@scripts/build": "1.15.0",
74
+ "@scripts/jest-config": "1.15.0",
75
75
  "@testing-library/jest-dom": "^5.16.1",
76
76
  "@testing-library/react": "^12.0.0",
77
77
  "@testing-library/react-hooks": "^7.0.1",
@@ -80,8 +80,6 @@
80
80
  "@types/testing-library__jest-dom": "^5.14.3",
81
81
  "@types/jest": "^27",
82
82
  "@types/node": "^14",
83
- "@types/react": "^17",
84
- "@types/react-dom": "^17",
85
83
  "jest": "^27",
86
84
  "jest-fetch-mock": "^3.0.3",
87
85
  "react": "^17.0.2",