2020-07-16 04:27:21 +08:00
|
|
|
import { parse, SFCScriptCompileOptions, compileScript } from '../src'
|
2020-07-09 09:11:57 +08:00
|
|
|
import { parse as babelParse } from '@babel/parser'
|
2020-08-19 21:53:09 +08:00
|
|
|
import { babelParserDefaultPlugins } from '@vue/shared'
|
2020-07-09 09:11:57 +08:00
|
|
|
|
|
|
|
function compile(src: string, options?: SFCScriptCompileOptions) {
|
2020-07-16 04:27:21 +08:00
|
|
|
const { descriptor } = parse(src)
|
|
|
|
return compileScript(descriptor, options)
|
2020-07-09 09:11:57 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function assertCode(code: string) {
|
|
|
|
// parse the generated code to make sure it is valid
|
|
|
|
try {
|
|
|
|
babelParse(code, {
|
|
|
|
sourceType: 'module',
|
2020-08-19 21:53:09 +08:00
|
|
|
plugins: [...babelParserDefaultPlugins, 'typescript']
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
} catch (e) {
|
|
|
|
console.log(code)
|
|
|
|
throw e
|
|
|
|
}
|
|
|
|
expect(code).toMatchSnapshot()
|
|
|
|
}
|
|
|
|
|
|
|
|
describe('SFC compile <script setup>', () => {
|
|
|
|
test('explicit setup signature', () => {
|
|
|
|
assertCode(
|
2020-07-10 06:18:46 +08:00
|
|
|
compile(`<script setup="props, { emit }">emit('foo')</script>`).content
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('should expose top level declarations', () => {
|
2020-07-10 06:18:46 +08:00
|
|
|
const { content } = compile(`
|
2020-07-09 09:11:57 +08:00
|
|
|
<script setup>
|
|
|
|
import { x } from './x'
|
2020-10-30 03:03:39 +08:00
|
|
|
let a = 1
|
|
|
|
const b = 2
|
|
|
|
function c() {}
|
|
|
|
class d {}
|
2020-07-09 09:11:57 +08:00
|
|
|
</script>
|
2020-07-10 06:18:46 +08:00
|
|
|
`)
|
|
|
|
assertCode(content)
|
2020-10-30 03:03:39 +08:00
|
|
|
expect(content).toMatch('return { x, a, b, c, d }')
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
describe('imports', () => {
|
|
|
|
test('should hoist and expose imports', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(`<script setup>import { ref } from 'vue'</script>`).content
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('should extract comment for import or type declarations', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(`<script setup>
|
|
|
|
import a from 'a' // comment
|
|
|
|
import b from 'b'
|
|
|
|
</script>`).content
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('dedupe between user & helper', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
ref: foo = 1
|
|
|
|
</script>`)
|
2020-07-10 06:18:46 +08:00
|
|
|
assertCode(content)
|
2020-10-30 03:03:39 +08:00
|
|
|
expect(content).toMatch(`import { ref } from 'vue'`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('import dedupe between <script> and <script setup>', () => {
|
|
|
|
const { content } = compile(`
|
|
|
|
<script>
|
|
|
|
import { x } from './x'
|
|
|
|
</script>
|
|
|
|
<script setup>
|
|
|
|
import { x } from './x'
|
|
|
|
x()
|
|
|
|
</script>
|
|
|
|
`)
|
2020-07-10 06:18:46 +08:00
|
|
|
assertCode(content)
|
2020-10-30 03:03:39 +08:00
|
|
|
expect(content.indexOf(`import { x }`)).toEqual(
|
|
|
|
content.lastIndexOf(`import { x }`)
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('<script setup lang="ts">', () => {
|
|
|
|
test('hoist type declarations', () => {
|
2020-10-30 03:03:39 +08:00
|
|
|
const { content } = compile(`
|
2020-07-09 09:11:57 +08:00
|
|
|
<script setup lang="ts">
|
|
|
|
export interface Foo {}
|
|
|
|
type Bar = {}
|
|
|
|
</script>`)
|
2020-07-10 06:18:46 +08:00
|
|
|
assertCode(content)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
test('extract props', () => {
|
2020-07-10 06:18:46 +08:00
|
|
|
const { content } = compile(`
|
2020-07-10 00:16:08 +08:00
|
|
|
<script setup="myProps" lang="ts">
|
|
|
|
interface Test {}
|
2020-07-09 09:11:57 +08:00
|
|
|
|
2020-07-10 00:16:08 +08:00
|
|
|
type Alias = number[]
|
|
|
|
|
|
|
|
declare const myProps: {
|
|
|
|
string: string
|
|
|
|
number: number
|
|
|
|
boolean: boolean
|
|
|
|
object: object
|
|
|
|
objectLiteral: { a: number }
|
|
|
|
fn: (n: number) => void
|
|
|
|
functionRef: Function
|
|
|
|
objectRef: Object
|
|
|
|
array: string[]
|
|
|
|
arrayRef: Array<any>
|
|
|
|
tuple: [number, number]
|
|
|
|
set: Set<string>
|
|
|
|
literal: 'foo'
|
|
|
|
optional?: any
|
|
|
|
recordRef: Record<string, null>
|
|
|
|
interface: Test
|
|
|
|
alias: Alias
|
|
|
|
|
|
|
|
union: string | number
|
|
|
|
literalUnion: 'foo' | 'bar'
|
|
|
|
literalUnionMixed: 'foo' | 1 | boolean
|
|
|
|
intersection: Test & {}
|
|
|
|
}
|
|
|
|
</script>`)
|
2020-07-10 06:18:46 +08:00
|
|
|
assertCode(content)
|
|
|
|
expect(content).toMatch(`string: { type: String, required: true }`)
|
|
|
|
expect(content).toMatch(`number: { type: Number, required: true }`)
|
|
|
|
expect(content).toMatch(`boolean: { type: Boolean, required: true }`)
|
|
|
|
expect(content).toMatch(`object: { type: Object, required: true }`)
|
|
|
|
expect(content).toMatch(`objectLiteral: { type: Object, required: true }`)
|
|
|
|
expect(content).toMatch(`fn: { type: Function, required: true }`)
|
|
|
|
expect(content).toMatch(`functionRef: { type: Function, required: true }`)
|
|
|
|
expect(content).toMatch(`objectRef: { type: Object, required: true }`)
|
|
|
|
expect(content).toMatch(`array: { type: Array, required: true }`)
|
|
|
|
expect(content).toMatch(`arrayRef: { type: Array, required: true }`)
|
|
|
|
expect(content).toMatch(`tuple: { type: Array, required: true }`)
|
|
|
|
expect(content).toMatch(`set: { type: Set, required: true }`)
|
|
|
|
expect(content).toMatch(`literal: { type: String, required: true }`)
|
|
|
|
expect(content).toMatch(`optional: { type: null, required: false }`)
|
|
|
|
expect(content).toMatch(`recordRef: { type: Object, required: true }`)
|
|
|
|
expect(content).toMatch(`interface: { type: Object, required: true }`)
|
|
|
|
expect(content).toMatch(`alias: { type: Array, required: true }`)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`union: { type: [String, Number], required: true }`
|
|
|
|
)
|
|
|
|
expect(content).toMatch(
|
2020-07-10 00:16:08 +08:00
|
|
|
`literalUnion: { type: [String, String], required: true }`
|
|
|
|
)
|
2020-07-10 06:18:46 +08:00
|
|
|
expect(content).toMatch(
|
2020-07-10 00:16:08 +08:00
|
|
|
`literalUnionMixed: { type: [String, Number, Boolean], required: true }`
|
|
|
|
)
|
2020-07-10 06:18:46 +08:00
|
|
|
expect(content).toMatch(`intersection: { type: Object, required: true }`)
|
2020-07-10 00:16:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('extract emits', () => {
|
2020-07-10 06:18:46 +08:00
|
|
|
const { content } = compile(`
|
2020-07-10 00:16:08 +08:00
|
|
|
<script setup="_, { emit: myEmit }" lang="ts">
|
|
|
|
declare function myEmit(e: 'foo' | 'bar'): void
|
|
|
|
declare function myEmit(e: 'baz', id: number): void
|
|
|
|
</script>
|
|
|
|
`)
|
2020-07-10 06:18:46 +08:00
|
|
|
assertCode(content)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`declare function __emit__(e: 'foo' | 'bar'): void`
|
|
|
|
)
|
|
|
|
expect(content).toMatch(
|
2020-07-10 00:16:08 +08:00
|
|
|
`declare function __emit__(e: 'baz', id: number): void`
|
|
|
|
)
|
2020-07-10 06:18:46 +08:00
|
|
|
expect(content).toMatch(
|
2020-07-10 00:16:08 +08:00
|
|
|
`emits: ["foo", "bar", "baz"] as unknown as undefined`
|
|
|
|
)
|
|
|
|
})
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-07-11 04:30:58 +08:00
|
|
|
describe('CSS vars injection', () => {
|
|
|
|
test('<script> w/ no default export', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(
|
|
|
|
`<script>const a = 1</script>\n` +
|
|
|
|
`<style vars="{ color }">div{ color: var(--color); }</style>`
|
|
|
|
).content
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('<script> w/ default export', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(
|
|
|
|
`<script>export default { setup() {} }</script>\n` +
|
|
|
|
`<style vars="{ color }">div{ color: var(--color); }</style>`
|
|
|
|
).content
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('<script> w/ default export in strings/comments', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(
|
|
|
|
`<script>
|
|
|
|
// export default {}
|
|
|
|
export default {}
|
|
|
|
</script>\n` +
|
|
|
|
`<style vars="{ color }">div{ color: var(--color); }</style>`
|
|
|
|
).content
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('w/ <script setup>', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(
|
2020-10-30 03:03:39 +08:00
|
|
|
`<script setup>const color = 'red'</script>\n` +
|
2020-07-11 04:30:58 +08:00
|
|
|
`<style vars="{ color }">div{ color: var(--color); }</style>`
|
|
|
|
).content
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2020-07-11 06:00:13 +08:00
|
|
|
describe('async/await detection', () => {
|
|
|
|
function assertAwaitDetection(code: string, shouldAsync = true) {
|
|
|
|
const { content } = compile(`<script setup>${code}</script>`)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`export ${shouldAsync ? `async ` : ``}function setup`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
test('expression statement', () => {
|
|
|
|
assertAwaitDetection(`await foo`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('variable', () => {
|
|
|
|
assertAwaitDetection(`const a = 1 + (await foo)`)
|
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('ref', () => {
|
|
|
|
assertAwaitDetection(`ref: a = 1 + (await foo)`)
|
2020-07-11 06:00:13 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('nested statements', () => {
|
|
|
|
assertAwaitDetection(`if (ok) { await foo } else { await bar }`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should ignore await inside functions', () => {
|
|
|
|
// function declaration
|
2020-10-30 03:03:39 +08:00
|
|
|
assertAwaitDetection(`async function foo() { await bar }`, false)
|
2020-07-11 06:00:13 +08:00
|
|
|
// function expression
|
|
|
|
assertAwaitDetection(`const foo = async () => { await bar }`, false)
|
|
|
|
// object method
|
|
|
|
assertAwaitDetection(`const obj = { async method() { await bar }}`, false)
|
|
|
|
// class method
|
|
|
|
assertAwaitDetection(
|
|
|
|
`const cls = class Foo { async method() { await bar }}`,
|
|
|
|
false
|
|
|
|
)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
describe('ref: syntax sugar', () => {
|
|
|
|
test('convert ref declarations', () => {
|
|
|
|
const { content, bindings } = compile(`<script setup>
|
|
|
|
ref: a = 1
|
|
|
|
ref: b = {
|
|
|
|
count: 0
|
|
|
|
}
|
|
|
|
let c = () => {}
|
|
|
|
let d
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`import { ref } from 'vue'`)
|
|
|
|
expect(content).not.toMatch(`ref: a`)
|
|
|
|
expect(content).toMatch(`const a = ref(1)`)
|
|
|
|
expect(content).toMatch(`
|
|
|
|
const b = ref({
|
|
|
|
count: 0
|
|
|
|
})
|
|
|
|
`)
|
|
|
|
// normal declarations left untouched
|
|
|
|
expect(content).toMatch(`let c = () => {}`)
|
|
|
|
expect(content).toMatch(`let d`)
|
|
|
|
assertCode(content)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
a: 'setup',
|
|
|
|
b: 'setup',
|
|
|
|
c: 'setup',
|
|
|
|
d: 'setup'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
test('multi ref declarations', () => {
|
|
|
|
const { content, bindings } = compile(`<script setup>
|
|
|
|
ref: a = 1, b = 2, c = {
|
|
|
|
count: 0
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`
|
|
|
|
const a = ref(1), b = ref(2), c = ref({
|
|
|
|
count: 0
|
|
|
|
})
|
|
|
|
`)
|
|
|
|
expect(content).toMatch(`return { a, b, c }`)
|
|
|
|
assertCode(content)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
a: 'setup',
|
|
|
|
b: 'setup',
|
|
|
|
c: 'setup'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should not convert non ref labels', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
foo: a = 1, b = 2, c = {
|
|
|
|
count: 0
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`foo: a = 1, b = 2`)
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('accessing ref binding', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
ref: a = 1
|
|
|
|
console.log(a)
|
|
|
|
function get() {
|
|
|
|
return a + 1
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`console.log(a.value)`)
|
|
|
|
expect(content).toMatch(`return a.value + 1`)
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('cases that should not append .value', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
ref: a = 1
|
|
|
|
console.log(b.a)
|
|
|
|
function get(a) {
|
|
|
|
return a + 1
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).not.toMatch(`a.value`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('mutating ref binding', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
ref: a = 1
|
|
|
|
ref: b = { count: 0 }
|
|
|
|
function inc() {
|
|
|
|
a++
|
|
|
|
a = a + 1
|
|
|
|
b.count++
|
|
|
|
b.count = b.count + 1
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`a.value++`)
|
|
|
|
expect(content).toMatch(`a.value = a.value + 1`)
|
|
|
|
expect(content).toMatch(`b.value.count++`)
|
|
|
|
expect(content).toMatch(`b.value.count = b.value.count + 1`)
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('using ref binding in property shorthand', () => {
|
|
|
|
const { content } = compile(`<script setup>
|
|
|
|
ref: a = 1
|
|
|
|
const b = { a }
|
|
|
|
function test() {
|
|
|
|
const { a } = b
|
|
|
|
}
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`const b = { a: a.value }`)
|
|
|
|
// should not convert destructure
|
|
|
|
expect(content).toMatch(`const { a } = b`)
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('object destructure', () => {
|
|
|
|
const { content, bindings } = compile(`<script setup>
|
|
|
|
ref: n = 1, ({ a, b: c, d = 1, e: f = 2, ...g } = useFoo())
|
|
|
|
console.log(n, a, c, d, f, g)
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`const n = ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()`
|
|
|
|
)
|
|
|
|
expect(content).toMatch(`\nconst a = ref(__a);`)
|
|
|
|
expect(content).not.toMatch(`\nconst b = ref(__b);`)
|
|
|
|
expect(content).toMatch(`\nconst c = ref(__c);`)
|
|
|
|
expect(content).toMatch(`\nconst d = ref(__d);`)
|
|
|
|
expect(content).not.toMatch(`\nconst e = ref(__e);`)
|
|
|
|
expect(content).toMatch(`\nconst f = ref(__f);`)
|
|
|
|
expect(content).toMatch(`\nconst g = ref(__g);`)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`console.log(n.value, a.value, c.value, d.value, f.value, g.value)`
|
|
|
|
)
|
|
|
|
expect(content).toMatch(`return { n, a, c, d, f, g }`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
n: 'setup',
|
|
|
|
a: 'setup',
|
|
|
|
c: 'setup',
|
|
|
|
d: 'setup',
|
|
|
|
f: 'setup',
|
|
|
|
g: 'setup'
|
|
|
|
})
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('array destructure', () => {
|
|
|
|
const { content, bindings } = compile(`<script setup>
|
|
|
|
ref: n = 1, [a, b = 1, ...c] = useFoo()
|
|
|
|
console.log(n, a, b, c)
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(
|
|
|
|
`const n = ref(1), [__a, __b = 1, ...__c] = useFoo()`
|
|
|
|
)
|
|
|
|
expect(content).toMatch(`\nconst a = ref(__a);`)
|
|
|
|
expect(content).toMatch(`\nconst b = ref(__b);`)
|
|
|
|
expect(content).toMatch(`\nconst c = ref(__c);`)
|
|
|
|
expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
|
|
|
|
expect(content).toMatch(`return { n, a, b, c }`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
n: 'setup',
|
|
|
|
a: 'setup',
|
|
|
|
b: 'setup',
|
|
|
|
c: 'setup'
|
|
|
|
})
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('nested destructure', () => {
|
|
|
|
const { content, bindings } = compile(`<script setup>
|
|
|
|
ref: [{ a: { b }}] = useFoo()
|
|
|
|
ref: ({ c: [d, e] } = useBar())
|
|
|
|
console.log(b, d, e)
|
|
|
|
</script>`)
|
|
|
|
expect(content).toMatch(`const [{ a: { b: __b }}] = useFoo()`)
|
|
|
|
expect(content).toMatch(`const { c: [__d, __e] } = useBar()`)
|
|
|
|
expect(content).not.toMatch(`\nconst a = ref(__a);`)
|
|
|
|
expect(content).not.toMatch(`\nconst c = ref(__c);`)
|
|
|
|
expect(content).toMatch(`\nconst b = ref(__b);`)
|
|
|
|
expect(content).toMatch(`\nconst d = ref(__d);`)
|
|
|
|
expect(content).toMatch(`\nconst e = ref(__e);`)
|
|
|
|
expect(content).toMatch(`return { b, d, e }`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
b: 'setup',
|
|
|
|
d: 'setup',
|
|
|
|
e: 'setup'
|
|
|
|
})
|
|
|
|
assertCode(content)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2020-07-09 09:11:57 +08:00
|
|
|
describe('errors', () => {
|
|
|
|
test('<script> and <script setup> must have same lang', () => {
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`<script>foo()</script><script setup lang="ts">bar()</script>`)
|
|
|
|
).toThrow(`<script> and <script setup> must have the same language type`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('non-type named exports', () => {
|
|
|
|
expect(() =>
|
|
|
|
compile(`<script setup>
|
|
|
|
export const a = 1
|
|
|
|
</script>`)
|
|
|
|
).toThrow(`cannot contain non-type named exports`)
|
|
|
|
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`<script setup>
|
2020-07-09 09:11:57 +08:00
|
|
|
const bar = 1
|
|
|
|
export { bar as default }
|
2020-07-16 04:27:21 +08:00
|
|
|
</script>`)
|
2020-10-30 03:03:39 +08:00
|
|
|
).toThrow(`cannot contain non-type named exports`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('ref: non-assignment expressions', () => {
|
|
|
|
expect(() =>
|
|
|
|
compile(`<script setup>
|
|
|
|
ref: a = 1, foo()
|
|
|
|
</script>`)
|
|
|
|
).toThrow(`ref: statements can only contain assignment expressions`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('export default referencing local var', () => {
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`<script setup>
|
2020-07-09 09:11:57 +08:00
|
|
|
const bar = 1
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
foo: {
|
|
|
|
default: () => bar
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-16 04:27:21 +08:00
|
|
|
</script>`)
|
|
|
|
).toThrow(`cannot reference locally declared variables`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
2020-10-30 03:03:39 +08:00
|
|
|
test('export default referencing ref declarations', () => {
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`<script setup>
|
2020-10-30 03:03:39 +08:00
|
|
|
ref: bar = 1
|
2020-07-09 09:11:57 +08:00
|
|
|
export default {
|
|
|
|
props: bar
|
|
|
|
}
|
2020-07-16 04:27:21 +08:00
|
|
|
</script>`)
|
|
|
|
).toThrow(`cannot reference locally declared variables`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('should allow export default referencing scope var', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(`<script setup>
|
|
|
|
const bar = 1
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
foo: {
|
|
|
|
default: bar => bar + 1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-10 06:18:46 +08:00
|
|
|
</script>`).content
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should allow export default referencing imported binding', () => {
|
|
|
|
assertCode(
|
|
|
|
compile(`<script setup>
|
|
|
|
import { bar } from './bar'
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
foo: {
|
|
|
|
default: () => bar
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-10 06:18:46 +08:00
|
|
|
</script>`).content
|
2020-07-09 09:11:57 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-07-15 23:09:33 +08:00
|
|
|
test('error on duplicated default export', () => {
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`
|
2020-07-09 09:11:57 +08:00
|
|
|
<script>
|
|
|
|
export default {}
|
|
|
|
</script>
|
|
|
|
<script setup>
|
|
|
|
export default {}
|
|
|
|
</script>
|
2020-07-16 04:27:21 +08:00
|
|
|
`)
|
|
|
|
).toThrow(`Default export is already declared`)
|
2020-07-09 09:11:57 +08:00
|
|
|
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`
|
2020-07-09 09:11:57 +08:00
|
|
|
<script>
|
|
|
|
export { x as default } from './y'
|
|
|
|
</script>
|
|
|
|
<script setup>
|
|
|
|
export default {}
|
|
|
|
</script>
|
2020-07-16 04:27:21 +08:00
|
|
|
`)
|
|
|
|
).toThrow(`Default export is already declared`)
|
2020-07-09 09:11:57 +08:00
|
|
|
|
2020-07-16 04:27:21 +08:00
|
|
|
expect(() =>
|
|
|
|
compile(`
|
2020-07-09 09:11:57 +08:00
|
|
|
<script>
|
|
|
|
const x = {}
|
|
|
|
export { x as default }
|
|
|
|
</script>
|
|
|
|
<script setup>
|
|
|
|
export default {}
|
|
|
|
</script>
|
2020-07-16 04:27:21 +08:00
|
|
|
`)
|
|
|
|
).toThrow(`Default export is already declared`)
|
2020-07-09 09:11:57 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
2020-08-29 04:21:03 +08:00
|
|
|
|
|
|
|
describe('SFC analyze <script> bindings', () => {
|
2020-09-15 09:51:15 +08:00
|
|
|
it('can parse decorators syntax in typescript block', () => {
|
|
|
|
const { scriptAst } = compile(`
|
|
|
|
<script lang="ts">
|
|
|
|
import { Options, Vue } from 'vue-class-component';
|
|
|
|
@Options({
|
|
|
|
components: {
|
|
|
|
HelloWorld,
|
|
|
|
},
|
|
|
|
props: ['foo', 'bar']
|
|
|
|
})
|
|
|
|
export default class Home extends Vue {}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
|
|
|
|
expect(scriptAst).toBeDefined()
|
|
|
|
})
|
2020-08-29 04:21:03 +08:00
|
|
|
it('recognizes props array declaration', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: ['foo', 'bar']
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'props', bar: 'props' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes props object declaration', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
foo: String,
|
|
|
|
bar: {
|
|
|
|
type: String,
|
|
|
|
},
|
|
|
|
baz: null,
|
|
|
|
qux: [String, Number]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
foo: 'props',
|
|
|
|
bar: 'props',
|
|
|
|
baz: 'props',
|
|
|
|
qux: 'props'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes setup return', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
const bar = 2
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
return {
|
|
|
|
foo: 1,
|
|
|
|
bar
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'setup', bar: 'setup' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes async setup return', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
const bar = 2
|
|
|
|
export default {
|
|
|
|
async setup() {
|
|
|
|
return {
|
|
|
|
foo: 1,
|
|
|
|
bar
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'setup', bar: 'setup' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes data return', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
const bar = 2
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
foo: null,
|
|
|
|
bar
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'data', bar: 'data' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes methods', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
methods: {
|
|
|
|
foo() {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'options' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes computeds', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
computed: {
|
|
|
|
foo() {},
|
|
|
|
bar: {
|
|
|
|
get() {},
|
|
|
|
set() {},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'options', bar: 'options' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes injections array declaration', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
inject: ['foo', 'bar']
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'options', bar: 'options' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('recognizes injections object declaration', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
inject: {
|
|
|
|
foo: {},
|
|
|
|
bar: {},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({ foo: 'options', bar: 'options' })
|
|
|
|
})
|
|
|
|
|
|
|
|
it('works for mixed bindings', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
inject: ['foo'],
|
|
|
|
props: {
|
|
|
|
bar: String,
|
|
|
|
},
|
|
|
|
setup() {
|
|
|
|
return {
|
|
|
|
baz: null,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
qux: null
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
quux() {}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
quuz() {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
foo: 'options',
|
|
|
|
bar: 'props',
|
|
|
|
baz: 'setup',
|
|
|
|
qux: 'data',
|
|
|
|
quux: 'options',
|
|
|
|
quuz: 'options'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
it('works for script setup', () => {
|
|
|
|
const { bindings } = compile(`
|
|
|
|
<script setup>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
foo: String,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
`)
|
|
|
|
expect(bindings).toStrictEqual({
|
|
|
|
foo: 'props'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|