chore: gen unique handler name

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -100,9 +100,12 @@ exports[`compiler: element transform > component > should wrap as function if v-
 
 export function render(_ctx) {
   const _component_Foo = _resolveComponent("Foo")
+  const _component_Bar = _resolveComponent("Bar")
   const _on_bar = $event => (_ctx.handleBar($event))
-  const n0 = _createComponentWithFallback(_component_Foo, { onBar: () => _on_bar }, null, true)
-  return n0
+  const n0 = _createComponentWithFallback(_component_Foo, { onBar: () => _on_bar })
+  const _on_bar1 = () => _ctx.handler
+  const n1 = _createComponentWithFallback(_component_Bar, { onBar: () => _on_bar1 })
+  return [n0, n1]
 }"
 `;
 

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -385,13 +385,17 @@ describe('compiler: element transform', () => {
 
     test('should wrap as function if v-on expression is inline statement', () => {
       const { code, ir } = compileWithElementTransform(
-        `<Foo v-on:bar="handleBar($event)" />`,
+        `<Foo v-on:bar="handleBar($event)" /><Bar v-on:bar="() => handler" />`,
       )
       expect(code).toMatchSnapshot()
+      expect(code).contains(`onBar: () => _on_bar`)
       expect(code).contains(
         `const _on_bar = $event => (_ctx.handleBar($event))`,
       )
-      expect(code).contains(`onBar: () => _on_bar`)
+      expect(code).contains(`onBar: () => _on_bar1`)
+      expect(code).contains(
+        `const _on_bar1 = () => _ctx.handler`,
+      )
       expect(ir.block.operation).toMatchObject([
         {
           type: IRNodeTypes.CREATE_COMPONENT_NODE,
@@ -406,6 +410,19 @@ describe('compiler: element transform', () => {
             ],
           ],
         },
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Bar',
+          props: [
+            [
+              {
+                key: { content: 'bar' },
+                handler: true,
+                values: [{ content: '_on_bar1' }],
+              },
+            ],
+          ],
+        },
       ])
     })
   })

packages/compiler-vapor/src/generate.ts

@@ -34,6 +34,8 @@ export class CodegenContext {
 
   identifiers: Record<string, string[]> = Object.create(null)
 
+  seemInlineHandlerNames: Record<string, number> = Object.create(null)
+
   block: BlockIRNode
   withId<T>(fn: () => T, map: Record<string, string | null>): T {
     const { identifiers } = this

packages/compiler-vapor/src/generators/component.ts

@@ -93,6 +93,16 @@ export function genCreateComponent(
   }
 }
 
+function getUniqueHandlerName(
+  context: CodegenContext,
+  name: string
+): string {
+  const { seemInlineHandlerNames } = context
+  const count = seemInlineHandlerNames[name] || 0
+  seemInlineHandlerNames[name] = count + 1
+  return count === 0 ? name : `${name}${count}`
+}
+
 type InlineHandler = {
   name: string
   value: SimpleExpressionNode
@@ -113,7 +123,7 @@ function processInlineHandlers(
         const isMemberExp = isMemberExpression(value, context.options)
         // cache inline handlers (fn expression or inline statement)
         if (!isMemberExp) {
-          const name = `_on_${prop.key.content}`
+          const name = getUniqueHandlerName(context, `_on_${prop.key.content}`)
           handlers.push({ name, value })
           ids[name] = null
           // replace the original prop value with the handler name