@4399ywkf/core 5.0.20 → 5.0.21

package/dist/index.js

@@ -3659,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"] : []
   ];
@@ -3904,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}";
@@ -3921,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";
@@ -3936,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;