feat(experimental): standalone ref transform
This commit is contained in:
Evan You
@@ -1,33 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<script setup> ref sugar $computed declaration 1`] = `
|
||||
"import { computed as _computed } from 'vue'
|
||||
|
||||
exports[`<script setup> ref sugar $ unwrapping 1`] = `
|
||||
"import { ref, shallowRef } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
const a = _computed(() => 1)
|
||||
let foo = (ref())
|
||||
let a = (ref(1))
|
||||
let b = (shallowRef({
|
||||
count: 0
|
||||
}))
|
||||
let c = () => {}
|
||||
let d
|
||||
|
||||
return { a }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar $raw 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
const b = (a)
|
||||
const c = ({ a })
|
||||
callExternal((a))
|
||||
|
||||
return { a, b, c }
|
||||
return { foo, a, b, c, d, ref, shallowRef }
|
||||
}
|
||||
|
||||
}"
|
||||
@@ -53,231 +41,3 @@ return { foo, a, b, c, d }
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar accessing ref binding 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
console.log(a.value)
|
||||
function get() {
|
||||
return a.value + 1
|
||||
}
|
||||
|
||||
return { a, get }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar array destructure 1`] = `
|
||||
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
|
||||
const a = _shallowRef(__a);
|
||||
const b = _shallowRef(__b);
|
||||
const c = _shallowRef(__c);
|
||||
console.log(n.value, a.value, b.value, c.value)
|
||||
|
||||
return { n, a, b, c }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar handle TS casting syntax 1`] = `
|
||||
"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
|
||||
|
||||
export default _defineComponent({
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
console.log(a.value!)
|
||||
console.log(a.value! + 1)
|
||||
console.log(a.value as number)
|
||||
console.log((a.value as number) + 1)
|
||||
console.log(<number>a.value)
|
||||
console.log(<number>a.value + 1)
|
||||
console.log(a.value! + (a.value as number))
|
||||
console.log(a.value! + <number>a.value)
|
||||
console.log((a.value as number) + <number>a.value)
|
||||
|
||||
return { a }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar mixing $ref & $computed declarations 1`] = `
|
||||
"import { ref as _ref, computed as _computed } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1), b = _computed(() => a.value + 1)
|
||||
|
||||
return { a, b }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar multi $ref declarations 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1), b = _ref(2), c = _ref({
|
||||
count: 0
|
||||
})
|
||||
|
||||
return { a, b, c }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar mutating ref binding 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
let b = _ref({ count: 0 })
|
||||
function inc() {
|
||||
a.value++
|
||||
a.value = a.value + 1
|
||||
b.value.count++
|
||||
b.value.count = b.value.count + 1
|
||||
;({ a: a.value } = { a: 2 })
|
||||
;[a.value] = [1]
|
||||
}
|
||||
|
||||
return { a, b, inc }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar nested destructure 1`] = `
|
||||
"import { shallowRef as _shallowRef } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let [{ a: { b: __b }}] = (useFoo())
|
||||
const b = _shallowRef(__b);
|
||||
let { c: [__d, __e] } = (useBar())
|
||||
const d = _shallowRef(__d);
|
||||
const e = _shallowRef(__e);
|
||||
console.log(b.value, d.value, e.value)
|
||||
|
||||
return { b, d, e }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar object destructure 1`] = `
|
||||
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
|
||||
const a = _shallowRef(__a);
|
||||
const c = _shallowRef(__c);
|
||||
const d = _shallowRef(__d);
|
||||
const f = _shallowRef(__f);
|
||||
const g = _shallowRef(__g);
|
||||
let { foo: __foo } = (useSomthing(() => 1));
|
||||
const foo = _shallowRef(__foo);
|
||||
console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
|
||||
|
||||
return { n, a, c, d, f, g, foo }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar should not rewrite scope variable 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
let b = _ref(1)
|
||||
let d = _ref(1)
|
||||
const e = 1
|
||||
function test() {
|
||||
const a = 2
|
||||
console.log(a)
|
||||
console.log(b.value)
|
||||
let c = { c: 3 }
|
||||
console.log(c)
|
||||
console.log(d.value)
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
return { a, b, d, e, test }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar should not rewrite type identifiers 1`] = `
|
||||
"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
|
||||
|
||||
export default _defineComponent({
|
||||
props: {
|
||||
msg: { type: String, required: true },
|
||||
ids: { type: Array, required: false }
|
||||
} as unknown as undefined,
|
||||
setup(__props: {msg: string; ids?: string[]}, { expose }) {
|
||||
expose()
|
||||
|
||||
const props = __props
|
||||
|
||||
let ids = _ref([])
|
||||
|
||||
return { props, ids }
|
||||
}
|
||||
|
||||
})"
|
||||
`;
|
||||
|
||||
exports[`<script setup> ref sugar using ref binding in property shorthand 1`] = `
|
||||
"import { ref as _ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup(__props, { expose }) {
|
||||
expose()
|
||||
|
||||
let a = _ref(1)
|
||||
const b = { a: a.value }
|
||||
function test() {
|
||||
const { a } = b
|
||||
}
|
||||
|
||||
return { a, b, test }
|
||||
}
|
||||
|
||||
}"
|
||||
`;
|
||||
|
||||
@@ -1,11 +1,50 @@
|
||||
import { BindingTypes } from '@vue/compiler-core'
|
||||
import { compileSFCScript as compile, assertCode } from './utils'
|
||||
|
||||
// this file only tests integration with SFC - main test case for the ref
|
||||
// transform can be found in <root>/packages/ref-transform/__tests__
|
||||
describe('<script setup> ref sugar', () => {
|
||||
function compileWithRefSugar(src: string) {
|
||||
return compile(src, { refSugar: true })
|
||||
}
|
||||
|
||||
test('$ unwrapping', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
import { ref, shallowRef } from 'vue'
|
||||
let foo = $(ref())
|
||||
let a = $(ref(1))
|
||||
let b = $(shallowRef({
|
||||
count: 0
|
||||
}))
|
||||
let c = () => {}
|
||||
let d
|
||||
</script>`)
|
||||
expect(content).not.toMatch(`$(ref())`)
|
||||
expect(content).not.toMatch(`$(ref(1))`)
|
||||
expect(content).not.toMatch(`$(shallowRef({`)
|
||||
expect(content).toMatch(`let foo = (ref())`)
|
||||
expect(content).toMatch(`let a = (ref(1))`)
|
||||
expect(content).toMatch(`
|
||||
let b = (shallowRef({
|
||||
count: 0
|
||||
}))
|
||||
`)
|
||||
// normal declarations left untouched
|
||||
expect(content).toMatch(`let c = () => {}`)
|
||||
expect(content).toMatch(`let d`)
|
||||
expect(content).toMatch(`return { foo, a, b, c, d, ref, shallowRef }`)
|
||||
assertCode(content)
|
||||
expect(bindings).toStrictEqual({
|
||||
foo: BindingTypes.SETUP_REF,
|
||||
a: BindingTypes.SETUP_REF,
|
||||
b: BindingTypes.SETUP_REF,
|
||||
c: BindingTypes.SETUP_LET,
|
||||
d: BindingTypes.SETUP_LET,
|
||||
ref: BindingTypes.SETUP_CONST,
|
||||
shallowRef: BindingTypes.SETUP_CONST
|
||||
})
|
||||
})
|
||||
|
||||
test('$ref & $shallowRef declarations', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let foo = $ref()
|
||||
@@ -42,307 +81,7 @@ describe('<script setup> ref sugar', () => {
|
||||
})
|
||||
})
|
||||
|
||||
test('multi $ref declarations', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(1), b = $ref(2), c = $ref({
|
||||
count: 0
|
||||
})
|
||||
</script>`)
|
||||
expect(content).toMatch(`
|
||||
let a = _ref(1), b = _ref(2), c = _ref({
|
||||
count: 0
|
||||
})
|
||||
`)
|
||||
expect(content).toMatch(`return { a, b, c }`)
|
||||
assertCode(content)
|
||||
expect(bindings).toStrictEqual({
|
||||
a: BindingTypes.SETUP_REF,
|
||||
b: BindingTypes.SETUP_REF,
|
||||
c: BindingTypes.SETUP_REF
|
||||
})
|
||||
})
|
||||
|
||||
test('$computed declaration', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
const a = $computed(() => 1)
|
||||
</script>`)
|
||||
expect(content).toMatch(`
|
||||
const a = _computed(() => 1)
|
||||
`)
|
||||
expect(content).toMatch(`return { a }`)
|
||||
assertCode(content)
|
||||
expect(bindings).toStrictEqual({
|
||||
a: BindingTypes.SETUP_REF
|
||||
})
|
||||
})
|
||||
|
||||
test('mixing $ref & $computed declarations', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(1), b = $computed(() => a + 1)
|
||||
</script>`)
|
||||
expect(content).toMatch(`
|
||||
let a = _ref(1), b = _computed(() => a.value + 1)
|
||||
`)
|
||||
expect(content).toMatch(`return { a, b }`)
|
||||
assertCode(content)
|
||||
expect(bindings).toStrictEqual({
|
||||
a: BindingTypes.SETUP_REF,
|
||||
b: BindingTypes.SETUP_REF
|
||||
})
|
||||
})
|
||||
|
||||
test('accessing ref binding', () => {
|
||||
const { content } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(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 } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(1)
|
||||
console.log(b.a)
|
||||
function get(a) {
|
||||
return a + 1
|
||||
}
|
||||
</script>`)
|
||||
expect(content).not.toMatch(`a.value`)
|
||||
})
|
||||
|
||||
test('mutating ref binding', () => {
|
||||
const { content } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(1)
|
||||
let b = $ref({ count: 0 })
|
||||
function inc() {
|
||||
a++
|
||||
a = a + 1
|
||||
b.count++
|
||||
b.count = b.count + 1
|
||||
;({ a } = { a: 2 })
|
||||
;[a] = [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`)
|
||||
expect(content).toMatch(`;({ a: a.value } = { a: 2 })`)
|
||||
expect(content).toMatch(`;[a.value] = [1]`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('using ref binding in property shorthand', () => {
|
||||
const { content } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(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('should not rewrite scope variable', () => {
|
||||
const { content } = compileWithRefSugar(`
|
||||
<script setup>
|
||||
let a = $ref(1)
|
||||
let b = $ref(1)
|
||||
let d = $ref(1)
|
||||
const e = 1
|
||||
function test() {
|
||||
const a = 2
|
||||
console.log(a)
|
||||
console.log(b)
|
||||
let c = { c: 3 }
|
||||
console.log(c)
|
||||
console.log(d)
|
||||
console.log(e)
|
||||
}
|
||||
</script>`)
|
||||
expect(content).toMatch('console.log(a)')
|
||||
expect(content).toMatch('console.log(b.value)')
|
||||
expect(content).toMatch('console.log(c)')
|
||||
expect(content).toMatch('console.log(d.value)')
|
||||
expect(content).toMatch('console.log(e)')
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('object destructure', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let n = $ref(1), { a, b: c, d = 1, e: f = 2, ...g } = $fromRefs(useFoo())
|
||||
let { foo } = $fromRefs(useSomthing(() => 1));
|
||||
console.log(n, a, c, d, f, g, foo)
|
||||
</script>`)
|
||||
expect(content).toMatch(
|
||||
`let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
|
||||
)
|
||||
expect(content).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
|
||||
expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
|
||||
expect(content).not.toMatch(`\nconst b = _shallowRef(__b);`)
|
||||
expect(content).toMatch(`\nconst c = _shallowRef(__c);`)
|
||||
expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
|
||||
expect(content).not.toMatch(`\nconst e = _shallowRef(__e);`)
|
||||
expect(content).toMatch(`\nconst f = _shallowRef(__f);`)
|
||||
expect(content).toMatch(`\nconst g = _shallowRef(__g);`)
|
||||
expect(content).toMatch(`\nconst foo = _shallowRef(__foo);`)
|
||||
expect(content).toMatch(
|
||||
`console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
|
||||
)
|
||||
expect(content).toMatch(`return { n, a, c, d, f, g, foo }`)
|
||||
expect(bindings).toStrictEqual({
|
||||
n: BindingTypes.SETUP_REF,
|
||||
a: BindingTypes.SETUP_REF,
|
||||
c: BindingTypes.SETUP_REF,
|
||||
d: BindingTypes.SETUP_REF,
|
||||
f: BindingTypes.SETUP_REF,
|
||||
g: BindingTypes.SETUP_REF,
|
||||
foo: BindingTypes.SETUP_REF
|
||||
})
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('array destructure', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let n = $ref(1), [a, b = 1, ...c] = $fromRefs(useFoo())
|
||||
console.log(n, a, b, c)
|
||||
</script>`)
|
||||
expect(content).toMatch(
|
||||
`let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`
|
||||
)
|
||||
expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
|
||||
expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
|
||||
expect(content).toMatch(`\nconst c = _shallowRef(__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: BindingTypes.SETUP_REF,
|
||||
a: BindingTypes.SETUP_REF,
|
||||
b: BindingTypes.SETUP_REF,
|
||||
c: BindingTypes.SETUP_REF
|
||||
})
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('nested destructure', () => {
|
||||
const { content, bindings } = compileWithRefSugar(`<script setup>
|
||||
let [{ a: { b }}] = $fromRefs(useFoo())
|
||||
let { c: [d, e] } = $fromRefs(useBar())
|
||||
console.log(b, d, e)
|
||||
</script>`)
|
||||
expect(content).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
|
||||
expect(content).toMatch(`let { c: [__d, __e] } = (useBar())`)
|
||||
expect(content).not.toMatch(`\nconst a = _shallowRef(__a);`)
|
||||
expect(content).not.toMatch(`\nconst c = _shallowRef(__c);`)
|
||||
expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
|
||||
expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
|
||||
expect(content).toMatch(`\nconst e = _shallowRef(__e);`)
|
||||
expect(content).toMatch(`return { b, d, e }`)
|
||||
expect(bindings).toStrictEqual({
|
||||
b: BindingTypes.SETUP_REF,
|
||||
d: BindingTypes.SETUP_REF,
|
||||
e: BindingTypes.SETUP_REF
|
||||
})
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
test('$raw', () => {
|
||||
const { content } = compileWithRefSugar(`<script setup>
|
||||
let a = $ref(1)
|
||||
const b = $raw(a)
|
||||
const c = $raw({ a })
|
||||
callExternal($raw(a))
|
||||
</script>`)
|
||||
expect(content).toMatch(`const b = (a)`)
|
||||
expect(content).toMatch(`const c = ({ a })`)
|
||||
expect(content).toMatch(`callExternal((a))`)
|
||||
assertCode(content)
|
||||
})
|
||||
|
||||
//#4062
|
||||
test('should not rewrite type identifiers', () => {
|
||||
const { content } = compile(
|
||||
`
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{msg: string; ids?: string[]}>()
|
||||
let ids = $ref([])
|
||||
</script>`,
|
||||
{
|
||||
refSugar: true
|
||||
}
|
||||
)
|
||||
assertCode(content)
|
||||
expect(content).not.toMatch('.value')
|
||||
})
|
||||
|
||||
// #4254
|
||||
test('handle TS casting syntax', () => {
|
||||
const { content } = compile(
|
||||
`
|
||||
<script setup lang="ts">
|
||||
let a = $ref(1)
|
||||
console.log(a!)
|
||||
console.log(a! + 1)
|
||||
console.log(a as number)
|
||||
console.log((a as number) + 1)
|
||||
console.log(<number>a)
|
||||
console.log(<number>a + 1)
|
||||
console.log(a! + (a as number))
|
||||
console.log(a! + <number>a)
|
||||
console.log((a as number) + <number>a)
|
||||
</script>`,
|
||||
{
|
||||
refSugar: true
|
||||
}
|
||||
)
|
||||
assertCode(content)
|
||||
expect(content).toMatch('console.log(a.value!)')
|
||||
expect(content).toMatch('console.log(a.value as number)')
|
||||
expect(content).toMatch('console.log(<number>a.value)')
|
||||
})
|
||||
|
||||
describe('errors', () => {
|
||||
test('non-let $ref declaration', () => {
|
||||
expect(() =>
|
||||
compile(
|
||||
`<script setup>
|
||||
const a = $ref(1)
|
||||
</script>`,
|
||||
{ refSugar: true }
|
||||
)
|
||||
).toThrow(`$ref() bindings can only be declared with let`)
|
||||
})
|
||||
|
||||
test('$ref w/ destructure', () => {
|
||||
expect(() =>
|
||||
compile(
|
||||
`<script setup>
|
||||
let { a } = $ref(1)
|
||||
</script>`,
|
||||
{ refSugar: true }
|
||||
)
|
||||
).toThrow(`$ref() bindings cannot be used with destructuring`)
|
||||
})
|
||||
|
||||
test('$computed w/ destructure', () => {
|
||||
expect(() =>
|
||||
compile(
|
||||
`<script setup>
|
||||
const { a } = $computed(() => 1)
|
||||
</script>`,
|
||||
{ refSugar: true }
|
||||
)
|
||||
).toThrow(`$computed() bindings cannot be used with destructuring`)
|
||||
})
|
||||
|
||||
test('defineProps/Emit() referencing ref declarations', () => {
|
||||
expect(() =>
|
||||
compile(
|
||||
@@ -368,26 +107,5 @@ describe('<script setup> ref sugar', () => {
|
||||
)
|
||||
).toThrow(`cannot reference locally declared variables`)
|
||||
})
|
||||
|
||||
test('warn usage in non-init positions', () => {
|
||||
expect(() =>
|
||||
compile(
|
||||
`<script setup>
|
||||
let bar = $ref(1)
|
||||
bar = $ref(2)
|
||||
</script>`,
|
||||
{ refSugar: true }
|
||||
)
|
||||
).toThrow(`$ref can only be used directly as a variable initializer`)
|
||||
|
||||
expect(() =>
|
||||
compile(
|
||||
`<script setup>
|
||||
let bar = { foo: $computed(1) }
|
||||
</script>`,
|
||||
{ refSugar: true }
|
||||
)
|
||||
).toThrow(`$computed can only be used directly as a variable initializer`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
"@vue/compiler-core": "3.2.4",
|
||||
"@vue/compiler-dom": "3.2.4",
|
||||
"@vue/compiler-ssr": "3.2.4",
|
||||
"@vue/ref-transform": "3.2.4",
|
||||
"@vue/shared": "3.2.4",
|
||||
"consolidate": "^0.16.0",
|
||||
"estree-walker": "^2.0.2",
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
UNREF,
|
||||
SimpleExpressionNode,
|
||||
isFunctionType,
|
||||
isStaticProperty,
|
||||
walkIdentifiers
|
||||
} from '@vue/compiler-dom'
|
||||
import {
|
||||
@@ -45,8 +44,7 @@ import {
|
||||
RestElement,
|
||||
TSInterfaceBody,
|
||||
AwaitExpression,
|
||||
VariableDeclarator,
|
||||
VariableDeclaration
|
||||
Program
|
||||
} from '@babel/types'
|
||||
import { walk } from 'estree-walker'
|
||||
import { RawSourceMap } from 'source-map'
|
||||
@@ -59,6 +57,7 @@ import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
|
||||
import { warnExperimental, warnOnce } from './warn'
|
||||
import { rewriteDefault } from './rewriteDefault'
|
||||
import { createCache } from './cache'
|
||||
import { transformAST as transformWithRefSugar } from '@vue/ref-transform'
|
||||
|
||||
// Special compiler macros
|
||||
const DEFINE_PROPS = 'defineProps'
|
||||
@@ -66,12 +65,6 @@ const DEFINE_EMITS = 'defineEmits'
|
||||
const DEFINE_EXPOSE = 'defineExpose'
|
||||
const WITH_DEFAULTS = 'withDefaults'
|
||||
|
||||
const $REF = `$ref`
|
||||
const $SHALLOW_REF = '$shallowRef'
|
||||
const $COMPUTED = `$computed`
|
||||
const $FROM_REFS = `$fromRefs`
|
||||
const $RAW = `$raw`
|
||||
|
||||
const isBuiltInDir = makeMap(
|
||||
`once,memo,if,else,else-if,slot,text,html,on,bind,model,show,cloak,is`
|
||||
)
|
||||
@@ -144,6 +137,7 @@ export function compileScript(
|
||||
let { script, scriptSetup, source, filename } = sfc
|
||||
// feature flags
|
||||
const enableRefSugar = !!options.refSugar
|
||||
let refBindings: string[] | undefined
|
||||
const parseOnly = !!options.parseOnly
|
||||
|
||||
if (parseOnly && !scriptSetup) {
|
||||
@@ -250,8 +244,7 @@ export function compileScript(
|
||||
const userImports: Record<string, ImportBinding> = Object.create(null)
|
||||
const userImportAlias: Record<string, string> = Object.create(null)
|
||||
const setupBindings: Record<string, VariableBinding> = Object.create(null)
|
||||
const refBindings: Record<string, VariableBinding> = Object.create(null)
|
||||
const refIdentifiers: Set<Identifier> = new Set()
|
||||
|
||||
let defaultExport: Node | undefined
|
||||
let hasDefinePropsCall = false
|
||||
let hasDefineEmitCall = false
|
||||
@@ -293,10 +286,10 @@ export function compileScript(
|
||||
input: string,
|
||||
options: ParserOptions,
|
||||
offset: number
|
||||
): Statement[] {
|
||||
): Program {
|
||||
try {
|
||||
options.errorRecovery = parseOnly
|
||||
return _parse(input, options).program.body
|
||||
return _parse(input, options).program
|
||||
} catch (e) {
|
||||
e.message = `[@vue/compiler-sfc] ${e.message}\n\n${
|
||||
sfc.filename
|
||||
@@ -476,7 +469,7 @@ export function compileScript(
|
||||
}
|
||||
}
|
||||
|
||||
for (const node of scriptSetupAst) {
|
||||
for (const node of scriptSetupAst.body) {
|
||||
const qualified = isQualifiedType(node)
|
||||
if (qualified) {
|
||||
return qualified
|
||||
@@ -531,173 +524,6 @@ export function compileScript(
|
||||
)
|
||||
}
|
||||
|
||||
function isRefSugarCall(callee: string) {
|
||||
return (
|
||||
callee === $REF ||
|
||||
callee === $COMPUTED ||
|
||||
callee === $FROM_REFS ||
|
||||
callee === $SHALLOW_REF
|
||||
)
|
||||
}
|
||||
|
||||
function processRefSugar(
|
||||
decl: VariableDeclarator,
|
||||
statement: VariableDeclaration
|
||||
) {
|
||||
if (!isCallOf(decl.init, isRefSugarCall)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!enableRefSugar) {
|
||||
error(
|
||||
`ref sugar is an experimental proposal and must be explicitly ` +
|
||||
`enabled via @vue/compiler-sfc options.`,
|
||||
// TODO link to RFC details
|
||||
decl.init
|
||||
)
|
||||
} else {
|
||||
warnExperimental(
|
||||
`ref sugar`,
|
||||
`https://github.com/vuejs/rfcs/discussions/369`
|
||||
)
|
||||
}
|
||||
|
||||
const callee = (decl.init.callee as Identifier).name
|
||||
const start = decl.init.start! + startOffset
|
||||
if (callee === $REF || callee === $SHALLOW_REF) {
|
||||
if (statement.kind !== 'let') {
|
||||
error(`${callee}() bindings can only be declared with let.`, decl)
|
||||
}
|
||||
if (decl.id.type !== 'Identifier') {
|
||||
error(
|
||||
`${callee}() bindings cannot be used with destructuring. ` +
|
||||
`If you are trying to destructure from an object of refs, ` +
|
||||
`use \`let { x } = $fromRefs(obj)\`.`,
|
||||
decl.id
|
||||
)
|
||||
}
|
||||
registerRefBinding(decl.id)
|
||||
s.overwrite(
|
||||
start,
|
||||
start + callee.length,
|
||||
helper(callee === $REF ? 'ref' : 'shallowRef')
|
||||
)
|
||||
} else if (callee === $COMPUTED) {
|
||||
if (decl.id.type !== 'Identifier') {
|
||||
error(
|
||||
`${callee}() bindings cannot be used with destructuring.`,
|
||||
decl.id
|
||||
)
|
||||
}
|
||||
registerRefBinding(decl.id)
|
||||
s.overwrite(start, start + $COMPUTED.length, helper('computed'))
|
||||
} else if (callee === $FROM_REFS) {
|
||||
if (!decl.id.type.endsWith('Pattern')) {
|
||||
error(
|
||||
`${callee}() declaration must be used with destructure patterns.`,
|
||||
decl
|
||||
)
|
||||
}
|
||||
if (decl.id.type === 'ObjectPattern') {
|
||||
processRefObjectPattern(decl.id, statement)
|
||||
} else if (decl.id.type === 'ArrayPattern') {
|
||||
processRefArrayPattern(decl.id, statement)
|
||||
}
|
||||
s.remove(start, start + callee.length)
|
||||
}
|
||||
}
|
||||
|
||||
function registerRefBinding(id: Identifier) {
|
||||
if (id.name[0] === '$') {
|
||||
error(`ref variable identifiers cannot start with $.`, id)
|
||||
}
|
||||
refBindings[id.name] = setupBindings[id.name] = {
|
||||
type: BindingTypes.SETUP_REF,
|
||||
rangeNode: id
|
||||
}
|
||||
refIdentifiers.add(id)
|
||||
}
|
||||
|
||||
function processRefObjectPattern(
|
||||
pattern: ObjectPattern,
|
||||
statement: VariableDeclaration
|
||||
) {
|
||||
for (const p of pattern.properties) {
|
||||
let nameId: Identifier | undefined
|
||||
if (p.type === 'ObjectProperty') {
|
||||
if (p.key.start! === p.value.start!) {
|
||||
// shorthand { foo } --> { foo: __foo }
|
||||
nameId = p.key as Identifier
|
||||
s.appendLeft(nameId.end! + startOffset, `: __${nameId.name}`)
|
||||
if (p.value.type === 'AssignmentPattern') {
|
||||
// { foo = 1 }
|
||||
refIdentifiers.add(p.value.left as Identifier)
|
||||
}
|
||||
} else {
|
||||
if (p.value.type === 'Identifier') {
|
||||
// { foo: bar } --> { foo: __bar }
|
||||
nameId = p.value
|
||||
s.prependRight(nameId.start! + startOffset, `__`)
|
||||
} else if (p.value.type === 'ObjectPattern') {
|
||||
processRefObjectPattern(p.value, statement)
|
||||
} else if (p.value.type === 'ArrayPattern') {
|
||||
processRefArrayPattern(p.value, statement)
|
||||
} else if (p.value.type === 'AssignmentPattern') {
|
||||
// { foo: bar = 1 } --> { foo: __bar = 1 }
|
||||
nameId = p.value.left as Identifier
|
||||
s.prependRight(nameId.start! + startOffset, `__`)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// rest element { ...foo } --> { ...__foo }
|
||||
nameId = p.argument as Identifier
|
||||
s.prependRight(nameId.start! + startOffset, `__`)
|
||||
}
|
||||
if (nameId) {
|
||||
registerRefBinding(nameId)
|
||||
// append binding declarations after the parent statement
|
||||
s.appendLeft(
|
||||
statement.end! + startOffset,
|
||||
`\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function processRefArrayPattern(
|
||||
pattern: ArrayPattern,
|
||||
statement: VariableDeclaration
|
||||
) {
|
||||
for (const e of pattern.elements) {
|
||||
if (!e) continue
|
||||
let nameId: Identifier | undefined
|
||||
if (e.type === 'Identifier') {
|
||||
// [a] --> [__a]
|
||||
nameId = e
|
||||
} else if (e.type === 'AssignmentPattern') {
|
||||
// [a = 1] --> [__a = 1]
|
||||
nameId = e.left as Identifier
|
||||
} else if (e.type === 'RestElement') {
|
||||
// [...a] --> [...__a]
|
||||
nameId = e.argument as Identifier
|
||||
} else if (e.type === 'ObjectPattern') {
|
||||
processRefObjectPattern(e, statement)
|
||||
} else if (e.type === 'ArrayPattern') {
|
||||
processRefArrayPattern(e, statement)
|
||||
}
|
||||
if (nameId) {
|
||||
registerRefBinding(nameId)
|
||||
// prefix original
|
||||
s.prependRight(nameId.start! + startOffset, `__`)
|
||||
// append binding declarations after the parent statement
|
||||
s.appendLeft(
|
||||
statement.end! + startOffset,
|
||||
`\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function genRuntimeProps(props: Record<string, PropTypeData>) {
|
||||
const keys = Object.keys(props)
|
||||
if (!keys.length) {
|
||||
@@ -770,7 +596,7 @@ export function compileScript(
|
||||
scriptStartOffset!
|
||||
)
|
||||
|
||||
for (const node of scriptAst) {
|
||||
for (const node of scriptAst.body) {
|
||||
if (node.type === 'ImportDeclaration') {
|
||||
// record imports for dedupe
|
||||
for (const specifier of node.specifiers) {
|
||||
@@ -854,7 +680,7 @@ export function compileScript(
|
||||
startOffset
|
||||
)
|
||||
|
||||
for (const node of scriptSetupAst) {
|
||||
for (const node of scriptSetupAst.body) {
|
||||
const start = node.start! + startOffset
|
||||
let end = node.end! + startOffset
|
||||
// locate comment
|
||||
@@ -1005,8 +831,6 @@ export function compileScript(
|
||||
s.remove(start, end)
|
||||
left--
|
||||
}
|
||||
} else {
|
||||
processRefSugar(decl, node)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1106,54 +930,25 @@ export function compileScript(
|
||||
return {
|
||||
...scriptSetup,
|
||||
ranges,
|
||||
scriptAst,
|
||||
scriptSetupAst
|
||||
scriptAst: scriptAst?.body,
|
||||
scriptSetupAst: scriptSetupAst?.body
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Do a full walk to rewrite identifiers referencing let exports with ref
|
||||
// value access
|
||||
// 3. Apply ref sugar transform
|
||||
if (enableRefSugar) {
|
||||
const onIdent = (id: Identifier, parent: Node, parentStack: Node[]) => {
|
||||
if (refBindings[id.name] && !refIdentifiers.has(id)) {
|
||||
if (isStaticProperty(parent) && parent.shorthand) {
|
||||
// let binding used in a property shorthand
|
||||
// { foo } -> { foo: foo.value }
|
||||
// skip for destructure patterns
|
||||
if (
|
||||
!(parent as any).inPattern ||
|
||||
isInDestructureAssignment(parent, parentStack)
|
||||
) {
|
||||
s.appendLeft(id.end! + startOffset, `: ${id.name}.value`)
|
||||
}
|
||||
} else {
|
||||
s.appendLeft(id.end! + startOffset, '.value')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onNode = (node: Node, parent: Node) => {
|
||||
if (isCallOf(node, $RAW)) {
|
||||
s.remove(
|
||||
node.callee.start! + startOffset,
|
||||
node.callee.end! + startOffset
|
||||
)
|
||||
return false // skip walk
|
||||
} else if (
|
||||
parent &&
|
||||
isCallOf(node, isRefSugarCall) &&
|
||||
(parent.type !== 'VariableDeclarator' || node !== parent.init)
|
||||
) {
|
||||
error(
|
||||
// @ts-ignore
|
||||
`${node.callee.name} can only be used directly as a variable initializer.`,
|
||||
node
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
for (const node of scriptSetupAst) {
|
||||
walkIdentifiers(node, onIdent, onNode)
|
||||
warnExperimental(
|
||||
`ref sugar`,
|
||||
`https://github.com/vuejs/rfcs/discussions/369`
|
||||
)
|
||||
const { rootVars, importedHelpers } = transformWithRefSugar(
|
||||
scriptSetupAst,
|
||||
s,
|
||||
startOffset
|
||||
)
|
||||
refBindings = rootVars
|
||||
for (const h of importedHelpers) {
|
||||
helperImports.add(h)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1192,7 +987,7 @@ export function compileScript(
|
||||
|
||||
// 7. analyze binding metadata
|
||||
if (scriptAst) {
|
||||
Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst))
|
||||
Object.assign(bindingMetadata, analyzeScriptBindings(scriptAst.body))
|
||||
}
|
||||
if (propsRuntimeDecl) {
|
||||
for (const key of getObjectOrArrayExpressionKeys(propsRuntimeDecl)) {
|
||||
@@ -1215,8 +1010,10 @@ export function compileScript(
|
||||
bindingMetadata[key] = setupBindings[key].type
|
||||
}
|
||||
// known ref bindings
|
||||
for (const key in refBindings) {
|
||||
bindingMetadata[key] = BindingTypes.SETUP_REF
|
||||
if (refBindings) {
|
||||
for (const key of refBindings) {
|
||||
bindingMetadata[key] = BindingTypes.SETUP_REF
|
||||
}
|
||||
}
|
||||
|
||||
// 8. inject `useCssVars` calls
|
||||
@@ -1437,8 +1234,8 @@ export function compileScript(
|
||||
hires: true,
|
||||
includeContent: true
|
||||
}) as unknown as RawSourceMap,
|
||||
scriptAst,
|
||||
scriptSetupAst
|
||||
scriptAst: scriptAst?.body,
|
||||
scriptSetupAst: scriptSetupAst?.body
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1818,27 +1615,6 @@ function canNeverBeRef(node: Node, userReactiveImport: string): boolean {
|
||||
}
|
||||
}
|
||||
|
||||
function isInDestructureAssignment(parent: Node, parentStack: Node[]): boolean {
|
||||
if (
|
||||
parent &&
|
||||
(parent.type === 'ObjectProperty' || parent.type === 'ArrayPattern')
|
||||
) {
|
||||
let i = parentStack.length
|
||||
while (i--) {
|
||||
const p = parentStack[i]
|
||||
if (p.type === 'AssignmentExpression') {
|
||||
const root = parentStack[0]
|
||||
// if this is a ref: destructure, it should be treated like a
|
||||
// variable decalration!
|
||||
return !(root.type === 'LabeledStatement' && root.label.name === 'ref')
|
||||
} else if (p.type !== 'ObjectProperty' && !p.type.endsWith('Pattern')) {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* Analyze bindings in normal `<script>`
|
||||
* Note that `compileScriptSetup` already analyzes bindings as part of its
|
||||
|
||||
@@ -5,6 +5,10 @@ export { compileStyle, compileStyleAsync } from './compileStyle'
|
||||
export { compileScript } from './compileScript'
|
||||
export { rewriteDefault } from './rewriteDefault'
|
||||
export { generateCodeFrame, walkIdentifiers } from '@vue/compiler-core'
|
||||
export {
|
||||
transform as transformRef,
|
||||
transformAST as transformRefAST
|
||||
} from '@vue/ref-transform'
|
||||
|
||||
// Utilities
|
||||
export { parse as babelParse } from '@babel/parser'
|
||||
|
||||
Reference in New Issue
Block a user