chore: renderFromRoot to __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED

umijs · May 13, 2024 · 2017c13 · 2017c13
1 parent ec2be86
commit 2017c13
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 32 deletions.
diff --git a/examples/ssr-demo/.umirc.ts b/examples/ssr-demo/.umirc.ts
@@ -9,7 +9,7 @@ export default {
   scripts: [`https://a.com/b.js`],
   ssr: {
     builder: 'webpack',
-    renderFromRoot: false,
+    __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: false,
   },
   exportStatic: {},
   styles: [`body { color: red; }`, `https://a.com/b.css`],

diff --git a/packages/preset-umi/src/commands/build.ts b/packages/preset-umi/src/commands/build.ts
@@ -179,8 +179,9 @@ umi build --clean
         const { vite } = api.args;
         const args = await getMarkupArgs({ api });
 
-        // renderFromRoot = true, 将 html 中的 title, metas 标签逻辑全部交给 metadataLoader 合并逻辑处理
-        const markupArgs = api.config.ssr?.renderFromRoot
+        // __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = true, 将 html 中的 title, metas 标签逻辑全部交给 metadataLoader 合并逻辑处理
+        const markupArgs = api.config.ssr
+          ?.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
           ? (omit(args, [
               MetadataLoaderOmitKeys.Title,
               MetadataLoaderOmitKeys.Meta,

diff --git a/packages/preset-umi/src/features/ssr/ssr.ts b/packages/preset-umi/src/features/ssr/ssr.ts
@@ -29,7 +29,7 @@ export default (api: IApi) => {
             serverBuildTarget: zod.enum(['express', 'worker']),
             platform: zod.string(),
             builder: zod.enum(['esbuild', 'webpack']),
-            renderFromRoot: zod.boolean(),
+            __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: zod.boolean(),
           })
           .deepPartial();
       },

diff --git a/packages/preset-umi/src/features/tmpFiles/tmpFiles.ts b/packages/preset-umi/src/features/tmpFiles/tmpFiles.ts
@@ -489,7 +489,8 @@ if (process.env.NODE_ENV === 'development') {
       const umiPluginPath = winPath(join(umiDir, 'client/client/plugin.js'));
       const umiServerPath = winPath(require.resolve('@umijs/server/dist/ssr'));
 
-      const renderFromRoot = api.config.ssr?.renderFromRoot ?? false;
+      const __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED =
+        api.config.ssr?.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ?? false;
       const mountElementId = api.config.mountElementId;
 
       const routesWithServerLoader = Object.keys(routes).reduce<
@@ -537,7 +538,7 @@ if (process.env.NODE_ENV === 'development') {
             metas,
             scripts: scripts || [],
           }),
-          renderFromRoot,
+          __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
           mountElementId,
         },
       });

diff --git a/packages/preset-umi/templates/server.tpl b/packages/preset-umi/templates/server.tpl
@@ -55,7 +55,7 @@ const createOpts = {
   createHistory,
   ServerInsertedHTMLContext,
   htmlPageOpts: {{{htmlPageOpts}}},
-  renderFromRoot: {{{renderFromRoot}}},
+  __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {{{__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED}}},
   mountElementId: '{{{mountElementId}}}'
 
 };

