Skip to content

Commit b0f1b2d

Browse files
tuchgtuchg
committed
fix(reactivity-transform): ensure macro comply with the original semantic
1 parent b0b74a1 commit b0f1b2d

7 files changed

+66
-45
lines changed

‎packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ const __props_bar = _toRef(__props, 'bar')
1010
const __props_foo = _toRef(__props, 'foo')
1111
1212
13-
console.log((__props_foo))
14-
console.log((__props_bar))
15-
({ foo: __props_foo, baz: __props_bar })
13+
console.log(__props_foo)
14+
console.log(__props_bar)
15+
console.log({ foo: __props_foo, baz: __props_bar })
1616
1717
return () => {}
1818
}

‎packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export default {
77
setup(__props, { expose }) {
88
expose();
99
10-
let foo = (ref())
11-
let a = (ref(1))
12-
let b = (shallowRef({
10+
let foo = ref()
11+
let a = ref(1)
12+
let b = shallowRef({
1313
count: 0
14-
}))
14+
})
1515
let c = () => {}
1616
let d
1717
@@ -65,7 +65,7 @@ exports[`sfc ref transform usage in normal <script> 1`] = `
6565
setup() {
6666
let count = _ref(0)
6767
const inc = () => count.value++
68-
return ({ count })
68+
return { count }
6969
}
7070
}
7171
"

‎packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -173,14 +173,14 @@ describe('sfc props transform', () => {
173173
const { foo, bar: baz } = defineProps(['foo'])
174174
console.log($$(foo))
175175
console.log($$(baz))
176-
$$({ foo, baz })
176+
console.log($$({ foo, baz }))
177177
</script>
178178
`)
179179
expect(content).toMatch(`const __props_foo = _toRef(__props, 'foo')`)
180180
expect(content).toMatch(`const __props_bar = _toRef(__props, 'bar')`)
181-
expect(content).toMatch(`console.log((__props_foo))`)
182-
expect(content).toMatch(`console.log((__props_bar))`)
183-
expect(content).toMatch(`({ foo: __props_foo, baz: __props_bar })`)
181+
expect(content).toMatch(`console.log(__props_foo)`)
182+
expect(content).toMatch(`console.log(__props_bar)`)
183+
expect(content).toMatch(`{ foo: __props_foo, baz: __props_bar }`)
184184
assertCode(content)
185185
})
186186

