@bstage-sdk/react 0.8.6 → 0.9.0

package/dist/index.cjs

@@ -154,38 +154,55 @@ function registerTemplate(template) {
 
 // src/hooks/useNavigation.ts
 var import_react4 = require("react");
-function useNavigation() {
-  const ctx = (0, import_react4.useContext)(BstageContext);
-  const bridge = ctx?.bridge;
-  const navigate = (0, import_react4.useCallback)(
-    (path, params) => {
-      if (bridge) {
-        bridge.emit("navigate", { path, params });
+var import_core2 = require("@bstage-sdk/core");
+
+// src/hooks/navigationActions.ts
+function withQuery(path, params) {
+  return path + (params ? "?" + new URLSearchParams(params).toString() : "");
+}
+function createNavigationActions(frameBridge, platformBridge) {
+  if (frameBridge) {
+    const send = (type, payload) => {
+      frameBridge.request(type, payload).catch(() => {
+      });
+    };
+    return {
+      navigate: (path, params) => send("navigate", { path: withQuery(path, params) }),
+      goBack: () => send("back", {}),
+      openExternal: (url) => send("openExternal", { url })
+    };
+  }
+  return {
+    navigate: (path, params) => {
+      if (platformBridge) {
+        platformBridge.emit("navigate", { path, params });
       } else {
-        const query = params ? "?" + new URLSearchParams(params).toString() : "";
-        window.location.href = path + query;
+        window.location.href = withQuery(path, params);
       }
     },
-    [bridge]
-  );
-  const goBack = (0, import_react4.useCallback)(() => {
-    if (bridge) {
-      bridge.emit("go-back", {});
-    } else {
-      window.history.back();
-    }
-  }, [bridge]);
-  const openExternal = (0, import_react4.useCallback)(
-    (url) => {
-      if (bridge) {
-        bridge.emit("open-external", { url });
+    goBack: () => {
+      if (platformBridge) {
+        platformBridge.emit("go-back", {});
       } else {
-        window.open(url, "_blank");
+        window.history.back();
       }
     },
-    [bridge]
-  );
-  return { navigate, goBack, openExternal };
+    openExternal: (url) => {
+      if (platformBridge) {
+        platformBridge.emit("open-external", { url });
+      } else {
+        window.open(url, "_blank");
+      }
+    }
+  };
+}
+
+// src/hooks/useNavigation.ts
+function useNavigation() {
+  const ctx = (0, import_react4.useContext)(BstageContext);
+  const bridge = ctx?.bridge;
+  const frameBridge = (0, import_core2.getFrameBridge)();
+  return (0, import_react4.useMemo)(() => createNavigationActions(frameBridge, bridge), [frameBridge, bridge]);
 }
 
 // src/hooks/usePlatformEvent.ts
@@ -242,7 +259,7 @@ function hashString(str) {
 
 // src/hooks/useLocale.ts
 var import_react9 = require("react");
-var import_core2 = require("@bstage-sdk/core");
+var import_core3 = require("@bstage-sdk/core");
 
 // src/LocaleProvider.tsx
 var import_react8 = require("react");
@@ -266,14 +283,14 @@ function BstageLocaleProvider({
 // src/hooks/useLocale.ts
 function useLocale() {
   const target = useLocaleTarget();
-  const subscribe = (0, import_react9.useCallback)((onChange) => (0, import_core2.observeLocale)(onChange, target), [target]);
-  const getSnapshot = (0, import_react9.useCallback)(() => (0, import_core2.readLocale)(target), [target]);
-  const current = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, () => import_core2.DEFAULT_LANGUAGE);
+  const subscribe = (0, import_react9.useCallback)((onChange) => (0, import_core3.observeLocale)(onChange, target), [target]);
+  const getSnapshot = (0, import_react9.useCallback)(() => (0, import_core3.readLocale)(target), [target]);
+  const current = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, () => import_core3.DEFAULT_LANGUAGE);
   return { current };
 }
 
 // src/hooks/useMessages.ts
-var import_core3 = require("@bstage-sdk/core");
+var import_core4 = require("@bstage-sdk/core");
 
 // src/devWarn.ts
 var warned = /* @__PURE__ */ new Set();
@@ -300,7 +317,7 @@ function useMessages(messages) {
         `useMessages\uC758 t('${String(key)}', ...) 2\uBC88\uC9F8 \uC778\uC790\uB294 \uBCF4\uAC04 \uD30C\uB77C\uBBF8\uD130 \uAC1D\uCCB4\uC785\uB2C8\uB2E4. fallback \uBB38\uC790\uC5F4\uC740 \uBB34\uC2DC\uB429\uB2C8\uB2E4.`
       );
     }
-    const dict = messages[current] ?? messages[import_core3.DEFAULT_LANGUAGE] ?? Object.values(messages)[0] ?? {};
+    const dict = messages[current] ?? messages[import_core4.DEFAULT_LANGUAGE] ?? Object.values(messages)[0] ?? {};
     const template = dict[key] ?? key;
     return interpolate(template, params);
   };
@@ -308,7 +325,7 @@ function useMessages(messages) {
 
 // src/hooks/useBstageTranslations.ts
 var import_react10 = require("react");
-var import_core4 = require("@bstage-sdk/core");
+var import_core5 = require("@bstage-sdk/core");
 var requiredDepth = /* @__PURE__ */ new Map();
 function useBstageTranslations() {
   const { current } = useLocale();
@@ -317,6 +334,8 @@ function useBstageTranslations() {
   const [dicts, setDicts] = (0, import_react10.useState)();
   const [depth, setDepth] = (0, import_react10.useState)(() => requiredDepth.get(depthKey) ?? 1);
   const pendingRef = (0, import_react10.useRef)(false);
+  const [translationsRevision, setTranslationsRevision] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => (0, import_core5.observeTranslations)(() => setTranslationsRevision((n) => n + 1)), []);
   (0, import_react10.useEffect)(() => {
     setDicts(void 0);
     setDepth(requiredDepth.get(depthKey) ?? 1);
@@ -324,8 +343,8 @@ function useBstageTranslations() {
   }, [depthKey]);
   (0, import_react10.useEffect)(() => {
     let active = true;
-    const chain = (0, import_core4.resolveTranslationChain)(current).slice(0, depth);
-    Promise.all(chain.map((locale) => (0, import_core4.fetchTranslations)(locale, target).catch(() => ({})))).then((loaded) => {
+    const chain = (0, import_core5.resolveTranslationChain)(current).slice(0, depth);
+    Promise.all(chain.map((locale) => (0, import_core5.fetchTranslations)(locale, target).catch(() => ({})))).then((loaded) => {
       if (!active) return;
       setDicts(loaded);
       pendingRef.current = false;
@@ -335,7 +354,7 @@ function useBstageTranslations() {
     return () => {
       active = false;
     };
-  }, [current, target, depth]);
+  }, [current, target, depth, translationsRevision]);
   const requestFallback = (0, import_react10.useCallback)(
     (chainLength) => {
       if (pendingRef.current) return;
@@ -353,10 +372,10 @@ function useBstageTranslations() {
   );
   const resolveRaw = (0, import_react10.useCallback)(
     (key) => {
-      const resolved = dicts ? (0, import_core4.pickTranslation)(dicts, key) : void 0;
+      const resolved = dicts ? (0, import_core5.pickTranslation)(dicts, key) : void 0;
       if (resolved !== void 0) return resolved;
       if (dicts) {
-        const chain = (0, import_core4.resolveTranslationChain)(current);
+        const chain = (0, import_core5.resolveTranslationChain)(current);
         if (dicts.length < chain.length) {
           requestFallback(chain.length);
         } else if (process.env.NODE_ENV !== "production") {
@@ -387,14 +406,14 @@ function useBstageTranslations() {
           `'${String(key)}'\uB294 \uB9AC\uCE58\uD14D\uC2A4\uD2B8(<0>\u2026</0>) \uBB38\uAD6C\uC785\uB2C8\uB2E4. t()\uB294 \uBB38\uC790\uC5F4\uC744 \uBC18\uD658\uD558\uBBC0\uB85C \uD0DC\uADF8\uAC00 \uAE00\uC790\uB85C \uBCF4\uC785\uB2C8\uB2E4 \u2014 tNode('${String(key)}', { tags: { 0: <a href="\u2026" /> } })\uB97C \uC4F0\uC138\uC694.`
         );
       }
-      return (0, import_core4.interpolateTranslation)(raw ?? key, params);
+      return (0, import_core5.interpolateTranslation)(raw ?? key, params);
     },
     [resolveRaw]
   );
   const tNode = (0, import_react10.useCallback)(
     (key, options) => {
       const raw = resolveRaw(key) ?? key;
-      const tokens = (0, import_core4.parseRichText)(raw, options?.params);
+      const tokens = (0, import_core5.parseRichText)(raw, options?.params);
       return tokens.map((token, i) => {
         if (token.type === "text") return token.value;
         const element = options?.tags?.[token.index];

package/dist/index.d.cts

@@ -75,9 +75,11 @@ interface NavigationActions {
     /** 외부 URL을 새 탭으로 열기. */
     openExternal: (url: string) => void;
 }
+
 /**
  * 플랫폼 네비게이션 hook.
  *
+ * 격리 프레임(`__bstage_bridge__` 있음)에서는 호스트에 브리지 요청을 보내고,
  * 플랫폼에 임베드된 상태에서는 PlatformBridge를 통해 네비게이션하고,
  * 로컬 dev 환경 등 BstageContext가 없을 때는 브라우저 네이티브 API로 fallback한다.
  *

package/dist/index.d.ts

@@ -75,9 +75,11 @@ interface NavigationActions {
     /** 외부 URL을 새 탭으로 열기. */
     openExternal: (url: string) => void;
 }
+
 /**
  * 플랫폼 네비게이션 hook.
  *
+ * 격리 프레임(`__bstage_bridge__` 있음)에서는 호스트에 브리지 요청을 보내고,
  * 플랫폼에 임베드된 상태에서는 PlatformBridge를 통해 네비게이션하고,
  * 로컬 dev 환경 등 BstageContext가 없을 때는 브라우저 네이티브 API로 fallback한다.
  *

package/dist/index.js

@@ -118,39 +118,56 @@ function registerTemplate(template) {
 }
 
 // src/hooks/useNavigation.ts
-import { useCallback, useContext as useContext2 } from "react";
-function useNavigation() {
-  const ctx = useContext2(BstageContext);
-  const bridge = ctx?.bridge;
-  const navigate = useCallback(
-    (path, params) => {
-      if (bridge) {
-        bridge.emit("navigate", { path, params });
+import { useMemo, useContext as useContext2 } from "react";
+import { getFrameBridge } from "@bstage-sdk/core";
+
+// src/hooks/navigationActions.ts
+function withQuery(path, params) {
+  return path + (params ? "?" + new URLSearchParams(params).toString() : "");
+}
+function createNavigationActions(frameBridge, platformBridge) {
+  if (frameBridge) {
+    const send = (type, payload) => {
+      frameBridge.request(type, payload).catch(() => {
+      });
+    };
+    return {
+      navigate: (path, params) => send("navigate", { path: withQuery(path, params) }),
+      goBack: () => send("back", {}),
+      openExternal: (url) => send("openExternal", { url })
+    };
+  }
+  return {
+    navigate: (path, params) => {
+      if (platformBridge) {
+        platformBridge.emit("navigate", { path, params });
       } else {
-        const query = params ? "?" + new URLSearchParams(params).toString() : "";
-        window.location.href = path + query;
+        window.location.href = withQuery(path, params);
       }
     },
-    [bridge]
-  );
-  const goBack = useCallback(() => {
-    if (bridge) {
-      bridge.emit("go-back", {});
-    } else {
-      window.history.back();
-    }
-  }, [bridge]);
-  const openExternal = useCallback(
-    (url) => {
-      if (bridge) {
-        bridge.emit("open-external", { url });
+    goBack: () => {
+      if (platformBridge) {
+        platformBridge.emit("go-back", {});
       } else {
-        window.open(url, "_blank");
+        window.history.back();
       }
     },
-    [bridge]
-  );
-  return { navigate, goBack, openExternal };
+    openExternal: (url) => {
+      if (platformBridge) {
+        platformBridge.emit("open-external", { url });
+      } else {
+        window.open(url, "_blank");
+      }
+    }
+  };
+}
+
+// src/hooks/useNavigation.ts
+function useNavigation() {
+  const ctx = useContext2(BstageContext);
+  const bridge = ctx?.bridge;
+  const frameBridge = getFrameBridge();
+  return useMemo(() => createNavigationActions(frameBridge, bridge), [frameBridge, bridge]);
 }
 
 // src/hooks/usePlatformEvent.ts
@@ -206,7 +223,7 @@ function hashString(str) {
 }
 
 // src/hooks/useLocale.ts
-import { useCallback as useCallback2, useSyncExternalStore } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 import { readLocale, observeLocale, DEFAULT_LANGUAGE } from "@bstage-sdk/core";
 
 // src/LocaleProvider.tsx
@@ -231,8 +248,8 @@ function BstageLocaleProvider({
 // src/hooks/useLocale.ts
 function useLocale() {
   const target = useLocaleTarget();
-  const subscribe = useCallback2((onChange) => observeLocale(onChange, target), [target]);
-  const getSnapshot = useCallback2(() => readLocale(target), [target]);
+  const subscribe = useCallback((onChange) => observeLocale(onChange, target), [target]);
+  const getSnapshot = useCallback(() => readLocale(target), [target]);
   const current = useSyncExternalStore(subscribe, getSnapshot, () => DEFAULT_LANGUAGE);
   return { current };
 }
@@ -272,9 +289,10 @@ function useMessages(messages) {
 }
 
 // src/hooks/useBstageTranslations.ts
-import { cloneElement, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import { cloneElement, useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
 import {
   fetchTranslations,
+  observeTranslations,
   interpolateTranslation,
   parseRichText,
   pickTranslation,
@@ -288,6 +306,8 @@ function useBstageTranslations() {
   const [dicts, setDicts] = useState2();
   const [depth, setDepth] = useState2(() => requiredDepth.get(depthKey) ?? 1);
   const pendingRef = useRef3(false);
+  const [translationsRevision, setTranslationsRevision] = useState2(0);
+  useEffect4(() => observeTranslations(() => setTranslationsRevision((n) => n + 1)), []);
   useEffect4(() => {
     setDicts(void 0);
     setDepth(requiredDepth.get(depthKey) ?? 1);
@@ -306,8 +326,8 @@ function useBstageTranslations() {
     return () => {
       active = false;
     };
-  }, [current, target, depth]);
-  const requestFallback = useCallback3(
+  }, [current, target, depth, translationsRevision]);
+  const requestFallback = useCallback2(
     (chainLength) => {
       if (pendingRef.current) return;
       pendingRef.current = true;
@@ -322,7 +342,7 @@ function useBstageTranslations() {
     },
     [depthKey]
   );
-  const resolveRaw = useCallback3(
+  const resolveRaw = useCallback2(
     (key) => {
       const resolved = dicts ? pickTranslation(dicts, key) : void 0;
       if (resolved !== void 0) return resolved;
@@ -341,7 +361,7 @@ function useBstageTranslations() {
     },
     [dicts, current, requestFallback]
   );
-  const t = useCallback3(
+  const t = useCallback2(
     (key, params) => {
       if (process.env.NODE_ENV !== "production") {
         if (typeof params === "string") {
@@ -362,7 +382,7 @@ function useBstageTranslations() {
     },
     [resolveRaw]
   );
-  const tNode = useCallback3(
+  const tNode = useCallback2(
     (key, options) => {
       const raw = resolveRaw(key) ?? key;
       const tokens = parseRichText(raw, options?.params);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bstage-sdk/react",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "description": "bstage SDK React bindings — create b.stage templates with React",
   "type": "module",
   "publishConfig": {
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@bstage-sdk/core": "0.8.6"
+    "@bstage-sdk/core": "0.9.0"
   },
   "peerDependencies": {
     "react": ">=18",