feat(renderer-adapter) : 增加 vue2 渲染适配器

packages/renderer-adapter/wujie-vue2/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@sy/wujie-vue3-renderer-adapter",
+  "name": "@sy/wujie-vue2-renderer-adapter",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.1",
-  "description": "wujie-vue3 ycode renderer adapter",
+  "description": "wujie-vue2 ycode renderer adapter",
   "type": "module",
   "scripts": {
     "build": "vite build"
@@ -27,13 +27,13 @@
   "dependencies": {
     "licia-es": "catalog:",
     "vue": "2.7.16",
+    "vue-property-decorator": "9.1.2",
     "wujie-vue2": "1.0.22"
   },
   "devDependencies": {
     "@types/axios": "0.14.4",
     "@vitejs/plugin-vue": "catalog:",
     "axios": "catalog:",
-    "vite-plugin-dts": "catalog:",
+    "vite-plugin-dts": "catalog:"
-    "vue-router": ""
   }
 }

packages/renderer-adapter/wujie-vue2/src/adapter.vue

@@ -1,126 +1,111 @@
-<script setup lang="ts">
+<!-- eslint-disable -->
-import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+<script lang="ts">
+import { defineComponent } from 'vue';
 
-import type { Router, RouteRecordRaw } from 'vue-router';
+import WujieVue from 'wujie-vue2';
-
-import { onBeforeUnmount, onMounted } from 'vue';
-
-import WujieVue from 'wujie-vue3';
 
 // @ts-ignore ignore the type error
 import { version } from '/package.json';
 
