theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(reactivity-transform): use toRef() for $() destructure codegen

Browse Source 
- now supports destructuring reactive objects
- no longer supports rest elements
This commit is contained in:
Evan You
2021-12-11 17:10:31 +08:00
parent 2db9c909c2
commit 93ba6b974e
4 changed files with 206 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap
View File

@@ -55,13 +55,12 @@ exports[`accessing ref binding 1`] = `
`;
exports[`array destructure 1`] = `
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
"import { ref as _ref, toRef as _toRef } from 'vue'
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)
let n = _ref(1), __$temp_1 = (useFoo()),
a = _toRef(__$temp_1, 0),
b = _toRef(__$temp_1, 1, 1)
console.log(n.value, a.value, b.value)
"
`;
@@ -114,13 +113,13 @@ exports[`mutating ref binding 1`] = `
`;
exports[`nested destructure 1`] = `
"import { shallowRef as _shallowRef } from 'vue'
"import { toRef as _toRef } from 'vue'
let [{ a: { b: __b }}] = (useFoo())
const b = _shallowRef(__b);
let { c: [__d, __e] } = (useBar())
const d = _shallowRef(__d);
const e = _shallowRef(__e);
let __$temp_1 = (useFoo()),
b = _toRef(__$temp_1[0].a, 'b')
let __$temp_2 = (useBar()),
d = _toRef(__$temp_2.c, 0),
e = _toRef(__$temp_2.c, 1)
console.log(b.value, d.value, e.value)
"
`;
@@ -163,20 +162,29 @@ exports[`nested scopes 1`] = `
`;
exports[`object destructure 1`] = `
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
"import { ref as _ref, toRef as _toRef } from 'vue'
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)
let n = _ref(1), __$temp_1 = (useFoo()),
a = _toRef(__$temp_1, 'a'),
c = _toRef(__$temp_1, 'b'),
d = _toRef(__$temp_1, 'd', 1),
f = _toRef(__$temp_1, 'e', 2),
h = _toRef(__$temp_1, g)
let __$temp_2 = (useSomthing(() => 1)),
foo = _toRef(__$temp_2, 'foo');
console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
"
`;
exports[`object destructure w/ mid-path default values 1`] = `
"import { toRef as _toRef } from 'vue'
const __$temp_1 = (useFoo()),
b = _toRef((__$temp_1.a || { b: 123 }), 'b')
console.log(b.value)
"
`;
exports[`should not rewrite scope variable 1`] = `
"import { ref as _ref } from 'vue'

70
packages/ref-transform/__tests__/refTransform.spec.ts
View File

@@ -201,40 +201,43 @@ test('should not rewrite scope variable', () => {
test('object destructure', () => {
const { code, rootRefs } = transform(`
let n = $ref(1), { a, b: c, d = 1, e: f = 2, ...g } = $(useFoo())
let n = $ref(1), { a, b: c, d = 1, e: f = 2, [g]: h } = $(useFoo())
let { foo } = $(useSomthing(() => 1));
console.log(n, a, c, d, f, g, foo)
console.log(n, a, c, d, f, h, foo)
`)
expect(code).toMatch(`a = _toRef(__$temp_1, 'a')`)
expect(code).toMatch(`c = _toRef(__$temp_1, 'b')`)
expect(code).toMatch(`d = _toRef(__$temp_1, 'd', 1)`)
expect(code).toMatch(`f = _toRef(__$temp_1, 'e', 2)`)
expect(code).toMatch(`h = _toRef(__$temp_1, g)`)
expect(code).toMatch(`foo = _toRef(__$temp_2, 'foo')`)
expect(code).toMatch(
`let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
`console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)`
)
expect(code).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
expect(code).not.toMatch(`\nconst b = _shallowRef(__b);`)
expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
expect(code).not.toMatch(`\nconst e = _shallowRef(__e);`)
expect(code).toMatch(`\nconst f = _shallowRef(__f);`)
expect(code).toMatch(`\nconst g = _shallowRef(__g);`)
expect(code).toMatch(`\nconst foo = _shallowRef(__foo);`)
expect(code).toMatch(
`console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
)
expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'g', 'foo'])
expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'h', 'foo'])
assertCode(code)
})
test('object destructure w/ mid-path default values', () => {
const { code, rootRefs } = transform(`
const { a: { b } = { b: 123 }} = $(useFoo())
console.log(b)
`)
expect(code).toMatch(`b = _toRef((__$temp_1.a || { b: 123 }), 'b')`)
expect(code).toMatch(`console.log(b.value)`)
expect(rootRefs).toStrictEqual(['b'])
assertCode(code)
})
test('array destructure', () => {
const { code, rootRefs } = transform(`
let n = $ref(1), [a, b = 1, ...c] = $(useFoo())
console.log(n, a, b, c)
let n = $ref(1), [a, b = 1] = $(useFoo())
console.log(n, a, b)
`)
expect(code).toMatch(`let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`)
expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
expect(code).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
expect(rootRefs).toStrictEqual(['n', 'a', 'b', 'c'])
expect(code).toMatch(`a = _toRef(__$temp_1, 0)`)
expect(code).toMatch(`b = _toRef(__$temp_1, 1, 1)`)
expect(code).toMatch(`console.log(n.value, a.value, b.value)`)
expect(rootRefs).toStrictEqual(['n', 'a', 'b'])
assertCode(code)
})
@@ -244,13 +247,9 @@ test('nested destructure', () => {
let { c: [d, e] } = $(useBar())
console.log(b, d, e)
`)
expect(code).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
expect(code).toMatch(`let { c: [__d, __e] } = (useBar())`)
expect(code).not.toMatch(`\nconst a = _shallowRef(__a);`)
expect(code).not.toMatch(`\nconst c = _shallowRef(__c);`)
expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
expect(code).toMatch(`\nconst e = _shallowRef(__e);`)
expect(code).toMatch(`b = _toRef(__$temp_1[0].a, 'b')`)
expect(code).toMatch(`d = _toRef(__$temp_2.c, 0)`)
expect(code).toMatch(`e = _toRef(__$temp_2.c, 1)`)
expect(rootRefs).toStrictEqual(['b', 'd', 'e'])
assertCode(code)
})
@@ -396,4 +395,13 @@ describe('errors', () => {
`)
expect(code).not.toMatch('.value')
})
test('rest element in $() destructure', () => {
expect(() => transform(`let { a, ...b } = $(foo())`)).toThrow(
`does not support rest element`
)
expect(() => transform(`let [a, ...b] = $(foo())`)).toThrow(
`does not support rest element`
)
})
})