‎packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ describe('sfc ref transform', () => {
2222
expect(content).not.toMatch(`$(ref())`)
2323
expect(content).not.toMatch(`$(ref(1))`)
2424
expect(content).not.toMatch(`$(shallowRef({`)
25-
expect(content).toMatch(`let foo = (ref())`)
26-
expect(content).toMatch(`let a = (ref(1))`)
25+
expect(content).toMatch(`let foo = ref()`)
26+
expect(content).toMatch(`let a = ref(1)`)
2727
expect(content).toMatch(`
28-
let b = (shallowRef({
28+
let b = shallowRef({
2929
count: 0
30-
}))
30+
})
3131
`)
3232
// normal declarations left untouched
3333
expect(content).toMatch(`let c = () => {}`)
@@ -95,7 +95,7 @@ describe('sfc ref transform', () => {
9595
expect(content).toMatch(`import { ref as _ref } from 'vue'`)
9696
expect(content).toMatch(`let count = _ref(0)`)
9797
expect(content).toMatch(`count.value++`)
98-
expect(content).toMatch(`return ({ count })`)
98+
expect(content).toMatch(`return { count }`)
9999
assertCode(content)
100100
})
101101

‎packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap

+18-16
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,26 @@
33
exports[`$ unwrapping 1`] = `
44
"
55
import { ref, shallowRef } from 'vue'
6-
let foo = (ref())
7-
export let a = (ref(1))
8-
let b = (shallowRef({
6+
let foo = ref()
7+
export let a = ref(1)
8+
let b = shallowRef({
99
count: 0
10-
}))
10+
})
1111
let c = () => {}
1212
let d
13-
label: var e = (ref())
13+
label: var e = ref()
1414
"
1515
`;
1616

1717
exports[`$$ 1`] = `
1818
"import { ref as _ref } from 'vue'
1919
2020
let a = _ref(1)
21-
const b = (a)
22-
const c = ({ a })
23-
callExternal((a))
21+
let count = 0
22+
const b = a
23+
const c = { a }
24+
(count++,count)
25+
callExternal(a)
2426
"
2527
`;
2628

@@ -59,7 +61,7 @@ exports[`accessing ref binding 1`] = `
5961
exports[`array destructure 1`] = `
6062
"import { ref as _ref, toRef as _toRef } from 'vue'
6163
62-
let n = _ref(1), __$temp_1 = (useFoo()),
64+
let n = _ref(1), __$temp_1 = useFoo(),
6365
a = _toRef(__$temp_1, 0),
6466
b = _toRef(__$temp_1, 1, 1)
6567
console.log(n.value, a.value, b.value)
@@ -88,7 +90,7 @@ exports[`macro import alias and removal 1`] = `
8890
8991
9092
let a = _ref(1)
91-
const __$temp_1 = (useMouse()),
93+
const __$temp_1 = useMouse(),
9294
x = _toRef(__$temp_1, 'x'),
9395
y = _toRef(__$temp_1, 'y')
9496
"
@@ -129,9 +131,9 @@ exports[`mutating ref binding 1`] = `
129131
exports[`nested destructure 1`] = `
130132
"import { toRef as _toRef } from 'vue'
131133
132-
let __$temp_1 = (useFoo()),
134+
let __$temp_1 = useFoo(),
133135
b = _toRef(__$temp_1[0].a, 'b')
134-
let __$temp_2 = (useBar()),
136+
let __$temp_2 = useBar(),
135137
d = _toRef(__$temp_2.c, 0),
136138
e = _toRef(__$temp_2.c, 1)
137139
console.log(b.value, d.value, e.value)
@@ -170,21 +172,21 @@ exports[`nested scopes 1`] = `
170172
a.value++ // if block a
171173
}
172174
173-
return ({ a, b, c, d })
175+
return { a, b, c, d }
174176
}
175177
"
176178
`;
177179
178180
exports[`object destructure 1`] = `
179181
"import { ref as _ref, toRef as _toRef } from 'vue'
180182
181-
let n = _ref(1), __$temp_1 = (useFoo()),
183+
let n = _ref(1), __$temp_1 = useFoo(),
182184
a = _toRef(__$temp_1, 'a'),
183185
c = _toRef(__$temp_1, 'b'),
184186
d = _toRef(__$temp_1, 'd', 1),
185187
f = _toRef(__$temp_1, 'e', 2),
186188
h = _toRef(__$temp_1, g)
187-
let __$temp_2 = (useSomething(() => 1)),
189+
let __$temp_2 = useSomething(() => 1),
188190
foo = _toRef(__$temp_2, 'foo');
189191
console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
190192
"
@@ -193,7 +195,7 @@ exports[`object destructure 1`] = `
193195
exports[`object destructure w/ mid-path default values 1`] = `
194196
"import { toRef as _toRef } from 'vue'
195197
196-
const __$temp_1 = (useFoo()),
198+
const __$temp_1 = useFoo(),
197199
b = _toRef((__$temp_1.a || { b: 123 }), 'b')
198200
console.log(b.value)
199201
"

‎packages/reactivity-transform/__tests__/reactivityTransform.spec.ts

