@solapi/ui-kit 1.0.2 → 1.0.4

package/dist/federation/FederationErrorBoundary.d.ts

@@ -0,0 +1,48 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+export interface FederationErrorInfo {
+    error: Error;
+    errorInfo?: ErrorInfo;
+}
+export interface FederationErrorBoundaryProps {
+    children: ReactNode;
+    /** 에러 발생 시 표시할 커스텀 fallback 컴포넌트 */
+    fallback?: React.ComponentType<{
+        error: Error;
+        onRetry: () => void;
+        onReload: () => void;
+    }>;
+    /** 에러 발생 시 콜백 */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** 재시도 시 콜백 */
+    onRetry?: () => void;
+    /** 에러 상세 표시 여부 (기본: false) */
+    showDetails?: boolean;
+    /** 에러 메시지 커스텀 */
+    message?: string;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * Federation 모듈 로드 에러를 처리하는 Error Boundary
+ *
+ * @example
+ * ```tsx
+ * import { FederationErrorBoundary } from '@solapi/ui-kit/federation'
+ *
+ * <FederationErrorBoundary>
+ *   <Tabs items={items} value={value} onChange={onChange} />
+ * </FederationErrorBoundary>
+ * ```
+ */
+declare class FederationErrorBoundary extends Component<FederationErrorBoundaryProps, State> {
+    constructor(props: FederationErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<State>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    handleReload: () => void;
+    render(): ReactNode;
+}
+export default FederationErrorBoundary;

package/dist/federation/hookLoader.d.ts

@@ -1,8 +1,11 @@
 /**
  * 원격 hook을 안전하게 로드하는 wrapper 생성
  *
- * 전제: createSafeProviderLoader가 로딩 완료까지 children을 렌더하지 않음
- * → useSafeHook() 호출 시 모듈은 이미 캐시에 있거나, 실패로 확정된 상태
- * → 캐시에서 동기 조회 후 원격 hook 또는 fallback 반환
+ * 팩토리 호출 시점에 loadModuleSafely를 즉시 트리거하여 모듈 로드를 시작한다.
+ * createSafeProviderLoader가 children 렌더를 차단하므로,
+ * 실제 hook 호출 시점에는 모듈이 이미 캐시에 있거나 실패로 확정된 상태이다.
+ *
+ * 동일한 moduleImport 함수 참조를 Provider/Component 로더와 공유하면
+ * loadModuleSafely 내부 중복 방지(dedup)로 한 번만 로드된다.
  */
 export declare const createSafeHookLoader: <T>(moduleImport: () => Promise<any>, hookName: string, fallback: T) => (() => T);

package/dist/federation/index.d.ts

@@ -2,3 +2,4 @@ export { loadModuleSafely, getModuleFromCache, clearModuleCache, isModuleEmpty,
 export { createSafeProviderLoader, type SafeProviderLoaderOptions } from './providerLoader';
 export { createSafeComponentLoader } from './componentLoader';
 export { createSafeHookLoader } from './hookLoader';
+export { default as FederationErrorBoundary, type FederationErrorBoundaryProps, type FederationErrorInfo } from './FederationErrorBoundary';

package/dist/federation.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("react"),d=new Map,h=new Map,C=async e=>{const t=h.get(e);if(t)return t;const o=d.get(e);if(o)return o;const s=e().then(n=>{const c=n?.default||n;return d.set(e,c),c}).catch(n=>(console.error("모듈 로드 실패:",n),d.set(e,{}),{})).finally(()=>{h.delete(e)});return h.set(e,s),s},p=e=>d.get(e)??null,F=e=>{e?(d.delete(e),h.delete(e)):(d.clear(),h.clear())},M=e=>!e||Object.keys(e).length===0,y=(e,t,o)=>{if(!e)return;const n=(e?.default||e)?.[t]??e?.[t];return n||console.error(`[${t}] ${o}를 모듈에서 찾을 수 없습니다.`,"모듈 키:",Object.keys(e||{})),n},b=({message:e})=>r.jsxs("div",{style:{height:"43px",lineHeight:"41px",backgroundColor:"#feebec",color:"#cf3035",textAlign:"center",fontSize:"14px",fontWeight:500,borderBottom:"1px solid #cf3035",zIndex:1e4},children:["⚠️ ",e]}),k=(e,t,o={})=>{const{warningMessage:s}=o;return n=>{const[c,a]=l.useState(null),[S,g]=l.useState(!0),[x,i]=l.useState(!1),u=l.useRef(e);if(u.current=e,l.useEffect(()=>{C(u.current).then(f=>{if(M(f)){i(!0);return}const L=y(f,t,"모듈");L?a(()=>L):i(!0)}).finally(()=>g(!1))},[t]),S)return null;if(x){const f=n?.children;return r.jsxs(r.Fragment,{children:[s&&r.jsx(b,{message:s}),f&&r.jsx("div",{style:{paddingTop:"16px"},children:f})]})}if(c)return r.jsx(c,{...n});const j=n?.children;return j?r.jsx(r.Fragment,{children:j}):null}},v=({componentName:e,children:t})=>r.jsxs("div",{style:{padding:"16px",backgroundColor:"#fff3cd",border:"1px solid #ffc107",borderRadius:"4px"},children:[r.jsxs("p",{style:{fontWeight:500},children:["⚠️ ",e," 컴포넌트를 찾을 수 없습니다."]}),t]}),R=(e,t)=>o=>{const[s,n]=l.useState(null),[c,a]=l.useState(!0),[S,g]=l.useState(!1),x=l.useRef(e);if(x.current=e,l.useEffect(()=>{C(x.current).then(i=>{if(M(i)){g(!0);return}const u=y(i,t,"컴포넌트");u?n(()=>u):g(!0)}).finally(()=>a(!1))},[t]),c){const i=o?.children;return i?r.jsx(r.Fragment,{children:i}):null}if(S||!s){const i=o?.children;return r.jsx(v,{componentName:t,children:i})}return r.jsx(s,{...o})},E=(e,t,o)=>{let s=null,n=!1;return()=>{if(!n){const c=p(e);if(c&&(n=!0,!M(c))){const a=y(c,t,"hook");a&&typeof a=="function"&&(s=a)}}if(s)try{return s()}catch(c){return console.error(`[${t}] 원격 hook 호출 실패, fallback 사용:`,c),o}return o}};exports.clearModuleCache=F;exports.createSafeComponentLoader=R;exports.createSafeHookLoader=E;exports.createSafeProviderLoader=k;exports.findExportInModule=y;exports.getModuleFromCache=p;exports.isModuleEmpty=M;exports.loadModuleSafely=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),d=new Map,h=new Map,y=async e=>{const r=h.get(e);if(r)return r;const o=d.get(e);if(o)return o;const s=e().then(n=>{const a=n?.default||n;return d.set(e,a),a}).catch(n=>(console.error("모듈 로드 실패:",n),d.set(e,{}),{})).finally(()=>{h.delete(e)});return h.set(e,s),s},k=e=>d.get(e)??null,M=e=>{e?(d.delete(e),h.delete(e)):(d.clear(),h.clear())},b=e=>!e||Object.keys(e).length===0,j=(e,r,o)=>{if(!e)return;const n=(e?.default||e)?.[r]??e?.[r];return n||console.error(`[${r}] ${o}를 모듈에서 찾을 수 없습니다.`,"모듈 키:",Object.keys(e||{})),n},R=({message:e})=>t.jsxs("div",{style:{height:"43px",lineHeight:"41px",backgroundColor:"#feebec",color:"#cf3035",textAlign:"center",fontSize:"14px",fontWeight:500,borderBottom:"1px solid #cf3035",zIndex:1e4},children:["⚠️ ",e]}),F=(e,r,o={})=>{const{warningMessage:s}=o;return n=>{const[a,l]=c.useState(null),[S,g]=c.useState(!0),[x,i]=c.useState(!1),u=c.useRef(e);if(u.current=e,c.useEffect(()=>{y(u.current).then(f=>{if(b(f)){i(!0);return}const C=j(f,r,"모듈");C?l(()=>C):i(!0)}).finally(()=>g(!1))},[r]),S)return null;if(x){const f=n?.children;return t.jsxs(t.Fragment,{children:[s&&t.jsx(R,{message:s}),f&&t.jsx("div",{style:{paddingTop:"16px"},children:f})]})}if(a)return t.jsx(a,{...n});const v=n?.children;return v?t.jsx(t.Fragment,{children:v}):null}},L=({componentName:e,children:r})=>t.jsxs("div",{style:{padding:"16px",backgroundColor:"#fff3cd",border:"1px solid #ffc107",borderRadius:"4px"},children:[t.jsxs("p",{style:{fontWeight:500},children:["⚠️ ",e," 컴포넌트를 찾을 수 없습니다."]}),r]}),_=(e,r)=>o=>{const[s,n]=c.useState(null),[a,l]=c.useState(!0),[S,g]=c.useState(!1),x=c.useRef(e);if(x.current=e,c.useEffect(()=>{y(x.current).then(i=>{if(b(i)){g(!0);return}const u=j(i,r,"컴포넌트");u?n(()=>u):g(!0)}).finally(()=>l(!1))},[r]),a){const i=o?.children;return i?t.jsx(t.Fragment,{children:i}):null}if(S||!s){const i=o?.children;return t.jsx(L,{componentName:r,children:i})}return t.jsx(s,{...o})},E=(e,r,o)=>{let s=null,n=!1;return y(e),()=>{if(!n){const a=k(e);if(a&&(n=!0,!b(a))){const l=j(a,r,"hook");l&&typeof l=="function"&&(s=l)}}if(s)try{return s()}catch(a){return console.error(`[${r}] 원격 hook 호출 실패, fallback 사용:`,a),o}return o}},m="_root_16oj8_1 _base_1tubv_6",D="_message_16oj8_14",w="_errorDetails_16oj8_22",z="_actions_16oj8_38",p={root:m,message:D,errorDetails:w,actions:z};class P extends c.Component{constructor(r){super(r),this.state={hasError:!1,error:null,errorInfo:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,o){this.setState({errorInfo:o}),this.props.onError?.(r,o)}handleRetry=()=>{this.setState({hasError:!1,error:null,errorInfo:null}),this.props.onRetry?.()};handleReload=()=>{window.location.reload()};render(){if(!this.state.hasError)return this.props.children;const{error:r,errorInfo:o}=this.state,{fallback:s,showDetails:n=!1,message:a}=this.props;return s?t.jsx(s,{error:r,onRetry:this.handleRetry,onReload:this.handleReload}):t.jsxs("div",{className:p.root,children:[t.jsx("div",{className:p.message,children:a||"모듈을 로드하는 중 오류가 발생했습니다."}),n&&r&&t.jsxs("div",{className:p.errorDetails,children:[r.toString(),o?.componentStack&&`
+${o.componentStack}`]}),t.jsxs("div",{className:p.actions,children:[t.jsx("button",{type:"button",onClick:this.handleRetry,style:{padding:"6px 16px",fontSize:"14px",fontWeight:500,border:"1px solid var(--color-border, #ddd)",borderRadius:"var(--border-radius-sm, 4px)",background:"var(--color-background, #fff)",color:"var(--color-text, #333)",cursor:"pointer"},children:"재시도"}),t.jsx("button",{type:"button",onClick:this.handleReload,style:{padding:"6px 16px",fontSize:"14px",fontWeight:500,border:"none",borderRadius:"var(--border-radius-sm, 4px)",background:"var(--color-primary, #5780ff)",color:"#fff",cursor:"pointer"},children:"새로고침"})]})]})}}exports.FederationErrorBoundary=P;exports.clearModuleCache=M;exports.createSafeComponentLoader=_;exports.createSafeHookLoader=E;exports.createSafeProviderLoader=F;exports.findExportInModule=j;exports.getModuleFromCache=k;exports.isModuleEmpty=b;exports.loadModuleSafely=y;

package/dist/federation.js

@@ -1,28 +1,28 @@
-import { jsxs as y, Fragment as M, jsx as l } from "react/jsx-runtime";
-import { useState as d, useRef as F, useEffect as v } from "react";
-const a = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), S = async (e) => {
-  const n = h.get(e);
-  if (n) return n;
-  const r = a.get(e);
+import { jsxs as l, Fragment as k, jsx as i } from "react/jsx-runtime";
+import { useState as d, useRef as M, useEffect as F, Component as L } from "react";
+const u = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), v = async (e) => {
+  const r = p.get(e);
   if (r) return r;
-  const o = e().then((t) => {
-    const c = t?.default || t;
-    return a.set(e, c), c;
-  }).catch((t) => (console.error("모듈 로드 실패:", t), a.set(e, {}), {})).finally(() => {
-    h.delete(e);
+  const t = u.get(e);
+  if (t) return t;
+  const n = e().then((o) => {
+    const s = o?.default || o;
+    return u.set(e, s), s;
+  }).catch((o) => (console.error("모듈 로드 실패:", o), u.set(e, {}), {})).finally(() => {
+    p.delete(e);
   });
-  return h.set(e, o), o;
-}, j = (e) => a.get(e) ?? null, H = (e) => {
-  e ? (a.delete(e), h.delete(e)) : (a.clear(), h.clear());
-}, L = (e) => !e || Object.keys(e).length === 0, p = (e, n, r) => {
+  return p.set(e, n), n;
+}, E = (e) => u.get(e) ?? null, H = (e) => {
+  e ? (u.delete(e), p.delete(e)) : (u.clear(), p.clear());
+}, C = (e) => !e || Object.keys(e).length === 0, R = (e, r, t) => {
   if (!e) return;
-  const t = (e?.default || e)?.[n] ?? e?.[n];
-  return t || console.error(
-    `[${n}] ${r}를 모듈에서 찾을 수 없습니다.`,
+  const o = (e?.default || e)?.[r] ?? e?.[r];
+  return o || console.error(
+    `[${r}] ${t}를 모듈에서 찾을 수 없습니다.`,
     "모듈 키:",
     Object.keys(e || {})
-  ), t;
-}, R = ({ message: e }) => /* @__PURE__ */ y(
+  ), o;
+}, j = ({ message: e }) => /* @__PURE__ */ l(
   "div",
   {
     style: {
@@ -41,92 +41,177 @@ const a = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), S = async (e
       e
     ]
   }
-), P = (e, n, r = {}) => {
-  const { warningMessage: o } = r;
-  return (t) => {
-    const [c, i] = d(null), [C, g] = d(!0), [x, s] = d(!1), f = F(e);
-    if (f.current = e, v(() => {
-      S(f.current).then((u) => {
-        if (L(u)) {
-          s(!0);
+), P = (e, r, t = {}) => {
+  const { warningMessage: n } = t;
+  return (o) => {
+    const [s, a] = d(null), [x, g] = d(!0), [b, c] = d(!1), f = M(e);
+    if (f.current = e, F(() => {
+      v(f.current).then((h) => {
+        if (C(h)) {
+          c(!0);
           return;
         }
-        const k = p(u, n, "모듈");
-        k ? i(() => k) : s(!0);
+        const S = R(h, r, "모듈");
+        S ? a(() => S) : c(!0);
       }).finally(() => g(!1));
-    }, [n]), C) return null;
-    if (x) {
-      const u = t?.children;
-      return /* @__PURE__ */ y(M, { children: [
-        o && /* @__PURE__ */ l(R, { message: o }),
-        u && /* @__PURE__ */ l("div", { style: { paddingTop: "16px" }, children: u })
+    }, [r]), x) return null;
+    if (b) {
+      const h = o?.children;
+      return /* @__PURE__ */ l(k, { children: [
+        n && /* @__PURE__ */ i(j, { message: n }),
+        h && /* @__PURE__ */ i("div", { style: { paddingTop: "16px" }, children: h })
       ] });
     }
-    if (c) return /* @__PURE__ */ l(c, { ...t });
-    const b = t?.children;
-    return b ? /* @__PURE__ */ l(M, { children: b }) : null;
+    if (s) return /* @__PURE__ */ i(s, { ...o });
+    const _ = o?.children;
+    return _ ? /* @__PURE__ */ i(k, { children: _ }) : null;
   };
-}, w = ({
+}, m = ({
   componentName: e,
-  children: n
-}) => /* @__PURE__ */ y("div", { style: {
+  children: r
+}) => /* @__PURE__ */ l("div", { style: {
   padding: "16px",
   backgroundColor: "#fff3cd",
   border: "1px solid #ffc107",
   borderRadius: "4px"
 }, children: [
-  /* @__PURE__ */ y("p", { style: { fontWeight: 500 }, children: [
+  /* @__PURE__ */ l("p", { style: { fontWeight: 500 }, children: [
     "⚠️ ",
     e,
     " 컴포넌트를 찾을 수 없습니다."
   ] }),
-  n
-] }), T = (e, n) => (r) => {
-  const [o, t] = d(null), [c, i] = d(!0), [C, g] = d(!1), x = F(e);
-  if (x.current = e, v(() => {
-    S(x.current).then((s) => {
-      if (L(s)) {
+  r
+] }), T = (e, r) => (t) => {
+  const [n, o] = d(null), [s, a] = d(!0), [x, g] = d(!1), b = M(e);
+  if (b.current = e, F(() => {
+    v(b.current).then((c) => {
+      if (C(c)) {
         g(!0);
         return;
       }
-      const f = p(s, n, "컴포넌트");
-      f ? t(() => f) : g(!0);
-    }).finally(() => i(!1));
-  }, [n]), c) {
-    const s = r?.children;
-    return s ? /* @__PURE__ */ l(M, { children: s }) : null;
+      const f = R(c, r, "컴포넌트");
+      f ? o(() => f) : g(!0);
+    }).finally(() => a(!1));
+  }, [r]), s) {
+    const c = t?.children;
+    return c ? /* @__PURE__ */ i(k, { children: c }) : null;
   }
-  if (C || !o) {
-    const s = r?.children;
-    return /* @__PURE__ */ l(w, { componentName: n, children: s });
+  if (x || !n) {
+    const c = t?.children;
+    return /* @__PURE__ */ i(m, { componentName: r, children: c });
   }
-  return /* @__PURE__ */ l(o, { ...r });
-}, W = (e, n, r) => {
-  let o = null, t = !1;
-  return () => {
-    if (!t) {
-      const c = j(e);
-      if (c && (t = !0, !L(c))) {
-        const i = p(c, n, "hook");
-        i && typeof i == "function" && (o = i);
+  return /* @__PURE__ */ i(n, { ...t });
+}, K = (e, r, t) => {
+  let n = null, o = !1;
+  return v(e), () => {
+    if (!o) {
+      const s = E(e);
+      if (s && (o = !0, !C(s))) {
+        const a = R(s, r, "hook");
+        a && typeof a == "function" && (n = a);
       }
     }
-    if (o)
+    if (n)
       try {
-        return o();
-      } catch (c) {
-        return console.error(`[${n}] 원격 hook 호출 실패, fallback 사용:`, c), r;
+        return n();
+      } catch (s) {
+        return console.error(`[${r}] 원격 hook 호출 실패, fallback 사용:`, s), t;
       }
-    return r;
+    return t;
   };
+}, D = "_root_16oj8_1 _base_1tubv_6", w = "_message_16oj8_14", z = "_errorDetails_16oj8_22", W = "_actions_16oj8_38", y = {
+  root: D,
+  message: w,
+  errorDetails: z,
+  actions: W
 };
+class O extends L {
+  constructor(r) {
+    super(r), this.state = { hasError: !1, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { hasError: !0, error: r };
+  }
+  componentDidCatch(r, t) {
+    this.setState({ errorInfo: t }), this.props.onError?.(r, t);
+  }
+  handleRetry = () => {
+    this.setState({ hasError: !1, error: null, errorInfo: null }), this.props.onRetry?.();
+  };
+  handleReload = () => {
+    window.location.reload();
+  };
+  render() {
+    if (!this.state.hasError)
+      return this.props.children;
+    const { error: r, errorInfo: t } = this.state, {
+      fallback: n,
+      showDetails: o = !1,
+      message: s
+    } = this.props;
+    return n ? /* @__PURE__ */ i(
+      n,
+      {
+        error: r,
+        onRetry: this.handleRetry,
+        onReload: this.handleReload
+      }
+    ) : /* @__PURE__ */ l("div", { className: y.root, children: [
+      /* @__PURE__ */ i("div", { className: y.message, children: s || "모듈을 로드하는 중 오류가 발생했습니다." }),
+      o && r && /* @__PURE__ */ l("div", { className: y.errorDetails, children: [
+        r.toString(),
+        t?.componentStack && `
+${t.componentStack}`
+      ] }),
+      /* @__PURE__ */ l("div", { className: y.actions, children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: this.handleRetry,
+            style: {
+              padding: "6px 16px",
+              fontSize: "14px",
+              fontWeight: 500,
+              border: "1px solid var(--color-border, #ddd)",
+              borderRadius: "var(--border-radius-sm, 4px)",
+              background: "var(--color-background, #fff)",
+              color: "var(--color-text, #333)",
+              cursor: "pointer"
+            },
+            children: "재시도"
+          }
+        ),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: this.handleReload,
+            style: {
+              padding: "6px 16px",
+              fontSize: "14px",
+              fontWeight: 500,
+              border: "none",
+              borderRadius: "var(--border-radius-sm, 4px)",
+              background: "var(--color-primary, #5780ff)",
+              color: "#fff",
+              cursor: "pointer"
+            },
+            children: "새로고침"
+          }
+        )
+      ] })
+    ] });
+  }
+}
 export {
+  O as FederationErrorBoundary,
   H as clearModuleCache,
   T as createSafeComponentLoader,
-  W as createSafeHookLoader,
+  K as createSafeHookLoader,
   P as createSafeProviderLoader,
-  p as findExportInModule,
-  j as getModuleFromCache,
-  L as isModuleEmpty,
-  S as loadModuleSafely
+  R as findExportInModule,
+  E as getModuleFromCache,
+  C as isModuleEmpty,
+  v as loadModuleSafely
 };