fix(core): fix analyzer duplicate injection code (#268)

alexzhang1030 · web-flow · commit eff7c793030e · 2023-12-13T20:46:21.000+08:00
* fix(core): fix analyzer duplicate injection code

* chore: playground add jsx
diff --git a/packages/core/src/compiler/trace-rerender.ts b/packages/core/src/compiler/trace-rerender.ts
@@ -22,6 +22,15 @@ export function analyzeByTraceRerender(code: MS, locations: InsertLocation[]) {
     });\n`,
   }
 
+  // to avoid duplicate injection
+  const currentCode = code.toString()
+  const shouldInject = Object.entries(apiNames).map(([, alias]) => {
+    return !currentCode.includes(alias)
+  }).every(Boolean)
+
+  if (!shouldInject)
+    return code
+
   locations.forEach(({ start, end }, idx) => {
     if (idx === 0) {
       code = ensureImport(code, {
@@ -30,6 +39,7 @@ export function analyzeByTraceRerender(code: MS, locations: InsertLocation[]) {
         })),
       }, start)
     }
+
     entries(injectedCodes).forEach(([, appendCode]) => {
       code.prependLeft(end, appendCode)
     })
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "serve": "^14.2.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ReadCounter from './components/ReadCounter.vue'
+import TSX from './components/TSX.vue'
 
 const count = ref(0)
 const doubleCount = computed(() => {
@@ -43,6 +44,7 @@ const router = useRouter()
   {{ count }}
   {{ doubleCount }}
   <ReadCounter />
+  TSX: <TSX />
   <RouterView />
   <!-- <HelloWorld msg="Vite + Vue" /> -->
   <button @click="router.push('/about')">
diff --git a/packages/playground/src/components/TSX.vue b/packages/playground/src/components/TSX.vue
@@ -0,0 +1,9 @@
+<script lang="tsx">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return () => <div>TSX Component</div>
+  },
+})
+</script>
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
@@ -2,6 +2,7 @@ import { resolve } from 'node:path'
 import type { Plugin } from 'vite'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import jsx from '@vitejs/plugin-vue-jsx'
 import VueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
@@ -17,5 +18,6 @@ export default defineConfig({
   plugins: [
     VueDevTools() as Plugin[],
     vue(),
+    jsx(),
   ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
