add remote GBadge build

package.json

@@ -22,7 +22,11 @@
     },
     "./table": "./dist/table.js",
     "./form": "./dist/form.js",
-    "./icons": "./dist/icons.js"
+    "./icons": "./dist/icons.js",
+    "./remote/ui": {
+      "types": "./dist/remote-ui.d.ts",
+      "import": "./dist/remote-ui.js"
+    }
   },
   "sideEffects": false,
   "files": [
@@ -30,10 +34,12 @@
   ],
   "scripts": {
     "build": "vite build && yarn copy-types",
-    "copy-types": "yarn copy-index-types && yarn copy-utils-types && yarn copy-core-types",
+    "build:remote": "vite build --mode remote",
+    "copy-types": "yarn copy-index-types && yarn copy-utils-types && yarn copy-core-types && yarn copy-remote-ui-types",
     "copy-index-types": "cp src/index.d.ts dist/index.d.ts",
     "copy-utils-types": "cp src/utils/index.d.ts dist/utils.d.ts",
-    "copy-core-types": "cp src/core/index.d.ts dist/core.d.ts"
+    "copy-core-types": "cp src/core/index.d.ts dist/core.d.ts",
+    "copy-remote-ui-types": "cp src/remote/ui/index.d.ts dist/remote-ui.d.ts"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^2.0.0",

src/remote/ui/GBadge.remote.jsx

@@ -0,0 +1,48 @@
+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
+      fontSize="sm"
+      colorScheme="teal"
+      variant="subtle"
+      px={3}
+      py={2}
+      borderRadius="lg"
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
+      textTransform="none"
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+};
+
+export function mount(container, props) {
+  let root = roots.get(container);
+
+  if (!root) {
+    root = createRoot(container);
+    roots.set(container, root);
+  }
+
+  root.render(
+    <ChakraProvider>
+      <GBadge {...props} />
+    </ChakraProvider>,
+  );
+}
+
+export function unmount(container) {
+  const root = roots.get(container);
+
+  if (!root) return;
+
+  root.unmount();
+  roots.delete(container);
+}

src/remote/ui/index.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, ReactNode } from "react";
+
+export type GBadgeProps = {
+  children?: ReactNode;
+  [key: string]: unknown;
+};
+
+export declare const GBadge: ComponentType<GBadgeProps>;

src/remote/ui/index.jsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from "react";
+
+const REMOTE_URL = "https://uikit.d.aiengines.ir/remote/GBadge.js";
+
+let remotePromise = null;
+
+function loadRemote() {
+  if (!remotePromise) {
+    remotePromise = import(
+      /* webpackIgnore: true */
+      /* @vite-ignore */
+      REMOTE_URL
+    );
+  }
+
+  return remotePromise;
+}
+
+export const GBadge = (props) => {
+  const containerRef = useRef(null);
+
+  // mount و update
+  useEffect(() => {
+    let active = true;
+
+    loadRemote()
+      .then((remote) => {
+        if (!active) return;
+        if (!containerRef.current) return;
+
+        remote.mount(containerRef.current, props);
+      })
+      .catch((error) => {
+        console.error("[uikit/remote/ui] Failed to load GBadge:", error);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [props]);
+
+  // unmount نهایی
+  useEffect(() => {
+    const container = containerRef.current;
+
+    return () => {
+      if (!container) return;
+
+      loadRemote()
+        .then((remote) => {
+          remote.unmount(container);
+        })
+        .catch(() => {});
+    };
+  }, []);
+
+  return (
+    <span
+      ref={containerRef}
+      style={{
+        display: "contents",
+      }}
+    />
+  );
+};

vite.config.js

@@ -25,21 +25,64 @@ const externalPackages = [
   "chakra-react-select",
 ];
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  if (mode === "remote") {
+    return {
+      plugins: [react()],
+
+      define: {
+        "process.env.NODE_ENV": JSON.stringify("production"),
+      },
+
+      build: {
+        outDir: "dist",
+
+        emptyOutDir: false,
+
+        target: "es2020",
+
+        lib: {
+          entry: path.resolve(process.cwd(), "src/remote/ui/GBadge.remote.jsx"),
+
+          formats: ["es"],
+        },
+
+        rollupOptions: {
+          output: {
+            entryFileNames: "remote/GBadge.js",
+
+            inlineDynamicImports: true,
+          },
+        },
+      },
+    };
+  }
+
+  return {
     plugins: [react()],
 
     build: {
       lib: {
         entry: {
           index: path.resolve(process.cwd(), "src/index.js"),
+
           utils: path.resolve(process.cwd(), "src/utils/index.js"),
+
           pagination: path.resolve(process.cwd(), "src/pagination/index.js"),
+
           layout: path.resolve(process.cwd(), "src/layout/index.js"),
+
           core: path.resolve(process.cwd(), "src/core/index.js"),
+
           table: path.resolve(process.cwd(), "src/table/index.js"),
+
           form: path.resolve(process.cwd(), "src/form/index.js"),
+
           icons: path.resolve(process.cwd(), "src/icons/index.js"),
+
+          "remote-ui": path.resolve(process.cwd(), "src/remote/ui/index.jsx"),
         },
+
         formats: ["es"],
       },
 
@@ -55,9 +98,12 @@ export default defineConfig({
 
         output: {
           entryFileNames: "[name].js",
+
           chunkFileNames: "chunks/[name]-[hash].js",
+
           assetFileNames: "assets/[name]-[hash][extname]",
         },
       },
     },
+  };
 });