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

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 (5) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/dist/index.cjs.js +11 -6
  3. package/dist/index.es.js +11 -7
  4. package/package.json +2 -2
  5. package/src/create.tsx +50 -22
package/CHANGELOG.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # @module-federation/bridge-react
2
2
 
3
- ## 0.0.0-next-20240620023927
3
+ ## 0.0.0-next-20240620052430
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - @module-federation/bridge-shared@0.0.0-next-20240620023927
7
+ - @module-federation/bridge-shared@0.0.0-next-20240620052430
package/dist/index.cjs.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const React = require("react");
4
- const reactRouterDom = require("react-router-dom");
4
+ const ReactRouterDOM = require("react-router-dom");
5
5
  const context = require("./context-ePt4wynZ.cjs");
6
6
  const ReactDOM = require("react-dom");
7
7
  function _interopNamespaceDefault(e) {
@@ -21,6 +21,7 @@ function _interopNamespaceDefault(e) {
21
21
  return Object.freeze(n);
22
22
  }
23
23
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
24
+ const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
24
25
  const RemoteApp = ({
25
26
  name,
26
27
  memoryRoute,
@@ -33,7 +34,7 @@ const RemoteApp = ({
33
34
  const renderDom = React.useRef(null);
34
35
  const providerInfoRef = React.useRef(null);
35
36
  if (dispathPopstate) {
36
- const location = reactRouterDom.useLocation();
37
+ const location = ReactRouterDOM__namespace.useLocation();
37
38
  const [pathname, setPathname] = React.useState(location.pathname);
38
39
  React.useEffect(() => {
39
40
  if (pathname !== "" && pathname !== location.pathname) {
@@ -86,10 +87,14 @@ RemoteApp["__APP_VERSION__"] = "0.0.1";
86
87
  function createRemoteComponent(lazyComponent, info) {
87
88
  return (props) => {
88
89
  const exportName = (info == null ? void 0 : info.export) || "default";
89
- const routerContextVal = React.useContext(reactRouterDom.UNSAFE_RouteContext);
90
90
  let basename = "/";
91
- if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
92
- basename = routerContextVal.matches[0].pathnameBase;
91
+ let enableDispathPopstate = false;
92
+ let routerContextVal;
93
+ try {
94
+ ReactRouterDOM__namespace.useLocation();
95
+ enableDispathPopstate = true;
96
+ } catch {
97
+ enableDispathPopstate = false;
93
98
  }
94
99
  const LazyComponent = React.useMemo(() => {
95
100
  return React.lazy(async () => {
@@ -113,7 +118,7 @@ function createRemoteComponent(lazyComponent, info) {
113
118
  RemoteApp,
114
119
  {
115
120
  name: moduleName,
116
- dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
121
+ dispathPopstate: enableDispathPopstate,
117
122
  ...info,
118
123
  ...props,
119
124
  providerInfo: exportFn,
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
3
- import { UNSAFE_RouteContext, useLocation } from "react-router-dom";
2
+ import React__default, { useMemo, useRef, useState, useEffect } from "react";
3
+ import * as ReactRouterDOM from "react-router-dom";
4
4
  import { L as LoggerInstance, f, a as atLeastReact18, R as RouterContext } from "./context-CPtN38Ur.js";
5
5
  import ReactDOM from "react-dom";
6
6
  const RemoteApp = ({
@@ -15,7 +15,7 @@ const RemoteApp = ({
15
15
  const renderDom = useRef(null);
16
16
  const providerInfoRef = useRef(null);
17
17
  if (dispathPopstate) {
18
- const location = useLocation();
18
+ const location = ReactRouterDOM.useLocation();
19
19
  const [pathname, setPathname] = useState(location.pathname);
20
20
  useEffect(() => {
21
21
  if (pathname !== "" && pathname !== location.pathname) {
@@ -68,10 +68,14 @@ RemoteApp["__APP_VERSION__"] = "0.0.1";
68
68
  function createRemoteComponent(lazyComponent, info) {
69
69
  return (props) => {
70
70
  const exportName = (info == null ? void 0 : info.export) || "default";
71
- const routerContextVal = useContext(UNSAFE_RouteContext);
72
71
  let basename = "/";
73
- if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
74
- basename = routerContextVal.matches[0].pathnameBase;
72
+ let enableDispathPopstate = false;
73
+ let routerContextVal;
74
+ try {
75
+ ReactRouterDOM.useLocation();
76
+ enableDispathPopstate = true;
77
+ } catch {
78
+ enableDispathPopstate = false;
75
79
  }
76
80
  const LazyComponent = useMemo(() => {
77
81
  return React__default.lazy(async () => {
@@ -95,7 +99,7 @@ function createRemoteComponent(lazyComponent, info) {
95
99
  RemoteApp,
96
100
  {
97
101
  name: moduleName,
98
- dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
102
+ dispathPopstate: enableDispathPopstate,
99
103
  ...info,
100
104
  ...props,
101
105
  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-20240620023927",
3
+ "version": "0.0.0-next-20240620052430",
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-20240620023927"
28
+ "@module-federation/bridge-shared": "0.0.0-next-20240620052430"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": ">=16.9.0",
package/src/create.tsx CHANGED
@@ -1,12 +1,5 @@
1
- import React, {
2
- ReactNode,
3
- useContext,
4
- useEffect,
5
- useMemo,
6
- useRef,
7
- useState,
8
- } from 'react';
9
- import { UNSAFE_RouteContext, useLocation } from 'react-router-dom';
1
+ import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
2
+ import * as ReactRouterDOM from 'react-router-dom';
10
3
  import type { ProviderParams } from '@module-federation/bridge-shared';
11
4
  import { LoggerInstance } from './utils';
12
5
  import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
@@ -46,7 +39,7 @@ const RemoteApp = ({
46
39
  const renderDom = useRef(null);
47
40
  const providerInfoRef = useRef<any>(null);
48
41
  if (dispathPopstate) {
49
- const location = useLocation();
42
+ const location = ReactRouterDOM.useLocation();
50
43
  const [pathname, setPathname] = useState(location.pathname);
51
44
 
52
45
  useEffect(() => {
@@ -125,17 +118,55 @@ export function createRemoteComponent<T, E extends keyof T>(
125
118
  } & RawComponentType,
126
119
  ) => {
127
120
  const exportName = info?.export || 'default';
128
- const routerContextVal = useContext(UNSAFE_RouteContext);
129
121
  let basename = '/';
130
- if (
131
- routerContextVal &&
132
- routerContextVal.matches &&
133
- routerContextVal.matches[0] &&
134
- routerContextVal.matches[0].pathnameBase
135
- ) {
136
- basename = routerContextVal.matches[0].pathnameBase;
122
+ let enableDispathPopstate = false;
123
+ let routerContextVal: any;
124
+ try {
125
+ ReactRouterDOM.useLocation();
126
+ enableDispathPopstate = true;
127
+ } catch {
128
+ enableDispathPopstate = false;
137
129
  }
138
130
 
131
+ // if (props.basename) {
132
+ // basename = props.basename
133
+ // } else if (enableDispathPopstate) {
134
+ // const routerV5Api = 'useRoute' + 'Match';
135
+ // const routerV6Api = 'useMatches';
136
+ // const routerV5History = 'use' + 'History';
137
+ // const useHref = 'useHref';
138
+
139
+ // const match = (ReactRouterDOM as any)[routerV5Api]?.();
140
+ // const matchs = (ReactRouterDOM as any)[routerV6Api]?.();
141
+ // const location = ReactRouterDOM.useLocation();
142
+
143
+ // if ((ReactRouterDOM as any)[routerV5History] /* react-router@5 */) {
144
+ // // there is no dynamic switching of the router version in the project
145
+ // // so hooks can be used in conditional judgment
146
+ // // eslint-disable-next-line react-hooks/rules-of-hooks
147
+ // const history = (ReactRouterDOM as any)[routerV5History]?.();
148
+ // // To be compatible to history@4.10.1 and @5.3.0 we cannot write like this `history.createHref(pathname)`
149
+ // basename = history?.createHref?.({ pathname: '/' });
150
+ // } else if (useHref /* react-router@6 */) {
151
+ // // eslint-disable-next-line react-hooks/rules-of-hooks
152
+ // basename = useHref?.('/');
153
+ // }
154
+ // }
155
+
156
+ // if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
157
+ // routerContextVal = eval('useContext(ReactRouterDOM.UNSAFE_RouteContext)');
158
+ // if (
159
+ // routerContextVal &&
160
+ // routerContextVal.matches &&
161
+ // routerContextVal.matches[0] &&
162
+ // routerContextVal.matches[0].pathnameBase
163
+ // ) {
164
+ // basename = routerContextVal.matches[0].pathnameBase;
165
+ // }
166
+ // enableDispathPopstate =
167
+ // routerContextVal?.matches && routerContextVal?.matches.length > 0;
168
+ // }
169
+
139
170
  const LazyComponent = useMemo(() => {
140
171
  //@ts-ignore
141
172
  return React.lazy(async () => {
@@ -162,10 +193,7 @@ export function createRemoteComponent<T, E extends keyof T>(
162
193
  default: () => (
163
194
  <RemoteApp
164
195
  name={moduleName}
165
- dispathPopstate={
166
- routerContextVal?.matches &&
167
- routerContextVal?.matches.length > 0
168
- }
196
+ dispathPopstate={enableDispathPopstate}
169
197
  {...info}
170
198
  {...props}
171
199
  providerInfo={exportFn}