@umijs/renderer-react 4.0.0-canary.20240509.4 → 4.0.0-canary.20240511.1

package/dist/browser.d.ts

@@ -18,21 +18,11 @@ export declare type RenderClientOpts = {
      * @doc https://umijs.org/docs/api/config#runtimepublicpath
      */
     runtimePublicPath?: boolean;
-    /**
-     * react dom 渲染的的目标节点 id
-     * @doc 一般不需要改，微前端的时候会变化
-     */
-    mountElementId?: string;
     /**
      * react dom 渲染的的目标 dom
      * @doc 一般不需要改，微前端的时候会变化
      */
     rootElement?: HTMLElement;
-    /**
-     * ssr 是否从 app root 根节点开始 render
-     * @doc 默认 false, 从 app root 开始 render，为 true 时从 html 开始
-     */
-    renderFromRoot?: boolean;
     /**
      * 当前的路由配置
      */

package/dist/browser.js

@@ -7,7 +7,6 @@ import ReactDOM from 'react-dom/client';
 import { matchRoutes, Router, useRoutes } from 'react-router-dom';
 import { AppContext, useAppData } from "./appContext";
 import { fetchServerLoader } from "./dataFetcher";
-import { Html } from "./html";
 import { createClientRoutes } from "./routes";
 var root = null;
 
@@ -248,16 +247,7 @@ export function renderClient(opts) {
   // 为了测试，直接返回组件
   if (opts.components) return Browser;
   if (opts.hydrate) {
-    // @ts-ignore
-    var loaderData = window.__UMI_LOADER_DATA__ || {};
-    // @ts-ignore
-    var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
-    var hydtateHtmloptions = {
-      metadata: metadata,
-      loaderData: loaderData,
-      mountElementId: opts.mountElementId
-    };
-    ReactDOM.hydrateRoot(opts.renderFromRoot ? rootElement : document, /*#__PURE__*/React.createElement(Html, hydtateHtmloptions, /*#__PURE__*/React.createElement(Browser, null)));
+    ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/React.createElement(Browser, null));
     return;
   }
   if (ReactDOM.createRoot) {

package/dist/routes.js

@@ -4,9 +4,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["redirect"];
 // @ts-ignore
 import React from 'react';
-import { generatePath, Navigate, useParams, Outlet } from 'react-router-dom';
+import { generatePath, Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
+import { useAppData, useRouteProps } from "./appContext";
 import { RouteContext, useRouteData } from "./routeContext";
-import { useAppData } from "./appContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
     parentId = opts.parentId,
@@ -43,8 +43,15 @@ export function createClientRoutes(opts) {
 }
 function NavigateWithParams(props) {
   var params = useParams();
+  var to = generatePath(props.to, params);
+  var routeProps = useRouteProps();
+  var location = useLocation();
+  if (routeProps !== null && routeProps !== void 0 && routeProps.keepQuery) {
+    var queryAndHash = location.search + location.hash;
+    to += queryAndHash;
+  }
   var propsWithParams = _objectSpread(_objectSpread({}, props), {}, {
-    to: generatePath(props.to, params)
+    to: to
   });
   return /*#__PURE__*/React.createElement(Navigate, _extends({
     replace: true

package/dist/server.d.ts

@@ -1,2 +1,15 @@
-import { IRootComponentOptions } from './types';
-export declare function getClientRootComponent(opts: IRootComponentOptions): Promise<JSX.Element>;
+import type { IMetadata } from '@umijs/server/dist/types';
+import { IRouteComponents, IRoutesById } from './types';
+interface IHtmlProps {
+    routes: IRoutesById;
+    routeComponents: IRouteComponents;
+    pluginManager: any;
+    location: string;
+    loaderData: {
+        [routeKey: string]: any;
+    };
+    manifest: any;
+    metadata?: IMetadata;
+}
+export declare function getClientRootComponent(opts: IHtmlProps): Promise<JSX.Element>;
+export {};

package/dist/server.js

@@ -5,7 +5,6 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom/server';
 import { AppContext } from "./appContext";
 import { Routes } from "./browser";
-import { Html } from "./html";
 import { createClientRoutes } from "./routes";
 // Get the root React component for ReactDOMServer.renderToString
 export function getClientRootComponent(_x) {
@@ -18,18 +17,11 @@ function _getClientRootComponent() {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           basename = '/';
-          components = _objectSpread({}, opts.routeComponents); // todo 参数对齐
+          components = _objectSpread({}, opts.routeComponents);
           clientRoutes = createClientRoutes({
             routesById: opts.routes,
             routeComponents: components
           });
-          opts.pluginManager.applyPlugins({
-            key: 'patchClientRoutes',
-            type: 'event',
-            args: {
-              routes: clientRoutes
-            }
-          });
           rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
             basename: basename,
             location: opts.location
@@ -57,11 +49,54 @@ function _getClientRootComponent() {
             }
           }, rootContainer);
           return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, opts, app));
-        case 8:
+        case 7:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
   return _getClientRootComponent.apply(this, arguments);
+}
+function Html(_ref) {
+  var _metadata$keywords, _metadata$metas;
+  var children = _ref.children,
+    loaderData = _ref.loaderData,
+    manifest = _ref.manifest,
+    metadata = _ref.metadata;
+  // TODO: 处理 head 标签，比如 favicon.ico 的一致性
+  // TODO: root 支持配置
+
+  return /*#__PURE__*/React.createElement("html", {
+    lang: (metadata === null || metadata === void 0 ? void 0 : metadata.lang) || 'en'
+  }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
+    charSet: "utf-8"
+  }), /*#__PURE__*/React.createElement("meta", {
+    name: "viewport",
+    content: "width=device-width, initial-scale=1"
+  }), (metadata === null || metadata === void 0 ? void 0 : metadata.title) && /*#__PURE__*/React.createElement("title", null, metadata.title), (metadata === null || metadata === void 0 ? void 0 : metadata.description) && /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    content: metadata.description
+  }), (metadata === null || metadata === void 0 || (_metadata$keywords = metadata.keywords) === null || _metadata$keywords === void 0 ? void 0 : _metadata$keywords.length) && /*#__PURE__*/React.createElement("meta", {
+    name: "keywords",
+    content: metadata.keywords.join(',')
+  }), metadata === null || metadata === void 0 || (_metadata$metas = metadata.metas) === null || _metadata$metas === void 0 ? void 0 : _metadata$metas.map(function (em) {
+    return /*#__PURE__*/React.createElement("meta", {
+      key: em.name,
+      name: em.name,
+      content: em.content
+    });
+  }), manifest.assets['umi.css'] && /*#__PURE__*/React.createElement("link", {
+    rel: "stylesheet",
+    href: manifest.assets['umi.css']
+  })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
+    dangerouslySetInnerHTML: {
+      __html: "<b>Enable JavaScript to run this app.</b>"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "root"
+  }, children), /*#__PURE__*/React.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData))
+    }
+  })));
 }

