@umijs/renderer-react 4.0.0-canary.20240305.1 → 4.0.0-canary.20240402.1

package/dist/browser.d.ts

@@ -18,11 +18,21 @@ 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,6 +7,7 @@ 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;
 
@@ -247,7 +248,15 @@ export function renderClient(opts) {
   // 为了测试，直接返回组件
   if (opts.components) return Browser;
   if (opts.hydrate) {
-    ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/React.createElement(Browser, null));
+    // @ts-ignore
+    var loaderData = window.__UMI_LOADER_DATA__ || {};
+    // @ts-ignore
+    var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
+    ReactDOM.hydrateRoot(opts.renderFromRoot ? rootElement : document, /*#__PURE__*/React.createElement(Html, {
+      metadata: metadata,
+      loaderData: loaderData,
+      mountElementId: opts.mountElementId
+    }, /*#__PURE__*/React.createElement(Browser, null)));
     return;
   }
   if (ReactDOM.createRoot) {

package/dist/dataFetcher.js

@@ -7,7 +7,8 @@ export function fetchServerLoader(_ref) {
     url: window.location.href
   }).toString();
   // 在有basename的情况下__serverLoader的请求路径需要加上basename
-  var url = "".concat(withEndSlash(basename), "__serverLoader?").concat(query);
+  // FIXME: 先临时解自定义 serverLoader 请求路径的问题，后续改造 serverLoader 时再提取成类似 runtimeServerLoader 的配置项
+  var url = "".concat(withEndSlash(window.umiServerLoaderPath || basename), "__serverLoader?").concat(query);
   fetch(url, {
     credentials: 'include'
   }).then(function (d) {

package/dist/html.d.ts

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

package/dist/html.js

@@ -0,0 +1,139 @@
+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 _tplOpts$favicons, _tplOpts$keywords, _tplOpts$metas, _tplOpts$links, _tplOpts$styles, _tplOpts$headScripts;
+  var tplOpts = props.tplOpts;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.title) && /*#__PURE__*/React.createElement("title", null, tplOpts.title), tplOpts === null || tplOpts === void 0 || (_tplOpts$favicons = tplOpts.favicons) === null || _tplOpts$favicons === void 0 ? void 0 : _tplOpts$favicons.map(function (favicon, key) {
+    return /*#__PURE__*/React.createElement("link", {
+      key: key,
+      rel: "shortcut icon",
+      href: favicon
+    });
+  }), (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.description) && /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    content: tplOpts.description
+  }), (tplOpts === null || tplOpts === void 0 || (_tplOpts$keywords = tplOpts.keywords) === null || _tplOpts$keywords === void 0 ? void 0 : _tplOpts$keywords.length) && /*#__PURE__*/React.createElement("meta", {
+    name: "keywords",
+    content: tplOpts.keywords.join(',')
+  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$metas = tplOpts.metas) === null || _tplOpts$metas === void 0 ? void 0 : _tplOpts$metas.map(function (em) {
+    return /*#__PURE__*/React.createElement("meta", {
+      key: em.name,
+      name: em.name,
+      content: em.content
+    });
+  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$links = tplOpts.links) === null || _tplOpts$links === void 0 ? void 0 : _tplOpts$links.map(function (link, key) {
+    return /*#__PURE__*/React.createElement("link", _extends({
+      key: key
+    }, link));
+  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$styles = tplOpts.styles) === null || _tplOpts$styles === void 0 ? void 0 : _tplOpts$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);
+    }
+  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$headScripts = tplOpts.headScripts) === null || _tplOpts$headScripts === void 0 ? void 0 : _tplOpts$headScripts.map(function (script, key) {
+    var _normalizeScripts = normalizeScripts(script),
+      content = _normalizeScripts.content,
+      rest = _objectWithoutProperties(_normalizeScripts, _excluded);
+    return /*#__PURE__*/React.createElement("script", _extends({
+      key: key
+    }, rest), content);
+  }));
+};
+export function Html(_ref) {
+  var _tplOpts$scripts;
+  var children = _ref.children,
+    loaderData = _ref.loaderData,
+    manifest = _ref.manifest,
+    tplOpts = _ref.tplOpts,
+    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, {
+      tplOpts: tplOpts
+    }), /*#__PURE__*/React.createElement("div", {
+      id: mountElementId
+    }, children));
+  }
+  // @ts-ignore
+  var serverBuildManifest = typeof window === 'undefined' ? manifest :
+  // @ts-ignore
+  window.__UMI_BUILD_MANIFEST_DATA__;
+  return /*#__PURE__*/React.createElement("html", {
+    suppressHydrationWarning: true,
+    lang: (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.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, {
+    tplOpts: tplOpts
+  })), /*#__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(tplOpts || {}), "; window.__UMI_BUILD_MANIFEST_DATA__ = ").concat(JSON.stringify(manifest) || {})
+    }
+  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$scripts = tplOpts.scripts) === null || _tplOpts$scripts === void 0 ? void 0 : _tplOpts$scripts.map(function (script, key) {
+    var _normalizeScripts2 = normalizeScripts(script),
+      content = _normalizeScripts2.content,
+      rest = _objectWithoutProperties(_normalizeScripts2, _excluded2);
+    return /*#__PURE__*/React.createElement("script", _extends({
+      key: key
+    }, rest), content);
+  })));
+}

package/dist/server.d.ts

@@ -1,15 +1,2 @@
-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 {};
+import { IRootComponentOptions } from './types';
+export declare function getClientRootComponent(opts: IRootComponentOptions): Promise<JSX.Element>;

package/dist/server.js

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

package/package.json

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