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

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 +18 -6
  3. package/dist/index.es.js +17 -6
  4. package/package.json +2 -2
  5. package/src/create.tsx +24 -14
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-20240620034636
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-20240620034636
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,21 @@ 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;
98
+ }
99
+ if (ReactRouterDOM__namespace.UNSAFE_RouteContext && enableDispathPopstate) {
100
+ routerContextVal = React.useContext(ReactRouterDOM__namespace.UNSAFE_RouteContext);
101
+ if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
102
+ basename = routerContextVal.matches[0].pathnameBase;
103
+ }
104
+ enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
93
105
  }
94
106
  const LazyComponent = React.useMemo(() => {
95
107
  return React.lazy(async () => {
@@ -113,7 +125,7 @@ function createRemoteComponent(lazyComponent, info) {
113
125
  RemoteApp,
114
126
  {
115
127
  name: moduleName,
116
- dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
128
+ dispathPopstate: enableDispathPopstate,
117
129
  ...info,
118
130
  ...props,
119
131
  providerInfo: exportFn,
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import React__default, { useContext, useMemo, useRef, useState, useEffect } from "react";
3
- import { UNSAFE_RouteContext, useLocation } from "react-router-dom";
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,21 @@ 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;
79
+ }
80
+ if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
81
+ routerContextVal = useContext(ReactRouterDOM.UNSAFE_RouteContext);
82
+ if (routerContextVal && routerContextVal.matches && routerContextVal.matches[0] && routerContextVal.matches[0].pathnameBase) {
83
+ basename = routerContextVal.matches[0].pathnameBase;
84
+ }
85
+ enableDispathPopstate = (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0;
75
86
  }
76
87
  const LazyComponent = useMemo(() => {
77
88
  return React__default.lazy(async () => {
@@ -95,7 +106,7 @@ function createRemoteComponent(lazyComponent, info) {
95
106
  RemoteApp,
96
107
  {
97
108
  name: moduleName,
98
- dispathPopstate: (routerContextVal == null ? void 0 : routerContextVal.matches) && (routerContextVal == null ? void 0 : routerContextVal.matches.length) > 0,
109
+ dispathPopstate: enableDispathPopstate,
99
110
  ...info,
100
111
  ...props,
101
112
  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-20240620034636",
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-20240620034636"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": ">=16.9.0",
package/src/create.tsx CHANGED
@@ -6,7 +6,7 @@ import React, {
6
6
  useRef,
7
7
  useState,
8
8
  } from 'react';
9
- import { UNSAFE_RouteContext, useLocation } from 'react-router-dom';
9
+ import * as ReactRouterDOM from 'react-router-dom';
10
10
  import type { ProviderParams } from '@module-federation/bridge-shared';
11
11
  import { LoggerInstance } from './utils';
12
12
  import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
@@ -46,7 +46,7 @@ const RemoteApp = ({
46
46
  const renderDom = useRef(null);
47
47
  const providerInfoRef = useRef<any>(null);
48
48
  if (dispathPopstate) {
49
- const location = useLocation();
49
+ const location = ReactRouterDOM.useLocation();
50
50
  const [pathname, setPathname] = useState(location.pathname);
51
51
 
52
52
  useEffect(() => {
@@ -125,15 +125,28 @@ export function createRemoteComponent<T, E extends keyof T>(
125
125
  } & RawComponentType,
126
126
  ) => {
127
127
  const exportName = info?.export || 'default';
128
- const routerContextVal = useContext(UNSAFE_RouteContext);
129
128
  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;
129
+ let enableDispathPopstate = false;
130
+ let routerContextVal: any;
131
+ try {
132
+ ReactRouterDOM.useLocation();
133
+ enableDispathPopstate = true;
134
+ } catch {
135
+ enableDispathPopstate = false;
136
+ }
137
+
138
+ if (ReactRouterDOM.UNSAFE_RouteContext && enableDispathPopstate) {
139
+ routerContextVal = useContext(ReactRouterDOM.UNSAFE_RouteContext);
140
+ if (
141
+ routerContextVal &&
142
+ routerContextVal.matches &&
143
+ routerContextVal.matches[0] &&
144
+ routerContextVal.matches[0].pathnameBase
145
+ ) {
146
+ basename = routerContextVal.matches[0].pathnameBase;
147
+ }
148
+ enableDispathPopstate =
149
+ routerContextVal?.matches && routerContextVal?.matches.length > 0;
137
150
  }
138
151
 
139
152
  const LazyComponent = useMemo(() => {
@@ -162,10 +175,7 @@ export function createRemoteComponent<T, E extends keyof T>(
162
175
  default: () => (
163
176
  <RemoteApp
164
177
  name={moduleName}
165
- dispathPopstate={
166
- routerContextVal?.matches &&
167
- routerContextVal?.matches.length > 0
168
- }
178
+ dispathPopstate={enableDispathPopstate}
169
179
  {...info}
170
180
  {...props}
171
181
  providerInfo={exportFn}