package/dist/types.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { IhtmlPageOpts } from '@umijs/server/dist/types';
 import type { RouteMatch, RouteObject } from 'react-router-dom';
 export interface IRouteSSRProps {
     clientLoader?: () => Promise<any>;
@@ -34,35 +33,3 @@ export interface IRouteComponents {
 export interface ILoaderData {
     [routeKey: string]: any;
 }
-interface IHtmlHydrateOptions {
-    htmlPageOpts?: IhtmlPageOpts;
-    renderFromRoot?: boolean;
-    mountElementId?: string;
-}
-export interface IRootComponentOptions extends IHtmlHydrateOptions {
-    routes: IRoutesById;
-    routeComponents: IRouteComponents;
-    pluginManager: any;
-    location: string;
-    loaderData: {
-        [routeKey: string]: any;
-    };
-    manifest: any;
-}
-export interface IHtmlProps extends IHtmlHydrateOptions {
-    children?: React.ReactNode;
-    loaderData?: {
-        [routeKey: string]: any;
-    };
-    manifest?: any;
-}
-export declare type IScript = Partial<{
-    async: boolean;
-    charset: string;
-    content: string;
-    crossOrigin: string | null;
-    defer: boolean;
-    src: string;
-    type: string;
-}> | string;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-canary.20240509.4",
+  "version": "4.0.0-canary.20240511.1",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",

package/dist/html.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IHtmlProps } from './types';
-export declare function Html({ children, loaderData, manifest, htmlPageOpts, renderFromRoot, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;

package/dist/html.js

@@ -1,148 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["content"],
-  _excluded2 = ["content"];
-import React from 'react';
-var RE_URL = /^(http:|https:)?\/\//;
-function isUrl(str) {
-  return RE_URL.test(str) || str.startsWith('/') && !str.startsWith('/*') || str.startsWith('./') || str.startsWith('../');
-}
-function normalizeScripts(script) {
-  var extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (typeof script === 'string') {
-    return isUrl(script) ? _objectSpread({
-      src: script
-    }, extraProps) : {
-      content: script
-    };
-  } else if (_typeof(script) === 'object') {
-    return _objectSpread(_objectSpread({}, script), extraProps);
-  } else {
-    throw new Error("Invalid script type: ".concat(_typeof(script)));
-  }
-}
-function generatorStyle(style) {
-  return isUrl(style) ? {
-    type: 'link',
-    href: style
-  } : {
-    type: 'style',
-    content: style
-  };
-}
-var HydrateMetadata = function HydrateMetadata(props) {
-  var _htmlPageOpts$favicon, _htmlPageOpts$keyword, _htmlPageOpts$metas, _htmlPageOpts$links, _htmlPageOpts$styles, _htmlPageOpts$headScr;
-  var htmlPageOpts = props.htmlPageOpts;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.title) && /*#__PURE__*/React.createElement("title", null, htmlPageOpts.title), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$favicon = htmlPageOpts.favicons) === null || _htmlPageOpts$favicon === void 0 ? void 0 : _htmlPageOpts$favicon.map(function (favicon, key) {
-    return /*#__PURE__*/React.createElement("link", {
-      key: key,
-      rel: "shortcut icon",
-      href: favicon
-    });
-  }), (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.description) && /*#__PURE__*/React.createElement("meta", {
-    name: "description",
-    content: htmlPageOpts.description
-  }), (htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$keyword = htmlPageOpts.keywords) === null || _htmlPageOpts$keyword === void 0 ? void 0 : _htmlPageOpts$keyword.length) && /*#__PURE__*/React.createElement("meta", {
-    name: "keywords",
-    content: htmlPageOpts.keywords.join(',')
-  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$metas = htmlPageOpts.metas) === null || _htmlPageOpts$metas === void 0 ? void 0 : _htmlPageOpts$metas.map(function (em) {
-    return /*#__PURE__*/React.createElement("meta", {
-      key: em.name,
-      name: em.name,
-      content: em.content
-    });
-  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$links = htmlPageOpts.links) === null || _htmlPageOpts$links === void 0 ? void 0 : _htmlPageOpts$links.map(function (link, key) {
-    return /*#__PURE__*/React.createElement("link", _extends({
-      key: key
-    }, link));
-  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$styles = htmlPageOpts.styles) === null || _htmlPageOpts$styles === void 0 ? void 0 : _htmlPageOpts$styles.map(function (style, key) {
-    var _generatorStyle = generatorStyle(style),
-      type = _generatorStyle.type,
-      href = _generatorStyle.href,
-      content = _generatorStyle.content;
-    if (type === 'link') {
-      return /*#__PURE__*/React.createElement("link", {
-        key: key,
-        rel: "stylesheet",
-        href: href
-      });
-    } else if (type === 'style') {
-      return /*#__PURE__*/React.createElement("style", {
-        key: key
-      }, content);
-    }
-  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$headScr = htmlPageOpts.headScripts) === null || _htmlPageOpts$headScr === void 0 ? void 0 : _htmlPageOpts$headScr.map(function (script, key) {
-    var _normalizeScripts = normalizeScripts(script),
-      content = _normalizeScripts.content,
-      rest = _objectWithoutProperties(_normalizeScripts, _excluded);
-    return /*#__PURE__*/React.createElement("script", _extends({
-      dangerouslySetInnerHTML: {
-        __html: content
-      },
-      key: key
-    }, rest));
-  }));
-};
-export function Html(_ref) {
-  var _htmlPageOpts$scripts;
-  var children = _ref.children,
-    loaderData = _ref.loaderData,
-    manifest = _ref.manifest,
-    htmlPageOpts = _ref.htmlPageOpts,
-    renderFromRoot = _ref.renderFromRoot,
-    mountElementId = _ref.mountElementId;
-  // TODO: 处理 head 标签，比如 favicon.ico 的一致性
-  // TODO: root 支持配置
-  if (renderFromRoot) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HydrateMetadata, {
-      htmlPageOpts: htmlPageOpts
-    }), /*#__PURE__*/React.createElement("div", {
-      id: mountElementId
-    }, children));
-  }
-  var serverBuildManifest = typeof window === 'undefined' ? manifest :
-  // @ts-ignore
-  window.__UMI_BUILD_MANIFEST_DATA__;
-  return (
-    /*#__PURE__*/
-    // FIXME: Resolve the hydrate warning for suppressHydrationWarning(3)
-    React.createElement("html", {
-      suppressHydrationWarning: true,
-      lang: (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.lang) || 'en'
-    }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
-      charSet: "utf-8"
-    }), /*#__PURE__*/React.createElement("meta", {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1"
-    }), (serverBuildManifest === null || serverBuildManifest === void 0 ? void 0 : serverBuildManifest.assets['umi.css']) && /*#__PURE__*/React.createElement("link", {
-      suppressHydrationWarning: true,
-      rel: "stylesheet",
-      href: manifest === null || manifest === void 0 ? void 0 : manifest.assets['umi.css']
-    }), /*#__PURE__*/React.createElement(HydrateMetadata, {
-      htmlPageOpts: htmlPageOpts
-    })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
-      dangerouslySetInnerHTML: {
-        __html: "<b>Enable JavaScript to run this app.</b>"
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      id: mountElementId
-    }, children), /*#__PURE__*/React.createElement("script", {
-      suppressHydrationWarning: true,
-      dangerouslySetInnerHTML: {
-        __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData || {}), "; window.__UMI_METADATA_LOADER_DATA__ = ").concat(JSON.stringify(htmlPageOpts || {}), "; window.__UMI_BUILD_MANIFEST_DATA__ = ").concat(JSON.stringify(manifest) || {})
-      }
-    }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$scripts = htmlPageOpts.scripts) === null || _htmlPageOpts$scripts === void 0 ? void 0 : _htmlPageOpts$scripts.map(function (script, key) {
-      var _normalizeScripts2 = normalizeScripts(script),
-        content = _normalizeScripts2.content,
-        rest = _objectWithoutProperties(_normalizeScripts2, _excluded2);
-      return /*#__PURE__*/React.createElement("script", _extends({
-        dangerouslySetInnerHTML: {
-          __html: content
-        },
-        key: key
-      }, rest));
-    })))
-  );
-}