fix: avoid native tag as component

package.json

@@ -93,6 +93,7 @@
     "@vue/reactivity-transform": "^3.3.4",
     "@vue/shared": "^3.3.4",
     "defu": "^6.1.2",
+    "html-tags": "^3.3.1",
     "magic-string": "^0.30.0",
     "unplugin": "^1.3.1"
   },

src/core/transformScriptSetup.ts

@@ -1,6 +1,7 @@
 import { capitalize } from '@vue/shared'
 import type { Node, ObjectExpression, Statement } from '@babel/types'
 import { notNullish, partition, uniq } from '@antfu/utils'
+import htmlTags from 'html-tags'
 import type { ParsedSFC, ScriptSetupTransformOptions } from '../types'
 import { applyMacros } from './macros'
 import { getIdentifierDeclarations } from './identifiers'
@@ -54,7 +55,9 @@ export function transformScriptSetup(
       return t.objectProperty(id, id, false, true)
     })
 
+  const pascalizeHtmlTags = htmlTags.map(pascalize)
   const components = Array.from(template.components)
+    .filter(component => !pascalizeHtmlTags.includes(component))
     .map(
       component =>
         declarationArray.find(declare => declare === component)

test/__snapshots__/transform.test.ts.snap

@@ -330,6 +330,33 @@ export default __sfc_main;
 "
 `;
 
+exports[`transform > fixtures > test/fixtures/HtmlTag.vue 1`] = `
+"<script lang=\\"ts\\">
+import Enum from './Enum.vue';
+import { ref } from '@vue/composition-api';
+const __sfc_main = {};
+__sfc_main.setup = (__props, __ctx) => {
+  let p = \\"hello word\\";
+  let div = ref(\\"hello word\\");
+  return {
+    p
+  };
+};
+__sfc_main.components = Object.assign({
+  Enum
+}, __sfc_main.components);
+export default __sfc_main;
+</script>
+
+<template>
+  <div>
+    <Enum/>
+    <p>{{ p }}</p>
+  </div>
+</template>
+"
+`;
+
 exports[`transform > fixtures > test/fixtures/JSLongComment.vue 1`] = `
 "<script lang=\\"ts\\">
 const __sfc_main = {};

test/fixtures/HtmlTag.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Enum from './Enum.vue';
+import { ref } from '@vue/composition-api';
+let p = "hello word";
+let div = ref("hello word");
+</script>
+
+<template>
+  <div>
+    <Enum/>
+    <p>{{ p }}</p>
+  </div>
+</template>