openxiangda 1.0.2 → 1.0.4

package/packages/sdk/dist/runtime/index.cjs

@@ -1173,33 +1173,38 @@ var antdTheme = {
 // packages/sdk/src/runtime/react/createReactPage.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var NAMESPACE_ROOT_CLASS = "sy-app-workspace";
+var RUNTIME_PORTAL_ATTR = "data-sy-runtime-portal";
 var PORTAL_CONTAINER_STACK_GLOBAL = "__OPENXIANGDA_PORTAL_CONTAINER_STACK__";
 var PORTAL_CONTAINER_RESOLVER_GLOBAL = "__OPENXIANGDA_GET_PORTAL_CONTAINER__";
 var createRuntimeRoot = (el) => {
   return (0, import_client2.createRoot)(el);
 };
+var isShadowRoot = (rootNode) => typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot;
 var getStyleContainer = (el) => {
   const rootNode = el.getRootNode?.();
-  if (typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot) {
+  if (isShadowRoot(rootNode)) {
     return rootNode;
   }
   return document.head;
 };
-var getRuntimeOverlayContainer = (el) => {
+var getRuntimeRoot = (el, triggerNode) => {
   const rootNode = el.getRootNode?.();
-  const isShadowRoot = typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot;
-  const getNamespaceRoot = (triggerNode) => {
-    if (isShadowRoot) return el;
-    const triggerRoot = triggerNode?.closest?.(
-      `.${NAMESPACE_ROOT_CLASS}`
-    );
-    return triggerRoot || el.closest(`.${NAMESPACE_ROOT_CLASS}`) || el.querySelector(`.${NAMESPACE_ROOT_CLASS}`) || el;
+  if (isShadowRoot(rootNode)) return el;
+  const triggerRoot = triggerNode?.closest?.(
+    `.${NAMESPACE_ROOT_CLASS}`
+  );
+  return triggerRoot || el.closest(`.${NAMESPACE_ROOT_CLASS}`) || el.querySelector(`.${NAMESPACE_ROOT_CLASS}`) || el;
+};
+var getRuntimeOverlayContainer = (el, portalContainer) => {
+  const getOverlayRoot = (triggerNode) => {
+    if (portalContainer?.isConnected) return portalContainer;
+    return getRuntimeRoot(el, triggerNode);
   };
   return {
     getPopupContainer: (triggerNode) => {
-      return getNamespaceRoot(triggerNode);
+      return getOverlayRoot(triggerNode);
     },
-    getTargetContainer: () => getNamespaceRoot()
+    getTargetContainer: () => getRuntimeRoot(el)
   };
 };
 var createAntdConfig = (overlayContainer) => ({
@@ -1210,56 +1215,89 @@ var createAntdConfig = (overlayContainer) => ({
   getPopupContainer: overlayContainer.getPopupContainer,
   getTargetContainer: overlayContainer.getTargetContainer
 });
+var createPortalContainer = (el) => {
+  const rootNode = el.getRootNode?.();
+  const parent = isShadowRoot(rootNode) ? rootNode : el.ownerDocument?.body || document.body;
+  const portalContainer = el.ownerDocument.createElement("div");
+  portalContainer.setAttribute(RUNTIME_PORTAL_ATTR, "");
+  portalContainer.classList.add(NAMESPACE_ROOT_CLASS);
+  parent.appendChild(portalContainer);
+  return portalContainer;
+};
 var installRuntimePortalContainer = (el) => {
   const globalScope = globalThis;
+  const portalContainer = createPortalContainer(el);
   const stack = Array.isArray(globalScope[PORTAL_CONTAINER_STACK_GLOBAL]) ? globalScope[PORTAL_CONTAINER_STACK_GLOBAL] : [];
-  stack.push(el);
+  stack.push(portalContainer);
   globalScope[PORTAL_CONTAINER_STACK_GLOBAL] = stack;
   globalScope[PORTAL_CONTAINER_RESOLVER_GLOBAL] = () => {
     for (let index = stack.length - 1; index >= 0; index -= 1) {
       const candidate = stack[index];
       if (candidate?.isConnected) {
-        return candidate.closest(`.${NAMESPACE_ROOT_CLASS}`) || candidate.querySelector(`.${NAMESPACE_ROOT_CLASS}`) || candidate;
+        return candidate;
       }
     }
-    return document.querySelector(`.${NAMESPACE_ROOT_CLASS}`) || document.body;
+    return document.querySelector(`[${RUNTIME_PORTAL_ATTR}]`) || document.querySelector(`.${NAMESPACE_ROOT_CLASS}`) || document.body;
   };
-  return () => {
-    const position = stack.lastIndexOf(el);
-    if (position >= 0) {
-      stack.splice(position, 1);
+  return {
+    container: portalContainer,
+    release: () => {
+      const position = stack.lastIndexOf(portalContainer);
+      if (position >= 0) {
+        stack.splice(position, 1);
+      }
+      portalContainer.remove();
     }
   };
 };
-var installAntdStaticHolder = (el) => {
+var installAntdStaticHolder = (el, portalContainer) => {
+  const getMessageContainer = () => {
+    if (portalContainer?.isConnected) return portalContainer;
+    return getRuntimeRoot(el);
+  };
   import_antd.ConfigProvider.config({
     prefixCls: "sy-ant",
     iconPrefixCls: "sy-anticon",
     theme: antdTheme,
     holderRender: (children) => {
       if (!el.isConnected) {
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { prefixCls: "sy-ant", iconPrefixCls: "sy-anticon", theme: antdTheme, children });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_antd.ConfigProvider,
+          {
+            prefixCls: "sy-ant",
+            iconPrefixCls: "sy-anticon",
+            theme: antdTheme,
+            children
+          }
+        );
       }
-      const overlayContainer = getRuntimeOverlayContainer(el);
+      const overlayContainer = getRuntimeOverlayContainer(el, portalContainer);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cssinjs.StyleProvider, { hashPriority: "high", container: getStyleContainer(el), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { ...createAntdConfig(overlayContainer), children }) });
     }
   });
+  import_antd.message.config({
+    prefixCls: "sy-ant-message",
+    getContainer: getMessageContainer
+  });
 };
 var createReactPage = (AppComponent) => {
   let root = null;
   let currentContainer = null;
   let releasePortalContainer = null;
+  let portalContainer = null;
   const render = (el, context) => {
     el.classList.add(NAMESPACE_ROOT_CLASS);
-    if (!root || currentContainer !== el) {
+    if (!root || currentContainer !== el || !portalContainer?.isConnected) {
       root?.unmount();
       releasePortalContainer?.();
       root = createRuntimeRoot(el);
       currentContainer = el;
-      releasePortalContainer = installRuntimePortalContainer(el);
+      const portalHandle = installRuntimePortalContainer(el);
+      portalContainer = portalHandle.container;
+      releasePortalContainer = portalHandle.release;
     }
-    const overlayContainer = getRuntimeOverlayContainer(el);
-    installAntdStaticHolder(el);
+    const overlayContainer = getRuntimeOverlayContainer(el, portalContainer);
+    installAntdStaticHolder(el, portalContainer);
     const antdConfig = createAntdConfig(overlayContainer);
     root.render(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cssinjs.StyleProvider, { hashPriority: "high", container: getStyleContainer(el), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { ...antdConfig, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.App, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageProvider, { context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AppComponent, {}) }) }) }) })
@@ -1278,6 +1316,7 @@ var createReactPage = (AppComponent) => {
       root = null;
       currentContainer = null;
       releasePortalContainer = null;
+      portalContainer = null;
     }
   };
 };