@umijs/renderer-react 4.0.0-canary.20230227.1 → 4.0.0-canary.20230302.1

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
@@ -3,7 +3,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
5
5
  // compatible with < react@18 in @umijs/preset-umi/src/features/react
6
- import { HelmetProvider } from 'react-helmet-async';
7
6
  import ReactDOM from 'react-dom/client';
8
7
  import { matchRoutes, Router, useRoutes } from 'react-router-dom';
9
8
  import { AppContext, useAppData } from "./appContext";
@@ -215,9 +214,7 @@ var getBrowser = function getBrowser(opts, routesElement) {
215
214
  useLayoutEffect(function () {
216
215
  if (typeof opts.callback === 'function') opts.callback();
217
216
  }, []);
218
- return /*#__PURE__*/React.createElement(HelmetProvider, {
219
- context: {}
220
- }, /*#__PURE__*/React.createElement(AppContext.Provider, {
217
+ return /*#__PURE__*/React.createElement(AppContext.Provider, {
221
218
  value: {
222
219
  routes: opts.routes,
223
220
  routeComponents: opts.routeComponents,
@@ -230,7 +227,7 @@ var getBrowser = function getBrowser(opts, routesElement) {
230
227
  preloadRoute: handleRouteChange,
231
228
  history: opts.history
232
229
  }
233
- }, rootContainer));
230
+ }, rootContainer);
234
231
  };
235
232
  return Browser;
236
233
  };
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/dist/link.js CHANGED
@@ -6,16 +6,19 @@ import { Link } from 'react-router-dom';
6
6
  import { useAppData } from "./appContext";
7
7
  export function LinkWithPrefetch(props) {
8
8
  var _props$to;
9
+
9
10
  var prefetch = props.prefetch,
10
- linkProps = _objectWithoutProperties(props, _excluded);
11
+ linkProps = _objectWithoutProperties(props, _excluded);
12
+
11
13
  var appData = useAppData();
12
- var to = typeof props.to === 'string' ? props.to : (_props$to = props.to) === null || _props$to === void 0 ? void 0 : _props$to.pathname;
13
- // compatible with old code
14
+ var to = typeof props.to === 'string' ? props.to : (_props$to = props.to) === null || _props$to === void 0 ? void 0 : _props$to.pathname; // compatible with old code
14
15
  // which to might be undefined
16
+
15
17
  if (!to) return null;
16
18
  return /*#__PURE__*/React.createElement(Link, _extends({
17
19
  onMouseEnter: function onMouseEnter() {
18
20
  var _appData$preloadRoute;
21
+
19
22
  return prefetch && to && ((_appData$preloadRoute = appData.preloadRoute) === null || _appData$preloadRoute === void 0 ? void 0 : _appData$preloadRoute.call(appData, to));
20
23
  }
21
24
  }, linkProps), props.children);
package/dist/routes.js CHANGED
@@ -9,8 +9,8 @@ import { RouteContext, useRouteData } from "./routeContext";
9
9
  import { useAppData } from "./appContext";
10
10
  export function createClientRoutes(opts) {
11
11
  var routesById = opts.routesById,
12
- parentId = opts.parentId,
13
- routeComponents = opts.routeComponents;
12
+ parentId = opts.parentId,
13
+ routeComponents = opts.routeComponents;
14
14
  return Object.keys(routesById).filter(function (id) {
15
15
  return routesById[id].parentId === parentId;
16
16
  }).map(function (id) {
@@ -32,28 +32,36 @@ export function createClientRoutes(opts) {
32
32
  loadingComponent: opts.loadingComponent,
33
33
  reactRouter5Compat: opts.reactRouter5Compat
34
34
  });
35
+
35
36
  if (children.length > 0) {
36
- route.children = children;
37
- // TODO: remove me
37
+ route.children = children; // TODO: remove me
38
38
  // compatible with @ant-design/pro-layout
39
+
39
40
  route.routes = children;
40
41
  }
42
+
41
43
  return route;
42
44
  });
43
45
  }
