fix: NormalizeMeta component for render root

umijs · Apr 1, 2024 · b1de641 · b1de641
1 parent 20c4472
commit b1de641
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 39 deletions.
diff --git a/packages/renderer-react/src/html.tsx b/packages/renderer-react/src/html.tsx
@@ -36,55 +36,74 @@ function generatorStyle(style: string) {
     : { type: 'style', content: style };
 }
 
+const NormalizeMetadata = (props: IHtmlProps) => {
+  const { metadata } = props;
+  return (
+    <>
+      {metadata?.title && <title>{metadata.title}</title>}
+      {metadata?.favicons?.map((favicon: string, key: number) => {
+        return <link key={key} rel="shortcut icon" href={favicon} />;
+      })}
+      {metadata?.description && (
+        <meta name="description" content={metadata.description} />
+      )}
+      {metadata?.keywords?.length && (
+        <meta name="keywords" content={metadata.keywords.join(',')} />
+      )}
+      {metadata?.metas?.map((em: any) => (
+        <meta key={em.name} name={em.name} content={em.content} />
+      ))}
+
+      {metadata?.links?.map((link: Record<string, string>, key: number) => {
+        return <link key={key} {...link} />;
+      })}
+      {metadata?.styles?.map((style: string, key: number) => {
+        const { type, href, content } = generatorStyle(style);
+        if (type === 'link') {
+          return <link key={key} rel="stylesheet" href={href} />;
+        } else if (type === 'style') {
+          return <style key={key}>{content}</style>;
+        }
+      })}
+      {metadata?.headScripts?.map((script: IScript, key: number) => {
+        const { content, ...rest } = normalizeScripts(script);
+        return (
+          <script key={key} {...(rest as any)}>
+            {content}
+          </script>
+        );
+      })}
+    </>
+  );
+};
+
 export function Html({
   children,
   loaderData,
   manifest,
   metadata,
+  renderFromRoot,
 }: React.PropsWithChildren<IHtmlProps>) {
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
+
+  if (renderFromRoot) {
+    return (
+      <>
+        <NormalizeMetadata metadata={metadata} />
+        <div id="root">{children}</div>
+      </>
+    );
+  }
   return (
     <html lang={metadata?.lang || 'en'}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {metadata?.title && <title>{metadata.title}</title>}
-        {metadata?.favicons?.map((favicon: string, key: number) => {
-          return <link key={key} rel="shortcut icon" href={favicon} />;
-        })}
-        {metadata?.description && (
-          <meta name="description" content={metadata.description} />
-        )}
-        {metadata?.keywords?.length && (
-          <meta name="keywords" content={metadata.keywords.join(',')} />
-        )}
-        {metadata?.metas?.map((em: any) => (
-          <meta key={em.name} name={em.name} content={em.content} />
-        ))}
-
-        {metadata?.links?.map((link: Record<string, string>, key: number) => {
-          return <link key={key} {...link} />;
-        })}
-        {metadata?.styles?.map((style: string, key: number) => {
-          const { type, href, content } = generatorStyle(style);
-          if (type === 'link') {
-            return <link key={key} rel="stylesheet" href={href} />;
-          } else if (type === 'style') {
-            return <style key={key}>{content}</style>;
-          }
-        })}
-        {metadata?.headScripts?.map((script: IScript, key: number) => {
-          const { content, ...rest } = normalizeScripts(script);
-          return (
-            <script key={key} {...(rest as any)}>
-              {content}
-            </script>
-          );
-        })}
         {manifest?.assets['umi.css'] && (
           <link rel="stylesheet" href={manifest?.assets['umi.css']} />
         )}
+        {normalizeMetadata(metadata)}
       </head>
       <body>
         <noscript

diff --git a/packages/renderer-react/src/server.tsx b/packages/renderer-react/src/server.tsx
@@ -50,9 +50,5 @@ export async function getClientRootComponent(opts: IRootComponentOptions) {
       {rootContainer}
     </AppContext.Provider>
   );
-  if (!opts.renderFromRoot) {
-    return <Html {...opts}>{app}</Html>;
-  } else {
-    return app;
-  }
+  return <Html {...opts}>{app}</Html>;
 }
diff --git a/packages/renderer-react/src/types.ts b/packages/renderer-react/src/types.ts
@@ -55,10 +55,11 @@ export interface IRootComponentOptions {
 }
 
 export interface IHtmlProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   loaderData?: { [routeKey: string]: any };
   manifest?: any;
   metadata?: IMetadata;
+  renderFromRoot?: boolean;
 }
 
 export type IScript =