Skip to content

Commit b4f7ab4

Browse files
yyx990803yyx990803
committed
refactor: simplify sfc script transform usage
1 parent 9f706a9 commit b4f7ab4

File tree

4 files changed

+122
-99
lines changed

4 files changed

+122
-99
lines changed

‎packages/compiler-sfc/__tests__/compileScript.spec.ts

+71-72
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { parse, compileScriptSetup, SFCScriptCompileOptions } from '../src'
1+
import { parse, SFCScriptCompileOptions } from '../src'
22
import { parse as babelParse } from '@babel/parser'
33
import { babelParserDefautPlugins } from '@vue/shared'
44

55
function compile(src: string, options?: SFCScriptCompileOptions) {
6-
const { descriptor } = parse(src)
7-
return compileScriptSetup(descriptor, options)
6+
return parse(src, options).descriptor.scriptTransformed!
87
}
98

109
function assertCode(code: string) {
@@ -23,48 +22,50 @@ function assertCode(code: string) {
2322

2423
describe('SFC compile <script setup>', () => {
2524
test('should hoist imports', () => {
26-
assertCode(compile(`<script setup>import { ref } from 'vue'</script>`).code)
25+
assertCode(
26+
compile(`<script setup>import { ref } from 'vue'</script>`).content
27+
)
2728
})
2829

2930
test('explicit setup signature', () => {
3031
assertCode(
31-
compile(`<script setup="props, { emit }">emit('foo')</script>`).code
32+
compile(`<script setup="props, { emit }">emit('foo')</script>`).content
3233
)
3334
})
3435

3536
test('import dedupe between <script> and <script setup>', () => {
36-
const code = compile(`
37+
const { content } = compile(`
3738
<script>
3839
import { x } from './x'
3940
</script>
4041
<script setup>
4142
import { x } from './x'
4243
x()
4344
</script>
44-
`).code
45-
assertCode(code)
46-
expect(code.indexOf(`import { x }`)).toEqual(
47-
code.lastIndexOf(`import { x }`)
45+
`)
46+
assertCode(content)
47+
expect(content.indexOf(`import { x }`)).toEqual(
48+
content.lastIndexOf(`import { x }`)
4849
)
4950
})
5051

5152
describe('exports', () => {
5253
test('export const x = ...', () => {
53-
const { code, bindings } = compile(
54+
const { content, bindings } = compile(
5455
`<script setup>export const x = 1</script>`
5556
)
56-
assertCode(code)
57+
assertCode(content)
5758
expect(bindings).toStrictEqual({
5859
x: 'setup'
5960
})
6061
})
6162

6263
test('export const { x } = ... (destructuring)', () => {
63-
const { code, bindings } = compile(`<script setup>
64+
const { content, bindings } = compile(`<script setup>
6465
export const [a = 1, { b } = { b: 123 }, ...c] = useFoo()
6566
export const { d = 2, _: [e], ...f } = useBar()
6667
</script>`)
67-
assertCode(code)
68+
assertCode(content)
6869
expect(bindings).toStrictEqual({
6970
a: 'setup',
7071
b: 'setup',
@@ -76,100 +77,100 @@ describe('SFC compile <script setup>', () => {
7677
})
7778

7879
test('export function x() {}', () => {
79-
const { code, bindings } = compile(
80+
const { content, bindings } = compile(
8081
`<script setup>export function x(){}</script>`
8182
)
82-
assertCode(code)
83+
assertCode(content)
8384
expect(bindings).toStrictEqual({
8485
x: 'setup'
8586
})
8687
})
8788

8889
test('export class X() {}', () => {
89-
const { code, bindings } = compile(
90+
const { content, bindings } = compile(
9091
`<script setup>export class X {}</script>`
9192
)
92-
assertCode(code)
93+
assertCode(content)
9394
expect(bindings).toStrictEqual({
9495
X: 'setup'
9596
})
9697
})
9798

9899
test('export { x }', () => {
99-
const { code, bindings } = compile(
100+
const { content, bindings } = compile(
100101
`<script setup>
101102
const x = 1
102103
const y = 2
103104
export { x, y }
104105
</script>`
105106
)
106-
assertCode(code)
107+
assertCode(content)
107108
expect(bindings).toStrictEqual({
108109
x: 'setup',
109110
y: 'setup'
110111
})
111112
})
112113

113114
test(`export { x } from './x'`, () => {
114-
const { code, bindings } = compile(
115+
const { content, bindings } = compile(
115116
`<script setup>
116117
export { x, y } from './x'
117118
</script>`
118119
)
119-
assertCode(code)
120+
assertCode(content)
120121
expect(bindings).toStrictEqual({
121122
x: 'setup',
122123
y: 'setup'
123124
})
124125
})
125126

126127
test(`export default from './x'`, () => {
127-
const { code, bindings } = compile(
128+
const { content, bindings } = compile(
128129
`<script setup>
129130
export default from './x'
130131
</script>`,
131132
{
132-
parserPlugins: ['exportDefaultFrom']
133+
babelParserPlugins: ['exportDefaultFrom']
133134
}
134135
)
135-
assertCode(code)
136+
assertCode(content)
136137
expect(bindings).toStrictEqual({})
137138
})
138139

139140
test(`export { x as default }`, () => {
140-
const { code, bindings } = compile(
141+
const { content, bindings } = compile(
141142
`<script setup>
142143
import x from './x'
143144
const y = 1
144145
export { x as default, y }
145146
</script>`
146147
)
147-
assertCode(code)
148+
assertCode(content)
148149
expect(bindings).toStrictEqual({
149150
y: 'setup'
150151
})
151152
})
152153

153154
test(`export { x as default } from './x'`, () => {
154-
const { code, bindings } = compile(
155+
const { content, bindings } = compile(
155156
`<script setup>
156157
export { x as default, y } from './x'
157158
</script>`
158159
)
159-
assertCode(code)
160+
assertCode(content)
160161
expect(bindings).toStrictEqual({
161162
y: 'setup'
162163
})
163164
})
164165

165166
test(`export * from './x'`, () => {
166-
const { code, bindings } = compile(
167+
const { content, bindings } = compile(
167168
`<script setup>
168169
export * from './x'
169170
export const y = 1
170171
</script>`
171172
)
172-
assertCode(code)
173+
assertCode(content)
173174
expect(bindings).toStrictEqual({
174175
y: 'setup'
175176
// in this case we cannot extract bindings from ./x so it falls back
@@ -178,15 +179,15 @@ describe('SFC compile <script setup>', () => {
178179
})
179180

180181
test('export default in <script setup>', () => {
181-
const { code, bindings } = compile(
182+
const { content, bindings } = compile(
182183
`<script setup>
183184
export default {
184185
props: ['foo']
185186
}
186187
export const y = 1
187188
</script>`
188189
)
189-
assertCode(code)
190+
assertCode(content)
190191
expect(bindings).toStrictEqual({
191192
y: 'setup'
192193
})
@@ -195,18 +196,18 @@ describe('SFC compile <script setup>', () => {
195196

196197
describe('<script setup lang="ts">', () => {
197198
test('hoist type declarations', () => {
198-
const { code, bindings } = compile(`
199+
const { content, bindings } = compile(`
199200
<script setup lang="ts">
200201
export interface Foo {}
201202
type Bar = {}
202203
export const a = 1
203204
</script>`)
204-
assertCode(code)
205+
assertCode(content)
205206
expect(bindings).toStrictEqual({ a: 'setup' })
206207
})
207208

208209
test('extract props', () => {
209-
const { code } = compile(`
210+
const { content } = compile(`
210211
<script setup="myProps" lang="ts">
211212
interface Test {}
212213
@@ -237,59 +238,57 @@ describe('SFC compile <script setup>', () => {
237238
intersection: Test & {}
238239
}
239240
</script>`)
240-
assertCode(code)
241-
expect(code).toMatch(`string: { type: String, required: true }`)
242-
expect(code).toMatch(`number: { type: Number, required: true }`)
243-
expect(code).toMatch(`boolean: { type: Boolean, required: true }`)
244-
expect(code).toMatch(`object: { type: Object, required: true }`)
245-
expect(code).toMatch(`objectLiteral: { type: Object, required: true }`)
246-
expect(code).toMatch(`fn: { type: Function, required: true }`)
247-
expect(code).toMatch(`functionRef: { type: Function, required: true }`)
248-
expect(code).toMatch(`objectRef: { type: Object, required: true }`)
249-
expect(code).toMatch(`array: { type: Array, required: true }`)
250-
expect(code).toMatch(`arrayRef: { type: Array, required: true }`)
251-
expect(code).toMatch(`tuple: { type: Array, required: true }`)
252-
expect(code).toMatch(`set: { type: Set, required: true }`)
253-
expect(code).toMatch(`literal: { type: String, required: true }`)
254-
expect(code).toMatch(`optional: { type: null, required: false }`)
255-
expect(code).toMatch(`recordRef: { type: Object, required: true }`)
256-
expect(code).toMatch(`interface: { type: Object, required: true }`)
257-
expect(code).toMatch(`alias: { type: Array, required: true }`)
258-
expect(code).toMatch(`union: { type: [String, Number], required: true }`)
259-
expect(code).toMatch(
241+
assertCode(content)
242+
expect(content).toMatch(`string: { type: String, required: true }`)
243+
expect(content).toMatch(`number: { type: Number, required: true }`)
244+
expect(content).toMatch(`boolean: { type: Boolean, required: true }`)
245+
expect(content).toMatch(`object: { type: Object, required: true }`)
246+
expect(content).toMatch(`objectLiteral: { type: Object, required: true }`)
247+
expect(content).toMatch(`fn: { type: Function, required: true }`)
248+
expect(content).toMatch(`functionRef: { type: Function, required: true }`)
249+
expect(content).toMatch(`objectRef: { type: Object, required: true }`)
250+
expect(content).toMatch(`array: { type: Array, required: true }`)
251+
expect(content).toMatch(`arrayRef: { type: Array, required: true }`)
252+
expect(content).toMatch(`tuple: { type: Array, required: true }`)
253+
expect(content).toMatch(`set: { type: Set, required: true }`)
254+
expect(content).toMatch(`literal: { type: String, required: true }`)
255+
expect(content).toMatch(`optional: { type: null, required: false }`)
256+
expect(content).toMatch(`recordRef: { type: Object, required: true }`)
257+
expect(content).toMatch(`interface: { type: Object, required: true }`)
258+
expect(content).toMatch(`alias: { type: Array, required: true }`)
259+
expect(content).toMatch(
260+
`union: { type: [String, Number], required: true }`
261+
)
262+
expect(content).toMatch(
260263
`literalUnion: { type: [String, String], required: true }`
261264
)
262-
expect(code).toMatch(
265+
expect(content).toMatch(
263266
`literalUnionMixed: { type: [String, Number, Boolean], required: true }`
264267
)
265-
expect(code).toMatch(`intersection: { type: Object, required: true }`)
268+
expect(content).toMatch(`intersection: { type: Object, required: true }`)
266269
})
267270

268271
test('extract emits', () => {
269-
const { code } = compile(`
272+
const { content } = compile(`
270273
<script setup="_, { emit: myEmit }" lang="ts">
271274
declare function myEmit(e: 'foo' | 'bar'): void
272275
declare function myEmit(e: 'baz', id: number): void
273276
</script>
274277
`)
275-
assertCode(code)
276-
expect(code).toMatch(`declare function __emit__(e: 'foo' | 'bar'): void`)
277-
expect(code).toMatch(
278+
assertCode(content)
279+
expect(content).toMatch(
280+
`declare function __emit__(e: 'foo' | 'bar'): void`
281+
)
282+
expect(content).toMatch(
278283
`declare function __emit__(e: 'baz', id: number): void`
279284
)
280-
expect(code).toMatch(
285+
expect(content).toMatch(
281286
`emits: ["foo", "bar", "baz"] as unknown as undefined`
282287
)
283288
})
284289
})
285290

286291
describe('errors', () => {
287-
test('must have <script setup>', () => {
288-
expect(() => compile(`<script>foo()</script>`)).toThrow(
289-
`SFC has no <script setup>`
290-
)
291-
})
292-
293292
test('<script> and <script setup> must have same lang', () => {
294293
expect(() =>
295294
compile(`<script>foo()</script><script setup lang="ts">bar()</script>`)
@@ -342,7 +341,7 @@ describe('SFC compile <script setup>', () => {
342341
}
343342
}
344343
}
345-
</script>`).code
344+
</script>`).content
346345
)
347346
})
348347

@@ -358,7 +357,7 @@ describe('SFC compile <script setup>', () => {
358357
}
359358
}
360359
}
361-
</script>`).code
360+
</script>`).content
362361
)
363362
})
364363

@@ -373,7 +372,7 @@ describe('SFC compile <script setup>', () => {
373372
}
374373
}
375374
}
376-
</script>`).code
375+
</script>`).content
377376
)
378377
})
379378

0 commit comments

Comments
 (0)