fix: support well-known HTML void elements (#85)

Author: xiaoxiangmoe

package.json

@@ -50,9 +50,10 @@
     "@babel/traverse": "^7.16.3",
     "@babel/types": "^7.16.0",
     "@rollup/pluginutils": "^4.1.1",
-    "@vue/compiler-core": "^3.2.25",
+    "@vue/compiler-core": "^3.2.26",
+    "@vue/compiler-dom": "^3.2.26",
     "@vue/ref-transform": "^3.2.24",
-    "@vue/shared": "^3.2.24",
+    "@vue/shared": "^3.2.26",
     "defu": "^5.0.0",
     "htmlparser2": "5.0.1",
     "magic-string": "^0.25.7",
@@ -63,7 +64,6 @@
     "@antfu/ni": "^0.12.0",
     "@types/node": "^16.11.12",
     "@vue/composition-api": "^1.4.1",
-    "@vue/runtime-dom": "^3.2.25",
     "bumpp": "^7.1.1",
     "eslint": "^8.4.1",
     "esno": "^0.12.1",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ import type {
   ExpressionNode,
 } from '@vue/compiler-core'
 import { baseParse } from '@vue/compiler-core'
+import { parserOptions } from '@vue/compiler-dom'
 import { camelize } from '@vue/shared'
 import type {
   ParsedSFC,
@@ -236,8 +237,7 @@ function getFreeVariablesForNode(
 }
 
 export function findReferencesForSFC(code: string) {
-  const rootNode = baseParse(code, {
-  })
+  const rootNode = baseParse(code, parserOptions)
   const templateChildNodes = rootNode.children.flatMap(node =>
     node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.ELEMENT
       ? [node]

src/core/parseSFC.ts

@@ -209,6 +209,7 @@ exports[`transform > fixtures > test/fixtures/ComponentsDirectives.vue 1`] = `
     </FooView>
     <button v-else-if=\\"now === 0\\" :[propNamePrefix+propName]=\\"1\\" @[eventPrefix.value+eventName]=\\"console.log($event)\\"></button>
     <router-view v-else></router-view>
+    <img src=\\"https://vuejs.org/images/logo.svg\\">
   </div>
 </template>
 

test/__snapshots__/transform.test.ts.snap

@@ -26,6 +26,7 @@
     </FooView>
     <button v-else-if="now === 0" :[propNamePrefix+propName]="1" @[eventPrefix.value+eventName]="console.log($event)"></button>
     <router-view v-else></router-view>
+    <img src="https://vuejs.org/images/logo.svg">
   </div>
 </template>