@bstage-sdk/react 0.1.0

package/dist/index.js

@@ -0,0 +1,402 @@
+// src/createTemplate.tsx
+import { createElement } from "react";
+var __bstage_registry__ = /* @__PURE__ */ new Set();
+function createTemplate(Component, options) {
+  const { name } = options;
+  validateElementName(name);
+  const meta = {
+    name,
+    elementName: name,
+    framework: "react",
+    ...options.slot && { slot: options.slot },
+    ...options.type && { type: options.type }
+  };
+  function TemplateWrapper(props) {
+    return createElement(Component, props);
+  }
+  TemplateWrapper.displayName = `BstageTemplate(${name})`;
+  TemplateWrapper.__bstage_meta__ = meta;
+  TemplateWrapper.__bstage_options__ = options;
+  TemplateWrapper.__bstage_inner__ = Component;
+  const wrapper = TemplateWrapper;
+  __bstage_registry__.add(wrapper);
+  return wrapper;
+}
+var ELEMENT_NAME_RE = /^[a-z][a-z0-9-]*-[a-z0-9-]*$/;
+function validateElementName(name) {
+  if (!ELEMENT_NAME_RE.test(name)) {
+    throw new Error(
+      `createTemplate: \uC798\uBABB\uB41C name "${name}". Custom Element \uC2A4\uD399\uC0C1 \uC18C\uBB38\uC790\uB85C \uC2DC\uC791\uD558\uACE0 \uD558\uC774\uD508\uC744 1\uAC1C \uC774\uC0C1 \uD3EC\uD568\uD574\uC57C \uD558\uBA70, \uC18C\uBB38\uC790\xB7\uC22B\uC790\xB7\uD558\uC774\uD508\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uC608: "bmf-hello"`
+    );
+  }
+}
+
+// src/registerTemplate.ts
+import { createElement as createElement2, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  announceElementName,
+  createWebComponent
+} from "@bstage-sdk/core";
+
+// src/BstageContext.tsx
+import { createContext, useContext } from "react";
+var BstageContext = createContext(null);
+function useBstageContext() {
+  const ctx = useContext(BstageContext);
+  if (!ctx) {
+    throw new Error("[bstage] useBstageContext must be used inside a bstage template");
+  }
+  return ctx;
+}
+
+// src/registerTemplate.ts
+function ReadySignal({ host }) {
+  useEffect(() => {
+    host.dispatchEvent(new CustomEvent("bstage:__ready__", { bubbles: false, composed: false }));
+  }, []);
+  return null;
+}
+var ReactAdapter = class {
+  constructor(options = {}) {
+    this.options = options;
+    this.root = null;
+    this.component = null;
+    this.contextValue = null;
+    this.host = null;
+  }
+  mount(component, container, props, bridge) {
+    this.component = component;
+    this.contextValue = { bridge };
+    this.host = bridge.getHost();
+    if (this.options.styles && container instanceof ShadowRoot) {
+      const style = document.createElement("style");
+      style.textContent = this.options.styles;
+      container.appendChild(style);
+    }
+    this.root = createRoot(container);
+    this.render(props);
+  }
+  update(props) {
+    this.render(props);
+  }
+  unmount() {
+    const root = this.root;
+    queueMicrotask(() => root?.unmount());
+    this.root = null;
+    this.component = null;
+    this.contextValue = null;
+    this.host = null;
+  }
+  render(props) {
+    if (!this.root || !this.component || !this.contextValue || !this.host) return;
+    this.root.render(
+      createElement2(
+        BstageContext.Provider,
+        { value: this.contextValue },
+        createElement2(this.component, props),
+        createElement2(ReadySignal, { host: this.host })
+      )
+    );
+  }
+};
+function registerTemplate(template) {
+  const meta = template.__bstage_meta__;
+  const options = template.__bstage_options__;
+  const Component = template.__bstage_inner__;
+  const tagName = meta.elementName;
+  const WebComponent = createWebComponent(
+    () => new ReactAdapter({ styles: options.styles }),
+    Component,
+    { ...options, framework: "react" }
+  );
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, WebComponent);
+  }
+  announceElementName(tagName);
+  return WebComponent;
+}
+
+// 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 });
+      } else {
+        const query = params ? "?" + new URLSearchParams(params).toString() : "";
+        window.location.href = path + query;
+      }
+    },
+    [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 });
+      } else {
+        window.open(url, "_blank");
+      }
+    },
+    [bridge]
+  );
+  return { navigate, goBack, openExternal };
+}
+
+// src/hooks/usePlatformEvent.ts
+import { useContext as useContext3, useEffect as useEffect2, useRef } from "react";
+function usePlatformEvent(type, handler) {
+  const ctx = useContext3(BstageContext);
+  const bridge = ctx?.bridge;
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect2(() => {
+    if (!bridge) return;
+    return bridge.on(type, ((payload) => {
+      handlerRef.current(payload);
+    }));
+  }, [bridge, type]);
+}
+
+// src/hooks/useSlotContext.ts
+import { useState } from "react";
+function useSlotContext() {
+  const [context, setContext] = useState();
+  usePlatformEvent("slot.context", (payload) => {
+    setContext(payload);
+  });
+  return context;
+}
+
+// src/hooks/useShadowStyle.ts
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+function useShadowStyle(css) {
+  const ref = useRef2(null);
+  const injected = useRef2(false);
+  useEffect3(() => {
+    if (injected.current || !ref.current) return;
+    const root = ref.current.getRootNode();
+    if (!(root instanceof ShadowRoot)) return;
+    const hash = hashString(css);
+    if (root.querySelector(`style[data-shadow-style="${hash}"]`)) return;
+    const style = document.createElement("style");
+    style.setAttribute("data-shadow-style", hash);
+    style.textContent = css;
+    root.appendChild(style);
+    injected.current = true;
+  });
+  return ref;
+}
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = Math.imul(31, hash) + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+
+// src/hooks/useLocale.ts
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
+import { readLocale, observeLocale, DEFAULT_LANGUAGE } from "@bstage-sdk/core";
+
+// src/LocaleProvider.tsx
+import { createContext as createContext2, createElement as createElement3, useContext as useContext4 } from "react";
+var LocaleTargetContext = createContext2(null);
+function useLocaleTarget() {
+  const target = useContext4(LocaleTargetContext);
+  if (target === null) {
+    throw new Error(
+      "[bstage] \uB85C\uCF00\uC77C \uD6C5(useLocale/useMessages/useBstageTranslations)\uC740 <BstageLocaleProvider> \uC548\uC5D0\uC11C \uD638\uCD9C\uD574\uC57C \uD569\uB2C8\uB2E4."
+    );
+  }
+  return target;
+}
+function BstageLocaleProvider({
+  target = "user",
+  children
+}) {
+  return createElement3(LocaleTargetContext.Provider, { value: target }, children);
+}
+
+// src/hooks/useLocale.ts
+function useLocale() {
+  const target = useLocaleTarget();
+  const subscribe = useCallback2((onChange) => observeLocale(onChange, target), [target]);
+  const getSnapshot = useCallback2(() => readLocale(target), [target]);
+  const current = useSyncExternalStore(subscribe, getSnapshot, () => DEFAULT_LANGUAGE);
+  return { current };
+}
+
+// src/hooks/useMessages.ts
+import { DEFAULT_LANGUAGE as DEFAULT_LANGUAGE2 } from "@bstage-sdk/core";
+
+// src/devWarn.ts
+var warned = /* @__PURE__ */ new Set();
+function devWarnOnce(dedupeKey, message) {
+  if (warned.has(dedupeKey)) return;
+  warned.add(dedupeKey);
+  console.warn(`[bstage] ${message}`);
+}
+
+// src/hooks/useMessages.ts
+function interpolate(template, params) {
+  if (!params) return template;
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    const value = params[key];
+    return value === void 0 ? `{{${key}}}` : String(value);
+  });
+}
+function useMessages(messages) {
+  const { current } = useLocale();
+  return (key, params) => {
+    if (process.env.NODE_ENV !== "production" && typeof params === "string") {
+      devWarnOnce(
+        `msg-string-param:${String(key)}`,
+        `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[DEFAULT_LANGUAGE2] ?? Object.values(messages)[0] ?? {};
+    const template = dict[key] ?? key;
+    return interpolate(template, params);
+  };
+}
+
+// src/hooks/useBstageTranslations.ts
+import { cloneElement, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import {
+  fetchTranslations,
+  interpolateTranslation,
+  parseRichText,
+  pickTranslation,
+  resolveTranslationChain
+} from "@bstage-sdk/core";
+var requiredDepth = /* @__PURE__ */ new Map();
+function useBstageTranslations() {
+  const { current } = useLocale();
+  const target = useLocaleTarget();
+  const depthKey = `${target}|${current}`;
+  const [dicts, setDicts] = useState2();
+  const [depth, setDepth] = useState2(() => requiredDepth.get(depthKey) ?? 1);
+  const pendingRef = useRef3(false);
+  useEffect4(() => {
+    setDicts(void 0);
+    setDepth(requiredDepth.get(depthKey) ?? 1);
+    pendingRef.current = false;
+  }, [depthKey]);
+  useEffect4(() => {
+    let active = true;
+    const chain = resolveTranslationChain(current).slice(0, depth);
+    Promise.all(chain.map((locale) => fetchTranslations(locale, target).catch(() => ({})))).then((loaded) => {
+      if (!active) return;
+      setDicts(loaded);
+      pendingRef.current = false;
+    }).catch(() => {
+      if (active) setDicts([]);
+    });
+    return () => {
+      active = false;
+    };
+  }, [current, target, depth]);
+  const requestFallback = useCallback3(
+    (chainLength) => {
+      if (pendingRef.current) return;
+      pendingRef.current = true;
+      queueMicrotask(
+        () => setDepth((d) => {
+          if (d >= chainLength) return d;
+          const next = d + 1;
+          requiredDepth.set(depthKey, Math.max(requiredDepth.get(depthKey) ?? 1, next));
+          return next;
+        })
+      );
+    },
+    [depthKey]
+  );
+  const resolveRaw = useCallback3(
+    (key) => {
+      const resolved = dicts ? pickTranslation(dicts, key) : void 0;
+      if (resolved !== void 0) return resolved;
+      if (dicts) {
+        const chain = resolveTranslationChain(current);
+        if (dicts.length < chain.length) {
+          requestFallback(chain.length);
+        } else if (process.env.NODE_ENV !== "production") {
+          devWarnOnce(
+            `t-missing-key:${String(key)}`,
+            `'${String(key)}'\uB294 \uD50C\uB7AB\uD3FC \uBC88\uC5ED \uC0AC\uC804\uC5D0 \uC5C6\uB294 \uD0A4\uC785\uB2C8\uB2E4(\uC624\uD0C8\uC790\uC774\uAC70\uB098 useMessages \uB300\uC0C1\uC77C \uC218 \uC788\uC74C). \uD0A4 \uBB38\uC790\uC5F4\uC774 \uADF8\uB300\uB85C \uB80C\uB354\uB429\uB2C8\uB2E4.`
+          );
+        }
+      }
+      return void 0;
+    },
+    [dicts, current, requestFallback]
+  );
+  const t = useCallback3(
+    (key, params) => {
+      if (process.env.NODE_ENV !== "production") {
+        if (typeof params === "string") {
+          devWarnOnce(
+            `t-string-param:${String(key)}`,
+            `t('${String(key)}', ...)\uC758 2\uBC88\uC9F8 \uC778\uC790\uB294 \uBCF4\uAC04 \uD30C\uB77C\uBBF8\uD130 \uAC1D\uCCB4\uC785\uB2C8\uB2E4. fallback \uBB38\uC790\uC5F4\uC740 \uBB34\uC2DC\uB418\uACE0 \uD50C\uB7AB\uD3FC \uC0AC\uC804 \uAC12\uC774 \uB80C\uB354\uB429\uB2C8\uB2E4 \u2014 \uD15C\uD50C\uB9BF \uC790\uCCB4 \uBB38\uAD6C\uB294 useMessages\uB97C \uC4F0\uC138\uC694.`
+          );
+        }
+      }
+      const raw = resolveRaw(key);
+      if (process.env.NODE_ENV !== "production" && raw !== void 0 && /<\d+>/.test(raw)) {
+        devWarnOnce(
+          `t-rich-text:${String(key)}`,
+          `'${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 interpolateTranslation(raw ?? key, params);
+    },
+    [resolveRaw]
+  );
+  const tNode = useCallback3(
+    (key, options) => {
+      const raw = resolveRaw(key) ?? key;
+      const tokens = parseRichText(raw, options?.params);
+      return tokens.map((token, i) => {
+        if (token.type === "text") return token.value;
+        const element = options?.tags?.[token.index];
+        if (!element) {
+          if (process.env.NODE_ENV !== "production") {
+            devWarnOnce(
+              `tnode-missing-tag:${String(key)}:${token.index}`,
+              `'${String(key)}'\uC758 <${token.index}> \uD0DC\uADF8\uC5D0 \uB300\uC751\uD558\uB294 \uC5D8\uB9AC\uBA3C\uD2B8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 tags: { ${token.index}: <a href="\u2026" /> }\uB97C \uB118\uAE30\uC138\uC694. \uC9C0\uAE08\uC740 \uB0B4\uC6A9\uB9CC \uB80C\uB354\uB429\uB2C8\uB2E4.`
+            );
+          }
+          return token.value;
+        }
+        return cloneElement(element, { key: i }, token.value);
+      });
+    },
+    [resolveRaw]
+  );
+  return { current, t, tNode, ready: dicts !== void 0 };
+}
+export {
+  BstageContext,
+  BstageLocaleProvider,
+  __bstage_registry__,
+  createTemplate,
+  registerTemplate,
+  useBstageContext,
+  useBstageTranslations,
+  useLocale,
+  useMessages,
+  useNavigation,
+  usePlatformEvent,
+  useShadowStyle,
+  useSlotContext
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@bstage-sdk/react",
+  "version": "0.1.0",
+  "description": "bstage SDK React bindings — create b.stage templates with React",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bstage-sdk/web-sdk.git",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@bstage-sdk/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}