feat: 渲染器实现异端请求

apps/renderer/src/App.vue

@@ -1,68 +1,63 @@
 <script setup lang="ts">
-import { onMounted, computed, watch } from 'vue';
+// @ts-nocheck
-import { ElLoading  } from 'element-plus';
+import { computed, watch, ref, getCurrentInstance } from 'vue'
-import Postmate from 'postmate';
+import { ElLoading } from 'element-plus'
+import Postmate from 'postmate'
 import { createRenderer, createProvider } from '@vtj/renderer'
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery } from '@tanstack/vue-query'
 
 import { LowCodeService } from './service'
+import { getFile } from './io'
 
-import { getFile } from './io';
+// 响应式状态
+const renderer = ref()
+const lowCodeService = new LowCodeService()
 
-const lowCodeService = new LowCodeService();
+// Postmate 握手协议
-
+const handshake = new Postmate.Model({})
-const handshake = new Postmate.Model({});
 
+// 数据模型
 const model = {
   name: '',
   applicationId: -1,
   projectId: -1,
   fileId: '',
-  url: '',
+  url: ''
 }
 
+// 数据查询
 const { data: file, isFetching } = useQuery({
   queryKey: ['getFile'],
   queryFn: async () => {
-    await handshake.then(parent => {
+    await handshake.then((parent) => {
-    parent.emit('sync-context', 'Hello, World!');
+      parent.emit('sync-context', 'Hello, World!')
-    Object.assign(model, parent.model);
+      Object.assign(model, parent.model)
-    console.log('model', model);
+      console.log('model', model)
-  });
+    })
-    return getFile(model.fileId);
-  },
-});
 
+    return getFile(model.fileId).then(() => {
+      const { provider, onReady } = createProvider({
+        service: lowCodeService,
+        project: { id: '4' }
+      })
+      onReady(async () => {
+        console.log('onReady')
+        const instance = getCurrentInstance()
+        instance?.appContext.app.use(provider)
+        renderer.value = await provider.getRenderComponent(model.fileId)
+      })
+    })
+  }
+})
+
+// 加载状态监控
 watch(isFetching, (newVal) => {
   if (newVal) {
-    ElLoading.service({
+    ElLoading.service({ text: '低代码文件加载中...' })
-      text: '低代码文件加载中...',
-    });
   } else {
-    ElLoading.service().close();
+    ElLoading.service().close()
   }
-});
+})
-
-const { provider, onReady } = createProvider({
-  // runtime: 'web',
-  service: lowCodeService,
-  project: {
-    id: '4'
-  },
-});
-
-
-onReady(() => {
-  console.log('onReady');
-});
-
-const renderer = computed(() => {
-  console.log(file?.value?.dsl.id);
-  if (file?.value?.dsl) {
-    return createRenderer({ dsl: file.value.dsl }).renderer;
-  }
-  return null;
-});
 </script>
 
 <template>