@umijs/renderer-react 4.0.53 → 4.0.55

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.
@@ -9,18 +9,23 @@ export function useAppData() {
9
9
  }
10
10
  export function useSelectedRoutes() {
11
11
  var location = useLocation();
12
+
12
13
  var _useAppData = useAppData(),
13
- clientRoutes = _useAppData.clientRoutes;
14
- // use `useLocation` get location without `basename`, not need `basename` param
14
+ clientRoutes = _useAppData.clientRoutes; // use `useLocation` get location without `basename`, not need `basename` param
15
+
16
+
15
17
  var routes = matchRoutes(clientRoutes, location.pathname);
16
18
  return routes || [];
17
19
  }
18
20
  export function useRouteProps() {
19
21
  var _currentRoute$;
22
+
20
23
  var currentRoute = useSelectedRoutes().slice(-1);
24
+
21
25
  var _ref = ((_currentRoute$ = currentRoute[0]) === null || _currentRoute$ === void 0 ? void 0 : _currentRoute$.route) || {},
22
- _ = _ref.element,
23
- props = _objectWithoutProperties(_ref, _excluded);
26
+ _ = _ref.element,
27
+ props = _objectWithoutProperties(_ref, _excluded);
28
+
24
29
  return props;
25
30
  }
26
31
  export function useServerLoaderData() {
package/dist/browser.js CHANGED
@@ -1,36 +1,33 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
- import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
4
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
5
- import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'; // compatible with < react@18 in @umijs/preset-umi/src/features/react
6
-
7
- import { HelmetProvider } from 'react-helmet-async';
4
+ import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
5
+ // compatible with < react@18 in @umijs/preset-umi/src/features/react
8
6
  import ReactDOM from 'react-dom/client';
9
7
  import { matchRoutes, Router, useRoutes } from 'react-router-dom';
10
8
  import { AppContext, useAppData } from "./appContext";
11
9
  import { createClientRoutes } from "./routes";
12
- var root = null; // react 18 some scenarios need unmount such as micro app
10
+ var root = null;
13
11
 
12
+ // react 18 some scenarios need unmount such as micro app
14
13
  export function __getRoot() {
15
14
  return root;
16
15
  }
16
+
17
17
  /**
18
18
  * 这个组件的功能是 history 发生改变的时候重新触发渲染
19
19
  * @param props
20
20
  * @returns
21
21
  */
22
-
23
22
  function BrowserRoutes(props) {
24
23
  var history = props.history;
25
-
26
24
  var _React$useState = React.useState({
27
- action: history.action,
28
- location: history.location
29
- }),
30
- _React$useState2 = _slicedToArray(_React$useState, 2),
31
- state = _React$useState2[0],
32
- setState = _React$useState2[1];
33
-
25
+ action: history.action,
26
+ location: history.location
27
+ }),
28
+ _React$useState2 = _slicedToArray(_React$useState, 2),
29
+ state = _React$useState2[0],
30
+ setState = _React$useState2[1];
34
31
  useLayoutEffect(function () {
35
32
  return history.listen(setState);
36
33
  }, [history]);
@@ -48,7 +45,6 @@ function BrowserRoutes(props) {
48
45
  }
49
46
  });
50
47
  }
51
-
52
48
  history.listen(onRouteChange);
53
49
  onRouteChange({
54
50
  location: state.location,
@@ -61,13 +57,12 @@ function BrowserRoutes(props) {
61
57
  basename: props.basename
62
58
  }, props.children);
63
59
  }
64
-
65
60
  export function Routes() {
66
61
  var _useAppData = useAppData(),
67
- clientRoutes = _useAppData.clientRoutes;
68
-
62
+ clientRoutes = _useAppData.clientRoutes;
69
63
  return useRoutes(clientRoutes);
70
64
  }
65
+
71
66
  /**
72
67
  * umi 渲染需要的配置,在node端调用的哦
73
68
  */
