refactor: update distribution handling and version fetching in react-grab

- Modified tsup configuration to support both "cdn" and "npm" distributions.
- Enhanced version fetching logic in index.ts to dynamically load the latest version from unpkg for npm distribution.
- Updated log-intro.ts to utilize fetchLatestVersion for version checks, improving consistency in version management.

Author: aidenybai

packages/react-grab/src/core/log-intro.ts

@@ -1,5 +1,5 @@
 import { LOGO_SVG } from "./logo-svg.js";
-import { isExtensionContext } from "../utils/is-extension-context.js";
+import { fetchLatestVersion } from "../utils/fetch-latest-version.js";
 
 export const logIntro = () => {
   try {
@@ -10,25 +10,14 @@ export const logIntro = () => {
       `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`,
       "",
     );
-    if (navigator.onLine && version && !isExtensionContext()) {
-      fetch(
-        `https://www.react-grab.com/api/version?source=browser&t=${Date.now()}`,
-        {
-          referrerPolicy: "origin",
-          keepalive: true,
-          priority: "low",
-          cache: "no-store",
-        } as RequestInit,
-      )
-        .then((response) => response.text())
-        .then((latestVersion) => {
-          if (latestVersion && latestVersion !== version) {
-            console.warn(
-              `[React Grab] v${version} is outdated (latest: v${latestVersion})`,
-            );
-          }
-        })
-        .catch(() => null);
+    if (process.env.DISTRIBUTION !== "npm") {
+      void fetchLatestVersion().then((latestVersion) => {
+        if (latestVersion) {
+          console.warn(
+            `[React Grab] v${version} is outdated (latest: v${latestVersion})`,
+          );
+        }
+      });
     }
     // HACK: Entire intro log is best-effort; never block initialization
   } catch {}

packages/react-grab/src/index.ts

@@ -42,6 +42,7 @@ export type {
 } from "./types.js";
 
 import { init } from "./core/index.js";
+import { fetchLatestVersion } from "./utils/fetch-latest-version.js";
 import type { Plugin, ReactGrabAPI } from "./types.js";
 
 declare global {
@@ -114,4 +115,21 @@ if (typeof window !== "undefined" && !window.__REACT_GRAB_DISABLED__) {
   window.dispatchEvent(
     new CustomEvent("react-grab:init", { detail: globalApi }),
   );
+
+  if (process.env.DISTRIBUTION === "npm" && globalApi) {
+    void fetchLatestVersion().then((latestVersion) => {
+      if (!latestVersion) return;
+
+      globalApi?.dispose();
+      setGlobalApi(null);
+
+      const script = document.createElement("script");
+      script.src = `https://unpkg.com/react-grab@${latestVersion}/dist/index.global.js`;
+      script.onerror = () => {
+        script.remove();
+        setGlobalApi(init());
+      };
+      document.head.appendChild(script);
+    });
+  }
 }

packages/react-grab/src/utils/fetch-latest-version.ts

@@ -0,0 +1,43 @@
+import { isExtensionContext } from "./is-extension-context.js";
+
+const isNewerSemver = (latest: string, current: string): boolean => {
+  const latestParts = latest.split(".").map(Number);
+  const currentParts = current.split(".").map(Number);
+  for (let index = 0; index < 3; index++) {
+    const latestPart = latestParts[index] ?? 0;
+    const currentPart = currentParts[index] ?? 0;
+    if (latestPart > currentPart) return true;
+    if (latestPart < currentPart) return false;
+  }
+  return false;
+};
+
+export const fetchLatestVersion = async (): Promise<string | null> => {
+  const currentVersion = process.env.VERSION;
+  if (!currentVersion || !navigator.onLine || isExtensionContext()) {
+    return null;
+  }
+
+  try {
+    const response = await fetch(
+      `https://www.react-grab.com/api/version?source=browser&t=${Date.now()}`,
+      {
+        referrerPolicy: "origin",
+        keepalive: true,
+        priority: "low",
+        cache: "no-store",
+      } as RequestInit,
+    );
+    const latestVersion = await response.text();
+    if (
+      !latestVersion ||
+      latestVersion === currentVersion ||
+      !isNewerSemver(latestVersion, currentVersion)
+    ) {
+      return null;
+    }
+    return latestVersion;
+  } catch {
+    return null;
+  }
+};

packages/react-grab/tsup.config.ts

@@ -65,6 +65,7 @@ const browserBuildConfig: Options = {
   env: {
     ...DEFAULT_OPTIONS.env,
     VERSION: version,
+    DISTRIBUTION: "cdn",
   },
   format: ["iife"],
   globalName: "globalThis.__REACT_GRAB_MODULE__",
@@ -91,6 +92,10 @@ const libraryBuildConfig: Options = {
   ...DEFAULT_OPTIONS,
   clean: false,
   entry: ["./src/index.ts", "./src/core/index.tsx", "./src/primitives.ts"],
+  env: {
+    ...DEFAULT_OPTIONS.env,
+    DISTRIBUTION: "npm",
+  },
   format: ["cjs", "esm"],
   loader: {
     ".css": "text",