@modern-js/plugin-garfish 2.46.0 → 2.47.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.
@@ -122,7 +122,7 @@ const garfishPlugin = ({ pluginName = "@modern-js/plugin-garfish", runtimePlugin
122
122
  bundlerChain: (chain, { env, CHAIN_ID, bundler }) => {
123
123
  var _resolveOptions_deploy, _resolveConfig_resolve;
124
124
  if (bundler.BannerPlugin) {
125
- chain.plugin(CHAIN_ID.PLUGIN.BANNER).use(bundler.BannerPlugin, [
125
+ chain.plugin("garfish-banner").use(bundler.BannerPlugin, [
126
126
  {
127
127
  banner: "Micro front-end"
128
128
  }
@@ -58,15 +58,46 @@ function pathJoin(...args) {
58
58
  function getAppInstance(options, appInfo, manifest) {
59
59
  let locationHref = "";
60
60
  function MicroApp(props) {
61
- var _context_router_useRouteMatch, _context_router, _context_router_useMatches, _context_router1, _context_router_useLocation, _context_router2;
61
+ var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
62
62
  const appRef = (0, import_react.useRef)(null);
63
63
  const domId = (0, import_util.generateSubAppContainerKey)(appInfo);
64
64
  const [SubModuleComponent, setSubModuleComponent] = (0, import_react.useState)();
65
65
  const context = (0, import_react.useContext)(import_runtime.RuntimeReactContext);
66
- const match = context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : (_context_router_useRouteMatch = _context_router.useRouteMatch) === null || _context_router_useRouteMatch === void 0 ? void 0 : _context_router_useRouteMatch.call(_context_router);
67
- const matchs = context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : (_context_router_useMatches = _context_router1.useMatches) === null || _context_router_useMatches === void 0 ? void 0 : _context_router_useMatches.call(_context_router1);
68
- const location = context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : (_context_router_useLocation = _context_router2.useLocation) === null || _context_router_useLocation === void 0 ? void 0 : _context_router_useLocation.call(_context_router2);
66
+ var _props_useRouteMatch;
67
+ const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
68
+ var _props_useMatches;
69
+ const useMatches = (_props_useMatches = props.useMatches) !== null && _props_useMatches !== void 0 ? _props_useMatches : context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : _context_router1.useMatches;
70
+ var _props_useLocation;
71
+ const useLocation = (_props_useLocation = props.useLocation) !== null && _props_useLocation !== void 0 ? _props_useLocation : context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : _context_router2.useLocation;
72
+ var _props_useHistory;
73
+ const useHistory = (_props_useHistory = props.useHistory) !== null && _props_useHistory !== void 0 ? _props_useHistory : context === null || context === void 0 ? void 0 : (_context_router3 = context.router) === null || _context_router3 === void 0 ? void 0 : _context_router3.useHistory;
74
+ var _props_useHistory1;
75
+ const useHref = (_props_useHistory1 = props.useHistory) !== null && _props_useHistory1 !== void 0 ? _props_useHistory1 : context === null || context === void 0 ? void 0 : (_context_router4 = context.router) === null || _context_router4 === void 0 ? void 0 : _context_router4.useHref;
76
+ const match = useRouteMatch === null || useRouteMatch === void 0 ? void 0 : useRouteMatch();
77
+ const matchs = useMatches === null || useMatches === void 0 ? void 0 : useMatches();
78
+ if (!useLocation) {
79
+ console.warn(`[@modern-js/plugin-garfish] Detected that the 'router: false' mode is used. In this case, the basename and popStateEvent cannot be correctly passed to the sub-app.
80
+ You can manually pass 'useLocation' and 'useHref' props to assist plugin-garfish in calculating the "basename" and sync popStateEvent:
81
+ if you are using react-router-V6:
82
+ <Component useLocation={useLocation} useHref={useHref} />
83
+
84
+ else react-router-V5:
85
+ <Component useLocation={useLocation} useHistory={useHistory} />
86
+
87
+ or directly pass the "basename":
88
+ <Component basename={basename} useLocation={useLocation} />`);
89
+ }
90
+ const location = useLocation();
69
91
  let basename = (options === null || options === void 0 ? void 0 : options.basename) || "/";
92
+ if (useHistory) {
93
+ var _history_createHref;
94
+ const history = useHistory === null || useHistory === void 0 ? void 0 : useHistory();
95
+ basename = history === null || history === void 0 ? void 0 : (_history_createHref = history.createHref) === null || _history_createHref === void 0 ? void 0 : _history_createHref.call(history, {
96
+ pathname: "/"
97
+ });
98
+ } else if (useHref) {
99
+ basename = useHref === null || useHref === void 0 ? void 0 : useHref("/");
100
+ }
70
101
  if (matchs && matchs.length > 0) {
71
102
  const matchItem = {
72
103
  ...matchs[matchs.length - 1]
@@ -78,6 +109,9 @@ function getAppInstance(options, appInfo, manifest) {
78
109
  } else if (match) {
79
110
  basename = pathJoin(basename, (match === null || match === void 0 ? void 0 : match.path) || "/");
80
111
  }
112
+ if (props.basename && typeof props.basename === "string") {
113
+ basename = props.basename;
114
+ }
81
115
  (0, import_react.useEffect)(() => {
82
116
  if (location && locationHref !== location.pathname && !import_garfish.default.running) {
83
117
  locationHref = location.pathname;
@@ -92,14 +126,14 @@ function getAppInstance(options, appInfo, manifest) {
92
126
  (0, import_react.useEffect)(() => {
93
127
  const { setLoadingState, ...userProps } = props;
94
128
  const loadAppOptions = {
95
- ...appInfo,
129
+ cache: true,
96
130
  insulationVariable: [
97
131
  ...appInfo.insulationVariable || [],
98
132
  "_SERVER_DATA"
99
133
  ],
100
134
  domGetter: `#${domId}`,
135
+ ...appInfo,
101
136
  basename,
102
- cache: true,
103
137
  props: {
104
138
  ...appInfo.props,
105
139
  ...userProps
@@ -109,7 +109,7 @@ var garfishPlugin = function() {
109
109
  var env = param2.env, CHAIN_ID = param2.CHAIN_ID, bundler = param2.bundler;
110
110
  var _resolveOptions_deploy, _resolveConfig_resolve;
111
111
  if (bundler.BannerPlugin) {
112
- chain.plugin(CHAIN_ID.PLUGIN.BANNER).use(bundler.BannerPlugin, [
112
+ chain.plugin("garfish-banner").use(bundler.BannerPlugin, [
113
113
  {
114
114
  banner: "Micro front-end"
115
115
  }
@@ -34,15 +34,46 @@ function pathJoin() {
34
34
  function getAppInstance(options, appInfo, manifest) {
35
35
  var locationHref = "";
36
36
  function MicroApp(props) {
37
- var _context_router_useRouteMatch, _context_router, _context_router_useMatches, _context_router1, _context_router_useLocation, _context_router2;
37
+ var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
38
38
  var appRef = useRef(null);
39
39
  var domId = generateSubAppContainerKey(appInfo);
40
40
  var _useState = _sliced_to_array(useState(), 2), SubModuleComponent = _useState[0], setSubModuleComponent = _useState[1];
41
41
  var context = useContext(RuntimeReactContext);
42
- var match = context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : (_context_router_useRouteMatch = _context_router.useRouteMatch) === null || _context_router_useRouteMatch === void 0 ? void 0 : _context_router_useRouteMatch.call(_context_router);
43
- var matchs = context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : (_context_router_useMatches = _context_router1.useMatches) === null || _context_router_useMatches === void 0 ? void 0 : _context_router_useMatches.call(_context_router1);
44
- var location = context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : (_context_router_useLocation = _context_router2.useLocation) === null || _context_router_useLocation === void 0 ? void 0 : _context_router_useLocation.call(_context_router2);
42
+ var _props_useRouteMatch;
43
+ var useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
44
+ var _props_useMatches;
45
+ var useMatches = (_props_useMatches = props.useMatches) !== null && _props_useMatches !== void 0 ? _props_useMatches : context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : _context_router1.useMatches;
46
+ var _props_useLocation;
47
+ var useLocation = (_props_useLocation = props.useLocation) !== null && _props_useLocation !== void 0 ? _props_useLocation : context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : _context_router2.useLocation;
48
+ var _props_useHistory;
49
+ var useHistory = (_props_useHistory = props.useHistory) !== null && _props_useHistory !== void 0 ? _props_useHistory : context === null || context === void 0 ? void 0 : (_context_router3 = context.router) === null || _context_router3 === void 0 ? void 0 : _context_router3.useHistory;
50
+ var _props_useHistory1;
51
+ var useHref = (_props_useHistory1 = props.useHistory) !== null && _props_useHistory1 !== void 0 ? _props_useHistory1 : context === null || context === void 0 ? void 0 : (_context_router4 = context.router) === null || _context_router4 === void 0 ? void 0 : _context_router4.useHref;
52
+ var match = useRouteMatch === null || useRouteMatch === void 0 ? void 0 : useRouteMatch();
53
+ var matchs = useMatches === null || useMatches === void 0 ? void 0 : useMatches();
54
+ if (!useLocation) {
55
+ console.warn(`[@modern-js/plugin-garfish] Detected that the 'router: false' mode is used. In this case, the basename and popStateEvent cannot be correctly passed to the sub-app.
56
+ You can manually pass 'useLocation' and 'useHref' props to assist plugin-garfish in calculating the "basename" and sync popStateEvent:
57
+ if you are using react-router-V6:
58
+ <Component useLocation={useLocation} useHref={useHref} />
59
+
60
+ else react-router-V5:
61
+ <Component useLocation={useLocation} useHistory={useHistory} />
62
+
63
+ or directly pass the "basename":
64
+ <Component basename={basename} useLocation={useLocation} />`);
65
+ }
66
+ var location = useLocation();
45
67
  var basename = (options === null || options === void 0 ? void 0 : options.basename) || "/";
68
+ if (useHistory) {
69
+ var _history_createHref;
70
+ var history = useHistory === null || useHistory === void 0 ? void 0 : useHistory();
71
+ basename = history === null || history === void 0 ? void 0 : (_history_createHref = history.createHref) === null || _history_createHref === void 0 ? void 0 : _history_createHref.call(history, {
72
+ pathname: "/"
73
+ });
74
+ } else if (useHref) {
75
+ basename = useHref === null || useHref === void 0 ? void 0 : useHref("/");
76
+ }
46
77
  if (matchs && matchs.length > 0) {
47
78
  var matchItem = _object_spread({}, matchs[matchs.length - 1]);
48
79
  for (var key in matchItem.params) {
@@ -52,6 +83,9 @@ function getAppInstance(options, appInfo, manifest) {
52
83
  } else if (match) {
53
84
  basename = pathJoin(basename, (match === null || match === void 0 ? void 0 : match.path) || "/");
54
85
  }
86
+ if (props.basename && typeof props.basename === "string") {
87
+ basename = props.basename;
88
+ }
55
89
  useEffect(function() {
56
90
  if (location && locationHref !== location.pathname && !Garfish.running) {
57
91
  locationHref = location.pathname;
@@ -70,13 +104,14 @@ function getAppInstance(options, appInfo, manifest) {
70
104
  var setLoadingState = props.setLoadingState, userProps = _object_without_properties(props, [
71
105
  "setLoadingState"
72
106
  ]);
73
- var loadAppOptions = _object_spread_props(_object_spread({}, appInfo), {
107
+ var loadAppOptions = _object_spread_props(_object_spread({
108
+ cache: true,
74
109
  insulationVariable: _to_consumable_array(appInfo.insulationVariable || []).concat([
75
110
  "_SERVER_DATA"
76
111
  ]),
77
- domGetter: "#".concat(domId),
112
+ domGetter: "#".concat(domId)
113
+ }, appInfo), {
78
114
  basename,
79
- cache: true,
80
115
  props: _object_spread({}, appInfo.props, userProps),
81
116
  customLoader: function(provider) {
82
117
  var render = provider.render, destroy = provider.destroy, SubModuleComponent2 = provider.SubModuleComponent, jupiter_submodule_app_key = provider.jupiter_submodule_app_key;
@@ -96,7 +96,7 @@ const garfishPlugin = ({ pluginName = "@modern-js/plugin-garfish", runtimePlugin
96
96
  bundlerChain: (chain, { env, CHAIN_ID, bundler }) => {
97
97
  var _resolveOptions_deploy, _resolveConfig_resolve;
98
98
  if (bundler.BannerPlugin) {
99
- chain.plugin(CHAIN_ID.PLUGIN.BANNER).use(bundler.BannerPlugin, [
99
+ chain.plugin("garfish-banner").use(bundler.BannerPlugin, [
100
100
  {
101
101
  banner: "Micro front-end"
102
102
  }
@@ -24,15 +24,46 @@ function pathJoin(...args) {
24
24
  function getAppInstance(options, appInfo, manifest) {
25
25
  let locationHref = "";
26
26
  function MicroApp(props) {
27
- var _context_router_useRouteMatch, _context_router, _context_router_useMatches, _context_router1, _context_router_useLocation, _context_router2;
27
+ var _context_router, _context_router1, _context_router2, _context_router3, _context_router4;
28
28
  const appRef = useRef(null);
29
29
  const domId = generateSubAppContainerKey(appInfo);
30
30
  const [SubModuleComponent, setSubModuleComponent] = useState();
31
31
  const context = useContext(RuntimeReactContext);
32
- const match = context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : (_context_router_useRouteMatch = _context_router.useRouteMatch) === null || _context_router_useRouteMatch === void 0 ? void 0 : _context_router_useRouteMatch.call(_context_router);
33
- const matchs = context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : (_context_router_useMatches = _context_router1.useMatches) === null || _context_router_useMatches === void 0 ? void 0 : _context_router_useMatches.call(_context_router1);
34
- const location = context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : (_context_router_useLocation = _context_router2.useLocation) === null || _context_router_useLocation === void 0 ? void 0 : _context_router_useLocation.call(_context_router2);
32
+ var _props_useRouteMatch;
33
+ const useRouteMatch = (_props_useRouteMatch = props.useRouteMatch) !== null && _props_useRouteMatch !== void 0 ? _props_useRouteMatch : context === null || context === void 0 ? void 0 : (_context_router = context.router) === null || _context_router === void 0 ? void 0 : _context_router.useRouteMatch;
34
+ var _props_useMatches;
35
+ const useMatches = (_props_useMatches = props.useMatches) !== null && _props_useMatches !== void 0 ? _props_useMatches : context === null || context === void 0 ? void 0 : (_context_router1 = context.router) === null || _context_router1 === void 0 ? void 0 : _context_router1.useMatches;
36
+ var _props_useLocation;
37
+ const useLocation = (_props_useLocation = props.useLocation) !== null && _props_useLocation !== void 0 ? _props_useLocation : context === null || context === void 0 ? void 0 : (_context_router2 = context.router) === null || _context_router2 === void 0 ? void 0 : _context_router2.useLocation;
38
+ var _props_useHistory;
39
+ const useHistory = (_props_useHistory = props.useHistory) !== null && _props_useHistory !== void 0 ? _props_useHistory : context === null || context === void 0 ? void 0 : (_context_router3 = context.router) === null || _context_router3 === void 0 ? void 0 : _context_router3.useHistory;
40
+ var _props_useHistory1;
41
+ const useHref = (_props_useHistory1 = props.useHistory) !== null && _props_useHistory1 !== void 0 ? _props_useHistory1 : context === null || context === void 0 ? void 0 : (_context_router4 = context.router) === null || _context_router4 === void 0 ? void 0 : _context_router4.useHref;
42
+ const match = useRouteMatch === null || useRouteMatch === void 0 ? void 0 : useRouteMatch();
43
+ const matchs = useMatches === null || useMatches === void 0 ? void 0 : useMatches();
44
+ if (!useLocation) {
45
+ console.warn(`[@modern-js/plugin-garfish] Detected that the 'router: false' mode is used. In this case, the basename and popStateEvent cannot be correctly passed to the sub-app.
46
+ You can manually pass 'useLocation' and 'useHref' props to assist plugin-garfish in calculating the "basename" and sync popStateEvent:
47
+ if you are using react-router-V6:
48
+ <Component useLocation={useLocation} useHref={useHref} />
49
+
50
+ else react-router-V5:
51
+ <Component useLocation={useLocation} useHistory={useHistory} />
52
+
53
+ or directly pass the "basename":
54
+ <Component basename={basename} useLocation={useLocation} />`);
55
+ }
56
+ const location = useLocation();
35
57
  let basename = (options === null || options === void 0 ? void 0 : options.basename) || "/";
58
+ if (useHistory) {
59
+ var _history_createHref;
60
+ const history = useHistory === null || useHistory === void 0 ? void 0 : useHistory();
61
+ basename = history === null || history === void 0 ? void 0 : (_history_createHref = history.createHref) === null || _history_createHref === void 0 ? void 0 : _history_createHref.call(history, {
62
+ pathname: "/"
63
+ });
64
+ } else if (useHref) {
65
+ basename = useHref === null || useHref === void 0 ? void 0 : useHref("/");
66
+ }
36
67
  if (matchs && matchs.length > 0) {
37
68
  const matchItem = {
38
69
  ...matchs[matchs.length - 1]
@@ -44,6 +75,9 @@ function getAppInstance(options, appInfo, manifest) {
44
75
  } else if (match) {
45
76
  basename = pathJoin(basename, (match === null || match === void 0 ? void 0 : match.path) || "/");
46
77
  }
78
+ if (props.basename && typeof props.basename === "string") {
79
+ basename = props.basename;
80
+ }
47
81
  useEffect(() => {
48
82
  if (location && locationHref !== location.pathname && !Garfish.running) {
49
83
  locationHref = location.pathname;
@@ -58,14 +92,14 @@ function getAppInstance(options, appInfo, manifest) {
58
92
  useEffect(() => {
59
93
  const { setLoadingState, ...userProps } = props;
60
94
  const loadAppOptions = {
61
- ...appInfo,
95
+ cache: true,
62
96
  insulationVariable: [
63
97
  ...appInfo.insulationVariable || [],
64
98
  "_SERVER_DATA"
65
99
  ],
66
100
  domGetter: `#${domId}`,
101
+ ...appInfo,
67
102
  basename,
68
- cache: true,
69
103
  props: {
70
104
  ...appInfo.props,
71
105
  ...userProps
@@ -6,5 +6,10 @@ export interface MicroProps {
6
6
  error?: unknown;
7
7
  }) => void;
8
8
  [key: string]: any;
9
+ useLocation?: any;
10
+ useHref?: any;
11
+ useHistory?: any;
12
+ useRouteMatch?: any;
13
+ useMatches?: any;
9
14
  }
10
15
  export declare function Loadable(WrapComponent: any): (defaultLoadable?: LoadableConfig) => (props: MicroComponentProps) => JSX.Element;
package/package.json CHANGED
@@ -15,7 +15,7 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.46.0",
18
+ "version": "2.47.0",
19
19
  "jsnext:source": "./src/cli/index.ts",
20
20
  "types": "./dist/types/cli/index.d.ts",
21
21
  "typesVersions": {
@@ -70,18 +70,20 @@
70
70
  "hoist-non-react-statics": "^3.3.2",
71
71
  "react-loadable": "^5.5.0",
72
72
  "@swc/helpers": "0.5.3",
73
- "@modern-js/utils": "2.46.0"
73
+ "@modern-js/utils": "2.47.0"
74
74
  },
75
75
  "peerDependencies": {
76
- "@modern-js/runtime": "^2.46.0",
76
+ "@modern-js/runtime": "^2.47.0",
77
77
  "react": ">=17",
78
78
  "react-dom": ">=17"
79
79
  },
80
80
  "devDependencies": {
81
+ "@rsbuild/shared": "0.4.4",
81
82
  "@testing-library/dom": "^8.14.0",
82
83
  "@testing-library/jest-dom": "^5.16.1",
83
84
  "@testing-library/react": "^13.4.0",
84
85
  "@testing-library/user-event": "^14.4.3",
86
+ "jest-location-mock": "2.0.0",
85
87
  "@types/jest": "^29",
86
88
  "@types/node": "^14",
87
89
  "@types/testing-library__jest-dom": "^5.14.3",
@@ -89,15 +91,15 @@
89
91
  "jest-fetch-mock": "^3.0.3",
90
92
  "react": "^18",
91
93
  "react-dom": "^18",
92
- "react-router-dom": "6.17.0",
94
+ "react-router-dom": "6.22.0",
93
95
  "typescript": "^5",
94
- "@modern-js/app-tools": "2.46.0",
95
- "@modern-js/plugin-router-v5": "2.46.0",
96
- "@modern-js/core": "2.46.0",
97
- "@modern-js/types": "2.46.0",
98
- "@scripts/jest-config": "2.46.0",
99
- "@modern-js/runtime": "2.46.0",
100
- "@scripts/build": "2.46.0"
96
+ "@modern-js/app-tools": "2.47.0",
97
+ "@modern-js/core": "2.47.0",
98
+ "@modern-js/plugin-router-v5": "2.47.0",
99
+ "@modern-js/runtime": "2.47.0",
100
+ "@scripts/build": "2.47.0",
101
+ "@scripts/jest-config": "2.47.0",
102
+ "@modern-js/types": "2.47.0"
101
103
  },
102
104
  "sideEffects": false,
103
105
  "publishConfig": {