diff --git a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts index 5fffcd5d6d2..c3c90aae57e 100644 --- a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts +++ b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts @@ -127,15 +127,43 @@ test('accessing ref binding', () => { assertCode(code) }) -test('cases that should not append .value', () => { - const { code } = transform(` +describe('cases that should not append .value', () => { + test('member expression', () => { + const { code } = transform(` + let a = $ref(1) + console.log(b.a) + `) + expect(code).not.toMatch(`a.value`) + }) + + test('function argument', () => { + const { code } = transform(` + let a = $ref(1) + function get(a) { + return a + 1 + } + function get2({ a }) { + return a + 1 + } + function get3([a]) { + return a + 1 + } + `) + expect(code).not.toMatch(`a.value`) + }) + + test('for in/of loops', () => { + const { code } = transform(` let a = $ref(1) - console.log(b.a) - function get(a) { - return a + 1 + for (const [a, b] of arr) { + console.log(a) + } + for (let a in arr) { + console.log(a) } `) - expect(code).not.toMatch(`a.value`) + expect(code).not.toMatch(`a.value`) + }) }) test('mutating ref binding', () => { diff --git a/packages/reactivity-transform/src/reactivityTransform.ts b/packages/reactivity-transform/src/reactivityTransform.ts index f7a822ff508..706b09ec5ad 100644 --- a/packages/reactivity-transform/src/reactivityTransform.ts +++ b/packages/reactivity-transform/src/reactivityTransform.ts @@ -7,7 +7,8 @@ import { ArrayPattern, Program, VariableDeclarator, - Expression + Expression, + VariableDeclaration } from '@babel/types' import MagicString, { SourceMap } from 'magic-string' import { walk } from 'estree-walker' @@ -216,40 +217,49 @@ export function transformAST( function walkScope(node: Program | BlockStatement, isRoot = false) { for (const stmt of node.body) { if (stmt.type === 'VariableDeclaration') { - if (stmt.declare) continue - for (const decl of stmt.declarations) { - let refCall - const isCall = - decl.init && - decl.init.type === 'CallExpression' && - decl.init.callee.type === 'Identifier' - if ( - isCall && - (refCall = isRefCreationCall((decl as any).init.callee.name)) - ) { - processRefDeclaration(refCall, decl.id, decl.init as CallExpression) - } else { - const isProps = - isRoot && - isCall && - (decl as any).init.callee.name === 'defineProps' - for (const id of extractIdentifiers(decl.id)) { - if (isProps) { - // for defineProps destructure, only exclude them since they - // are already passed in as knownProps - excludedIds.add(id) - } else { - registerBinding(id) - } - } - } - } + walkVariableDeclaration(stmt, isRoot) } else if ( stmt.type === 'FunctionDeclaration' || stmt.type === 'ClassDeclaration' ) { if (stmt.declare || !stmt.id) continue registerBinding(stmt.id) + } else if ( + (stmt.type === 'ForOfStatement' || stmt.type === 'ForInStatement') && + stmt.left.type === 'VariableDeclaration' + ) { + walkVariableDeclaration(stmt.left) + } + } + } + + function walkVariableDeclaration(stmt: VariableDeclaration, isRoot = false) { + if (stmt.declare) { + return + } + for (const decl of stmt.declarations) { + let refCall + const isCall = + decl.init && + decl.init.type === 'CallExpression' && + decl.init.callee.type === 'Identifier' + if ( + isCall && + (refCall = isRefCreationCall((decl as any).init.callee.name)) + ) { + processRefDeclaration(refCall, decl.id, decl.init as CallExpression) + } else { + const isProps = + isRoot && isCall && (decl as any).init.callee.name === 'defineProps' + for (const id of extractIdentifiers(decl.id)) { + if (isProps) { + // for defineProps destructure, only exclude them since they + // are already passed in as knownProps + excludedIds.add(id) + } else { + registerBinding(id) + } + } } } }