Skip to content

Commit

Permalink
feat(reactivity-transform): use toRef() for $() destructure codegen
Browse files Browse the repository at this point in the history 
- now supports destructuring reactive objects
- no longer supports rest elements
  • Loading branch information
@yyx990803
yyx990803 committed Dec 11, 2021
1 parent 2db9c90 commit 93ba6b9
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 107 deletions.
19 changes: 15 additions & 4 deletions packages/compiler-sfc/src/compileScript.ts
View file
Expand Up @@ -81,15 +81,22 @@ export interface SFCScriptCompileOptions {
* https://babeljs.io/docs/en/babel-parser#plugins
*/
babelParserPlugins?: ParserPlugin[]
/**
* (Experimental) Enable syntax transform for using refs without `.value` and
* using destructured props with reactivity
*/
reactivityTransform?: boolean
/**
* (Experimental) Enable syntax transform for using refs without `.value`
* https://github.com/vuejs/rfcs/discussions/369
* @deprecated now part of `reactivityTransform`
* @default false
*/
refTransform?: boolean
/**
* (Experimental) Enable syntax transform for destructuring from defineProps()
* https://github.com/vuejs/rfcs/discussions/394
* @deprecated now part of `reactivityTransform`
* @default false
*/
propsDestructureTransform?: boolean
Expand Down Expand Up @@ -132,8 +139,13 @@ export function compileScript(
): SFCScriptBlock {
let { script, scriptSetup, source, filename } = sfc
// feature flags
const enableRefTransform = !!options.refSugar || !!options.refTransform
const enablePropsTransform = !!options.propsDestructureTransform
// TODO remove support for deprecated options when out of experimental
const enableRefTransform =
!!options.reactivityTransform ||
!!options.refSugar ||
!!options.refTransform
const enablePropsTransform =
!!options.reactivityTransform || !!options.propsDestructureTransform
const isProd = !!options.isProd
const genSourceMap = options.sourceMap !== false
let refBindings: string[] | undefined
Expand Down Expand Up @@ -1097,8 +1109,7 @@ export function compileScript(
s,
startOffset,
refBindings,
propsDestructuredBindings,
!enableRefTransform
propsDestructuredBindings
)
refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs
for (const h of importedHelpers) {
Expand Down
54 changes: 31 additions & 23 deletions packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap
View file
Expand Up @@ -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)
"
`;

Expand Down Expand Up @@ -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)
"
`;
Expand Down Expand Up @@ -163,20 +162,29 @@ exports[`nested scopes 1`] = `
`;
exports[`object destructure 1`] = `
"import { ref as _ref, shallowRef as _shallowRef } 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)
"import { ref as _ref, toRef as _toRef } from 'vue'
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'
Expand Down
70 changes: 39 additions & 31 deletions packages/ref-transform/__tests__/refTransform.spec.ts
View file
Expand Up @@ -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)
})

Expand All @@ -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)
})
Expand Down Expand Up @@ -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`
)
})
})

0 comments on commit 93ba6b9

Please sign in to comment.