refactor(compiler-vapor): cache inline handlers passed to component

Author: edison1105

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

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

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

@@ -388,7 +388,10 @@ describe('compiler: element transform', () => {
         `<Foo v-on:bar="handleBar($event)" />`,
       )
       expect(code).toMatchSnapshot()
-      expect(code).contains(`onBar: () => $event => (_ctx.handleBar($event))`)
+      expect(code).contains(
+        `const _on_bar = $event => (_ctx.handleBar($event))`,
+      )
+      expect(code).contains(`onBar: () => _on_bar`)
       expect(ir.block.operation).toMatchObject([
         {
           type: IRNodeTypes.CREATE_COMPONENT_NODE,
@@ -398,7 +401,7 @@ describe('compiler: element transform', () => {
               {
                 key: { content: 'bar' },
                 handler: true,
-                values: [{ content: 'handleBar($event)' }],
+                values: [{ content: '_on_bar' }],
               },
             ],
           ],

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

@@ -29,7 +29,9 @@ import {
 import { genExpression } from './expression'
 import { genPropKey, genPropValue } from './prop'
 import {
+  type SimpleExpressionNode,
   createSimpleExpression,
+  isMemberExpression,
   toValidAssetId,
   walkIdentifiers,
 } from '@vue/compiler-core'
@@ -46,11 +48,20 @@ export function genCreateComponent(
 
   const tag = genTag()
   const { root, props, slots, once } = operation
-  const rawProps = genRawProps(props, context)
   const rawSlots = genRawSlots(slots, context)
+  const [ids, handlers] = processInlineHandlers(props, context)
+  const rawProps = context.withId(() => genRawProps(props, context), ids)
+  const inlineHandlers: CodeFragment[] = handlers.reduce<CodeFragment[]>(
+    (acc, { name, value }) => {
+      const handler = genEventHandler(context, value, false)
+      return [...acc, `const ${name} = `, ...handler, NEWLINE]
+    },
+    [],
+  )
 
   return [
     NEWLINE,
+    ...inlineHandlers,
     `const n${operation.id} = `,
     ...genCall(
       operation.asset
@@ -82,6 +93,38 @@ export function genCreateComponent(
   }
 }
 
+type InlineHandlerValue = {
+  name: string
+  value: SimpleExpressionNode
+}
+
+function processInlineHandlers(
+  props: IRProps[],
+  context: CodegenContext,
+): [Record<string, null>, InlineHandlerValue[]] {
+  const ids: Record<string, null> = Object.create(null)
+  const handlers: InlineHandlerValue[] = []
+  const staticProps = props[0]
+  if (isArray(staticProps)) {
+    for (let i = 0; i < staticProps.length; i++) {
+      const prop = staticProps[i]
+      if (!prop.handler) continue
+      prop.values.forEach((value, i) => {
+        const isMemberExp = isMemberExpression(value, context.options)
+        // cache inline handlers (fn expression or inline statement)
+        if (!isMemberExp) {
+          const name = `_on_${prop.key.content}`
+          handlers.push({ name, value })
+          ids[name] = null
+          // replace the original prop value with the handler name
+          prop.values[i] = extend({ ast: null }, createSimpleExpression(name))
+        }
+      })
+    }
+  }
+  return [ids, handlers]
+}
+
 export function genRawProps(
   props: IRProps[],
   context: CodegenContext,