refactor remote ui

dist/remote-ui.d.ts

@@ -1,7 +1,22 @@
 import type { ComponentType, ReactNode } from "react";
 
+export type UikitRemoteDepsOptions = {
+  React?: unknown;
+  createRoot?: unknown;
+  ChakraProvider?: unknown;
+  Badge?: unknown;
+  theme?: unknown;
+  chakraProviderProps?: Record<string, unknown>;
+  remoteUrl?: string;
+};
+
+export declare function setupUikitRemoteDeps(options?: UikitRemoteDepsOptions): void;
+
 export type GBadgeProps = {
   children?: ReactNode;
+  remoteUrl?: string;
+  theme?: unknown;
+  chakraProviderProps?: Record<string, unknown>;
   [key: string]: unknown;
 };
 

dist/remote-ui.js

@@ -1,45 +1,92 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as h } from "react/jsx-runtime";
-import { useRef as i, useEffect as l } from "react";
+import v, { useRef as d, useEffect as R } from "react";
-const f = "https://uikit.d.aiengines.ir/GBadge.js";
+import P from "react-dom";
-let n = null;
+import { Badge as y, ChakraProvider as O } from "@chakra-ui/react";
-function m() {
+var s, i = P;
-  return n || (n = import(
+if (process.env.NODE_ENV === "production")
-    /* webpackIgnore: true */
+  s = i.createRoot, i.hydrateRoot;
-    /* @vite-ignore */
+else {
-    f
+  var p = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  ).catch((e) => {
+  s = function(e, r) {
-    throw n = null, e;
+    p.usingClientEntryPoint = !0;
-  })), n;
+    try {
+      return i.createRoot(e, r);
+    } finally {
+      p.usingClientEntryPoint = !1;
+    }
+  };
 }
-function p(e) {
+const E = "https://uikit.d.aiengines.ir/GBadge.js", f = "__UIKIT_REMOTE_DEPS__", l = "__UIKIT_REMOTE_CONFIG__", a = /* @__PURE__ */ new Map();
+function w(e = {}) {
+  if (typeof window > "u") return;
+  const r = window[f] || {}, o = window[l] || {};
+  window[f] = {
+    ...r,
+    React: e.React || r.React || v,
+    createRoot: e.createRoot || r.createRoot || s,
+    ChakraProvider: e.ChakraProvider || r.ChakraProvider || O,
+    Badge: e.Badge || r.Badge || y,
+    theme: Object.prototype.hasOwnProperty.call(e, "theme") ? e.theme : r.theme,
+    chakraProviderProps: {
+      ...r.chakraProviderProps || {},
+      ...e.chakraProviderProps || {}
+    }
+  }, window[l] = {
+    ...o,
+    ...e.remoteUrl ? { GBadgeUrl: e.remoteUrl } : {}
+  };
+}
+function C() {
+  typeof window > "u" || window[f] || w();
+}
+function k() {
+  var e;
+  return typeof window > "u" ? E : ((e = window[l]) == null ? void 0 : e.GBadgeUrl) || E;
+}
+function B() {
+  const e = k();
+  return a.has(e) || a.set(
+    e,
+    import(
+      /* webpackIgnore: true */
+      /* @vite-ignore */
+      e
+    ).catch((r) => {
+      throw a.delete(e), r;
+    })
+  ), a.get(e);
+}
+function T(e) {
   if (typeof e == "string" || typeof e == "number")
     return e;
   e != null && console.warn(
     "[uikit/remote/ui] GBadge only accepts text/number children across the remote boundary."
   );
 }
-const R = ({ children: e, ...s }) => {
+const N = ({ children: e, remoteUrl: r, theme: o, chakraProviderProps: m, ...g }) => {
-  const o = i(null), t = i(null), u = i(null);
+  const u = d(null), t = d(null), c = d(null);
-  return u.current = {
+  return c.current = {
-    ...s,
+    ...g,
-    children: p(e)
+    children: T(e),
-  }, l(() => {
+    ...o !== void 0 ? { theme: o } : {},
-    let c = !0;
+    ...m ? { chakraProviderProps: m } : {}
-    return m().then(() => {
+  }, R(() => {
-      if (!c || !o.current) return;
+    let _ = !0;
-      const r = document.createElement("uikit-g-badge");
+    return C(), r && w({ remoteUrl: r }), B().then(() => {
-      r.componentProps = u.current, o.current.appendChild(r), t.current = r;
+      if (!_ || !u.current) return;
-    }).catch((r) => {
+      const n = document.createElement("uikit-g-badge");
-      console.error("[uikit/remote/ui] Failed to load GBadge:", r);
+      n.componentProps = c.current, u.current.appendChild(n), t.current = n;
+    }).catch((n) => {
+      console.error("[uikit/remote/ui] Failed to load GBadge:", n);
     }), () => {
-      c = !1, t.current && (t.current.remove(), t.current = null);
+      _ = !1, t.current && (t.current.remove(), t.current = null);
     };
-  }, []), l(() => {
+  }, [r]), R(() => {
-    t.current && (t.current.componentProps = u.current);
+    t.current && (t.current.componentProps = c.current);
-  }), /* @__PURE__ */ a(
+  }), /* @__PURE__ */ h(
     "span",
     {
-      ref: o,
+      ref: u,
       style: {
         display: "contents"
       }
@@ -47,5 +94,6 @@ const R = ({ children: e, ...s }) => {
   );
 };
 export {
-  R as GBadge
+  N as GBadge,
+  w as setupUikitRemoteDeps
 };

src/remote/ui/GBadge.remote.jsx

@@ -1,27 +1,49 @@
-import React from "react";
+const DEFAULT_PROPS = {
-import { createRoot } from "react-dom/client";
+  fontSize: "sm",
-import { Badge, ChakraProvider } from "@chakra-ui/react";
+  colorScheme: "teal",
-import { Fonts, theme } from "../../core/style.jsx";
+  variant: "subtle",
-
+  px: 3,
-const GBadge = ({ children, ...props }) => {
+  py: 2,
-  return (
+  borderRadius: "lg",
-    <Badge
+  whiteSpace: "nowrap",
-      fontSize="sm"
+  textOverflow: "ellipsis",
-      colorScheme="teal"
+  textTransform: "none",
-      variant="subtle"
-      px={3}
-      py={2}
-      borderRadius="lg"
-      whiteSpace="nowrap"
-      textOverflow="ellipsis"
-      textTransform="none"
-      {...props}
-    >
-      {children}
-    </Badge>
-  );
 };
 
+function getRemoteDeps() {
+  const deps = window.__UIKIT_REMOTE_DEPS__;
+  const missing = [];
+
+  if (!deps?.React) missing.push("React");
+  if (!deps?.createRoot) missing.push("createRoot");
+  if (!deps?.ChakraProvider) missing.push("ChakraProvider");
+  if (!deps?.Badge) missing.push("Badge");
+
+  if (missing.length) {
+    throw new Error(
+      `[uikit-g-badge] Missing remote dependencies: ${missing.join(", ")}. ` +
+        "Set window.__UIKIT_REMOTE_DEPS__ before loading the remote component.",
+    );
+  }
+
+  return deps;
+}
+
+function normalizeBadgeProps(props = {}) {
+  const { children, theme, chakraProviderProps, ...badgeProps } = props;
+
+  return {
+    children,
+    theme,
+    chakraProviderProps,
+    badgeProps: {
+      ...DEFAULT_PROPS,
+      ...badgeProps,
+      fontFamily: badgeProps.fontFamily || "var(--uikit-font-family, inherit)",
+    },
+  };
+}
+
 class GBadgeElement extends HTMLElement {
   constructor() {
     super();
@@ -31,6 +53,8 @@ class GBadgeElement extends HTMLElement {
   }
 
   connectedCallback() {
+    const { createRoot } = getRemoteDeps();
+
     if (!this._root) {
       this._root = createRoot(this);
     }
@@ -60,11 +84,22 @@ class GBadgeElement extends HTMLElement {
   renderComponent() {
     if (!this._root) return;
 
+    const { React, ChakraProvider, Badge, theme: defaultTheme, chakraProviderProps: defaultProviderProps } =
+      getRemoteDeps();
+
+    const { children, theme, chakraProviderProps, badgeProps } = normalizeBadgeProps(this._props);
+
     this._root.render(
-      <ChakraProvider theme={theme}>
+      React.createElement(
-        <Fonts />
+        ChakraProvider,
-        <GBadge {...this._props} />
+        {
-      </ChakraProvider>,
+          theme: theme || defaultTheme,
+          resetCSS: false,
+          ...(defaultProviderProps || {}),
+          ...(chakraProviderProps || {}),
+        },
+        React.createElement(Badge, badgeProps, children),
+      ),
     );
   }
 }

src/remote/ui/index.d.ts

@@ -1,7 +1,22 @@
 import type { ComponentType, ReactNode } from "react";
 
+export type UikitRemoteDepsOptions = {
+  React?: unknown;
+  createRoot?: unknown;
+  ChakraProvider?: unknown;
+  Badge?: unknown;
+  theme?: unknown;
+  chakraProviderProps?: Record<string, unknown>;
+  remoteUrl?: string;
+};
+
+export declare function setupUikitRemoteDeps(options?: UikitRemoteDepsOptions): void;
+
 export type GBadgeProps = {
   children?: ReactNode;
+  remoteUrl?: string;
+  theme?: unknown;
+  chakraProviderProps?: Record<string, unknown>;
   [key: string]: unknown;
 };
 

src/remote/ui/index.jsx

@@ -1,22 +1,72 @@
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { Badge, ChakraProvider } from "@chakra-ui/react";
 
-const REMOTE_URL = "https://uikit.d.aiengines.ir/GBadge.js";
+const DEFAULT_REMOTE_URL = "https://uikit.d.aiengines.ir/GBadge.js";
+const REMOTE_DEPS_KEY = "__UIKIT_REMOTE_DEPS__";
+const REMOTE_CONFIG_KEY = "__UIKIT_REMOTE_CONFIG__";
 
-let remotePromise = null;
+const remotePromises = new Map();
+
+export function setupUikitRemoteDeps(options = {}) {
+  if (typeof window === "undefined") return;
+
+  const previousDeps = window[REMOTE_DEPS_KEY] || {};
+  const previousConfig = window[REMOTE_CONFIG_KEY] || {};
+
+  window[REMOTE_DEPS_KEY] = {
+    ...previousDeps,
+    React: options.React || previousDeps.React || React,
+    createRoot: options.createRoot || previousDeps.createRoot || createRoot,
+    ChakraProvider: options.ChakraProvider || previousDeps.ChakraProvider || ChakraProvider,
+    Badge: options.Badge || previousDeps.Badge || Badge,
+    theme: Object.prototype.hasOwnProperty.call(options, "theme")
+      ? options.theme
+      : previousDeps.theme,
+    chakraProviderProps: {
+      ...(previousDeps.chakraProviderProps || {}),
+      ...(options.chakraProviderProps || {}),
+    },
+  };
+
+  window[REMOTE_CONFIG_KEY] = {
+    ...previousConfig,
+    ...(options.remoteUrl ? { GBadgeUrl: options.remoteUrl } : {}),
+  };
+}
+
+function ensureRemoteDeps() {
+  if (typeof window === "undefined") return;
+
+  if (!window[REMOTE_DEPS_KEY]) {
+    setupUikitRemoteDeps();
+  }
+}
+
+function getRemoteUrl() {
+  if (typeof window === "undefined") return DEFAULT_REMOTE_URL;
+
+  return window[REMOTE_CONFIG_KEY]?.GBadgeUrl || DEFAULT_REMOTE_URL;
+}
 
 function loadRemote() {
-  if (!remotePromise) {
+  const remoteUrl = getRemoteUrl();
-    remotePromise = import(
+
-      /* webpackIgnore: true */
+  if (!remotePromises.has(remoteUrl)) {
-      /* @vite-ignore */
+    remotePromises.set(
-      REMOTE_URL
+      remoteUrl,
-    ).catch((error) => {
+      import(
-      remotePromise = null;
+        /* webpackIgnore: true */
-      throw error;
+        /* @vite-ignore */
-    });
+        remoteUrl
+      ).catch((error) => {
+        remotePromises.delete(remoteUrl);
+        throw error;
+      }),
+    );
   }
 
-  return remotePromise;
+  return remotePromises.get(remoteUrl);
 }
 
 function normalizeChildren(children) {
@@ -35,7 +85,7 @@ function normalizeChildren(children) {
   return undefined;
 }
 
-export const GBadge = ({ children, ...props }) => {
+export const GBadge = ({ children, remoteUrl, theme, chakraProviderProps, ...props }) => {
   const containerRef = useRef(null);
   const elementRef = useRef(null);
   const latestPropsRef = useRef(null);
@@ -43,11 +93,19 @@ export const GBadge = ({ children, ...props }) => {
   latestPropsRef.current = {
     ...props,
     children: normalizeChildren(children),
+    ...(theme !== undefined ? { theme } : {}),
+    ...(chakraProviderProps ? { chakraProviderProps } : {}),
   };
 
   useEffect(() => {
     let active = true;
 
+    ensureRemoteDeps();
+
+    if (remoteUrl) {
+      setupUikitRemoteDeps({ remoteUrl });
+    }
+
     loadRemote()
       .then(() => {
         if (!active) return;
@@ -73,7 +131,7 @@ export const GBadge = ({ children, ...props }) => {
         elementRef.current = null;
       }
     };
-  }, []);
+  }, [remoteUrl]);
 
   useEffect(() => {
     if (!elementRef.current) return;

vite.config.js

@@ -48,6 +48,8 @@ export default defineConfig(({ mode }) => {
         },
 
         rollupOptions: {
+          treeshake: true,
+
           output: {
             entryFileNames: "remote/GBadge.js",