fix: avoid native tag as component

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 { parserOptions } from '@vue/compiler-dom'
 import type { ParsedSFC, ScriptSetupTransformOptions } from '../types'
 import { applyMacros } from './macros'
 import { getIdentifierDeclarations } from './identifiers'
@@ -55,6 +56,7 @@ export function transformScriptSetup(
     })
 
   const components = Array.from(template.components)
+    .filter(component => !parserOptions.isNativeTag!(component.toLowerCase()))
     .map(
       component =>
         declarationArray.find(declare => declare === component)

test/__snapshots__/transform.test.ts.snap

@@ -330,6 +330,72 @@ 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\\");
+  let h3 = 'test';
+  let H3 = '';
+  return {
+    p,
+    Div,
+    h3,
+    H3
+  };
+};
+__sfc_main.components = Object.assign({
+  Enum
+}, __sfc_main.components);
+export default __sfc_main;
+</script>
+
+<template>
+  <div>
+    <Enum/>
+    <h3></h3>
+    {{ H3 }}
+    {{ h3 }}
+    {{ Div }}
+    <p>{{ p }}</p>
+  </div>
+</template>
+"
+`;
+
+exports[`transform > fixtures > test/fixtures/HtmlTag2.vue 1`] = `
+"<script lang=\\"ts\\">
+import Button from './DynamicStyle.vue';
+import button from './DynamicStyle.vue';
+import { defineAsyncComponent } from '@vue/composition-api';
+const footer = defineAsyncComponent(() => import('./ScriptOnly.vue'));
+import { ref } from '@vue/composition-api';
+const __sfc_main = {};
+__sfc_main.setup = (__props, __ctx) => {
+  const p = ref(\\"hello word\\");
+  return {
+    Button,
+    button,
+    p
+  };
+};
+export default __sfc_main;
+</script>
+
+<template>
+  <div>
+    <p>{{ p }}</p>
+    <button>{{ Button }}</button>
+    <Button>{{ button }}</Button>
+    <footer>FOOTER</footer>
+  </div>
+</template>
+"
+`;
+
 exports[`transform > fixtures > test/fixtures/JSLongComment.vue 1`] = `
 "<script lang=\\"ts\\">
 const __sfc_main = {};

test/fixtures/HtmlTag.vue

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

test/fixtures/HtmlTag2.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Button from './DynamicStyle.vue';
+import button from './DynamicStyle.vue';
+import { defineAsyncComponent } from '@vue/composition-api'
+const footer = defineAsyncComponent(() => import('./ScriptOnly.vue'))
+
+import { ref } from '@vue/composition-api';
+
+const p =ref("hello word") ;
+
+</script>
+
+<template>
+  <div>
+    <p>{{ p }}</p>
+    <button>{{ Button }}</button>
+    <Button>{{ button }}</Button>
+    <footer>FOOTER</footer>
+  </div>
+</template>

test/identifiers.test.ts

@@ -9,6 +9,8 @@ describe('identifiers', () => {
       ['var a = 1', ['a']],
       ['import { foo, t as bar } from "z"', ['foo', 'bar']],
       ['import foo from "z"', ['foo']],
+      ['import Button from \'./DynamicStyle.vue\'', ['Button']],
+      ['import button from \'./DynamicStyle.vue\'', ['button']],
       ['import * as foo from "z"', ['foo']],
       ['function foo(bar) {const a = z}', ['foo']],
       ['console.log(foo)', []],

test/nativeTag.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest'
+import { transform } from '../src'
+
+describe('filter native tags as vue components', () => {
+  describe('no components output', () => {
+    const cases: string[] = [
+      `
+      <script setup lang="ts">
+      import Button from './DynamicStyle.vue';
+      </script>
+
+      <template>
+        <button>{{ Button }}</button>
+      </template>
+      `,
+      `
+      <script setup lang="ts">
+      import button from './DynamicStyle.vue';
+      </script>
+
+      <template>
+        <Button>{{ button }}</Button>
+      </template>
+      `,
+      `
+      <script setup lang="ts">
+      let p='hello'
+      let Div='hello'
+      </script>
+
+      <template>
+        <div>
+          <p>{{ p }}</p>
+          <Button>{{ Div }}</Button>
+        </div>
+      </template>
+      `,
+      `
+      <script setup lang="ts">
+      let svg='hello'
+      </script>
+
+      <template>
+        <div>
+          <p>{{ svg }}</p>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46">
+            <defs>
+              <style>
+                .cls-1{fill:#231815;}
+                @media (prefers-color-scheme: dark) { .cls-1{fill:#ffffff;} }
+              </style>
+            </defs>
+            <path class="cls-1" d="M144.89,89.86c-33.46,0-54.44,14.56-66.14,26.76a86,86,0,0,0-23.69,58.94c0,22.64,8.81,43.48,24.8,58.67,15.7,14.92,36.9,23.14,59.68,23.14,23.81,0,46-8.49,62.49-23.91,17-15.9,26.37-37.93,26.37-62C228.4,120.37,185.94,89.86,144.89,89.86Zm.49,153.67a61.49,61.49,0,0,1-46.45-20.4c-12.33-13.76-18.85-32.64-18.85-54.62,0-20.7,6.07-37.67,17.57-49.07,10.11-10,24.39-15.62,40.19-15.74,19,0,35.22,6.56,46.76,19,12.6,13.58,19.27,34,19.27,58.95C203.87,224.39,174.49,243.53,145.38,243.53Z"/>
+            <polygon class="cls-1" points="198.75 74.96 179.45 74.96 142.09 37.83 104.51 74.96 86.14 74.96 138.09 24.25 146.81 24.25 198.75 74.96"/>
+          </svg>
+        </div>
+      </template>
+      `,
+    ]
+
+    for (const input of cases) {
+      it(input, async () => {
+        const result = await transform(input, 'Lang.vue', { reactivityTransform: true })
+        expect(result?.code.includes('__sfc_main.components')).toEqual(false)
+      })
+    }
+  })
+
+  it('keep non-native components', async () => {
+    const input = `
+    <script setup lang="ts">
+    import Button from './DynamicStyle.vue';
+    import DynamicStyle from './DynamicStyle.vue';
+    let p='hello'
+    </script>
+
+    <template>
+      <dynamic-style/>
+      <p>{{ p }}</p>
+      <button>{{ Button }}</button>
+    </template>
+    `
+    const result = await transform(input, 'Lang.vue', { reactivityTransform: true })
+    expect(result?.code.includes('__sfc_main.components = Object.assign({\n  DynamicStyle\n}, __sfc_main.components);')).toEqual(true)
+  })
+})