46
+
44
47
  function NavigateWithParams(props) {
45
48
  var params = useParams();
49
+
46
50
  var propsWithParams = _objectSpread(_objectSpread({}, props), {}, {
47
51
  to: generatePath(props.to, params)
48
52
  });
53
+
49
54
  return /*#__PURE__*/React.createElement(Navigate, _extends({
50
55
  replace: true
51
56
  }, propsWithParams));
52
57
  }
58
+
53
59
  function createClientRoute(opts) {
54
60
  var route = opts.route;
61
+
55
62
  var redirect = route.redirect,
56
- props = _objectWithoutProperties(route, _excluded);
63
+ props = _objectWithoutProperties(route, _excluded);
64
+
57
65
  var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
58
66
  return _objectSpread({
59
67
  element: redirect ? /*#__PURE__*/React.createElement(NavigateWithParams, {
@@ -69,24 +77,27 @@ function createClientRoute(opts) {
69
77
  }))
70
78
  }, props);
71
79
  }
80
+
72
81
  function DefaultLoading() {
73
82
  return /*#__PURE__*/React.createElement("div", null);
74
83
  }
84
+
75
85
  function RemoteComponentReactRouter5(props) {
76
86
  var _useRouteData = useRouteData(),
77
- route = _useRouteData.route;
87
+ route = _useRouteData.route;
88
+
78
89
  var _useAppData = useAppData(),
79
- history = _useAppData.history,
80
- clientRoutes = _useAppData.clientRoutes;
90
+ history = _useAppData.history,
91
+ clientRoutes = _useAppData.clientRoutes;
92
+
81
93
  var params = useParams();
82
94
  var match = {
83
95
  params: params,
84
96
  isExact: true,
85
97
  path: route.path,
86
98
  url: history.location.pathname
87
- };
99
+ }; // staticContext 没有兼容 好像没看到对应的兼容写法
88
100
 
89
- // staticContext 没有兼容 好像没看到对应的兼容写法
90
101
  var Component = props.loader;
