update GBadge to fix

dist/remote-ui.js

@@ -1,37 +1,45 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
-import { useRef as s, useEffect as i } from "react";
+import { useRef as i, useEffect as l } from "react";
-const a = "https://uikit.d.aiengines.ir/GBadge.js";
+const f = "https://uikit.d.aiengines.ir/GBadge.js";
 let n = null;
-function u() {
+function m() {
   return n || (n = import(
     /* webpackIgnore: true */
     /* @vite-ignore */
-    a
+    f
-  )), n;
+  ).catch((e) => {
+    throw n = null, e;
+  })), n;
 }
-const m = (o) => {
+function p(e) {
-  const r = s(null);
+  if (typeof e == "string" || typeof e == "number")
-  return i(() => {
+    return e;
-    let e = !0;
+  e != null && console.warn(
-    return u().then((t) => {
+    "[uikit/remote/ui] GBadge only accepts text/number children across the remote boundary."
-      e && r.current && t.mount(r.current, o);
+  );
-    }).catch((t) => {
+}
-      console.error("[uikit/remote/ui] Failed to load GBadge:", t);
+const R = ({ children: e, ...s }) => {
+  const o = i(null), t = i(null), u = i(null);
+  return u.current = {
+    ...s,
+    children: p(e)
+  }, l(() => {
+    let c = !0;
+    return m().then(() => {
+      if (!c || !o.current) return;
+      const r = document.createElement("uikit-g-badge");
+      r.componentProps = u.current, o.current.appendChild(r), t.current = r;
+    }).catch((r) => {
+      console.error("[uikit/remote/ui] Failed to load GBadge:", r);
     }), () => {
-      e = !1;
+      c = !1, t.current && (t.current.remove(), t.current = null);
     };
-  }, [o]), i(() => {
+  }, []), l(() => {
-    const e = r.current;
+    t.current && (t.current.componentProps = u.current);
-    return () => {
+  }), /* @__PURE__ */ a(
-      e && u().then((t) => {
-        t.unmount(e);
-      }).catch(() => {
-      });
-    };
-  }, []), /* @__PURE__ */ c(
     "span",
     {
-      ref: r,
+      ref: o,
       style: {
         display: "contents"
       }
@@ -39,5 +47,5 @@ const m = (o) => {
   );
 };
 export {
-  m as GBadge
+  R as GBadge
 };

src/remote/ui/GBadge.remote.jsx

@@ -2,8 +2,6 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import { Badge, ChakraProvider } from "@chakra-ui/react";
 
-const roots = new WeakMap();
-
 const GBadge = ({ children, ...props }) => {
   return (
     <Badge
@@ -23,26 +21,52 @@ const GBadge = ({ children, ...props }) => {
   );
 };
 
-export function mount(container, props) {
+class GBadgeElement extends HTMLElement {
-  let root = roots.get(container);
+  constructor() {
+    super();
 
-  if (!root) {
+    this._props = {};
-    root = createRoot(container);
+    this._root = null;
-    roots.set(container, root);
   }
 
-  root.render(
+  connectedCallback() {
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+
+    this.renderComponent();
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+      this._root = null;
+    }
+  }
+
+  set componentProps(value) {
+    this._props = value ?? {};
+
+    if (this.isConnected) {
+      this.renderComponent();
+    }
+  }
+
+  get componentProps() {
+    return this._props;
+  }
+
+  renderComponent() {
+    if (!this._root) return;
+
+    this._root.render(
       <ChakraProvider>
-      <GBadge {...props} />
+        <GBadge {...this._props} />
       </ChakraProvider>,
     );
+  }
 }
 
-export function unmount(container) {
+if (!customElements.get("uikit-g-badge")) {
-  const root = roots.get(container);
+  customElements.define("uikit-g-badge", GBadgeElement);
-
-  if (!root) return;
-
-  root.unmount();
-  roots.delete(container);
 }

src/remote/ui/index.jsx

@@ -10,25 +10,56 @@ function loadRemote() {
       /* webpackIgnore: true */
       /* @vite-ignore */
       REMOTE_URL
-    );
+    ).catch((error) => {
+      remotePromise = null;
+      throw error;
+    });
   }
 
   return remotePromise;
 }
 
-export const GBadge = (props) => {
+function normalizeChildren(children) {
-  const containerRef = useRef(null);
+  if (typeof children === "string" || typeof children === "number") {
+    return children;
+  }
+
+  if (children === null || children === undefined) {
+    return undefined;
+  }
+
+  console.warn(
+    "[uikit/remote/ui] GBadge only accepts text/number children across the remote boundary.",
+  );
+
+  return undefined;
+}
+
+export const GBadge = ({ children, ...props }) => {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const latestPropsRef = useRef(null);
+
+  latestPropsRef.current = {
+    ...props,
+    children: normalizeChildren(children),
+  };
 
-  // mount و update
   useEffect(() => {
     let active = true;
 
     loadRemote()
-      .then((remote) => {
+      .then(() => {
         if (!active) return;
         if (!containerRef.current) return;
 
-        remote.mount(containerRef.current, props);
+        const element = document.createElement("uikit-g-badge");
+
+        element.componentProps = latestPropsRef.current;
+
+        containerRef.current.appendChild(element);
+
+        elementRef.current = element;
       })
       .catch((error) => {
         console.error("[uikit/remote/ui] Failed to load GBadge:", error);
@@ -36,24 +67,20 @@ export const GBadge = (props) => {
 
     return () => {
       active = false;
-    };
-  }, [props]);
 
-  // unmount نهایی
+      if (elementRef.current) {
-  useEffect(() => {
+        elementRef.current.remove();
-    const container = containerRef.current;
+        elementRef.current = null;
-
+      }
-    return () => {
-      if (!container) return;
-
-      loadRemote()
-        .then((remote) => {
-          remote.unmount(container);
-        })
-        .catch(() => {});
     };
   }, []);
 
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    elementRef.current.componentProps = latestPropsRef.current;
+  });
+
   return (
     <span
       ref={containerRef}