Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Dec 25, 2024. It is now read-only.

fix: avoid native tag as component#159

Merged
xiaoxiangmoe merged 12 commits intounplugin:mainfromjaw52:fix/html-tag-as-component
Jun 21, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletionplayground/src/App.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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'))
Expand All@@ -12,6 +12,8 @@ function onUpdate(e: any) {
</script>
<template>
<div>
<ButtonTest />

<HelloWorld name="Vue 2" @update="onUpdate" />

<AsyncComponent />
Expand Down
11 changes: 11 additions & 0 deletionsplayground/src/ButtonTest.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
7 changes: 6 additions & 1 deletionplayground/src/Foo.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
<script setup lang="ts">

</script>
<template>
<div>Foo</div>
<div>
Button Component: <slot></slot>
</div>
</template>
1 change: 1 addition & 0 deletionssrc/core/parseSFC.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
Expand Down
9 changes: 8 additions & 1 deletionsrc/core/transformScriptSetup.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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'
Expand DownExpand Up@@ -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)
Expand Down
1 change: 1 addition & 0 deletionssrc/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
Expand Down
109 changes: 107 additions & 2 deletionstest/__snapshots__/transform.test.ts.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 = {};
Expand All@@ -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 />
Expand All@@ -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>
"
`;
Expand DownExpand Up@@ -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 = {};
Expand Down
20 changes: 20 additions & 0 deletionstest/fixtures/HtmlTag.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
20 changes: 20 additions & 0 deletionstest/fixtures/HtmlTag2.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
2 changes: 2 additions & 0 deletionstest/identifiers.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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)', []],
Expand Down
91 changes: 91 additions & 0 deletionstest/nativeTag.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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)
})
})
[8]ページ先頭
©2009-2025 Movatter.jp