91
102
  return /*#__PURE__*/React.createElement(React.Suspense, {
92
103
  fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
@@ -99,6 +110,7 @@ function RemoteComponentReactRouter5(props) {
99
110
  routes: clientRoutes
100
111
  }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
101
112
  }
113
+
102
114
  function RemoteComponent(props) {
103
115
  var Component = props.loader;
104
116
  return /*#__PURE__*/React.createElement(React.Suspense, {
package/dist/server.js CHANGED
@@ -8,72 +8,77 @@ import { AppContext } from "./appContext";
8
8
  import { Routes } from "./browser";
9
9
  import { createClientRoutes } from "./routes";
10
10
  // store helmet data
11
- var helmetContext = {};
11
+ var helmetContext = {}; // get helmet context
12
12
 
13
- // get helmet context
14
13
  export function getHelmetContext() {
15
14
  return helmetContext;
16
- }
15
+ } // Get the root React component for ReactDOMServer.renderToString
17
16
 
18
- // Get the root React component for ReactDOMServer.renderToString
19
17
  export function getClientRootComponent(_x) {
20
18
  return _getClientRootComponent.apply(this, arguments);
21
19
  }
20
+
22
21
  function _getClientRootComponent() {
23
22
  _getClientRootComponent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(opts) {
24
23
  var basename, components, clientRoutes, rootContainer, _i, _arr, key;
24
+
25
25
  return _regeneratorRuntime().wrap(function _callee$(_context) {
26
- while (1) switch (_context.prev = _context.next) {
27
- case 0:
28
- basename = '/';
29
- components = _objectSpread({}, opts.routeComponents);
30
- clientRoutes = createClientRoutes({
31
- routesById: opts.routes,
32
- routeComponents: components
33
- });
34
- rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
35
- basename: basename,
36
- location: opts.location
37
- }, /*#__PURE__*/React.createElement(Routes, null));
38
- for (_i = 0, _arr = [
39
- // Lowest to the highest priority
40
- 'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer']; _i < _arr.length; _i++) {
41
- key = _arr[_i];
42
- rootContainer = opts.pluginManager.applyPlugins({
43
- type: 'modify',
44
- key: key,
45
- initialValue: rootContainer,
46
- args: {}
26
+ while (1) {
27
+ switch (_context.prev = _context.next) {
28
+ case 0:
29
+ basename = '/';
30
+ components = _objectSpread({}, opts.routeComponents);
31
+ clientRoutes = createClientRoutes({
32
+ routesById: opts.routes,
33
+ routeComponents: components
47
34
  });
48
- }
49
- return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, {
50
- loaderData: opts.loaderData,
51
- manifest: opts.manifest
52
- }, /*#__PURE__*/React.createElement(HelmetProvider, {
53
- context: helmetContext
54
- }, /*#__PURE__*/React.createElement(AppContext.Provider, {
55
- value: {
56
- routes: opts.routes,
57
- routeComponents: opts.routeComponents,
58
- clientRoutes: clientRoutes,
59
- pluginManager: opts.pluginManager,
35
+ rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
60
36
  basename: basename,
61
- clientLoaderData: {},
62
- serverLoaderData: opts.loaderData
37
+ location: opts.location
38
+ }, /*#__PURE__*/React.createElement(Routes, null));
39
+
40
+ for (_i = 0, _arr = [// Lowest to the highest priority
41
+ 'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer']; _i < _arr.length; _i++) {
42
+ key = _arr[_i];
43
+ rootContainer = opts.pluginManager.applyPlugins({
44
+ type: 'modify',
45
+ key: key,
46
+ initialValue: rootContainer,
47
+ args: {}
48
+ });
63
49
  }
64
- }, rootContainer))));
65
- case 6:
66
- case "end":
67
- return _context.stop();
50
+
51
+ return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, {
52
+ loaderData: opts.loaderData,
53
+ manifest: opts.manifest
54
+ }, /*#__PURE__*/React.createElement(HelmetProvider, {
55
+ context: helmetContext
56
+ }, /*#__PURE__*/React.createElement(AppContext.Provider, {
57
+ value: {
58
+ routes: opts.routes,
59
+ routeComponents: opts.routeComponents,
60
+ clientRoutes: clientRoutes,
61
+ pluginManager: opts.pluginManager,
62
+ basename: basename,
63
+ clientLoaderData: {},
64
+ serverLoaderData: opts.loaderData
65
+ }
66
+ }, rootContainer))));
67
+
68
+ case 6:
69
+ case "end":
70
+ return _context.stop();
71
+ }
68
72
  }
69
73
  }, _callee);
70
74
  }));
71
75
  return _getClientRootComponent.apply(this, arguments);
72
76
  }
77
+
73
78
  function Html(_ref) {
74
79
  var children = _ref.children,
75
- loaderData = _ref.loaderData,
76
- manifest = _ref.manifest;
80
+ loaderData = _ref.loaderData,
81
+ manifest = _ref.manifest;
77
82
  // TODO: 处理 head 标签,比如 favicon.ico 的一致性
78
83
  // TODO: root 支持配置
79
84
  return /*#__PURE__*/React.createElement("html", {
@@ -2,7 +2,8 @@ import { useLocation } from 'react-router-dom';
2
2
  import { useAppData } from "./appContext";
3
3
  export function __useFetcher() {
4
4
  var _useAppData = useAppData(),
5
- preloadRoute = _useAppData.preloadRoute;
5
+ preloadRoute = _useAppData.preloadRoute;
6
+
6
7
  var location = useLocation();
7
8
  return {
8
9
  load: function load(path) {
@@ -37,5 +37,6 @@ export function withRouter(Component) {
37
37
  navigate: navigate
38
38
  }));
39
39
  }
40
+
40
41
  return ComponentWithRouterProp;
41
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umijs/renderer-react",
3
- "version": "4.0.0-canary.20230227.1",
3
+ "version": "4.0.0-canary.20230302.1",
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",