@vnb/mfe-events 0.0.1-rc.6 → 0.0.1-rc.8

package/README.md

@@ -225,7 +225,7 @@ mfeBus.on(EvtMfe.ShlTokenExpired, (data) => {
   // 子应用 token 过期 → 重发当前 token
 });
 
-// 3. 定向发送（子应用必须已 register()，否则 emitTo 静默失败）
+// 3. 定向发送（三级降级：registry → DOM 扫描 iframe[data-mfe-app] → 广播 fallback）
 mfeEventPlugin.emitTo('mma', EvtMfe.RouteNavigate, { path: '/chairman' });
 
 // 4. 广播（所有子应用均可收到）
@@ -332,7 +332,7 @@ shlBus.on(EvtShl.TabOverflow, (data) => {
 |------|-----|------|------|---------|---------|
 | **ThemeUpdate** | `mfe:theme-update` | Shell → App | 主题切换 | `{ theme: 'light' \| 'dark' }` | "主题切换了，你们跟着换" |
 | **LocaleUpdate** | `mfe:locale-update` | Shell → App | 语言切换 | `{ locale: string }` | "语言切换了，你们跟着换" |
-| **BreakpointUpdate** | `mfe:breakpoint-update` | Shell → App | 响应式断点/横竖屏变化（Shell 基于 `window.matchMedia` 监听并广播，子应用收到后同步更新布局，如侧边栏收起、表格横向滚动等） | `{ current: string; orientation: 'portrait' \| 'landscape' }` | "屏幕尺寸变了，你们调整一下布局" |
+| **BreakpointUpdate** | `mfe:breakpoint-update` | Shell → App | 响应式断点/横竖屏变化（Shell 基于 `window.matchMedia` 监听并广播，子应用收到后同步更新布局，如侧边栏收起、表格横向滚动等） | `{ current: string; orientation: string }` | "屏幕尺寸变了，你们调整一下布局" |
 | **StateUpdate** | `mfe:state-update` | Shell → App | 全局状态同步 | `{ state: AppState; prev: AppState \| null }` | "全局状态更新了，你们同步" |
 | **ShellReady** | `mfe:shell-ready` | Shell → App | Shell 初始化完成 | `{}` | "我准备好了，你们可以开始工作" |
 | **Error** | `mfe:error` | App → Shell | 子应用错误上报 | `{ source: string; message: string; stack?: string }` | "我报错了，你看一下" |
@@ -349,8 +349,8 @@ shlBus.on(EvtShl.TabOverflow, (data) => {
 | **AuthSelfOk** | `mfe:auth-self-ok` | App → Shell | 自行登录成功 | `{ appId: string; user?: any; token?: string }` | "我自行登录成功了" |
 | **AuthSelfErr** | `mfe:auth-self-err` | App → Shell | 自行登录失败 | `{ appId: string; reason?: string }` | "我自行登录失败了" |
 | **AuthSelfDeny** | `mfe:auth-self-deny` | App → Shell | 子应用拒绝加载，请求基座卸载 | `{ appId: string; reason?: string }` | "我不想被加载，卸载掉我" |
-| **RouteNavigate** | `mfe:route-navigate` | Shell → App | Shell 指定子应用导航到路径（`emitTo` 定向） | `{ path: string }` | "跳到这个路径去" |
-| **RouteRefresh** | `mfe:route-refresh` | Shell → App | 要求子应用刷新当前页面，保留路由（`emitTo` 定向） | `{ path: string }` | "刷新你当前的路由/页面" |
+| **RouteNavigate** | `mfe:route-navigate` | Shell → App | Shell 指定子应用导航到路径（`emitTo` 定向） | `{ path: string; appId?: string }` | "跳到这个路径去" |
+| **RouteRefresh** | `mfe:route-refresh` | Shell → App | 要求子应用刷新当前页面，保留路由（`emitTo` 定向） | `{ path: string; appId?: string }` | "刷新你当前的路由/页面" |
 | **RouteChange** | `mfe:route-change` | App → Shell | 子应用上报路由变化 | `{ appId: string; path: string }` | "我路由变了，跟一下" |
 | **LifecycleAppClose** | `mfe:lifecycle-app-close` | Shell → App | Shell 关闭子应用 | `{ appId: string }` | "我要关掉你了" |
 | **LifecycleAppReady** | `mfe:lifecycle-app-ready` | App → Shell | 子应用初始化完成 | `{ appId: string }` | "我加载完了" |
@@ -573,8 +573,8 @@ mfeEventPlugin.register({
   appId: 'my-app',
   handlers: {
     [EvtMfe.BreakpointUpdate]: (data) => {
-      // data.current: 'xs' | 'sm' | 'lg'
-      // data.orientation: 'portrait' | 'landscape'
+      // data.current: string (如 'xs', 'sm', 'lg', 'md', 'xl' 等)
+      // data.orientation: string (如 'portrait', 'landscape')
       document.documentElement.dataset.breakpoint = data.current;
       document.documentElement.dataset.orientation = data.orientation;
     },
@@ -823,18 +823,14 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 2. 确认 Federation 配置中有 `@vnb/mfe-events` 且 `singleton: true`
 3. 确认使用的是事件常量 `EvtMfe.XXX` 而非硬编码字符串
 4. 控制台检查 `window.__MFE_EVENT_PLUGIN__` 是否存在
-5. 如果是 iframe，确认调用了 `mfeEventPlugin.registerIframe()`
-6. 如果是动态加载场景，`emitTo` 调用时子应用尚未注册，会在控制台看到警告：`emitTo: app not registered`
+5. 如果是 iframe，确认调用了 `mfeEventPlugin.registerIframe()`，或 iframe 设置了 `data-mfe-app="appId"` 属性
+6. `emitTo` 支持三级降级：registry 命中 → DOM 扫描 `iframe[data-mfe-app]` → 广播 fallback（带 appId 让子应用自判断）
 
 ### emitTo 报 app not registered
 
-动态加载时，如果 Shell 在子应用注册之前就调用了 `emitTo`，消息会丢失。控制台会输出：
-
-```
-[mfe-events] emitTo: app not registered: "mma" (event: mfe:route-navigate)
-```
-
-解决方案：确保子应用先调用 `register()`，再让 Shell 发 `emitTo`。或者在子应用 `LifecycleAppReady` 之后，再由子应用主动请求数据（而不是等 Shell push）。
+动态加载时，如果 Shell 在子应用注册之前就调用了 `emitTo`，插件会自动降级处理：
+1. 扫描 DOM 中 `iframe[data-mfe-app="appId"]`，找到则动态创建 transport 定向发送
+2. 都没找到则广播 `emit`（带 appId 参数），子应用收到后自行判断是否处理
 
 ### 通知不显示
 
@@ -844,7 +840,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 
 ### iframe 子应用收不到事件
 
-1. 确认 Shell 侧调用了 `mfeEventPlugin.registerIframe(appId, iframeEl, targetOrigin)`
+1. 确认 iframe 设置了 `data-mfe-app="appId"` 属性，或 Shell 调用了 `mfeEventPlugin.registerIframe(appId, iframeEl, targetOrigin)`
 2. 确认 `targetOrigin` 与 iframe 的 `src` origin 匹配（生产环境建议明确指定）
 3. 检查浏览器控制台是否有 postMessage 相关的 CSP 警告
 

package/dist/bus.d.ts

@@ -17,7 +17,6 @@ export declare class Bus<T extends Record<string, any>> {
      * Returns unsubscribe function
      */
     on<K extends keyof T>(event: K, handler: (data: T[K]) => void, options?: {
-        priority?: number;
         once?: boolean;
     }): () => void;
     /**
@@ -25,5 +24,9 @@ export declare class Bus<T extends Record<string, any>> {
      * Returns unsubscribe function
      */
     once<K extends keyof T>(event: K, handler: (data: T[K]) => void): () => void;
+    /**
+     * Destroy the bus and clean up all resources
+     */
+    destroy(): void;
 }
 //# sourceMappingURL=bus.d.ts.map

package/dist/bus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bus.d.ts","sourceRoot":"","sources":["../src/bus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,qBAAa,GAAG,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAChC,OAAO,CAAC,SAAS;gBAAT,SAAS,EAAE,SAAS;IAExC;;OAEG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAInD;;;OAGG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAClB,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7B,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,GAC9C,MAAM,IAAI;IAOb;;;OAGG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;CAO7E"}
+{"version":3,"file":"bus.d.ts","sourceRoot":"","sources":["../src/bus.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,qBAAa,GAAG,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAChC,OAAO,CAAC,SAAS;gBAAT,SAAS,EAAE,SAAS;IAExC;;OAEG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;IAInD;;;OAGG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAClB,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7B,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,GAC3B,MAAM,IAAI;IAOb;;;OAGG;IACH,IAAI,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI;IAQ5E;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}

package/dist/index.d.ts

@@ -20,7 +20,8 @@ export { MemoryTransport, WindowTransport, PostMessageTransport, IframeProxyTran
 export type { Transport } from './transport';
 export { Bus } from './bus';
 export { EvtShl, EvtMfe, EvtApp } from './constants';
-export type { PayloadShl, PayloadMfe, PayloadApp, NotificationType, NotificationConfig, AppType, AppMeta, PluginOptions, } from './types';
+export type { PayloadShl, PayloadMfe, PayloadApp, NotificationType, NotificationConfig, AppType, AppMeta, PluginOptions, User, AppState, BreakpointValue, DeviceTypeValue, } from './types';
+export { Breakpoint, DeviceType, breakpointToDevice, } from './types';
 export { mfeEventPlugin } from './plugin';
 export type { default as MfeEventPlugin } from './plugin';
 export { mfeEventPlugin as default } from './plugin';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrD,YAAY,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,OAAO,EACP,aAAa,GACd,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC;AAOrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,MAAM,iBAA6C,CAAC;AAwBjE,eAAO,MAAM,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrD,YAAY,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,OAAO,EACP,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,GAChB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC;AAOrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,MAAM,iBAA6C,CAAC;AAmBjE,eAAO,MAAM,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @vnb/mfe-events v0.0.1-rc.6
+ * @vnb/mfe-events v0.0.1-rc.8
  * Micro frontend event plugin for cross-app communication with type safety
  * License: MIT
  */
@@ -32,27 +32,47 @@ class MemoryTransport {
         this.target.addEventListener(event, wrapper);
         return () => this.target.removeEventListener(event, wrapper);
     }
+    destroy() {
+        this.target = new EventTarget();
+    }
 }
 /**
  * WindowTransport — MF/NF Remote Apps communication
  * Uses window.CustomEvent for same-tab communication
  */
 class WindowTransport {
+    constructor() {
+        this.listeners = new Map();
+    }
     emit(event, data) {
         window.dispatchEvent(new CustomEvent(event, { detail: data }));
     }
     on(event, handler) {
         const wrapper = (e) => handler(e.detail);
         window.addEventListener(event, wrapper);
-        return () => window.removeEventListener(event, wrapper);
+        this.listeners.set(event, wrapper);
+        return () => {
+            window.removeEventListener(event, wrapper);
+            this.listeners.delete(event);
+        };
+    }
+    destroy() {
+        this.listeners.forEach((wrapper, event) => {
+            window.removeEventListener(event, wrapper);
+        });
+        this.listeners.clear();
     }
 }
 /**
  * PostMessageTransport — iframe Remote Apps communication
  * Uses window.postMessage for cross-origin communication
+ *
+ * 注意：Shell 环境下不要使用此Transport（Shell 应使用 IframeProxyTransport）。
+ * 此Transport 用于 iframe 子应用向 parent Shell 发送消息。
  */
 class PostMessageTransport {
     constructor(options = {}) {
+        this.listeners = new Map();
         this.targetWindow = options.targetWindow || window.parent;
         this.targetOrigin = options.targetOrigin || '*';
     }
@@ -66,7 +86,17 @@ class PostMessageTransport {
             }
         };
         window.addEventListener('message', wrapper);
-        return () => window.removeEventListener('message', wrapper);
+        this.listeners.set(event, wrapper);
+        return () => {
+            window.removeEventListener('message', wrapper);
+            this.listeners.delete(event);
+        };
+    }
+    destroy() {
+        this.listeners.forEach((wrapper) => {
+            window.removeEventListener('message', wrapper);
+        });
+        this.listeners.clear();
     }
 }
 /**
@@ -75,6 +105,7 @@ class PostMessageTransport {
  */
 class IframeProxyTransport {
     constructor(iframe, targetOrigin = '*') {
+        this.listeners = new Map();
         this.iframe = iframe;
         this.targetOrigin = targetOrigin;
     }
@@ -83,7 +114,6 @@ class IframeProxyTransport {
     }
     on(event, handler) {
         const wrapper = (e) => {
-            // Only receive messages from this specific iframe
             if (e.source === this.iframe.contentWindow &&
                 e.data?.scope === 'mfe' &&
                 e.data?.event === event) {
@@ -91,18 +121,20 @@ class IframeProxyTransport {
             }
         };
         window.addEventListener('message', wrapper);
-        return () => window.removeEventListener('message', wrapper);
+        this.listeners.set(event, wrapper);
+        return () => {
+            window.removeEventListener('message', wrapper);
+            this.listeners.delete(event);
+        };
+    }
+    destroy() {
+        this.listeners.forEach((wrapper) => {
+            window.removeEventListener('message', wrapper);
+        });
+        this.listeners.clear();
     }
 }
 
-var transport = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    IframeProxyTransport: IframeProxyTransport,
-    MemoryTransport: MemoryTransport,
-    PostMessageTransport: PostMessageTransport,
-    WindowTransport: WindowTransport
-});
-
 /**
  * @xxxx/mfe-events — Type-safe Event Bus
  *
@@ -140,6 +172,12 @@ class Bus {
         });
         return off;
     }
+    /**
+     * Destroy the bus and clean up all resources
+     */
+    destroy() {
+        this.transport.destroy?.();
+    }
 }
 
 /**
@@ -212,18 +250,45 @@ const EvtMfe = {
 // ─────────────────────────────────────────────
 function EvtApp(appId, name) {
     if (!appId || !name) {
-        console.warn("[EvtApp] appId and name must not be empty");
+        console.warn('[EvtApp] appId and name must not be empty');
         return '';
     }
     return `app:${appId}-${name}`;
 }
 
+/**
+ * @xxxx/mfe-events — Type Definitions
+ *
+ * Payload types for each event scope.
+ * Keys must reference constants from constants.ts.
+ */
+/** Shell breakpoint constants */
+const Breakpoint = {
+    XS: 'xs',
+    SM: 'sm',
+    LG: 'lg',
+};
+/** Device type constants */
+const DeviceType = {
+    MOBILE: 'mobile',
+    TABLET: 'tablet',
+    WEB: 'web',
+};
+/** Breakpoint → Device type (mobile<768 / tablet 768-1023 / web≥1024) */
+function breakpointToDevice(bp) {
+    if (bp === 'xs')
+        return 'mobile';
+    if (bp === 'sm')
+        return 'tablet';
+    return 'web';
+}
+
 /**
  * @xxxx/mfe-events — Plugin Core
  *
  * MfeEventPlugin manages Remote App registration and provides:
  * - register/unregister for Remote Apps
- * - emitTo for targeted communication
+ * - emitTo for targeted communication (with 3-tier fallback)
  * - emit for broadcast communication
  * - Notification API (success/info/warning/danger)
  * - Automatic iframe message proxying
@@ -270,6 +335,18 @@ class MfeEventPlugin {
         }
     }
     // ─────────────────────────────────────────
+    // Environment Detection
+    // ─────────────────────────────────────────
+    /**
+     * Auto-detect current runtime environment.
+     * - iframe (window.self !== window.top) → 'iframe'
+     * - top-level window → 'nf' (Native Federation)
+     * - Webpack MF sub-app (also top-level) → 'nf', can explicitly pass type:'mf'
+     */
+    detectType() {
+        return typeof window !== 'undefined' && window.self !== window.top ? 'iframe' : 'nf';
+    }
+    // ─────────────────────────────────────────
     // Custom Renderer (for Shell integration)
     // ─────────────────────────────────────────
     /**
@@ -461,7 +538,7 @@ class MfeEventPlugin {
             this._notifyItems.delete(id);
         }
         this._pendingClosers.delete(id);
-        // NotifyShell listeners of close — keep DOM and programmatic paths symmetric
+        // Dispatch NotifyClose — keep DOM and programmatic paths symmetric
         window.dispatchEvent(new CustomEvent(EvtMfe.NotifyClose, {
             detail: { id },
             bubbles: true,
@@ -477,29 +554,40 @@ class MfeEventPlugin {
     // ─────────────────────────────────────────
     /**
      * Register a Remote App with event handlers
+     *
+     * `options.type` 可选 —— 不传时自动识别环境：
+     * - iframe 内（window.self !== window.top）→ 'iframe'：监听 postMessage，
+     *   并自动建立下行 message → CustomEvent 桥，同窗自定义事件也能收到。
+     * - 顶层 window → 'nf'（Native Federation，监听 CustomEvent）；
+     *   Webpack MF 同窗也是 CustomEvent，可显式传 type:'mf'。
      */
     register(options) {
         if (this.registry.has(options.appId)) {
             this.unregister(options.appId);
         }
+        const type = options.type || this.detectType();
         const meta = {
             appId: options.appId,
-            type: options.type || 'mf',
+            type,
         };
         const cleanups = [];
         // Auto-subscribe handlers
         Object.entries(options.handlers).forEach(([event, handler]) => {
             if (!handler)
                 return;
-            if (options.type === 'iframe') {
-                // iframe: listen via postMessage
-                const wrapper = (e) => {
+            if (type === 'iframe') {
+                // iframe: Shell 经 postMessage 下行 → 监听 message 事件
+                const msgWrapper = (e) => {
                     if (e.data?.scope === 'mfe' && e.data?.event === event) {
                         handler(e.data.data);
                     }
                 };
-                window.addEventListener('message', wrapper);
-                cleanups.push(() => window.removeEventListener('message', wrapper));
+                window.addEventListener('message', msgWrapper);
+                cleanups.push(() => window.removeEventListener('message', msgWrapper));
+                // Auto-bridge: Shell postMessage → same-tab CustomEvent
+                const ceWrapper = (e) => handler(e.detail);
+                window.addEventListener(event, ceWrapper);
+                cleanups.push(() => window.removeEventListener(event, ceWrapper));
             }
             else {
                 // MF/NF: listen via window.CustomEvent
@@ -514,25 +602,12 @@ class MfeEventPlugin {
      * Register an iframe Remote App (Shell side)
      */
     registerIframe(appId, iframe, targetOrigin) {
-        const TIMEOUT_MS = 5000;
-        Promise.resolve().then(function () { return transport; })
-            .then(({ IframeProxyTransport }) => {
-            const transport = new IframeProxyTransport(iframe, targetOrigin);
-            this.registry.set(appId, {
-                meta: { appId, type: 'iframe', transport },
-                options: { appId, type: 'iframe', handlers: {} },
-                cleanups: [],
-            });
-        })
-            .catch((err) => {
-            MfeEventPlugin._logError('registerIframe', 'failed to load transport for', `"${appId}": ${err}`);
+        const transport = new IframeProxyTransport(iframe, targetOrigin);
+        this.registry.set(appId, {
+            meta: { appId, type: 'iframe', transport },
+            options: { appId, type: 'iframe', handlers: {} },
+            cleanups: [],
         });
-        // Timeout protection — if import hangs, registry stays clean and caller knows nothing
-        setTimeout(() => {
-            if (!this.registry.has(appId)) {
-                MfeEventPlugin._logError('registerIframe', 'timeout', `${TIMEOUT_MS}ms for "${appId}"`);
-            }
-        }, TIMEOUT_MS);
     }
     /**
      * Unregister a Remote App
@@ -541,47 +616,84 @@ class MfeEventPlugin {
         const entry = this.registry.get(appId);
         if (entry) {
             entry.cleanups.forEach((fn) => fn());
+            entry.meta.transport?.destroy?.();
         }
         this.registry.delete(appId);
     }
+    /**
+     * Unregister all Remote Apps
+     */
+    unregisterAll() {
+        this.registry.forEach((entry) => {
+            entry.cleanups.forEach((fn) => fn());
+            entry.meta.transport?.destroy?.();
+        });
+        this.registry.clear();
+    }
+    /**
+     * Check if an app is registered
+     */
+    has(appId) {
+        return this.registry.has(appId);
+    }
     // ─────────────────────────────────────────
     // Shell Targeted Communication
     // ─────────────────────────────────────────
     /**
      * Send event to a specific Remote App
+     *
+     * 3-tier fallback:
+     * 1. Registry hit → send directly
+     * 2. DOM scan → find iframe[data-mfe-app="appId"], create transport on-the-fly
+     * 3. Fallback → broadcast with appId for self-filtering
      */
     emitTo(appId, event, data) {
+        // 1. Registry hit
         const app = this.registry.get(appId);
-        if (!app) {
-            MfeEventPlugin._logWarn('emitTo', 'app not registered', `"${appId}" (event: ${event})`);
+        if (app) {
+            if (app.meta.type === 'iframe' && app.meta.transport) {
+                app.meta.transport.emit(event, data);
+            }
+            else {
+                const handler = app.options.handlers[event];
+                if (handler) {
+                    handler(data);
+                }
+            }
             return;
         }
-        if (app.meta.type === 'iframe' && app.meta.transport) {
-            // iframe: send via postMessage
-            app.meta.transport.emit(event, data);
-        }
-        else {
-            // MF/NF: call the registered handler directly
-            const handler = app.options.handlers[event];
-            if (handler) {
-                handler(data);
-            }
+        // 2. DOM scan: iframe[data-mfe-app="appId"]
+        const iframe = document.querySelector(`iframe[data-mfe-app="${appId}"]`);
+        if (iframe) {
+            const transport = new IframeProxyTransport(iframe);
+            this.registry.set(appId, {
+                meta: { appId, type: 'iframe', transport },
+                options: { appId, type: 'iframe', handlers: {} },
+                cleanups: [],
+            });
+            transport.emit(event, data);
+            return;
         }
+        // 3. Fallback: broadcast with appId for self-filtering
+        const fallbackData = { ...data };
+        fallbackData.appId = appId;
+        this.emit(event, fallbackData);
     }
     // ─────────────────────────────────────────
     // Shell Broadcast Communication
     // ─────────────────────────────────────────
     /**
      * Broadcast event to all Remote Apps (MF + iframe)
+     *
+     * - MF/NF: window CustomEvent
+     * - iframe: postMessage to every iframe with data-mfe-app attribute
      */
     emit(event, data) {
-        // Broadcast to all MF Remote Apps
+        // Broadcast to all MF/NF Remote Apps via CustomEvent
         window.dispatchEvent(new CustomEvent(event, { detail: data }));
-        // Broadcast to all iframe Remote Apps
-        this.registry.forEach(({ meta }) => {
-            if (meta.type === 'iframe' && meta.transport) {
-                meta.transport.emit(event, data);
-            }
+        // Broadcast to all iframes with data-mfe-app attribute
+        document.querySelectorAll('iframe[data-mfe-app]').forEach((iframe) => {
+            iframe.contentWindow?.postMessage({ scope: 'mfe', event, data, ts: Date.now() }, '*');
         });
     }
     // ─────────────────────────────────────────
@@ -613,11 +725,6 @@ class MfeEventPlugin {
     }
     /**
      * Build the closer function for a notification
-     *
-     * Render path determines closer behavior:
-     * - _customRenderer (Shell): dispatch NotifyClose + customCloser
-     * - appWithFallback: dispatch NotifyClose + fallback.close()
-     * - DOM fallback: _removeToast (which dispatches NotifyClose itself)
      */
     _buildCloser(id, renderPath, fallbackCloser) {
         return () => {
@@ -637,7 +744,6 @@ class MfeEventPlugin {
                     fallbackCloser?.close();
                     break;
                 case 'dom':
-                    // _removeToast dispatches NotifyClose itself (symmetric with DOM-driven closes)
                     this._removeToast(id);
                     break;
             }
@@ -648,7 +754,6 @@ class MfeEventPlugin {
      * Show a notification
      *
      * Flow: dispatch NotifyShow → render (custom > fallback > DOM) → register closer
-     * The closer is registered exactly once per notification, no overwrite.
      */
     notify(config) {
         if (typeof window === 'undefined')
@@ -668,19 +773,16 @@ class MfeEventPlugin {
         // 2. Render + register closer (exactly once per path)
         let closer;
         if (this._customRenderer) {
-            // Shell path: custom renderer handles display
             this._customRenderer(finalConfig);
             closer = this._buildCloser(id, 'custom');
         }
         else {
-            // Check if any registered app provided a fallback renderer
             const appWithFallback = [...this.registry.values()].find((app) => app.options.fallback);
             if (appWithFallback) {
                 const fallbackCloser = appWithFallback.options.fallback(finalConfig);
                 closer = this._buildCloser(id, 'fallback', fallbackCloser);
             }
             else {
-                // DOM fallback
                 this._renderToast(finalConfig);
                 closer = this._buildCloser(id, 'dom');
             }
@@ -728,21 +830,15 @@ class MfeEventPlugin {
     }
     /**
      * Close all notifications
-     *
-     * Snapshot closers before iteration to prevent re-entrancy:
-     * a closer may dispatch new events that add to _pendingClosers.
      */
     closeAll() {
-        // Snapshot — closers may trigger new notify() calls
         const closers = [...this._pendingClosers.values()];
         this._pendingClosers.clear();
         closers.forEach((closer) => closer());
-        // Dispatch close-all event
         window.dispatchEvent(new CustomEvent(EvtMfe.NotifyCloseAll, {
             detail: {},
             bubbles: true,
         }));
-        // Clear DOM toasts
         if (this._customClear) {
             this._customClear();
         }
@@ -858,16 +954,11 @@ const shlBus = new Bus(new MemoryTransport());
  */
 function createMfeBus() {
     if (typeof window === 'undefined') {
-        // SSR fallback — use MemoryTransport
         return new Bus(new MemoryTransport());
     }
     if (window.self !== window.top) {
-        // iframe environment → send to parent via postMessage
         return new Bus(new PostMessageTransport());
     }
-    // Shell/MF/NF environment → use window.CustomEvent
-    // Federation modules may not share the same instance,
-    // so window is used as the shared channel fallback
     return new Bus(new WindowTransport());
 }
 const mfeBus = createMfeBus();
@@ -881,7 +972,9 @@ if (typeof window !== 'undefined') {
     }
 }
 
+exports.Breakpoint = Breakpoint;
 exports.Bus = Bus;
+exports.DeviceType = DeviceType;
 exports.EvtApp = EvtApp;
 exports.EvtMfe = EvtMfe;
 exports.EvtShl = EvtShl;
@@ -889,6 +982,7 @@ exports.IframeProxyTransport = IframeProxyTransport;
 exports.MemoryTransport = MemoryTransport;
 exports.PostMessageTransport = PostMessageTransport;
 exports.WindowTransport = WindowTransport;
+exports.breakpointToDevice = breakpointToDevice;
 exports.default = mfeEventPlugin;
 exports.mfeBus = mfeBus;
 exports.mfeEventPlugin = mfeEventPlugin;