+13-10
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ test('$ unwrapping', () => {
3030
expect(code).not.toMatch(`$(ref())`)
3131
expect(code).not.toMatch(`$(ref(1))`)
3232
expect(code).not.toMatch(`$(shallowRef({`)
33-
expect(code).toMatch(`let foo = (ref())`)
34-
expect(code).toMatch(`export let a = (ref(1))`)
33+
expect(code).toMatch(`let foo = ref()`)
34+
expect(code).toMatch(`export let a = ref(1)`)
3535
expect(code).toMatch(`
36-
let b = (shallowRef({
36+
let b = shallowRef({
3737
count: 0
38-
}))
38+
})
3939
`)
4040
// normal declarations left untouched
4141
expect(code).toMatch(`let c = () => {}`)
4242
expect(code).toMatch(`let d`)
43-
expect(code).toMatch(`label: var e = (ref())`)
43+
expect(code).toMatch(`label: var e = ref()`)
4444
expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
4545
assertCode(code)
4646
})
@@ -295,13 +295,16 @@ test('nested destructure', () => {
295295
test('$$', () => {
296296
const { code } = transform(`
297297
let a = $ref(1)
298+
let count = 0
298299
const b = $$(a)
299300
const c = $$({ a })
301+
$$(count++,count)
300302
callExternal($$(a))
301303
`)
302-
expect(code).toMatch(`const b = (a)`)
303-
expect(code).toMatch(`const c = ({ a })`)
304-
expect(code).toMatch(`callExternal((a))`)
304+
expect(code).toMatch(`const b = a`)
305+
expect(code).toMatch(`const c = { a }`)
306+
expect(code).toMatch(`callExternal(a)`)
307+
expect(code).toMatch(`(count++,count)`)
305308
assertCode(code)
306309
})
307310

@@ -358,7 +361,7 @@ test('nested scopes', () => {
358361
// inner bar shadowed by function declaration
359362
expect(code).toMatch(`bar() // inner bar`)
360363

361-
expect(code).toMatch(`return ({ a, b, c, d })`)
364+
expect(code).toMatch(`return { a, b, c, d }`)
362365
assertCode(code)
363366
})
364367

@@ -412,7 +415,7 @@ test('macro import alias and removal', () => {
412415
// should remove imports
413416
expect(code).not.toMatch(`from 'vue/macros'`)
414417
expect(code).toMatch(`let a = _ref(1)`)
415-
expect(code).toMatch(`const __$temp_1 = (useMouse())`)
418+
expect(code).toMatch(`const __$temp_1 = useMouse()`)
416419
assertCode(code)
417420
})
418421

‎packages/reactivity-transform/src/reactivityTransform.ts

+18-2
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export function transformAST(
284284
if (method === convertSymbol) {
285285
// $
286286
// remove macro
287-
s.remove(call.callee.start! + offset, call.callee.end! + offset)
287+
unwrapMacro(call)
288288
if (id.type === 'Identifier') {
289289
// single variable
290290
registerRefBinding(id)
@@ -550,6 +550,22 @@ export function transformAST(
550550
}
551551
}
552552

553+
/**
554+
* unwrap the code form the macro($、$$), fix #6312 and keep the ideally behavior with the RFC#369
555+
*/
556+
function unwrapMacro(node: CallExpression) {
557+
const argsLength = node.arguments.length
558+
if (argsLength > 1) {
559+
// some edge cases
560+
s.remove(node.callee.start! + offset, node.callee.end! + offset)
561+
} else if (argsLength) {
562+
// remove macro $( and $$(
563+
s.remove(node.callee.start! + offset, node.arguments[0].start! + offset)
564+
// remove the end of macro
565+
s.remove(node.arguments[argsLength - 1].end! + offset, node.end! + offset)
566+
}
567+
}
568+
553569
// check root scope first
554570
walkScope(ast, true)
555571
;(walk as any)(ast, {
@@ -623,7 +639,7 @@ export function transformAST(
623639
}
624640

625641
if (callee === escapeSymbol) {
626-
s.remove(node.callee.start! + offset, node.callee.end! + offset)
642+
unwrapMacro(node)
627643
escapeScope = node
628644
}
629645

0 commit comments

Comments
 (0)