@4399ywkf/core 5.0.19 → 5.0.21

package/dist/index.js

@@ -3594,12 +3594,18 @@ var themePlugin = createPlugin((options = {}) => ({
       order: 10,
     }`;
         if (code.includes("providers: []")) {
-          code = code.replace("providers: []", `providers: [
+          code = code.replace(
+            "providers: []",
+            `providers: [
 ${providerEntry},
-  ]`);
+  ]`
+          );
         } else if (code.includes("providers: [")) {
-          code = code.replace("providers: [", `providers: [
-${providerEntry},`);
+          code = code.replace(
+            "providers: [",
+            `providers: [
+${providerEntry},`
+          );
         }
         if (!code.includes("import React")) {
           code = code.replace(
@@ -3629,13 +3635,23 @@ function generateThemeProvider(opts) {
   sections.push(`// \u6B64\u6587\u4EF6\u7531 @4399ywkf/plugin-theme v3 \u81EA\u52A8\u751F\u6210\uFF0C\u8BF7\u52FF\u624B\u52A8\u4FEE\u6539`);
   sections.push(buildImports({ globalReset, cssVar }));
   sections.push(TYPES_CODE);
-  sections.push(buildStoreCode({ defaultAppearance, primaryColor, neutralColor }));
+  sections.push(
+    buildStoreCode({ defaultAppearance, primaryColor, neutralColor })
+  );
   sections.push(HOOKS_CODE);
   if (globalReset) sections.push(GLOBAL_RESET_CODE);
-  if (cssVar) sections.push(CSS_VAR_SYNC_CODE);
+  if (cssVar) sections.push(buildCssVarSyncCode());
   if (darkMode) sections.push(APPEARANCE_SYNC_CODE);
   if (externalTheme) sections.push(EXTERNAL_THEME_CODE);
-  sections.push(buildWrapperCode({ darkMode, cssVar, globalReset, externalTheme, prefixCls }));
+  sections.push(
+    buildWrapperCode({
+      darkMode,
+      cssVar,
+      globalReset,
+      externalTheme,
+      prefixCls
+    })
+  );
   return sections.join("\n");
 }
 function buildImports(opts) {
@@ -3643,11 +3659,13 @@ function buildImports(opts) {
     "useCallback",
     "useEffect",
     "useMemo",
+    "useState",
     ...opts.cssVar ? ["useLayoutEffect", "useRef"] : [],
     "type ReactNode"
   ];
   const antdStyleImports = [
     "ThemeProvider as AntdThemeProvider",
+    "StyleProvider",
     "type GetAntdTheme",
     ...opts.globalReset ? ["createGlobalStyle", "css"] : []
   ];
@@ -3777,10 +3795,15 @@ const GlobalReset = createGlobalStyle(({ theme }) => css\`
     -webkit-text-fill-color: unset !important;
   }
 \`);`;
-var CSS_VAR_SYNC_CODE = `
+function buildCssVarSyncCode() {
+  return `
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CSS Variable Sync \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
-const CSS_VAR_PREFIX = "css-var-";
+const CSS_VAR_CLASS_RE = /(^|-)css-var(-|$)/;
+
+function isCssVarClassName(className: string): boolean {
+  return CSS_VAR_CLASS_RE.test(className);
+}
 
 function useCssVarSync(ref: React.RefObject<HTMLDivElement | null>) {
   useLayoutEffect(() => {
@@ -3791,18 +3814,28 @@ function useCssVarSync(ref: React.RefObject<HTMLDivElement | null>) {
     let currentClasses: string[] = [];
 
     const sync = () => {
-      for (const cls of currentClasses) htmlEl.classList.remove(cls);
+      for (const cls of currentClasses) {
+        htmlEl.classList.remove(cls);
+      }
 
-      const next: string[] = [];
+      const nextSet = new Set<string>();
       let el: HTMLElement | null = node;
+
       while (el && el !== htmlEl) {
         for (const cls of el.classList) {
-          if (cls.startsWith(CSS_VAR_PREFIX)) next.push(cls);
+          if (isCssVarClassName(cls)) {
+            nextSet.add(cls);
+          }
         }
         el = el.parentElement;
       }
 
-      for (const cls of next) htmlEl.classList.add(cls);
+      const next = Array.from(nextSet);
+
+      for (const cls of next) {
+        htmlEl.classList.add(cls);
+      }
+
       currentClasses = next;
     };
 
@@ -3817,10 +3850,13 @@ function useCssVarSync(ref: React.RefObject<HTMLDivElement | null>) {
 
     return () => {
       observer.disconnect();
-      for (const cls of currentClasses) htmlEl.classList.remove(cls);
+      for (const cls of currentClasses) {
+        htmlEl.classList.remove(cls);
+      }
     };
   }, []);
 }`;
+}
 var APPEARANCE_SYNC_CODE = `
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Appearance Sync \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
@@ -3870,9 +3906,21 @@ function buildWrapperCode(opts) {
   const childrenSlot = cssVar ? `<div ref={containerRef} style={{ display: "contents" }}>
         {children}
       </div>` : "{children}";
+  const antdProvider = `<AntdThemeProvider
+      prefixCls={RUNTIME_PREFIX_CLS}
+      appearance={resolvedAppearance}
+      themeMode={appearance}
+      theme={theme}${cssVar ? "\n      customToken={{ cssVar: true }}" : ""}
+    >
+      ${globalReset ? "<GlobalReset />" : ""}
+      ${childrenSlot}
+    </AntdThemeProvider>`;
   return `
 // \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ThemeWrapper \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 
+// \u8FD0\u884C\u65F6\u5224\u65AD\u662F\u5426\u5904\u4E8E Garfish \u5B50\u5E94\u7528\u73AF\u5883\uFF0C\u540C\u4E00 bundle \u652F\u6301\u72EC\u7ACB\u90E8\u7F72\u4E0E\u5FAE\u524D\u7AEF\u4E24\u79CD\u6A21\u5F0F\u3002
+const IS_MICRO_APP = typeof window !== "undefined" && !!(window as any).__GARFISH__;
+
 const RUNTIME_PREFIX_CLS = typeof process !== "undefined"
   && process.env?.YWKF_PREFIX_CLS
   || "${prefixCls}";
@@ -3887,6 +3935,21 @@ export function ThemeWrapper({ children }: ThemeWrapperProps) {${refLine}
     shallow,
   );${cssVarSyncLine}${appearanceSyncLine}${externalThemeLine}
 
+  // \u5FAE\u524D\u7AEF\u6A21\u5F0F\u4E0B\uFF0C\u5C06 CSS-in-JS \u6837\u5F0F\u6CE8\u5165\u5230 Garfish \u5B50\u5E94\u7528\u5BB9\u5668\u800C\u975E document.head\uFF0C
+  // \u907F\u514D\u4E0E\u4E3B\u5E94\u7528\u5171\u4EAB\u7684 @ant-design/cssinjs StyleContext \u4EA7\u751F\u51B2\u7A81\u3002
+  // useState lazy initializer \u540C\u6B65\u8BFB\u53D6\uFF08Garfish \u6302\u8F7D\u65F6\u5BB9\u5668\u5DF2\u63D0\u524D\u521B\u5EFA\uFF09\uFF0C
+  // useEffect \u515C\u5E95\u5904\u7406\u6781\u7AEF\u7ADE\u6001\uFF08\u5982 SSR hydration\uFF09\u3002
+  const [styleContainer, setStyleContainer] = useState<HTMLElement | undefined>(() => {
+    if (!IS_MICRO_APP || typeof document === "undefined") return undefined;
+    return document.getElementById(RUNTIME_PREFIX_CLS)?.parentElement ?? undefined;
+  });
+
+  useEffect(() => {
+    if (!IS_MICRO_APP) return;
+    const el = document.getElementById(RUNTIME_PREFIX_CLS)?.parentElement;
+    if (el) setStyleContainer(el);
+  }, []);
+
   const resolvedAppearance = useMemo(() => {
     if (appearance !== "auto") return appearance;
     if (typeof window === "undefined") return "light";
@@ -3902,17 +3965,13 @@ export function ThemeWrapper({ children }: ThemeWrapperProps) {${refLine}
     [primaryColor, neutralColor],
   );
 
-  return (
-    <AntdThemeProvider
-      prefixCls={RUNTIME_PREFIX_CLS}
-      appearance={resolvedAppearance}
-      themeMode={appearance}
-      theme={theme}${cssVar ? "\n      customToken={{ cssVar: true }}" : ""}
-    >
-      ${globalReset ? "<GlobalReset />" : ""}
-      ${childrenSlot}
-    </AntdThemeProvider>
+  const provider = (
+    ${antdProvider}
   );
+
+  return IS_MICRO_APP && styleContainer ? (
+    <StyleProvider container={styleContainer}>{provider}</StyleProvider>
+  ) : provider;
 }
 
 export default ThemeWrapper;