fix: avoid native tag as component

playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from '@vue/composition-api'
-
+import ButtonTest from './ButtonTest.vue';
 import HelloWorld from './HelloWorld.vue'
 
 const AsyncComponent = defineAsyncComponent(() => import('./Async.vue'))
@@ -12,6 +12,8 @@ function onUpdate(e: any) {
 </script>
 <template>
   <div>
+    <ButtonTest />
+
     <HelloWorld name="Vue 2" @update="onUpdate" />
 
     <AsyncComponent />

playground/src/ButtonTest.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from './Foo.vue';
+import button from './Foo.vue';
+</script>
+
+<template>
+  <div>
+    <button>{{ Button }}</button>
+    <Button>{{ button }}</Button>
+  </div>
+</template>

playground/src/Foo.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+
+</script>
 <template>
-  <div>Foo</div>
+  <div>
+    Button Component: <slot></slot>
+  </div>
 </template>

src/core/parseSFC.ts

@@ -383,6 +383,7 @@ export async function parseSFC(
   return {
     id,
     template: {
+      tags: new Set(result?.components),
       components: new Set(result?.components.map(pascalize)),
       directives: new Set(
         result?.directives

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'
@@ -54,7 +55,13 @@ export function transformScriptSetup(
       return t.objectProperty(id, id, false, true)
     })
 
-  const components = Array.from(template.components)
+  const nonNativeTags = new Set(
+    Array.from(template.tags)
+      .filter(tag => !parserOptions.isNativeTag!(tag))
+      .map(pascalize),
+  )
+
+  const components = Array.from(nonNativeTags)
     .map(
       component =>
         declarationArray.find(declare => declare === component)

src/types.ts

@@ -18,6 +18,7 @@ export interface ParsedSFC {
   template: {
     /** foo-bar -> FooBar */
     components: Set<string>
+    tags: Set<string>
     /** v-foo-bar -> fooBar */
     directives: Set<string>
     identifiers: Set<string>

test/__snapshots__/transform.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`transform > fixtures > playground/src/App.vue 1`] = `
 "<script lang=\\"ts\\">
 import { defineAsyncComponent } from '@vue/composition-api';
+import ButtonTest from './ButtonTest.vue';
 import HelloWorld from './HelloWorld.vue';
 const AsyncComponent = defineAsyncComponent(() => import('./Async.vue'));
 const __sfc_main = {};
@@ -16,13 +17,16 @@ __sfc_main.setup = (__props, __ctx) => {
   };
 };
 __sfc_main.components = Object.assign({
+  ButtonTest,
   HelloWorld,
   AsyncComponent
 }, __sfc_main.components);
 export default __sfc_main;
 </script>
 <template>
   <div>
+    <ButtonTest />
+
     <HelloWorld name=\\"Vue 2\\" @update=\\"onUpdate\\" />
 
     <AsyncComponent />
@@ -45,9 +49,41 @@ exports[`transform > fixtures > playground/src/Bar.vue 1`] = `
 "
 `;
 
+exports[`transform > fixtures > playground/src/ButtonTest.vue 1`] = `
+"<script lang=\\"ts\\">
+import Button from './Foo.vue';
+import button from './Foo.vue';
+const __sfc_main = {};
+__sfc_main.setup = (__props, __ctx) => {
+  return {
+    Button,
+    button
+  };
+};
+__sfc_main.components = Object.assign({
+  Button
+}, __sfc_main.components);
+export default __sfc_main;
+</script>
+
+<template>
+  <div>
+    <button>{{ Button }}</button>
+    <Button>{{ button }}</Button>
+  </div>
+</template>
+"
+`;
+
 exports[`transform > fixtures > playground/src/Foo.vue 1`] = `
-"<template>
-  <div>Foo</div>
+"<script lang=\\"ts\\">
+const __sfc_main = {};
+export default __sfc_main;
+</script>
+<template>
+  <div>
+    Button Component: <slot></slot>
+  </div>
 </template>
 "
 `;
@@ -330,6 +366,75 @@ 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
+  };
+};
+__sfc_main.components = Object.assign({
+  Button
+}, __sfc_main.components);
+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,91 @@
+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">
+      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('capitalized native tags as components', async () => {
+    const input = `
+    <script setup lang="ts">
+    import Button from './DynamicStyle.vue';
+    </script>
+
+    <template>
+      <Button>{{ Button }}</Button>
+    </template>
+    `
+    const result = await transform(input, 'Lang.vue', { reactivityTransform: true })
+    expect(result?.code.includes('__sfc_main.components = Object.assign({\n  Button\n}, __sfc_main.components);')).toEqual(true)
+  })
+
+  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)
+  })
+})