fix(compiler-core): avoid using component name as parameter name

packages/compiler-core/__tests__/transforms/vFor.spec.ts

@@ -16,7 +16,7 @@ import {
   type SimpleExpressionNode,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { type CompilerOptions, generate } from '../../src'
+import { BindingTypes, type CompilerOptions, generate } from '../../src'
 import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
 import { PatchFlags } from '@vue/shared'
 import { createObjectMatcher } from '../testUtils'
@@ -316,6 +316,51 @@ describe('compiler: v-for', () => {
       )
       expect(onError).toHaveBeenCalledTimes(1)
     })
+
+    test('v-for + the parameter name is the same as the component name.', () => {
+      const onError1 = vi.fn()
+      parseWithForTransform('<Comp v-for="Comp of list" />', {
+        onError: onError1,
+        bindingMetadata: {
+          Comp: BindingTypes.SETUP_CONST,
+        },
+      })
+      expect(onError1).toHaveBeenCalledTimes(1)
+      expect(onError1).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_INVALID_PARAMETER_NAME,
+        }),
+      )
+
+      const onError2 = vi.fn()
+      parseWithForTransform('<Comp v-for="Comp of list" />', {
+        onError: onError2,
+      })
+      expect(onError2).toHaveBeenCalledTimes(1)
+      expect(onError2).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_INVALID_PARAMETER_NAME,
+        }),
+      )
+
+      const onError3 = vi.fn()
+      parseWithForTransform(
+        `<div v-for="Comp of list">
+    <div>
+      <Comp>{{ Comp }}</Comp>
+    </div>
+  </div>`,
+        {
+          onError: onError3,
+        },
+      )
+      expect(onError3).toHaveBeenCalledTimes(1)
+      expect(onError3).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_INVALID_PARAMETER_NAME,
+        }),
+      )
+    })
   })
 
   describe('source location', () => {

packages/compiler-core/__tests__/transforms/vSlot.spec.ts

@@ -928,6 +928,45 @@ describe('compiler: transform component slots', () => {
         },
       })
     })
+
+    test('v-slot + the parameter name is the same as the component name.', () => {
+      const onError1 = vi.fn()
+      parseWithSlots(
+        `<CompB>
+          <template #default="Comp">
+            <Comp>{{Comp1}}</Comp>
+          </template>
+        </CompB>`,
+        {
+          onError: onError1,
+        },
+      )
+      expect(onError1).toHaveBeenCalledTimes(1)
+      expect(onError1).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_INVALID_PARAMETER_NAME,
+        }),
+      )
+
+      const onError2 = vi.fn()
+      parseWithSlots(
+        `<CompB>
+          <template #default="{ Comp }">
+            <Comp>{{Comp1}}</Comp>
+          </template>
+        </CompB>`,
+        {
+          onError: onError2,
+          prefixIdentifiers: true,
+        },
+      )
+      expect(onError2).toHaveBeenCalledTimes(1)
+      expect(onError2).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_INVALID_PARAMETER_NAME,
+        }),
+      )
+    })
   })
 
   describe(`with whitespace: 'preserve'`, () => {

packages/compiler-core/src/errors.ts

@@ -69,6 +69,7 @@ export enum ErrorCodes {
   X_MISSING_INTERPOLATION_END,
   X_MISSING_DIRECTIVE_NAME,
   X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
+  X_INVALID_PARAMETER_NAME,
 
   // transform errors
   X_V_IF_NO_EXPRESSION,
@@ -151,6 +152,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
+  [ErrorCodes.X_INVALID_PARAMETER_NAME]: `avoid using component name as parameter name.`,
 
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,

packages/compiler-core/src/transforms/vFor.ts

@@ -33,6 +33,7 @@ import {
 } from '../ast'
 import { ErrorCodes, createCompilerError } from '../errors'
 import {
+  checkParameterName,
   findDir,
   findProp,
   injectProp,
@@ -207,6 +208,14 @@ export const transformFor: NodeTransform = createStructuralDirectiveTransform(
           }
         }
 
+        if (__DEV__ || !__BROWSER__) {
+          checkParameterName(
+            forNode.parseResult.value,
+            childBlock as VNodeCall,
+            context,
+          )
+        }
+
         if (memo) {
           const loop = createFunctionExpression(
             createForLoopParams(forNode.parseResult, [

packages/compiler-core/src/transforms/vSlot.ts

@@ -24,6 +24,7 @@ import type { NodeTransform, TransformContext } from '../transform'
 import { ErrorCodes, createCompilerError } from '../errors'
 import {
   assert,
+  checkParameterName,
   findDir,
   hasScopeRef,
   isStaticExp,
@@ -175,6 +176,10 @@ export function buildSlots(
       continue
     }
 
+    if (__DEV__ || !__BROWSER__) {
+      checkParameterName(slotDir.exp, slotElement, context)
+    }
+
     if (onComponentSlot) {
       // already has on-component slot - this is incorrect usage.
       context.onError(

packages/compiler-core/src/utils.ts

@@ -2,6 +2,7 @@ import {
   type BlockCodegenNode,
   type CacheExpression,
   type CallExpression,
+  type CompoundExpressionNode,
   type DirectiveNode,
   type ElementNode,
   ElementTypes,
@@ -42,6 +43,7 @@ import type { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
 import type { Expression, Node } from '@babel/types'
 import { unwrapTSNode } from './babelUtils'
+import { ErrorCodes, createCompilerError } from './errors'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
@@ -564,3 +566,51 @@ export function getMemoedVNodeCall(
 }
 
 export const forAliasRE: RegExp = /([\s\S]*?)\s+(?:in|of)\s+(\S[\s\S]*)/
+
+export function findComponentTagNode(
+  node: VNodeCall | ElementNode,
+  name: string,
+): VNodeCall | ElementNode | undefined {
+  if (
+    node.tag === name ||
+    node.tag === `$setup["${name}"]` ||
+    node.tag === `_component_${name}`
+  )
+    return node
+  if (node.children) {
+    const children = node.children as TemplateChildNode[]
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i]
+      if ((child as ElementNode).tag) {
+        const targetTag = findComponentTagNode(child as ElementNode, name)
+        if (targetTag) return targetTag
+      }
+    }
+  }
+}
+
+export function checkParameterName(
+  exp: ExpressionNode | undefined,
+  blockNode: VNodeCall | ElementNode,
+  context: TransformContext,
+): void {
+  if (
+    exp &&
+    findComponentTagNode(blockNode, (exp as SimpleExpressionNode).content)
+  ) {
+    context.onError(
+      createCompilerError(ErrorCodes.X_INVALID_PARAMETER_NAME, exp.loc),
+    )
+  }
+
+  let identifiers: CompoundExpressionNode['identifiers'] = []
+  if (exp && (exp as CompoundExpressionNode).identifiers) {
+    identifiers = (exp as CompoundExpressionNode).identifiers
+  }
+
+  if (identifiers!.some(i => !!findComponentTagNode(blockNode, i))) {
+    context.onError(
+      createCompilerError(ErrorCodes.X_INVALID_PARAMETER_NAME, exp!.loc),
+    )
+  }
+}

packages/compiler-dom/src/errors.ts

@@ -21,7 +21,7 @@ export function createDOMCompilerError(
 }
 
 export enum DOMErrorCodes {
-  X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
+  X_V_HTML_NO_EXPRESSION = 54 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,