@empjs/bridge-vue3 0.0.3

package/README.md

@@ -0,0 +1,143 @@
+# EMP Bridge React
+
+EMP Bridge React 是一个用于跨 React 版本组件通信的桥接工具，它解决了不同 React 版本之间组件共享和通信的问题。
+
+## 功能特点
+
+- 支持不同 React 版本（16/17/18/19）之间的组件共享
+- 提供简单的 API 用于生产者和消费者之间的通信
+- 自动处理 React 不同版本的渲染和卸载方法差异
+- 支持异步加载组件
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @empjs/bridge-react
+
+# 使用 yarn
+yarn add @empjs/bridge-react
+
+# 使用 pnpm
+pnpm add @empjs/bridge-react
+```
+
+## 基本用法
+
+### 生产者（导出组件的应用）
+
+```tsx
+// 在 React 16/17 应用中
+import React from 'react';
+import { createBridgeComponent } from '@empjs/bridge-react';
+
+// 创建要共享的组件
+const MyComponent = (props) => {
+  return <div>Hello from React 16/17! {props.message}</div>;
+};
+
+// 导出桥接组件
+export default createBridgeComponent(MyComponent, {
+  React,
+  ReactDOM: require('react-dom'),
+  // React 18+ 才有 createRoot
+  // createRoot: require('react-dom/client').createRoot
+});
+```
+
+### 消费者（使用组件的应用）
+
+```tsx
+// 在 React 18/19 应用中
+import React from 'react';
+import { createRemoteAppComponent } from '@empjs/bridge-react';
+
+// 导入远程组件（可以是动态导入）
+import RemoteComponent from 'remote-app/MyComponent';
+
+// 创建可在当前 React 版本中使用的组件
+const BridgedComponent = createRemoteAppComponent(
+  RemoteComponent,
+  {
+    React,
+    ReactDOM: require('react-dom'),
+    createRoot: require('react-dom/client').createRoot
+  },
+  {
+    onError: (error) => console.error('Failed to load component:', error)
+  }
+);
+
+// 在应用中使用
+function App() {
+  return (
+    <div>
+      <h1>My App (React 18/19)</h1>
+      <BridgedComponent message="Passed from React 18/19" />
+    </div>
+  );
+}
+```
+
+## API 参考
+
+### createBridgeComponent
+
+用于生产者包装应用级别导出模块。
+
+```typescript
+function createBridgeComponent(
+  Component: React.ComponentType<any>,
+  options: {
+    React: any;
+    ReactDOM: any;
+    createRoot?: Function;
+  }
+): BridgeProvider
+```
+
+参数:
+- `Component`: 要导出的 React 组件
+- `options`: React 相关配置
+  - `React`: React 实例
+  - `ReactDOM`: ReactDOM 实例
+  - `createRoot`: (可选) React 18+ 的 createRoot 方法
+
+### createRemoteAppComponent
+
+用于消费者加载应用级别模块。
+
+```typescript
+function createRemoteAppComponent(
+  component: ComponentProvider,
+  reactOptions: {
+    React: any;
+    ReactDOM: any;
+    createRoot?: Function;
+  },
+  options?: {
+    onError?: (error: Error) => void;
+  }
+): React.ComponentType<any>
+```
+
+参数:
+- `component`: 组件提供者函数，可以是同步或异步的
+- `reactOptions`: 当前应用的 React 相关配置
+  - `React`: React 实例
+  - `ReactDOM`: ReactDOM 实例
+  - `createRoot`: (可选) React 18+ 的 createRoot 方法
+- `options`: (可选) 额外配置
+  - `onError`: 错误处理回调函数
+
+## 使用场景
+
+1. 微前端架构中不同 React 版本的应用集成
+2. 逐步升级大型 React 应用时的版本兼容
+3. 共享组件库到不同 React 版本的项目中
+
+## 注意事项
+
+- 确保正确提供对应版本的 React 和 ReactDOM 实例
+- 对于 React 18+，需要提供 createRoot 方法
+- 组件间通信仅限于 props 传递，不支持 Context API 跨版本共享

package/dist/index.cjs

@@ -0,0 +1,167 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createBridgeComponent: ()=>createBridgeComponent,
+    createRemoteAppComponent: ()=>createRemoteAppComponent,
+    default: ()=>__WEBPACK_DEFAULT_EXPORT__
+});
+function createBridgeComponent(Component, options) {
+    const { createApp } = options.Vue;
+    return function() {
+        const appMap = new Map();
+        const render = (dom, props)=>{
+            try {
+                const existingApp = appMap.get(dom);
+                if (existingApp) {
+                    if (props) Object.keys(props).forEach((key)=>{
+                        existingApp._instance.props[key] = props[key];
+                    });
+                } else {
+                    const app = createApp(Component, props || {});
+                    if (options.plugin) options.plugin(app);
+                    app.mount(dom);
+                    appMap.set(dom, app);
+                }
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render/update Vue component', error);
+                throw error;
+            }
+        };
+        const destroy = (dom)=>{
+            const app = appMap.get(dom);
+            if (!app) return;
+            try {
+                app.unmount();
+                appMap.delete(dom);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount Vue component', error);
+            }
+        };
+        return {
+            render,
+            destroy
+        };
+    };
+}
+function createRemoteAppComponent(component, vueOptions, options = {}) {
+    if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
+    const { Vue } = vueOptions;
+    return defineComponent({
+        name: 'RemoteAppComponent',
+        props: {},
+        setup () {
+            const provider = ref(null);
+            const providerInfo = ref(null);
+            const isMounted = ref(false);
+            const containerRef = ref(null);
+            const loadComponent = async ()=>{
+                try {
+                    if ('function' == typeof component) {
+                        const result = component();
+                        if (result instanceof Promise) {
+                            const module = await result;
+                            providerInfo.value = module.default;
+                        } else providerInfo.value = component;
+                    }
+                    if (isMounted.value && containerRef.value) renderComponent();
+                } catch (error) {
+                    if (options.onError) options.onError(error);
+                    console.error('[EMP-ERROR] Failed to load component', error);
+                }
+            };
+            const renderComponent = ()=>{
+                if (!providerInfo.value || !containerRef.value) return;
+                try {
+                    if (!provider.value) provider.value = providerInfo.value();
+                    provider.value.render(containerRef.value, getCurrentInstance()?.props || {});
+                } catch (error) {
+                    console.error('[EMP-ERROR] Failed to render component', error);
+                }
+            };
+            const unmountComponent = ()=>{
+                if (provider.value && containerRef.value) try {
+                    provider.value.destroy(containerRef.value);
+                    provider.value = null;
+                } catch (error) {
+                    console.error('[EMP-ERROR] Failed to unmount component', error);
+                }
+            };
+            onMounted(()=>{
+                isMounted.value = true;
+                if (providerInfo.value) renderComponent();
+            });
+            onUpdated(()=>{
+                if (provider.value && containerRef.value) provider.value.render(containerRef.value, getCurrentInstance()?.props || {});
+            });
+            onBeforeUnmount(()=>{
+                isMounted.value = false;
+                const cleanup = ()=>unmountComponent();
+                if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
+                else setTimeout(cleanup, 0);
+            });
+            loadComponent();
+            return {
+                containerRef
+            };
+        },
+        render () {
+            return Vue.h('div', {
+                ref: 'containerRef'
+            });
+        }
+    });
+}
+function defineComponent(options) {
+    return options;
+}
+function ref(initialValue) {
+    return {
+        value: initialValue || null
+    };
+}
+function onMounted(fn) {}
+function onUpdated(fn) {}
+function onBeforeUnmount(fn) {}
+function getCurrentInstance() {
+    return null;
+}
+const __WEBPACK_DEFAULT_EXPORT__ = {
+    createBridgeComponent,
+    createRemoteAppComponent
+};
+exports.createBridgeComponent = __webpack_exports__.createBridgeComponent;
+exports.createRemoteAppComponent = __webpack_exports__.createRemoteAppComponent;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "createBridgeComponent",
+    "createRemoteAppComponent",
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["webpack://@empjs/bridge-vue3/webpack/runtime/define_property_getters","webpack://@empjs/bridge-vue3/webpack/runtime/has_own_property","webpack://@empjs/bridge-vue3/webpack/runtime/make_namespace_object","webpack://@empjs/bridge-vue3/./src/index.ts"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// Type definitions\nexport interface BridgeProviderReturn {\n  render: (dom: HTMLElement, props?: Record<string, any>) => void\n  destroy: (dom: HTMLElement) => void\n}\n\nexport type BridgeProvider = () => BridgeProviderReturn\nexport type AsyncBridgeProvider = () => Promise<{default: BridgeProvider}>\nexport type ComponentProvider = BridgeProvider | AsyncBridgeProvider\n\ninterface Vue3Options {\n  Vue?: any\n  plugin?: (app: any) => void\n}\n\n/**\n * Create bridge component - for producer to wrap application-level export modules\n */\nexport function createBridgeComponent(Component: any, options: Vue3Options): BridgeProvider {\n  const {createApp} = options.Vue\n\n  return function (): BridgeProviderReturn {\n    const appMap = new Map<HTMLElement, any>()\n\n    const render = (dom: HTMLElement, props?: Record<string, any>): void => {\n      try {\n        const existingApp = appMap.get(dom)\n\n        if (existingApp) {\n          // Update props for existing app\n          if (props) {\n            Object.keys(props).forEach(key => {\n              existingApp._instance.props[key] = props[key]\n            })\n          }\n        } else {\n          // Create new app instance\n          const app = createApp(Component, props || {})\n\n          // 使用自定义插件（如果提供）\n          if (options.plugin) {\n            options.plugin(app)\n          }\n\n          app.mount(dom)\n          appMap.set(dom, app)\n        }\n      } catch (error) {\n        console.error('[EMP-ERROR] Failed to render/update Vue component', error)\n        throw error\n      }\n    }\n\n    const destroy = (dom: HTMLElement): void => {\n      const app = appMap.get(dom)\n      if (!app) return\n\n      try {\n        app.unmount()\n        appMap.delete(dom)\n      } catch (error) {\n        console.error('[EMP-ERROR] Failed to unmount Vue component', error)\n      }\n    }\n\n    return {render, destroy}\n  }\n}\n\n/**\n * Create remote app component - for consumer to load application-level modules\n */\nexport function createRemoteAppComponent(\n  component: ComponentProvider,\n  vueOptions: Vue3Options,\n  options: {onError?: (error: Error) => void} = {},\n): any {\n  if (!component) {\n    throw new Error('createRemoteAppComponent: component parameter cannot be empty')\n  }\n\n  const {Vue} = vueOptions\n\n  return defineComponent({\n    name: 'RemoteAppComponent',\n    props: {},\n    setup() {\n      const provider = ref<BridgeProviderReturn | null>(null)\n      const providerInfo = ref<BridgeProvider | null>(null)\n      const isMounted = ref(false)\n      const containerRef = ref<HTMLElement | null>(null)\n\n      const loadComponent = async () => {\n        try {\n          if (typeof component === 'function') {\n            const result = component()\n\n            if (result instanceof Promise) {\n              const module = await result\n              providerInfo.value = module.default\n            } else {\n              providerInfo.value = component as BridgeProvider\n            }\n          }\n\n          if (isMounted.value && containerRef.value) {\n            renderComponent()\n          }\n        } catch (error) {\n          if (options.onError) options.onError(error as Error)\n          console.error('[EMP-ERROR] Failed to load component', error)\n        }\n      }\n\n      const renderComponent = () => {\n        if (!providerInfo.value || !containerRef.value) return\n\n        try {\n          if (!provider.value) {\n            provider.value = providerInfo.value()\n          }\n          provider.value.render(containerRef.value, getCurrentInstance()?.props || {})\n        } catch (error) {\n          console.error('[EMP-ERROR] Failed to render component', error)\n        }\n      }\n\n      const unmountComponent = () => {\n        if (provider.value && containerRef.value) {\n          try {\n            provider.value.destroy(containerRef.value)\n            provider.value = null\n          } catch (error) {\n            console.error('[EMP-ERROR] Failed to unmount component', error)\n          }\n        }\n      }\n\n      onMounted(() => {\n        isMounted.value = true\n        if (providerInfo.value) renderComponent()\n      })\n\n      onUpdated(() => {\n        if (provider.value && containerRef.value) {\n          provider.value.render(containerRef.value, getCurrentInstance()?.props || {})\n        }\n      })\n\n      onBeforeUnmount(() => {\n        isMounted.value = false\n        const cleanup = () => unmountComponent()\n\n        if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n          window.requestAnimationFrame(cleanup)\n        } else {\n          setTimeout(cleanup, 0)\n        }\n      })\n\n      // 立即加载组件\n      loadComponent()\n\n      return {\n        containerRef,\n      }\n    },\n    render() {\n      return Vue.h('div', {ref: 'containerRef'})\n    },\n  })\n}\n\n// 添加必要的导入声明\nfunction defineComponent(options: any): any {\n  return options\n}\n\nfunction ref<T>(initialValue?: T): {value: T | null} {\n  return {value: initialValue || null}\n}\n\nfunction onMounted(fn: () => void): void {}\nfunction onUpdated(fn: () => void): void {}\nfunction onBeforeUnmount(fn: () => void): void {}\nfunction getCurrentInstance(): {props: Record<string, any>} | null {\n  return null\n}\n\nexport default {\n  createBridgeComponent,\n  createRemoteAppComponent,\n}\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","createBridgeComponent","Component","options","createApp","appMap","Map","render","dom","props","existingApp","app","error","console","destroy","createRemoteAppComponent","component","vueOptions","Error","Vue","defineComponent","provider","ref","providerInfo","isMounted","containerRef","loadComponent","result","Promise","module","renderComponent","getCurrentInstance","unmountComponent","onMounted","onUpdated","onBeforeUnmount","cleanup","window","setTimeout","initialValue","fn"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+export interface BridgeProviderReturn {
+    render: (dom: HTMLElement, props?: Record<string, any>) => void;
+    destroy: (dom: HTMLElement) => void;
+}
+export type BridgeProvider = () => BridgeProviderReturn;
+export type AsyncBridgeProvider = () => Promise<{
+    default: BridgeProvider;
+}>;
+export type ComponentProvider = BridgeProvider | AsyncBridgeProvider;
+interface Vue3Options {
+    Vue?: any;
+    plugin?: (app: any) => void;
+}
+/**
+ * Create bridge component - for producer to wrap application-level export modules
+ */
+export declare function createBridgeComponent(Component: any, options: Vue3Options): BridgeProvider;
+/**
+ * Create remote app component - for consumer to load application-level modules
+ */
+export declare function createRemoteAppComponent(component: ComponentProvider, vueOptions: Vue3Options, options?: {
+    onError?: (error: Error) => void;
+}): any;
+declare const _default: {
+    createBridgeComponent: typeof createBridgeComponent;
+    createRemoteAppComponent: typeof createRemoteAppComponent;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,127 @@
+function createBridgeComponent(Component, options) {
+    const { createApp } = options.Vue;
+    return function() {
+        const appMap = new Map();
+        const render = (dom, props)=>{
+            try {
+                const existingApp = appMap.get(dom);
+                if (existingApp) {
+                    if (props) Object.keys(props).forEach((key)=>{
+                        existingApp._instance.props[key] = props[key];
+                    });
+                } else {
+                    const app = createApp(Component, props || {});
+                    if (options.plugin) options.plugin(app);
+                    app.mount(dom);
+                    appMap.set(dom, app);
+                }
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to render/update Vue component', error);
+                throw error;
+            }
+        };
+        const destroy = (dom)=>{
+            const app = appMap.get(dom);
+            if (!app) return;
+            try {
+                app.unmount();
+                appMap.delete(dom);
+            } catch (error) {
+                console.error('[EMP-ERROR] Failed to unmount Vue component', error);
+            }
+        };
+        return {
+            render,
+            destroy
+        };
+    };
+}
+function createRemoteAppComponent(component, vueOptions, options = {}) {
+    if (!component) throw new Error('createRemoteAppComponent: component parameter cannot be empty');
+    const { Vue } = vueOptions;
+    return defineComponent({
+        name: 'RemoteAppComponent',
+        props: {},
+        setup () {
+            const provider = ref(null);
+            const providerInfo = ref(null);
+            const isMounted = ref(false);
+            const containerRef = ref(null);
+            const loadComponent = async ()=>{
+                try {
+                    if ('function' == typeof component) {
+                        const result = component();
+                        if (result instanceof Promise) {
+                            const module = await result;
+                            providerInfo.value = module.default;
+                        } else providerInfo.value = component;
+                    }
+                    if (isMounted.value && containerRef.value) renderComponent();
+                } catch (error) {
+                    if (options.onError) options.onError(error);
+                    console.error('[EMP-ERROR] Failed to load component', error);
+                }
+            };
+            const renderComponent = ()=>{
+                if (!providerInfo.value || !containerRef.value) return;
+                try {
+                    if (!provider.value) provider.value = providerInfo.value();
+                    provider.value.render(containerRef.value, getCurrentInstance()?.props || {});
+                } catch (error) {
+                    console.error('[EMP-ERROR] Failed to render component', error);
+                }
+            };
+            const unmountComponent = ()=>{
+                if (provider.value && containerRef.value) try {
+                    provider.value.destroy(containerRef.value);
+                    provider.value = null;
+                } catch (error) {
+                    console.error('[EMP-ERROR] Failed to unmount component', error);
+                }
+            };
+            onMounted(()=>{
+                isMounted.value = true;
+                if (providerInfo.value) renderComponent();
+            });
+            onUpdated(()=>{
+                if (provider.value && containerRef.value) provider.value.render(containerRef.value, getCurrentInstance()?.props || {});
+            });
+            onBeforeUnmount(()=>{
+                isMounted.value = false;
+                const cleanup = ()=>unmountComponent();
+                if ('undefined' != typeof window && window.requestAnimationFrame) window.requestAnimationFrame(cleanup);
+                else setTimeout(cleanup, 0);
+            });
+            loadComponent();
+            return {
+                containerRef
+            };
+        },
+        render () {
+            return Vue.h('div', {
+                ref: 'containerRef'
+            });
+        }
+    });
+}
+function defineComponent(options) {
+    return options;
+}
+function ref(initialValue) {
+    return {
+        value: initialValue || null
+    };
+}
+function onMounted(fn) {}
+function onUpdated(fn) {}
+function onBeforeUnmount(fn) {}
+function getCurrentInstance() {
+    return null;
+}
+const src = {
+    createBridgeComponent,
+    createRemoteAppComponent
+};
+export { createBridgeComponent, createRemoteAppComponent, src as default };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["webpack://@empjs/bridge-vue3/./src/index.ts"],"sourcesContent":["// Type definitions\nexport interface BridgeProviderReturn {\n  render: (dom: HTMLElement, props?: Record<string, any>) => void\n  destroy: (dom: HTMLElement) => void\n}\n\nexport type BridgeProvider = () => BridgeProviderReturn\nexport type AsyncBridgeProvider = () => Promise<{default: BridgeProvider}>\nexport type ComponentProvider = BridgeProvider | AsyncBridgeProvider\n\ninterface Vue3Options {\n  Vue?: any\n  plugin?: (app: any) => void\n}\n\n/**\n * Create bridge component - for producer to wrap application-level export modules\n */\nexport function createBridgeComponent(Component: any, options: Vue3Options): BridgeProvider {\n  const {createApp} = options.Vue\n\n  return function (): BridgeProviderReturn {\n    const appMap = new Map<HTMLElement, any>()\n\n    const render = (dom: HTMLElement, props?: Record<string, any>): void => {\n      try {\n        const existingApp = appMap.get(dom)\n\n        if (existingApp) {\n          // Update props for existing app\n          if (props) {\n            Object.keys(props).forEach(key => {\n              existingApp._instance.props[key] = props[key]\n            })\n          }\n        } else {\n          // Create new app instance\n          const app = createApp(Component, props || {})\n\n          // 使用自定义插件（如果提供）\n          if (options.plugin) {\n            options.plugin(app)\n          }\n\n          app.mount(dom)\n          appMap.set(dom, app)\n        }\n      } catch (error) {\n        console.error('[EMP-ERROR] Failed to render/update Vue component', error)\n        throw error\n      }\n    }\n\n    const destroy = (dom: HTMLElement): void => {\n      const app = appMap.get(dom)\n      if (!app) return\n\n      try {\n        app.unmount()\n        appMap.delete(dom)\n      } catch (error) {\n        console.error('[EMP-ERROR] Failed to unmount Vue component', error)\n      }\n    }\n\n    return {render, destroy}\n  }\n}\n\n/**\n * Create remote app component - for consumer to load application-level modules\n */\nexport function createRemoteAppComponent(\n  component: ComponentProvider,\n  vueOptions: Vue3Options,\n  options: {onError?: (error: Error) => void} = {},\n): any {\n  if (!component) {\n    throw new Error('createRemoteAppComponent: component parameter cannot be empty')\n  }\n\n  const {Vue} = vueOptions\n\n  return defineComponent({\n    name: 'RemoteAppComponent',\n    props: {},\n    setup() {\n      const provider = ref<BridgeProviderReturn | null>(null)\n      const providerInfo = ref<BridgeProvider | null>(null)\n      const isMounted = ref(false)\n      const containerRef = ref<HTMLElement | null>(null)\n\n      const loadComponent = async () => {\n        try {\n          if (typeof component === 'function') {\n            const result = component()\n\n            if (result instanceof Promise) {\n              const module = await result\n              providerInfo.value = module.default\n            } else {\n              providerInfo.value = component as BridgeProvider\n            }\n          }\n\n          if (isMounted.value && containerRef.value) {\n            renderComponent()\n          }\n        } catch (error) {\n          if (options.onError) options.onError(error as Error)\n          console.error('[EMP-ERROR] Failed to load component', error)\n        }\n      }\n\n      const renderComponent = () => {\n        if (!providerInfo.value || !containerRef.value) return\n\n        try {\n          if (!provider.value) {\n            provider.value = providerInfo.value()\n          }\n          provider.value.render(containerRef.value, getCurrentInstance()?.props || {})\n        } catch (error) {\n          console.error('[EMP-ERROR] Failed to render component', error)\n        }\n      }\n\n      const unmountComponent = () => {\n        if (provider.value && containerRef.value) {\n          try {\n            provider.value.destroy(containerRef.value)\n            provider.value = null\n          } catch (error) {\n            console.error('[EMP-ERROR] Failed to unmount component', error)\n          }\n        }\n      }\n\n      onMounted(() => {\n        isMounted.value = true\n        if (providerInfo.value) renderComponent()\n      })\n\n      onUpdated(() => {\n        if (provider.value && containerRef.value) {\n          provider.value.render(containerRef.value, getCurrentInstance()?.props || {})\n        }\n      })\n\n      onBeforeUnmount(() => {\n        isMounted.value = false\n        const cleanup = () => unmountComponent()\n\n        if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n          window.requestAnimationFrame(cleanup)\n        } else {\n          setTimeout(cleanup, 0)\n        }\n      })\n\n      // 立即加载组件\n      loadComponent()\n\n      return {\n        containerRef,\n      }\n    },\n    render() {\n      return Vue.h('div', {ref: 'containerRef'})\n    },\n  })\n}\n\n// 添加必要的导入声明\nfunction defineComponent(options: any): any {\n  return options\n}\n\nfunction ref<T>(initialValue?: T): {value: T | null} {\n  return {value: initialValue || null}\n}\n\nfunction onMounted(fn: () => void): void {}\nfunction onUpdated(fn: () => void): void {}\nfunction onBeforeUnmount(fn: () => void): void {}\nfunction getCurrentInstance(): {props: Record<string, any>} | null {\n  return null\n}\n\nexport default {\n  createBridgeComponent,\n  createRemoteAppComponent,\n}\n"],"names":["createBridgeComponent","Component","options","createApp","appMap","Map","render","dom","props","existingApp","Object","key","app","error","console","destroy","createRemoteAppComponent","component","vueOptions","Error","Vue","defineComponent","provider","ref","providerInfo","isMounted","containerRef","loadComponent","result","Promise","module","renderComponent","getCurrentInstance","unmountComponent","onMounted","onUpdated","onBeforeUnmount","cleanup","window","setTimeout","initialValue","fn"],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@empjs/bridge-vue3",
+  "version": "0.0.3",
+  "description": "Emp Bridge Vue v3",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "maintainers": [
+    "xuhongbin",
+    "ckken",
+    "doerme",
+    "ron0115"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/empjs/emp.git",
+    "directory": "packages/bridge-vue3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "author": "Ken",
+  "dependencies": {},
+  "devDependencies": {},
+  "scripts": {
+    "dev": "rslib build --watch --env-mode development",
+    "build": "rslib build"
+  }
+}