chore: update

src/views/AboutView.vue

@@ -2,7 +2,7 @@
   <div class="about">
     <h1>This is an about page</h1>
     <h2>{{ emitStr }}</h2>
-    <DynamicComCodeLoader @cb="fn" />
+    <DynamicComCodeLoader @cb="fn" componentKey="key" />
   </div>
 </template>
 <script lang="ts" setup>

src/views/DynamicComCodeLoader.vue

@@ -5,10 +5,11 @@
     v-on="$attrs"
     v-if="asyncComponent"
   />
+  <div v-if="errorList.length > 0" class="error-remote-com">代码获取错误</div>
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, ref, shallowRef, watch } from 'vue'
 import { loadModule } from 'vue3-sfc-loader'
 import { moduleCache } from './moduleCache'
 import {
@@ -19,9 +20,50 @@ import {
 } from '@vue/compiler-sfc'
 
 const errorList = ref<Array<CompilerError | SyntaxError | unknown>>([])
-const validaCode = (v: string) => {
-  const { errors: parseError, descriptor } = parse(v)
-  if (parseError.length > 0) return errorList.value.push(...parseError)
+
+const props = defineProps<{ componentKey: string }>()
+
+const asyncComponent = shallowRef()
+
+const getCode = async () => {
+  // 这里应该是一个接口，通过key去拿code
+  const res = await fetch('http://localhost:8080/remote-component.vue')
+  const code = await res.text()
+  return code
+}
+
+const generateRemoteComponent = async () => {
+  errorList.value = []
+  const code = await getCode()
+
+  const randomFileName = `${Date.now()}.vue`
+  const file = {
+    files: {
+      [randomFileName]: {
+        getContentData: () => code,
+      },
+    },
+  }
+
+  const options = {
+    moduleCache,
+    async getFile(url: string) {
+      return file.files[url]
+    },
+    addStyle(textContent: unknown) {
+      const style = Object.assign(document.createElement('style'), {
+        textContent,
+      })
+      const ref = document.head.getElementsByTagName('style')[0] || null
+      document.head.insertBefore(style, ref)
+    },
+  }
+
+  const { errors: parseError, descriptor } = parse(code)
+  if (parseError.length > 0) {
+    console.error(parseError)
+    return errorList.value.push(...parseError)
+  }
   try {
     if (descriptor?.scriptSetup?.content) {
       compileScript(descriptor, { id: 'remote-component' })
@@ -29,37 +71,39 @@ const validaCode = (v: string) => {
         id: 'remote-component',
         ...descriptor,
       })
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      errors.length > 0 && new Error(errors.join('\n'))
+      if (errors.length > 0) {
+        new Error(errors.join('\n'))
+      }
     }
   } catch (error) {
+    console.error(error)
     errorList.value.push(error)
   }
+
+  if (errorList.value.length) return
+
+  asyncComponent.value = defineAsyncComponent(() =>
+    loadModule(randomFileName, options),
+  )
 }
-const options = {
-  moduleCache,
-  async getFile(url: string) {
-    const res = await fetch(url)
-    const code = await res.text()
-    console.log(code)
 
-    return code
+// 确保 generateRemoteComponent 已定义后再调用
+watch(
+  () => props.componentKey,
+  () => {
+    if (props.componentKey) {
+      console.log(props.componentKey)
+      generateRemoteComponent()
+    }
   },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  addStyle(textContent: any) {
-    const style = Object.assign(document.createElement('style'), {
-      textContent,
-    })
-    const ref = document.head.getElementsByTagName('style')[0] || null
-    document.head.insertBefore(style, ref)
+  {
+    immediate: true,
   },
-}
-
-const asyncComponent = defineAsyncComponent(async () => {
-  const res = await loadModule(
-    'http://localhost:8080/remote-component.vue',
-    options,
-  )
-  return res
-})
+)
 </script>
+
+<style scoped>
+.error-remote-com {
+  color: red;
+}
+</style>