diff --git a/packages/renderer-react/src/browser.tsx b/packages/renderer-react/src/browser.tsx
@@ -102,10 +102,9 @@ export type RenderClientOpts = {
    */
   rootElement?: HTMLElement;
   /**
-   * ssr 是否从 app root 根节点开始 render
-   * @doc 默认 false, 从 app root 开始 render，为 true 时从 html 开始
+   * 内部流程, 渲染特殊 html 节点, 不要使用!!!
    */
-  renderFromRoot?: boolean;
+  __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
   /**
    * 当前的路由配置
    */
@@ -391,7 +390,9 @@ export function renderClient(opts: RenderClientOpts) {
     };
 
     ReactDOM.hydrateRoot(
-      opts.renderFromRoot ? rootElement : document,
+      opts.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        ? rootElement
+        : document,
       <Html {...hydtateHtmloptions}>
         <Browser />
       </Html>,

diff --git a/packages/renderer-react/src/html.tsx b/packages/renderer-react/src/html.tsx
@@ -11,7 +11,23 @@ function isUrl(str: string) {
     str.startsWith('../')
   );
 }
-
+const GlobalDataScript = (props: IHtmlProps) => {
+  const { loaderData, htmlPageOpts, manifest } = props;
+  return (
+    <script
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{
+        __html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(
+          loaderData || {},
+        )}; window.__UMI_METADATA_LOADER_DATA__ = ${JSON.stringify(
+          htmlPageOpts || {},
+        )}; window.__UMI_BUILD_MANIFEST_DATA__ = ${
+          JSON.stringify(manifest) || {}
+        }`,
+      }}
+    />
+  );
+};
 function normalizeScripts(script: IScript, extraProps = {}) {
   if (typeof script === 'string') {
     return isUrl(script)
@@ -86,17 +102,30 @@ export function Html({
   loaderData,
   manifest,
   htmlPageOpts,
-  renderFromRoot,
+  __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   mountElementId,
 }: React.PropsWithChildren<IHtmlProps>) {
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
-  if (renderFromRoot) {
+  if (__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
     return (
-      <>
-        <HydrateMetadata htmlPageOpts={htmlPageOpts} />
-        <div id={mountElementId}>{children}</div>
-      </>
+      <html>
+        <head></head>
+        <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<b>Enable JavaScript to run this app.</b>`,
+            }}
+          />
+
+          <div id={mountElementId}>{children}</div>
+          <GlobalDataScript
+            manifest={manifest}
+            loaderData={loaderData}
+            htmlPageOpts={htmlPageOpts}
+          />
+        </body>
+      </html>
     );
   }
 
@@ -127,17 +156,10 @@ export function Html({
         />
 
         <div id={mountElementId}>{children}</div>
-        <script
-          suppressHydrationWarning
-          dangerouslySetInnerHTML={{
-            __html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(
-              loaderData || {},
-            )}; window.__UMI_METADATA_LOADER_DATA__ = ${JSON.stringify(
-              htmlPageOpts || {},
-            )}; window.__UMI_BUILD_MANIFEST_DATA__ = ${
-              JSON.stringify(manifest) || {}
-            }`,
-          }}
+        <GlobalDataScript
+          manifest={manifest}
+          loaderData={loaderData}
+          htmlPageOpts={htmlPageOpts}
         />
 
         {htmlPageOpts?.scripts?.map((script: IScript, key: number) => {

diff --git a/packages/renderer-react/src/types.ts b/packages/renderer-react/src/types.ts
@@ -63,7 +63,7 @@ export interface ILoaderData {
 
 interface IHtmlHydrateOptions {
   htmlPageOpts?: IhtmlPageOpts;
-  renderFromRoot?: boolean;
+  __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
   mountElementId?: string;
 }
 

diff --git a/packages/server/src/ssr.ts b/packages/server/src/ssr.ts
@@ -47,7 +47,7 @@ interface CreateRequestHandlerOptions extends CreateRequestServerlessOptions {
   helmetContext?: any;
   ServerInsertedHTMLContext: React.Context<ServerInsertedHTMLHook | null>;
   htmlPageOpts: IhtmlPageOpts;
-  renderFromRoot: boolean;
+  __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: boolean;
   mountElementId: string;
 }
 
@@ -161,7 +161,8 @@ function createJSXGenerator(opts: CreateRequestHandlerOptions) {
       manifest,
       loaderData,
       htmlPageOpts: opts.htmlPageOpts,
-      renderFromRoot: opts.renderFromRoot,
+      __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:
+        opts.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
       mountElementId: opts.mountElementId,
     };
     const element = (await opts.getClientRootComponent(