fix: useId generic logic

ant-design · Apr 15, 2022 · d7f5aaf · d7f5aaf
1 parent acdc8f7
commit d7f5aaf
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 12 deletions.
diff --git a/src/useStyleRegister.tsx b/src/useStyleRegister.tsx
@@ -179,6 +179,10 @@ function uniqueHash(path: (string | number)[], styleStr: string) {
   return hash(`${path.join('%')}${styleStr}`);
 }
 
+function Empty() {
+  return null;
+}
+
 /**
  * Register a style to the global style sheet.
  */
@@ -230,19 +234,25 @@ export default function useStyleRegister(
   );
 
   return (node: React.ReactElement) => {
-    if (isMergedClientSide || !defaultCache) {
-      return node;
-    }
+    let styleNode: React.ReactElement;
 
-    return (
-      <>
+    if (isMergedClientSide || !defaultCache) {
+      styleNode = <Empty />;
+    } else {
+      styleNode = (
         <style
           {...{
             [ATTR_TOKEN]: cachedTokenKey,
             [ATTR_MARK]: cachedStyleId,
           }}
           dangerouslySetInnerHTML={{ __html: cachedStyleStr }}
         />
+      );
+    }
+
+    return (
+      <>
+        {styleNode}
         {node}
       </>
     );

diff --git a/tests/server.spec.tsx b/tests/server.spec.tsx
@@ -62,14 +62,23 @@ describe('SSR', () => {
     },
   });
 
-  const Box = () => {
+  const Box = ({ children }: { children?: React.ReactNode }) => {
     const [token] = useCacheToken<DerivativeToken>(theme, [baseToken]);
 
     const wrapSSR = useStyleRegister({ theme, token, path: ['.box'] }, () => [
       genStyle(token),
     ]);
 
-    return wrapSSR(<div className="box" />);
+    return wrapSSR(<div className="box">{children}</div>);
+  };
+
+  const IdHolder = () => {
+    const id = React.useId();
+    return (
+      <div id={id} className="id">
+        {id}
+      </div>
+    );
   };
 
   it('should not use cache', () => {
@@ -84,13 +93,19 @@ describe('SSR', () => {
 
     const html = renderToString(
       <StyleProvider cache={cache}>
-        <Box />
+        <IdHolder />
+        <Box>
+          <IdHolder />
+        </Box>
+        <IdHolder />
       </StyleProvider>,
     );
 
     const style = extractStyle(cache);
 
-    expect(html).toEqual('<div class="box"></div>');
+    expect(html).toEqual(
+      '<div id=":R1:" class="id">:R1:</div><div class="box"><div id=":Ra:" class="id">:Ra:</div></div><div id=":R3:" class="id">:R3:</div>',
+    );
     expect(style).toEqual(
       '<style data-token-hash="u4cay0" data-css-hash="gn1jfq">.box{background-color:#1890ff;}</style>',
     );
@@ -116,7 +131,11 @@ describe('SSR', () => {
         // Force insert style since we hack `canUseDom` to false
         mock="client"
       >
-        <Box />
+        <IdHolder />
+        <Box>
+          <IdHolder />
+        </Box>
+        <IdHolder />
       </StyleProvider>,
       {
         hydrate: true,
@@ -133,7 +152,11 @@ describe('SSR', () => {
   it('tricky ssr', () => {
     const html = renderToString(
       <StyleProvider>
-        <Box />
+        <IdHolder />
+        <Box>
+          <IdHolder />
+        </Box>
+        <IdHolder />
       </StyleProvider>,
     );
 
@@ -152,7 +175,11 @@ describe('SSR', () => {
         // Force insert style since we hack `canUseDom` to false
         mock="client"
       >
-        <Box />
+        <IdHolder />
+        <Box>
+          <IdHolder />
+        </Box>
+        <IdHolder />
       </StyleProvider>,
       {
         hydrate: true,