@@ -75,15 +70,16 @@ export function Routes() {
75
70
  /**
76
71
  * umi max 所需要的所有插件列表,用于获取provide
77
72
  */
78
- var UMI_CLIENT_RENDER_REACT_PLUGIN_LIST = [// Lowest to the highest priority
73
+ var UMI_CLIENT_RENDER_REACT_PLUGIN_LIST = [
74
+ // Lowest to the highest priority
79
75
  'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer'];
76
+
80
77
  /**
81
78
  *
82
79
  * @param {RenderClientOpts} opts - 插件相关的配置
83
80
  * @param {React.ReactElement} routesElement 需要渲染的 routers,为了方便测试注入才导出
84
81
  * @returns @returns A function that returns a React component.
85
82
  */
86
-
87
83
  var getBrowser = function getBrowser(opts, routesElement) {
88
84
  var basename = opts.basename || '/';
89
85
  var clientRoutes = createClientRoutes({
@@ -105,67 +101,54 @@ var getBrowser = function getBrowser(opts, routesElement) {
105
101
  routes: opts.routes,
106
102
  clientRoutes: clientRoutes,
107
103
  history: opts.history
108
- }, routesElement); // 加载所有需要的插件
109
-
110
- var _iterator = _createForOfIteratorHelper(UMI_CLIENT_RENDER_REACT_PLUGIN_LIST),
111
- _step;
112
-
113
- try {
114
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
115
- var key = _step.value;
116
- rootContainer = opts.pluginManager.applyPlugins({
117
- type: 'modify',
118
- key: key,
119
- initialValue: rootContainer,
120
- args: {
121
- routes: opts.routes,
122
- history: opts.history,
123
- plugin: opts.pluginManager
124
- }
125
- });
126
- }
127
- /**
128
- * umi 增加完 Provide 的 react dom,可以直接交给 react-dom 渲染
129
- * @returns {React.ReactElement}
130
- */
131
-
132
- } catch (err) {
133
- _iterator.e(err);
134
- } finally {
135
- _iterator.f();
104
+ }, routesElement);
105
+
106
+ // 加载所有需要的插件
107
+ for (var _i = 0, _UMI_CLIENT_RENDER_RE = UMI_CLIENT_RENDER_REACT_PLUGIN_LIST; _i < _UMI_CLIENT_RENDER_RE.length; _i++) {
108
+ var key = _UMI_CLIENT_RENDER_RE[_i];
109
+ rootContainer = opts.pluginManager.applyPlugins({
110
+ type: 'modify',
111
+ key: key,
112
+ initialValue: rootContainer,
113
+ args: {
114
+ routes: opts.routes,
115
+ history: opts.history,
116
+ plugin: opts.pluginManager
117
+ }
118
+ });
136
119
  }
137
120
 
121
+ /**
122
+ * umi 增加完 Provide 的 react dom,可以直接交给 react-dom 渲染
123
+ * @returns {React.ReactElement}
124
+ */
138
125
  var Browser = function Browser() {
139
126
  var _useState = useState({}),
140
- _useState2 = _slicedToArray(_useState, 2),
141
- clientLoaderData = _useState2[0],
142
- setClientLoaderData = _useState2[1];
143
-
144
- var _useState3 = useState( // @ts-ignore
145
- window.__UMI_LOADER_DATA__ || {}),
146
- _useState4 = _slicedToArray(_useState3, 2),
147
- serverLoaderData = _useState4[0],
148
- setServerLoaderData = _useState4[1];
149
-
127
+ _useState2 = _slicedToArray(_useState, 2),
128
+ clientLoaderData = _useState2[0],
129
+ setClientLoaderData = _useState2[1];
130
+ var _useState3 = useState(
131
+ // @ts-ignore
132
+ window.__UMI_LOADER_DATA__ || {}),
133
+ _useState4 = _slicedToArray(_useState3, 2),
134
+ serverLoaderData = _useState4[0],
135
+ setServerLoaderData = _useState4[1];
150
136
  var handleRouteChange = useCallback(function (id, isFirst) {
151
137
  var _matchRoutes;
152
-
153
138
  // Patched routes has to id
154
- var matchedRouteIds = (((_matchRoutes = matchRoutes(clientRoutes, id, basename)) === null || _matchRoutes === void 0 ? void 0 : _matchRoutes.map( // @ts-ignore
139
+ var matchedRouteIds = (((_matchRoutes = matchRoutes(clientRoutes, id, basename)) === null || _matchRoutes === void 0 ? void 0 : _matchRoutes.map(
140
+ // @ts-ignore
155
141
  function (route) {
156
142
  return route.route.id;
157
143
  })) || []).filter(Boolean);
158
144
  matchedRouteIds.forEach(function (id) {
159
145
  var _opts$routes$id, _opts$routes$id2;
160
-
161
146
  // preload
162
147
  // @ts-ignore
163
148
  var manifest = window.__umi_manifest__;
164
-
165
149
  if (manifest) {
166
150
  var routeIdReplaced = id.replace(/[\/\-]/g, '_');
167
151
  var preloadId = "preload-".concat(routeIdReplaced, ".js");
168
-
169
152
  if (!document.getElementById(preloadId)) {
170
153
  var keys = Object.keys(manifest).filter(function (k) {
171
154
  return k.startsWith(routeIdReplaced + '.');
@@ -174,32 +157,28 @@ var getBrowser = function getBrowser(opts, routesElement) {
174
157
  if (!/\.(js|css)$/.test(key)) {
175
158
  throw Error("preload not support ".concat(key, " file"));
176
159
  }
177
-
178
160
  var file = manifest[key];
179
161
  var link = document.createElement('link');
180
162
  link.rel = 'preload';
181
163
  link.as = 'style';
182
-
183
164
  if (key.endsWith('.js')) {
184
165
  link.as = 'script';
185
166
  link.id = preloadId;
186
- } // publicPath already in the manifest,
167
+ }
168
+ // publicPath already in the manifest,
187
169
  // but if runtimePublicPath is true, we need to replace it
188
-
189
-
190
170
  if (opts.runtimePublicPath) {
191
- file = file.replace(new RegExp("^".concat(opts.publicPath)), // @ts-ignore
171
+ file = file.replace(new RegExp("^".concat(opts.publicPath)),
172
+ // @ts-ignore
192
173
  window.publicPath);
193
174
  }
194
-
195
175
  link.href = file;
196
176
  document.head.appendChild(link);
197
177
  });
198
178
  }
199
- } // server loader
179
+ }
180
+ // server loader
200
181
  // use ?. since routes patched with patchClientRoutes is not exists in opts.routes
201
-
202
-
203
182
  if (!isFirst && (_opts$routes$id = opts.routes[id]) !== null && _opts$routes$id !== void 0 && _opts$routes$id.hasServerLoader) {
204
183
  fetch('/__serverLoader?route=' + id).then(function (d) {
205
184
  return d.json();
@@ -213,12 +192,10 @@ var getBrowser = function getBrowser(opts, routesElement) {
213
192
  });
214
193
  });
215
194
  }).catch(console.error);
216
- } // client loader
195
+ }
196
+ // client loader
217
197
  // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
218
-
219
-
220
198
  var clientLoader = (_opts$routes$id2 = opts.routes[id]) === null || _opts$routes$id2 === void 0 ? void 0 : _opts$routes$id2.clientLoader;
221
-
222
199
  if (clientLoader && !clientLoaderData[id]) {
223
200
  clientLoader().then(function (data) {
224
201
  setClientLoaderData(function (d) {
@@ -237,9 +214,7 @@ var getBrowser = function getBrowser(opts, routesElement) {
237
214
  useLayoutEffect(function () {
238
215
  if (typeof opts.callback === 'function') opts.callback();
239
216
  }, []);
240
- return /*#__PURE__*/React.createElement(HelmetProvider, {
241
- context: {}
242
- }, /*#__PURE__*/React.createElement(AppContext.Provider, {
217
+ return /*#__PURE__*/React.createElement(AppContext.Provider, {
243
218
  value: {
244
219
  routes: opts.routes,
245
220
  routeComponents: opts.routeComponents,
@@ -252,35 +227,30 @@ var getBrowser = function getBrowser(opts, routesElement) {
252
227
  preloadRoute: handleRouteChange,
253
228
  history: opts.history
254
229
  }
255
- }, rootContainer));
230
+ }, rootContainer);
256
231
  };
257
-
258
232
  return Browser;
259
233
  };
234
+
260
235
  /**
261
236
  * 执行 react dom 的 render 方法
262
237
  * @param {RenderClientOpts} opts - 插件相关的配置
263
238
  * @returns void
264
239
  */
265
-
266
-
267
240
  export function renderClient(opts) {
268
241
  var rootElement = opts.rootElement || document.getElementById('root');
269
- var Browser = getBrowser(opts, /*#__PURE__*/React.createElement(Routes, null)); // 为了测试,直接返回组件
270
-
242
+ var Browser = getBrowser(opts, /*#__PURE__*/React.createElement(Routes, null));
243
+ // 为了测试,直接返回组件
271
244
  if (opts.components) return Browser;
272
-
273
245
  if (opts.hydrate) {
274
246
  ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/React.createElement(Browser, null));
275
247
  return;
276
248
  }
277
-
278
249
  if (ReactDOM.createRoot) {
279
250
  root = ReactDOM.createRoot(rootElement);
280
251
  root.render( /*#__PURE__*/React.createElement(Browser, null));
281
252
  return;
282
- } // @ts-ignore
283
-
284
-
253
+ }
254
+ // @ts-ignore
285
255
  ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
286
256
  }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { createBrowserHistory, createHashHistory, createMemoryHistory, type History, } from 'history';
2
- export { Helmet } from 'react-helmet-async';
2
+ export { Helmet, HelmetProvider } from 'react-helmet-async';
3
3
  export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
4
4
  export { useAppData, useClientLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData, } from './appContext';
5
5
  export { renderClient, __getRoot } from './browser';
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
2
- export { Helmet } from 'react-helmet-async';
2
+ export { Helmet, HelmetProvider } from 'react-helmet-async';
3
3
  export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams } from 'react-router-dom';
4
4
  export { useAppData, useClientLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData } from "./appContext";
5
5
  export { renderClient, __getRoot } from "./browser";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umijs/renderer-react",
3
- "version": "4.0.53",
3
+ "version": "4.0.55",
4
4
  "description": "@umijs/renderer-react",
5
5
  "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
6
6
  "bugs": "https://github.com/umijs/umi/issues",
@@ -22,7 +22,7 @@
22
22
  "test": "umi-scripts jest-turbo"
23
23
  },
24
24
  "dependencies": {
25
- "@babel/runtime": "7.20.7",
25
+ "@babel/runtime": "7.21.0",
26
26
  "@loadable/component": "5.15.2",
27
27
  "history": "5.3.0",
28
28
  "react-helmet-async": "1.3.0",