refactor(compiler): prevent covert ObjectExpression to ObjectPattern for v-for and v-slot

Author: zhiyuanzmj

docs/features/directives.md

@@ -60,6 +60,9 @@ export default () => (
 
 ## `v-slot`, `v-slots`
 
+> [!WARNING]
+> Due to the inability to generate a correct AST for directive expressions with default values (e.g., `v-slot={({ foo = '' })}`), so default values are not supported.
+
 ::: code-group
 
 ```tsx [v-slot] twoslash

docs/zh/features/directives.md

@@ -60,6 +60,9 @@ export default () => (
 
 ## `v-slot`, `v-slots`
 
+> [!WARNING]
+> 由于无法为带有默认值的指令表达式（例如 `v-slot={({ foo = '' })}`）生成正确的 AST，因此不支持默认值。
+
 ::: code-group
 
 ```tsx [v-slot] twoslash

packages/compiler/src/generators/component.ts

@@ -346,8 +346,8 @@ function genSlotBlockWithProps(oper: SlotBlockIRNode, context: CodegenContext) {
       propsName = `_slotProps${depth}`
       walkIdentifiers(
         props.ast,
-        (id, _, __, ___, isLocal) => {
-          if (isLocal) idsOfProps.add(id.name)
+        (id, _, __, isReference, isLocal) => {
+          if (isReference && !isLocal) idsOfProps.add(id.name)
         },
         true,
       )

packages/compiler/src/generators/for.ts

@@ -213,8 +213,8 @@ export function genFor(
       if (value.ast && value.ast.type !== 'Identifier') {
         walkIdentifiers(
           value.ast,
-          (id, _, parentStack, ___, isLocal) => {
-            if (isLocal) {
+          (id, _, parentStack, isReference, isLocal) => {
+            if (isReference && !isLocal) {
               let path = ''
               let isDynamic = false
               let helper
@@ -239,16 +239,16 @@ export function genFor(
                     // non-computed, can only be identifier
                     path += `.${(parent.key as Identifier).name}`
                   }
-                } else if (parent.type === 'ArrayPattern') {
+                } else if (parent.type === 'ArrayExpression') {
                   const index = parent.elements.indexOf(child as any)
-                  if (child.type === 'RestElement') {
+                  if (child.type === 'SpreadElement') {
                     path += `.slice(${index})`
                   } else {
                     path += `[${index}]`
                   }
                 } else if (
-                  parent.type === 'ObjectPattern' &&
-                  child.type === 'RestElement'
+                  parent.type === 'ObjectExpression' &&
+                  child.type === 'SpreadElement'
                 ) {
                   helper = context.helper('getRestElement')
                   helperArgs = `[${parent.properties
@@ -268,20 +268,6 @@ export function genFor(
                     })
                     .join(', ')}]`
                 }
-
-                // default value
-                if (
-                  child.type === 'AssignmentPattern' &&
-                  (parent.type === 'ObjectProperty' ||
-                    parent.type === 'ArrayPattern')
-                ) {
-                  isDynamic = true
-                  helper = context.helper('getDefaultValue')
-                  helperArgs = value.content.slice(
-                    child.right.start! - 1,
-                    child.right.end! - 1,
-                  )
-                }
               }
               map.set(id.name, { path, dynamic: isDynamic, helper, helperArgs })
             }

packages/compiler/src/transforms/vFor.ts

@@ -7,7 +7,6 @@ import {
 import {
   createBranch,
   createCompilerError,
-  createExpressionWithFn,
   ErrorCodes,
   findProp,
   isConstantNode,
@@ -92,12 +91,11 @@ export function getForParseResult(
     ) {
       if (dir.value.expression.left.type === 'SequenceExpression') {
         const expressions = dir.value.expression.left.expressions
-        value =
-          expressions[0] && createExpressionWithFn(expressions[0], context)
+        value = expressions[0] && resolveExpression(expressions[0], context)
         key = expressions[1] && resolveExpression(expressions[1], context)
         index = expressions[2] && resolveExpression(expressions[2], context)
       } else {
-        value = createExpressionWithFn(dir.value.expression.left, context)
+        value = resolveExpression(dir.value.expression.left, context)
       }
       source = resolveExpression(dir.value.expression.right, context)
     }

packages/compiler/src/transforms/vSlot.ts

@@ -31,9 +31,7 @@ export const transformVSlot: NodeTransform = (node, context) => {
   const { children } = node
 
   const dir = findProp(node, 'v-slot')
-  const resolvedDirective = dir
-    ? resolveDirective(dir, context, true)
-    : undefined
+  const resolvedDirective = dir ? resolveDirective(dir, context) : undefined
   const { parent } = context
 
   const isComponent = isJSXComponent(node)

packages/compiler/src/utils/directive.ts

@@ -1,18 +1,13 @@
 import type { DirectiveNode } from '../ir'
 import type { TransformContext } from '../transform'
-import {
-  createExpressionWithFn,
-  createSimpleExpression,
-  resolveExpression,
-} from './expression'
+import { createSimpleExpression, resolveExpression } from './expression'
 import { getText } from './text'
 import type { JSXAttribute } from '@babel/types'
 
 const namespaceRE = /^(?:\$([\w-]+)\$)?([\w-]+)?/
 export function resolveDirective(
   node: JSXAttribute,
   context: TransformContext,
-  withFn = false,
 ): DirectiveNode {
   const { value, name } = node
   let nameString =
@@ -49,11 +44,7 @@ export function resolveDirective(
       : undefined
     : createSimpleExpression(nameString, true, name)
 
-  const exp = value
-    ? withFn && value.type === 'JSXExpressionContainer'
-      ? createExpressionWithFn(value.expression, context)
-      : resolveExpression(value, context)
-    : undefined
+  const exp = value ? resolveExpression(value, context) : undefined
 
   return {
     name: isDirective ? nameString.slice(2) : 'bind',

packages/compiler/src/utils/expression.ts

@@ -82,19 +82,6 @@ export function resolveExpression(
   return createSimpleExpression(source, isStatic, node)
 }
 
-export function createExpressionWithFn(node: Node, context: TransformContext) {
-  const text = getText(node, context)
-  return node.type === 'Identifier'
-    ? createSimpleExpression(text, false, node)
-    : createSimpleExpression(
-        text,
-        false,
-        parseExpression(`(${text})=>{}`, {
-          plugins: context.options.expressionPlugins,
-        }),
-      )
-}
-
 export function propToExpression(
   prop: JSXAttribute,
   context: TransformContext,

packages/compiler/test/transforms/__snapshots__/vFor.spec.ts.snap

@@ -195,7 +195,7 @@ exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
   const n0 = _createFor(() => (list), (_for_item0) => {
     const n2 = t0()
     const x2 = _child(n2)
-    _setNodes(x2, () => (_for_item0.value.foo + bar + baz + _for_item0.value.baz[0] + quux))
+    _setNodes(x2, () => (_for_item0.value.foo + baz + _for_item0.value.baz[0]))
     return n2
   })
   return n0

packages/compiler/test/transforms/vFor.spec.ts

@@ -215,12 +215,7 @@ describe('compiler: v-for', () => {
       value: {
         content: '{ id, value }',
         ast: {
-          type: 'ArrowFunctionExpression',
-          params: [
-            {
-              type: 'ObjectPattern',
-            },
-          ],
+          type: 'ObjectExpression',
         },
       },
       key: undefined,
@@ -243,12 +238,7 @@ describe('compiler: v-for', () => {
       value: {
         content: '{ id, ...other }',
         ast: {
-          type: 'ArrowFunctionExpression',
-          params: [
-            {
-              type: 'ObjectPattern',
-            },
-          ],
+          type: 'ObjectExpression',
         },
       },
       key: {
@@ -272,12 +262,7 @@ describe('compiler: v-for', () => {
       value: {
         content: '[id, other]',
         ast: {
-          type: 'ArrowFunctionExpression',
-          params: [
-            {
-              type: 'ArrayPattern',
-            },
-          ],
+          type: 'ArrayExpression',
         },
       },
       key: {
@@ -302,12 +287,7 @@ describe('compiler: v-for', () => {
       value: {
         content: '[id, ...other]',
         ast: {
-          type: 'ArrowFunctionExpression',
-          params: [
-            {
-              type: 'ArrayPattern',
-            },
-          ],
+          type: 'ArrayExpression',
         },
       },
       key: {
@@ -320,7 +300,7 @@ describe('compiler: v-for', () => {
   test('v-for aliases w/ complex expressions', () => {
     const { code, ir } = compileWithVFor(
       `<div v-for={({ foo, baz: [qux] }) in list}>
-        { foo + bar + baz + qux + quux }
+        { foo + baz + qux }
       </div>`,
     )
     expect(code).matchSnapshot()
@@ -333,12 +313,7 @@ describe('compiler: v-for', () => {
       value: {
         content: '{ foo, baz: [qux] }',
         ast: {
-          type: 'ArrowFunctionExpression',
-          params: [
-            {
-              type: 'ObjectPattern',
-            },
-          ],
+          type: 'ObjectExpression',
         },
       },
       key: undefined,