Skip to content

Commit 93ba6b9

Browse files
yyx990803yyx990803
committed
feat(reactivity-transform): use toRef() for $() destructure codegen
- now supports destructuring reactive objects - no longer supports rest elements
1 parent 2db9c90 commit 93ba6b9

File tree

4 files changed

+207
-107
lines changed

4 files changed

+207
-107
lines changed

‎packages/compiler-sfc/src/compileScript.ts

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,22 @@ export interface SFCScriptCompileOptions {
8181
* https://babeljs.io/docs/en/babel-parser#plugins
8282
*/
8383
babelParserPlugins?: ParserPlugin[]
84+
/**
85+
* (Experimental) Enable syntax transform for using refs without `.value` and
86+
* using destructured props with reactivity
87+
*/
88+
reactivityTransform?: boolean
8489
/**
8590
* (Experimental) Enable syntax transform for using refs without `.value`
8691
* https://github.com/vuejs/rfcs/discussions/369
92+
* @deprecated now part of `reactivityTransform`
8793
* @default false
8894
*/
8995
refTransform?: boolean
9096
/**
9197
* (Experimental) Enable syntax transform for destructuring from defineProps()
9298
* https://github.com/vuejs/rfcs/discussions/394
99+
* @deprecated now part of `reactivityTransform`
93100
* @default false
94101
*/
95102
propsDestructureTransform?: boolean
@@ -132,8 +139,13 @@ export function compileScript(
132139
): SFCScriptBlock {
133140
let { script, scriptSetup, source, filename } = sfc
134141
// feature flags
135-
const enableRefTransform = !!options.refSugar || !!options.refTransform
136-
const enablePropsTransform = !!options.propsDestructureTransform
142+
// TODO remove support for deprecated options when out of experimental
143+
const enableRefTransform =
144+
!!options.reactivityTransform ||
145+
!!options.refSugar ||
146+
!!options.refTransform
147+
const enablePropsTransform =
148+
!!options.reactivityTransform || !!options.propsDestructureTransform
137149
const isProd = !!options.isProd
138150
const genSourceMap = options.sourceMap !== false
139151
let refBindings: string[] | undefined
@@ -1097,8 +1109,7 @@ export function compileScript(
10971109
s,
10981110
startOffset,
10991111
refBindings,
1100-
propsDestructuredBindings,
1101-
!enableRefTransform
1112+
propsDestructuredBindings
11021113
)
11031114
refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs
11041115
for (const h of importedHelpers) {

‎packages/ref-transform/__tests__/__snapshots__/refTransform.spec.ts.snap

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,12 @@ exports[`accessing ref binding 1`] = `
5555
`;
5656

5757
exports[`array destructure 1`] = `
58-
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
58+
"import { ref as _ref, toRef as _toRef } from 'vue'
5959
60-
let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
61-
const a = _shallowRef(__a);
62-
const b = _shallowRef(__b);
63-
const c = _shallowRef(__c);
64-
console.log(n.value, a.value, b.value, c.value)
60+
let n = _ref(1), __$temp_1 = (useFoo()),
61+
a = _toRef(__$temp_1, 0),
62+
b = _toRef(__$temp_1, 1, 1)
63+
console.log(n.value, a.value, b.value)
6564
"
6665
`;
6766

@@ -114,13 +113,13 @@ exports[`mutating ref binding 1`] = `
114113
`;
115114
116115
exports[`nested destructure 1`] = `
117-
"import { shallowRef as _shallowRef } from 'vue'
116+
"import { toRef as _toRef } from 'vue'
118117
119-
let [{ a: { b: __b }}] = (useFoo())
120-
const b = _shallowRef(__b);
121-
let { c: [__d, __e] } = (useBar())
122-
const d = _shallowRef(__d);
123-
const e = _shallowRef(__e);
118+
let __$temp_1 = (useFoo()),
119+
b = _toRef(__$temp_1[0].a, 'b')
120+
let __$temp_2 = (useBar()),
121+
d = _toRef(__$temp_2.c, 0),
122+
e = _toRef(__$temp_2.c, 1)
124123
console.log(b.value, d.value, e.value)
125124
"
126125
`;
@@ -163,20 +162,29 @@ exports[`nested scopes 1`] = `
163162
`;
164163
165164
exports[`object destructure 1`] = `
166-
"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
167-
168-
let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
169-
const a = _shallowRef(__a);
170-
const c = _shallowRef(__c);
171-
const d = _shallowRef(__d);
172-
const f = _shallowRef(__f);
173-
const g = _shallowRef(__g);
174-
let { foo: __foo } = (useSomthing(() => 1));
175-
const foo = _shallowRef(__foo);
176-
console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
165+
"import { ref as _ref, toRef as _toRef } from 'vue'
166+
167+
let n = _ref(1), __$temp_1 = (useFoo()),
168+
a = _toRef(__$temp_1, 'a'),
169+
c = _toRef(__$temp_1, 'b'),
170+
d = _toRef(__$temp_1, 'd', 1),
171+
f = _toRef(__$temp_1, 'e', 2),
172+
h = _toRef(__$temp_1, g)
173+
let __$temp_2 = (useSomthing(() => 1)),
174+
foo = _toRef(__$temp_2, 'foo');
175+
console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
177176
"
178177
`;
179178
179+
exports[`object destructure w/ mid-path default values 1`] = `
180+
"import { toRef as _toRef } from 'vue'
181+
182+
const __$temp_1 = (useFoo()),
183+
b = _toRef((__$temp_1.a || { b: 123 }), 'b')
184+
console.log(b.value)
185+
"
186+
`;
187+
180188
exports[`should not rewrite scope variable 1`] = `
181189
"import { ref as _ref } from 'vue'
182190

‎packages/ref-transform/__tests__/refTransform.spec.ts

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -201,40 +201,43 @@ test('should not rewrite scope variable', () => {
201201

202202
test('object destructure', () => {
203203
const { code, rootRefs } = transform(`
204-
let n = $ref(1), { a, b: c, d = 1, e: f = 2, ...g } = $(useFoo())
204+
let n = $ref(1), { a, b: c, d = 1, e: f = 2, [g]: h } = $(useFoo())
205205
let { foo } = $(useSomthing(() => 1));
206-
console.log(n, a, c, d, f, g, foo)
206+
console.log(n, a, c, d, f, h, foo)
207207
`)
208+
expect(code).toMatch(`a = _toRef(__$temp_1, 'a')`)
209+
expect(code).toMatch(`c = _toRef(__$temp_1, 'b')`)
210+
expect(code).toMatch(`d = _toRef(__$temp_1, 'd', 1)`)
211+
expect(code).toMatch(`f = _toRef(__$temp_1, 'e', 2)`)
212+
expect(code).toMatch(`h = _toRef(__$temp_1, g)`)
213+
expect(code).toMatch(`foo = _toRef(__$temp_2, 'foo')`)
208214
expect(code).toMatch(
209-
`let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
215+
`console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)`
210216
)
211-
expect(code).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
212-
expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
213-
expect(code).not.toMatch(`\nconst b = _shallowRef(__b);`)
214-
expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
215-
expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
216-
expect(code).not.toMatch(`\nconst e = _shallowRef(__e);`)
217-
expect(code).toMatch(`\nconst f = _shallowRef(__f);`)
218-
expect(code).toMatch(`\nconst g = _shallowRef(__g);`)
219-
expect(code).toMatch(`\nconst foo = _shallowRef(__foo);`)
220-
expect(code).toMatch(
221-
`console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
222-
)
223-
expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'g', 'foo'])
217+
expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'h', 'foo'])
218+
assertCode(code)
219+
})
220+
221+
test('object destructure w/ mid-path default values', () => {
222+
const { code, rootRefs } = transform(`
223+
const { a: { b } = { b: 123 }} = $(useFoo())
224+
console.log(b)
225+
`)
226+
expect(code).toMatch(`b = _toRef((__$temp_1.a || { b: 123 }), 'b')`)
227+
expect(code).toMatch(`console.log(b.value)`)
228+
expect(rootRefs).toStrictEqual(['b'])
224229
assertCode(code)
225230
})
226231

227232
test('array destructure', () => {
228233
const { code, rootRefs } = transform(`
229-
let n = $ref(1), [a, b = 1, ...c] = $(useFoo())
230-
console.log(n, a, b, c)
234+
let n = $ref(1), [a, b = 1] = $(useFoo())
235+
console.log(n, a, b)
231236
`)
232-
expect(code).toMatch(`let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`)
233-
expect(code).toMatch(`\nconst a = _shallowRef(__a);`)
234-
expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
235-
expect(code).toMatch(`\nconst c = _shallowRef(__c);`)
236-
expect(code).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
237-
expect(rootRefs).toStrictEqual(['n', 'a', 'b', 'c'])
237+
expect(code).toMatch(`a = _toRef(__$temp_1, 0)`)
238+
expect(code).toMatch(`b = _toRef(__$temp_1, 1, 1)`)
239+
expect(code).toMatch(`console.log(n.value, a.value, b.value)`)
240+
expect(rootRefs).toStrictEqual(['n', 'a', 'b'])
238241
assertCode(code)
239242
})
240243

@@ -244,13 +247,9 @@ test('nested destructure', () => {
244247
let { c: [d, e] } = $(useBar())
245248
console.log(b, d, e)
246249
`)
247-
expect(code).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
248-
expect(code).toMatch(`let { c: [__d, __e] } = (useBar())`)
249-
expect(code).not.toMatch(`\nconst a = _shallowRef(__a);`)
250-
expect(code).not.toMatch(`\nconst c = _shallowRef(__c);`)
251-
expect(code).toMatch(`\nconst b = _shallowRef(__b);`)
252-
expect(code).toMatch(`\nconst d = _shallowRef(__d);`)
253-
expect(code).toMatch(`\nconst e = _shallowRef(__e);`)
250+
expect(code).toMatch(`b = _toRef(__$temp_1[0].a, 'b')`)
251+
expect(code).toMatch(`d = _toRef(__$temp_2.c, 0)`)
252+
expect(code).toMatch(`e = _toRef(__$temp_2.c, 1)`)
254253
expect(rootRefs).toStrictEqual(['b', 'd', 'e'])
255254
assertCode(code)
256255
})
@@ -396,4 +395,13 @@ describe('errors', () => {
396395
`)
397396
expect(code).not.toMatch('.value')
398397
})
398+
399+
test('rest element in $() destructure', () => {
400+
expect(() => transform(`let { a, ...b } = $(foo())`)).toThrow(
401+
`does not support rest element`
402+
)
403+
expect(() => transform(`let [a, ...b] = $(foo())`)).toThrow(
404+
`does not support rest element`
405+
)
406+
})
399407
})

0 commit comments

Comments
 (0)