-// 定义拦截器类型
+export default defineComponent({
-interface AxiosInterceptors {
+  name: 'WujieAdapter',
-  request?: {
+  computed: {
-    onFulfilled?: (
+    finalUrl() {
-      config: InternalAxiosRequestConfig,
+      return `${this.url}?fileId=${this.fileId}&projectId=${this.projectId}&applicationId=${this.applicationId}`;
-    ) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
+    },
-    onRejected?: (error: any) => any;
+    subAppProps() {
-  };
+      return {
-  response?: {
+        ...this.$props,
-    onFulfilled?: (
+        adapterInfo: {
-      response: AxiosResponse,
+          version,
-    ) => AxiosResponse | Promise<AxiosResponse>;
+        },
-    onRejected?: (error: any) => any;
+      };
-  };
+    },
-}
-
-const props = withDefaults(
-  defineProps<{
-    [key: string]: any;
-    applicationId: number;
-    degrade?: boolean;
-    fileId: number | string;
-    interceptors?: AxiosInterceptors;
-    name?: string;
-    // 传递给子应用的参数 payload
-    payload?: Record<string, any>;
-    projectId: number;
-    route?: RouteRecordRaw;
-    router?: Router;
-    sync?: boolean;
-    url?: string;
-  }>(),
-  {
-    // 默认 wujie 降级，能避免很多兼容问题
-    degrade: true,
-    // 默认不使用拦截器
-    interceptors: () => ({}),
-    // 默认不使用 name
-    name: undefined,
-    // 默认不使用 payload
-    payload: () => ({}),
-    // 默认不使用 route
-    route: undefined,
-    // 默认不使用 router
-    router: undefined,
-    sync: true,
-    url: 'https://y-code-renderer.shiyue.com',
   },
-);
+  beforeUnmount() {
-
+    const { bus } = WujieVue;
-const { bus } = WujieVue;
+    bus.$off('message', this.handleMessage);
-
+    bus.$off('ready', this.handleReady);
-// 生命周期钩子
+    bus.$off('render-success', this.handleRenderSuccess);
-const beforeLoad = (appWindow: Window) => {
+    bus.$off('render-fail', this.handleRenderFail);
-  console.log(`${props.name} 开始加载`, appWindow);
+  },
-};
+  methods: {
-
+    afterMount(appWindow: any) {
-const afterMount = (appWindow: Window) => {
+      console.log(`${this.name || this.fileId} 加载完成`, appWindow);
-  console.log(`${props.name} 加载完成`, appWindow);
+    },
-};
+    beforeLoad(appWindow: any) {
-
+      console.log(`${this.name || this.fileId} 开始加载`, appWindow);
-// 事件处理
+    },
-const handleMessage = (data: any) => {
+    handleMessage(data: any) {
-  console.log(`${props.name} 收到子应用消息:`, data);
+      console.log(`${this.name || this.fileId} 收到子应用消息:`, data);
-};
+    },
-
+    handleReady(data: any) {
-// 准备传递给子应用的数据
+      console.log(`${this.name || this.fileId} 子应用就绪:`, data);
-const subAppProps = {
+    },
-  ...props,
+    handleRenderFail(error: any) {
-  adapterInfo: {
+      console.error(`${this.name || this.fileId} 子应用渲染失败:`, error);
-    version,
+    },
+    handleRenderSuccess() {
+      console.log(`${this.name || this.fileId} 子应用渲染成功`);
+    },
+  },
+  mounted() {
+    const { bus } = WujieVue;
+    bus.$on('message', this.handleMessage);
+    bus.$on('ready', this.handleReady);
+    bus.$on('render-success', this.handleRenderSuccess);
+    bus.$on('render-fail', this.handleRenderFail);
+  },
+  props: {
+    applicationId: {
+      required: true,
+      type: Number,
+    },
+    degrade: {
+      default: true,
+      type: Boolean,
+    },
+    fileId: {
+      required: true,
+      type: [Number, String],
+    },
+    interceptors: {
+      default: () => ({}),
+      type: Object,
+    },
+    name: {
+      type: String,
+    },
+    payload: {
+      default: () => ({}),
+      type: Object,
+    },
+    projectId: {
+      required: true,
+      type: Number,
+    },
+    route: {
+      type: Object,
+    },
+    router: {
+      type: Object,
+    },
+    sync: {
+      default: true,
+      type: Boolean,
+    },
+    url: {
+      default: 'https://y-code-renderer.shiyue.com',
+      type: String,
+    },
   },
-};
-
-// 监听子应用的事件
-const handleReady = (data: any) => {
-  console.log(`${props.name} 子应用就绪:`, data);
-  // 可以在这里执行一些操作
-};
-
-const handleRenderSuccess = () => {
-  console.log(`${props.name} 子应用渲染成功`);
-  // 通知父应用
-};
-
-const handleRenderFail = (error: any) => {
-  console.error(`${props.name} 子应用渲染失败:`, error);
-  // 处理错误情况
-};
-
-onMounted(() => {
-  // 注册事件监听
-  bus.$on('message', handleMessage);
-  bus.$on('ready', handleReady);
-  bus.$on('render-success', handleRenderSuccess);
-  bus.$on('render-fail', handleRenderFail);
-});
-
-onBeforeUnmount(() => {
-  // 移除所有事件监听
-  bus.$off('message', handleMessage);
-  bus.$off('ready', handleReady);
-  bus.$off('render-success', handleRenderSuccess);
-  bus.$off('render-fail', handleRenderFail);
 });
 </script>
 
 <template>
   <WujieVue
     :name="name || fileId"
-    :url="url"
+    :url="finalUrl"
     :sync="sync"
     width="100%"
     height="100%"

packages/renderer-adapter/wujie-vue3/src/adapter.vue

@@ -3,7 +3,7 @@ import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 
 import type { Router, RouteRecordRaw } from 'vue-router';
 
-import { onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
 
 import WujieVue from 'wujie-vue3';
 
@@ -84,6 +84,10 @@ const subAppProps = {
   },
 };
 
+const finalUrl = computed(() => {
+  return `${props.url}?fileId=${props.fileId}&projectId=${props.projectId}&applicationId=${props.applicationId}`;
+});
+
 // 监听子应用的事件
 const handleReady = (data: any) => {
   console.log(`${props.name} 子应用就绪:`, data);
@@ -120,7 +124,7 @@ onBeforeUnmount(() => {
 <template>
   <WujieVue
     :name="name || fileId"
-    :url="url"
+    :url="finalUrl"
     :sync="sync"
     width="100%"
     height="100%"

pnpm-lock.yaml

@@ -1954,6 +1954,34 @@ importers:
         specifier: 'catalog:'
         version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))
 
+  packages/renderer-adapter/wujie-vue2:
+    dependencies:
+      licia-es:
+        specifier: 'catalog:'
+        version: 1.47.0
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.8.2)
+      vue-property-decorator:
+        specifier: 9.1.2
+        version: 9.1.2(vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+      wujie-vue2:
+        specifier: 1.0.22
+        version: 1.0.22(vue@3.5.13(typescript@5.8.2))
+    devDependencies:
+      '@types/axios':
+        specifier: 0.14.4
+        version: 0.14.4
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 5.2.3(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+      axios:
+        specifier: 'catalog:'
+        version: 1.8.3(debug@4.4.0)
+      vite-plugin-dts:
+        specifier: 'catalog:'
+        version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))
+
   packages/renderer-adapter/wujie-vue3:
     dependencies:
       licia-es:
@@ -12695,6 +12723,11 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
+  vue-class-component@7.2.6:
+    resolution: {integrity: sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue-component-type-helpers@2.2.8:
     resolution: {integrity: sha512-4bjIsC284coDO9om4HPA62M7wfsTvcmZyzdfR0aUlFXqq4tXxM1APyXpNVxPC8QazKw9OhmZNHBVDA6ODaZsrA==}
 
@@ -12729,6 +12762,12 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
+  vue-property-decorator@9.1.2:
+    resolution: {integrity: sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==}
+    peerDependencies:
+      vue: ^3.5.13
+      vue-class-component: '*'
+
   vue-router@4.5.0:
     resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
     peerDependencies:
@@ -12983,6 +13022,11 @@ packages:
       utf-8-validate:
         optional: true
 
+  wujie-vue2@1.0.22:
+    resolution: {integrity: sha512-G+5B4y4C6NwYy31QL9pR5m+1BvQWSmgbQzFQdLEAJhFydS9dizQAgNK1VPfCBxSXM3jz2xfQz75WpE4aX4Jqdw==}
+    peerDependencies:
+      vue: ^3.5.13
+
   wujie-vue3@1.0.22:
     resolution: {integrity: sha512-/FD52+3rEg4vQb6EhSq+V9WMhaHYyVliUsVDBIzePcX0yUsep+4oC8r3EmyeS2dfEl3DCmMwLz5MnBGL3c4Msw==}
     peerDependencies:
@@ -26050,6 +26094,10 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
+  vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+
   vue-component-type-helpers@2.2.8: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.8.2)):
@@ -26095,6 +26143,11 @@ snapshots:
       clipboard: 2.0.11
       vue: 3.5.13(typescript@5.8.2)
 
+  vue-property-decorator@9.1.2(vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+      vue-class-component: 7.2.6(vue@3.5.13(typescript@5.8.2))
+
   vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
@@ -26429,6 +26482,11 @@ snapshots:
 
   ws@8.18.1: {}
 
+  wujie-vue2@1.0.22(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+      wujie: 1.0.22
+
   wujie-vue3@1.0.22(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       vue: 3.5.13(typescript@5.8.2)