@module-federation/bridge-react 0.0.0-next-20240619100937 → 0.0.0-next-20240620023927

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 (6) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/__tests__/bridge.spec.tsx +2 -1
  3. package/dist/index.cjs.js +19 -14
  4. package/dist/index.es.js +19 -14
  5. package/package.json +2 -2
  6. package/src/create.tsx +24 -13
package/CHANGELOG.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # @module-federation/bridge-react
2
2
 
3
- ## 0.0.0-next-20240619100937
3
+ ## 0.0.0-next-20240620023927
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - @module-federation/bridge-shared@0.0.0-next-20240619100937
7
+ - @module-federation/bridge-shared@0.0.0-next-20240620023927
package/__tests__/bridge.spec.tsx CHANGED
@@ -63,6 +63,7 @@ describe('bridge', () => {
63
63
  expect(getHtml(container)).toMatch('loading');
64
64
 
65
65
  await sleep(200);
66
- expect(getHtml(container)).toMatch('life cycle render hello world');
66
+ expect(getHtml(container)).toMatch('life cycle render');
67
+ expect(getHtml(container)).toMatch('hello world');
67
68
  });
68
69
  });
package/dist/index.cjs.js CHANGED
@@ -26,23 +26,26 @@ const RemoteApp = ({
26
26
  memoryRoute,
27
27
  basename,
28
28
  providerInfo,
29
+ dispathPopstate,
29
30
  ...resProps
30
31
  }) => {
31
32
  const rootRef = React.useRef(null);
32
33
  const renderDom = React.useRef(null);
33
- const location = reactRouterDom.useLocation();
34
- const [pathname, setPathname] = React.useState(location.pathname);
35
34
  const providerInfoRef = React.useRef(null);
36
- React.useEffect(() => {
37
- if (pathname !== "" && pathname !== location.pathname) {
38
- context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
39
- name,
40
- pathname: location.pathname
41
- });
42
- context.f();
43
- }
44
- setPathname(location.pathname);
45
- }, [location]);
35
+ if (dispathPopstate) {
36
+ const location = reactRouterDom.useLocation();
37
+ const [pathname, setPathname] = React.useState(location.pathname);
38
+ React.useEffect(() => {
39
+ if (pathname !== "" && pathname !== location.pathname) {
40
+ context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
41
+ name,
42
+ pathname: location.pathname
43
+ });
44
+ context.f();
45
+ }
46
+ setPathname(location.pathname);
47
+ }, [location]);
48
+ }
46
49
  React.useEffect(() => {
47
50
  const renderTimeout = setTimeout(() => {
48
51
  const providerReturn = providerInfo();
@@ -85,7 +88,7 @@ function createRemoteComponent(lazyComponent, info) {
85
88
  const exportName = (info == null ? void 0 : info.export) || "default";
86
89
  const routerContextVal = React.useContext(reactRouterDom.UNSAFE_RouteContext);
87
90
  let basename = "/";
88
- if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
91
+ if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
89
92
  basename = routerContextVal.matches[0].pathnameBase;
90
93
  }
91
94
  const LazyComponent = React.useMemo(() => {
@@ -94,7 +97,8 @@ function createRemoteComponent(lazyComponent, info) {
94
97
  basename,
95
98
  lazyComponent,
96
99
  exportName,
97
- props
100
+ props,
101
+ routerContextVal
98
102
  });
99
103
  const m2 = await lazyComponent();
100
104
  const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -109,6 +113,7 @@ function createRemoteComponent(lazyComponent, info) {
109
113
  RemoteApp,
110
114
  {
111
115
  name: moduleName,
116
+ dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
112
117
  ...info,
113
118
  ...props,
114
119
  providerInfo: exportFn,
package/dist/index.es.js CHANGED
@@ -8,23 +8,26 @@ const RemoteApp = ({
8
8
  memoryRoute,
9
9
  basename,
10
10
  providerInfo,
11
+ dispathPopstate,
11
12
  ...resProps
12
13
  }) => {
13
14
  const rootRef = useRef(null);
14
15
  const renderDom = useRef(null);
15
- const location = useLocation();
16
- const [pathname, setPathname] = useState(location.pathname);
17
16
  const providerInfoRef = useRef(null);
18
- useEffect(() => {
19
- if (pathname !== "" && pathname !== location.pathname) {
20
- LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
21
- name,
22
- pathname: location.pathname
23
- });
24
- f();
25
- }
26
- setPathname(location.pathname);
27
- }, [location]);
17
+ if (dispathPopstate) {
18
+ const location = useLocation();
19
+ const [pathname, setPathname] = useState(location.pathname);
20
+ useEffect(() => {
21
+ if (pathname !== "" && pathname !== location.pathname) {
22
+ LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
23
+ name,
24
+ pathname: location.pathname
25
+ });
26
+ f();
27
+ }
28
+ setPathname(location.pathname);
29
+ }, [location]);
30
+ }
28
31
  useEffect(() => {
29
32
  const renderTimeout = setTimeout(() => {
30
33
  const providerReturn = providerInfo();
@@ -67,7 +70,7 @@ function createRemoteComponent(lazyComponent, info) {
67
70
  const exportName = (info == null ? void 0 : info.export) || "default";
68
71
  const routerContextVal = useContext(UNSAFE_RouteContext);
69
72
  let basename = "/";
70
- if (routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
73
+ if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
71
74
  basename = routerContextVal.matches[0].pathnameBase;
72
75
  }
73
76
  const LazyComponent = useMemo(() => {
@@ -76,7 +79,8 @@ function createRemoteComponent(lazyComponent, info) {
76
79
  basename,
77
80
  lazyComponent,
78
81
  exportName,
79
- props
82
+ props,
83
+ routerContextVal
80
84
  });
81
85
  const m2 = await lazyComponent();
82
86
  const moduleName = m2 && m2[Symbol.for("mf_module_id")];
@@ -91,6 +95,7 @@ function createRemoteComponent(lazyComponent, info) {
91
95
  RemoteApp,
92
96
  {
93
97
  name: moduleName,
98
+ dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
94
99
  ...info,
95
100
  ...props,
96
101
  providerInfo: exportFn,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@module-federation/bridge-react",
3
- "version": "0.0.0-next-20240619100937",
3
+ "version": "0.0.0-next-20240620023927",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -25,7 +25,7 @@
25
25
  "dependencies": {
26
26
  "@loadable/component": "^5.16.4",
27
27
  "react-error-boundary": "^4.0.13",
28
- "@module-federation/bridge-shared": "0.0.0-next-20240619100937"
28
+ "@module-federation/bridge-shared": "0.0.0-next-20240620023927"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": ">=16.9.0",
package/src/create.tsx CHANGED
@@ -31,6 +31,7 @@ interface RemoteModule {
31
31
  interface RemoteAppParams {
32
32
  name: string;
33
33
  providerInfo: NonNullable<RemoteModule['provider']>;
34
+ dispathPopstate: boolean;
34
35
  }
35
36
 
36
37
  const RemoteApp = ({
@@ -38,24 +39,27 @@ const RemoteApp = ({
38
39
  memoryRoute,
39
40
  basename,
40
41
  providerInfo,
42
+ dispathPopstate,
41
43
  ...resProps
42
44
  }: RemoteAppParams & ProviderParams) => {
43
45
  const rootRef = useRef(null);
44
46
  const renderDom = useRef(null);
45
- const location = useLocation();
46
- const [pathname, setPathname] = useState(location.pathname);
47
47
  const providerInfoRef = useRef<any>(null);
48
-
49
- useEffect(() => {
50
- if (pathname !== '' && pathname !== location.pathname) {
51
- LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
52
- name,
53
- pathname: location.pathname,
54
- });
55
- dispatchPopstateEnv();
56
- }
57
- setPathname(location.pathname);
58
- }, [location]);
48
+ if (dispathPopstate) {
49
+ const location = useLocation();
50
+ const [pathname, setPathname] = useState(location.pathname);
51
+
52
+ useEffect(() => {
53
+ if (pathname !== '' && pathname !== location.pathname) {
54
+ LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
55
+ name,
56
+ pathname: location.pathname,
57
+ });
58
+ dispatchPopstateEnv();
59
+ }
60
+ setPathname(location.pathname);
61
+ }, [location]);
62
+ }
59
63
 
60
64
  useEffect(() => {
61
65
  const renderTimeout = setTimeout(() => {
@@ -124,6 +128,8 @@ export function createRemoteComponent<T, E extends keyof T>(
124
128
  const routerContextVal = useContext(UNSAFE_RouteContext);
125
129
  let basename = '/';
126
130
  if (
131
+ routerContextVal &&
132
+ routerContextVal.matches &&
127
133
  routerContextVal.matches[0] &&
128
134
  routerContextVal.matches[0].pathnameBase
129
135
  ) {
@@ -138,6 +144,7 @@ export function createRemoteComponent<T, E extends keyof T>(
138
144
  lazyComponent,
139
145
  exportName,
140
146
  props,
147
+ routerContextVal,
141
148
  });
142
149
  const m = (await lazyComponent()) as RemoteModule;
143
150
  // @ts-ignore
@@ -155,6 +162,10 @@ export function createRemoteComponent<T, E extends keyof T>(
155
162
  default: () => (
156
163
  <RemoteApp
157
164
  name={moduleName}
165
+ dispathPopstate={
166
+ routerContextVal?.matches &&
167
+ routerContextVal?.matches.length > 0
168
+ }
158
169
  {...info}
159
170
  {...props}
160
171
  providerInfo={exportFn}