chore: update

.gitignore

@@ -16,6 +16,7 @@ coverage
 
 /cypress/videos/
 /cypress/screenshots/
+/testcode
 
 # Editor directories and files
 .vscode/*

TODO.md

 1. 远端拿代码执行生成组件
-2. kv一次性获取并存储，本地远程的kvmerge
+2. kv一次性获取并持久化存储，本地远程的kvmerge

package.json

@@ -15,7 +15,8 @@
   },
   "dependencies": {
     "vue": "^3.5.12",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue3-sfc-loader": "^0.9.5"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",

public/remote-component.vue

+<!-- http-server ./public --cors -->
+<template>
+  <p>我是远程组件</p>
+  <p>
+    当前远程组件count值为：<span class="count">{{ count }}</span>
+  </p>
+  <TaInput />
+  <button @click="countv">点击增加远程组件count</button>
+</template>
+
+// eslint-disable-next-line vue/block-lang
+<script setup lang="ts">
+//  avdadfadfdasf
+import { ref } from 'vue'
+import TaInput from 'TaInput'
+const count = ref(0)
+const emit = defineEmits(['cb'])
+const countv = () => {
+  count.value++
+
+  console.log('vk')
+  console.log('click count num')
+  emit('cb', 'this is a emit string' + count.value)
+}
+</script>
+
+<style>
+.count {
+  color: red;
+}
+</style>

src/components/WelcomeItem.vue

 <template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
+  <div class="item">e24aefw;aegja;efjoerj;jf;arafj</div>
 </template>
 
 <style scoped>

src/components/module/demo/VInput.vue

+<script setup lang="ts"></script>
+<template>
+  <div>this is a imput moule cache</div>
+</template>

src/shims-app.d.ts

+declare module 'vue3-sfc-loader'

src/views/AboutView.vue

 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <h2>{{ emitStr }}</h2>
+    <DynamicComCodeLoader @cb="fn" />
   </div>
 </template>
-
+<script lang="ts" setup>
+import { ref } from 'vue'
+import DynamicComCodeLoader from './DynamicComCodeLoader.vue'
+const emitStr = ref('')
+const fn = (v: string) => {
+  emitStr.value = v
+}
+</script>
 <style>
 @media (min-width: 1024px) {
   .about {
     min-height: 100vh;
     display: flex;
+    flex-direction: column;
     align-items: center;
   }
 }

src/views/DynamicComCodeLoader.vue

+<template>
+  <component
+    :is="asyncComponent"
+    v-bind="$props"
+    v-on="$attrs"
+    v-if="asyncComponent"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from 'vue'
+import { loadModule } from 'vue3-sfc-loader'
+import { moduleCache } from './moduleCache'
+import {
+  compileScript,
+  compileTemplate,
+  parse,
+  type CompilerError,
+} 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)
+  try {
+    if (descriptor?.scriptSetup?.content) {
+      compileScript(descriptor, { id: 'remote-component' })
+      const { errors } = compileTemplate({
+        id: 'remote-component',
+        ...descriptor,
+      })
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      errors.length > 0 && new Error(errors.join('\n'))
+    }
+  } catch (error) {
+    errorList.value.push(error)
+  }
+}
+const options = {
+  moduleCache,
+  async getFile(url: string) {
+    const res = await fetch(url)
+    const code = await res.text()
+    console.log(code)
+
+    return code
+  },
+  // 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)
+  },
+}
+
+const asyncComponent = defineAsyncComponent(async () => {
+  const res = await loadModule(
+    'http://localhost:8080/remote-component.vue',
+    options,
+  )
+  return res
+})
+</script>

src/views/moduleCache.tsx

+import VInput from '@/components/module/demo/VInput.vue'
+import * as Vue from 'vue'
+export const moduleCache = {
+  vue: Vue,
+  TaInput: VInput,
+}