fix(compiler): inject code location error when having multiple components in one file (#168)

Author: alexzhang1030

packages/core/src/compiler/__test__/__snapshots__/analyze.test.ts.snap

@@ -54,6 +54,51 @@ return () => <div></div>
     "
 `;
 
+exports[`analyzeCode - rerender - [jt]sx? > multiple component in one file 1`] = `
+"
+;import { getCurrentInstance as __VUE_DEVTOOLS_$getCurrentInstance__, onRenderTracked as __VUE_DEVTOOLS_$onRenderTracked__, onRenderTriggered as __VUE_DEVTOOLS_$onRenderTriggered__ } from 'vue'
+;
+
+      import { ref, h } from 'vue'
+      const comp = defineComponent({
+        setup() {
+          const a = ref<number>(1)
+          
+    
+;__VUE_DEVTOOLS_$onRenderTriggered__((e) => {
+      const instance = __VUE_DEVTOOLS_$getCurrentInstance__()
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__?.emit?.('render:triggered', e, instance)
+    });
+
+    
+;__VUE_DEVTOOLS_$onRenderTracked__((e) => {
+      const instance = __VUE_DEVTOOLS_$getCurrentInstance__()
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__?.emit?.('render:tracked', e, instance)
+    });
+return () => h('div', '1')
+        }
+      })
+      const comp2 = defineComponent({
+        setup() {
+          const a = ref<number>(1)
+          
+    
+;__VUE_DEVTOOLS_$onRenderTriggered__((e) => {
+      const instance = __VUE_DEVTOOLS_$getCurrentInstance__()
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__?.emit?.('render:triggered', e, instance)
+    });
+
+    
+;__VUE_DEVTOOLS_$onRenderTracked__((e) => {
+      const instance = __VUE_DEVTOOLS_$getCurrentInstance__()
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__?.emit?.('render:tracked', e, instance)
+    });
+return () => h('div', '1')
+        }
+      })
+    "
+`;
+
 exports[`analyzeCode - rerender - [jt]sx? > ts 1`] = `
 "
 ;import { getCurrentInstance as __VUE_DEVTOOLS_$getCurrentInstance__, onRenderTracked as __VUE_DEVTOOLS_$onRenderTracked__, onRenderTriggered as __VUE_DEVTOOLS_$onRenderTriggered__ } from 'vue'

packages/core/src/compiler/__test__/analyze.test.ts

@@ -137,4 +137,23 @@ describe('analyzeCode - rerender - [jt]sx?', () => {
     const result = analyzeCode(code, 'test.ts', baseConfig)
     expect(result?.code).toMatchSnapshot()
   })
+  test('multiple component in one file', () => {
+    const code = `
+      import { ref, h } from 'vue'
+      const comp = defineComponent({
+        setup() {
+          const a = ref<number>(1)
+          return () => h('div', '1')
+        }
+      })
+      const comp2 = defineComponent({
+        setup() {
+          const a = ref<number>(1)
+          return () => h('div', '1')
+        }
+      })
+    `
+    const result = analyzeCode(code, 'test.ts', baseConfig)
+    expect(result?.code).toMatchSnapshot()
+  })
 })

packages/core/src/compiler/__test__/index.test.ts

@@ -2,7 +2,7 @@ import MagicString from 'magic-string'
 import { analyzeByTraceRerender } from '../trace-rerender'
 
 test('trace-rerender', () => {
-  const ms = analyzeByTraceRerender(new MagicString(''), { start: 0, end: 0 })
+  const ms = analyzeByTraceRerender(new MagicString(''), [{ start: 0, end: 0 }])
   expect(ms.toString()).toMatchInlineSnapshot(`
     "
     ;import { getCurrentInstance as __VUE_DEVTOOLS_$getCurrentInstance__, onRenderTracked as __VUE_DEVTOOLS_$onRenderTracked__, onRenderTriggered as __VUE_DEVTOOLS_$onRenderTriggered__ } from 'vue'

packages/core/src/compiler/common/analyze.ts

@@ -55,25 +55,25 @@ export function analyzeVueSFC(code: string, filename: string) {
 export function analyzeScriptFile(code: string, lang: string) {
   if (!code.trim().length || !code.includes(DEFINE_COMPONENT))
     return null
-  let location: InsertLocation | null = null
+  const location: (InsertLocation | null)[] = []
   const ast = babelParse(code, lang)
   walkAST(ast, {
     enter(node) {
       if (isCallOf(node, DEFINE_COMPONENT) && node.arguments[0] && node.arguments[0].type === 'ObjectExpression') {
         for (const stmt of node.arguments[0].properties) {
           if (isSetupFn(stmt)) {
             const loc = getObjectFnBodyLocation(stmt)
-            location = loc
+            location.push(loc
               ? {
                   start: ast.start ?? 0,
                   end: loc.end,
                 }
-              : null
+              : null)
             this.skip()
           }
         }
       }
     },
   })
-  return location
+  return location.filter(Boolean) as InsertLocation[]
 }

packages/core/src/compiler/index.ts

@@ -39,23 +39,25 @@ export function analyzeCode(code: string, filename: string, options: AnalyzeOpti
   if (!isAcceptableLang(filename) || !enableAnalyze(options) || hitPaths(filename, excludePaths))
     return null
 
-  let location: InsertLocation | null = null
+  let locations: InsertLocation[] | null = null
 
   if (isVUE(filename)) {
-    location = analyzeVueSFC(code, filename)
+    const location = analyzeVueSFC(code, filename)
+    if (location)
+      locations = [location]
   }
   else {
     const lang = filename.split('.').pop()!
-    location = analyzeScriptFile(code, lang)
+    locations = analyzeScriptFile(code, lang)
   }
 
-  if (!location)
+  if (!locations || !locations.length)
     return null
 
   let ms = new MagicString(code)
 
   if (options.rerenderTrace)
-    ms = analyzeByTraceRerender(ms, location)
+    ms = analyzeByTraceRerender(ms, locations as InsertLocation[])
 
   return {
     code: ms.toString(),

packages/core/src/compiler/trace-rerender.ts

@@ -2,7 +2,7 @@ import type MS from 'magic-string'
 import { entries } from './common/utils'
 import { type InsertLocation, ensureImport } from './common'
 
-export function analyzeByTraceRerender(code: MS, location: InsertLocation) {
+export function analyzeByTraceRerender(code: MS, locations: InsertLocation[]) {
   const apiNames = {
     getCurrentInstance: '__VUE_DEVTOOLS_$getCurrentInstance__',
     onRenderTracked: '__VUE_DEVTOOLS_$onRenderTracked__',
@@ -22,14 +22,17 @@ export function analyzeByTraceRerender(code: MS, location: InsertLocation) {
     });\n`,
   }
 
-  code = ensureImport(code, {
-    vue: entries(apiNames).map(([id, alias]) => ({
-      id, alias,
-    })),
-  }, location.start)
-
-  entries(injectedCodes).forEach(([, appendCode]) => {
-    code.prependLeft(location.end, appendCode)
+  locations.forEach(({ start, end }, idx) => {
+    if (idx === 0) {
+      code = ensureImport(code, {
+        vue: entries(apiNames).map(([id, alias]) => ({
+          id, alias,
+        })),
+      }, start)
+    }
+    entries(injectedCodes).forEach(([, appendCode]) => {
+      code.prependLeft(end, appendCode)
+    })
   })
 
   return code