fix: Injection should support repeat injection (#99)

* docs: add demo of animation * test: test driven * fix: injection not reload * docs: update with salt
ant-design · Mar 23, 2023 · 0c91395 · 0c91395
1 parent 490f5cd
commit 0c91395
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 40 deletions.
diff --git a/docs/examples/shadow.tsx b/docs/examples/shadow.tsx
@@ -1,12 +1,19 @@
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { StyleProvider } from '@ant-design/cssinjs';
 import Button from './components/Button';
+import Spin from './components/Spin';
+import { DesignTokenContext } from './components/theme';
 
 export default function App() {
+  const [visible, setVisible] = React.useState(true);
   const pRef = React.useRef<HTMLParagraphElement>(null);
 
   React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
     const rootElement = document.createElement('div');
     pRef.current?.parentElement?.appendChild(rootElement);
 
@@ -18,15 +25,33 @@ export default function App() {
 
     root.render(
       <React.StrictMode>
-        <StyleProvider container={shadowRoot}>
-          <div style={{ border: '6px solid #000', padding: 8 }}>
-            <h1>Shadow Root!</h1>
-            <Button type="primary">Hello World!</Button>
-          </div>
-        </StyleProvider>
+        <DesignTokenContext.Provider value={{ hashed: true }}>
+          <StyleProvider container={shadowRoot} cache={createCache()}>
+            <div style={{ border: '6px solid #000', padding: 8 }}>
+              <h1>Shadow Root!</h1>
+              <Button type="primary">Hello World!</Button>
+              <Spin />
+            </div>
+          </StyleProvider>
+        </DesignTokenContext.Provider>
       </React.StrictMode>,
     );
-  }, []);
 
-  return <p ref={pRef} />;
+    return () => {
+      rootElement.remove();
+    };
+  }, [visible]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setVisible(!visible);
+        }}
+      >
+        Trigger {String(visible)}
+      </button>
+      <p ref={pRef} />
+    </>
+  );
 }
diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx
@@ -128,18 +128,6 @@ export interface ParseInfo {
   parentSelectors: string[];
 }
 
-// Global effect style will mount once and not removed
-// The effect will not save in SSR cache (e.g. keyframes)
-const globalEffectStyleKeys = new Set();
-
-/**
- * @private Test only. Clear the global effect style keys.
- */
-export const _cf =
-  process.env.NODE_ENV !== 'production'
-    ? () => globalEffectStyleKeys.clear()
-    : undefined;
-
 // Parse CSSObject to style content
 export const parseStyle = (
   interpolation: CSSInterpolation,
@@ -408,20 +396,15 @@ export default function useStyleRegister(
 
         // Inject client side effect style
         Object.keys(effectStyle).forEach((effectKey) => {
-          if (!globalEffectStyleKeys.has(effectKey)) {
-            globalEffectStyleKeys.add(effectKey);
-
-            // Inject
-            updateCSS(
-              normalizeStyle(effectStyle[effectKey]),
-              `_effect-${effectKey}`,
-              {
-                mark: ATTR_MARK,
-                prepend: 'queue',
-                attachTo: container,
-              },
-            );
-          }
+          updateCSS(
+            normalizeStyle(effectStyle[effectKey]),
+            `_effect-${effectKey}`,
+            {
+              mark: ATTR_MARK,
+              prepend: 'queue',
+              attachTo: container,
+            },
+          );
         });
       }
 

diff --git a/tests/animation.spec.tsx b/tests/animation.spec.tsx
@@ -1,8 +1,14 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
-import { Theme, useCacheToken, useStyleRegister, Keyframes } from '../src';
+import * as React from 'react';
 import type { CSSInterpolation } from '../src';
-import { _cf } from '../src/hooks/useStyleRegister';
+import {
+  createCache,
+  Keyframes,
+  StyleProvider,
+  Theme,
+  useCacheToken,
+  useStyleRegister,
+} from '../src';
 
 interface DesignToken {
   primaryColor: string;
@@ -34,8 +40,6 @@ describe('animation', () => {
     styles.forEach((style) => {
       style.parentNode?.removeChild(style);
     });
-
-    _cf!();
   });
 
   describe('without hashed', () => {
@@ -174,4 +178,45 @@ describe('animation', () => {
       );
     });
   });
+
+  it('re-mount should not missing animation style', () => {
+    function genComp(cls: string) {
+      return () => {
+        const [token, hashId] = useCacheToken(theme, [baseToken], {
+          salt: 're-mount',
+        });
+
+        useStyleRegister({ theme, token, path: [cls], hashId }, () => [
+          animation,
+        ]);
+
+        return <div className="box" />;
+      };
+    }
+
+    const Box1 = genComp('box1');
+    const Box2 = genComp('box2');
+
+    // Fist render
+    render(
+      <StyleProvider cache={createCache()}>
+        <Box1 />
+        <Box2 />
+      </StyleProvider>,
+    );
+
+    expect(document.querySelectorAll('style')).toHaveLength(3);
+
+    // Clean up
+    document.head.innerHTML = '';
+
+    // Render again
+    render(
+      <StyleProvider cache={createCache()}>
+        <Box1 />
+        <Box2 />
+      </StyleProvider>,
+    );
+    expect(document.querySelectorAll('style')).toHaveLength(3);
+  });
 });