feat(v-on): cache handlers

packages/compiler-dom/src/transforms/vOn.ts

@@ -25,61 +25,60 @@ const isKeyboardEvent = /*#__PURE__*/ makeMap(
 )
 
 export const transformOn: DirectiveTransform = (dir, node, context) => {
-  const { modifiers } = dir
-  const baseResult = baseTransform(dir, node, context)
-  if (!modifiers.length) return baseResult
+  return baseTransform(dir, node, context, baseResult => {
+    const { modifiers } = dir
+    if (!modifiers.length) return baseResult
 
-  let { key, value: handlerExp } = baseResult.props[0]
+    let { key, value: handlerExp } = baseResult.props[0]
 
-  // modifiers for addEventListener() options, e.g. .passive & .capture
-  const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
-  // modifiers that needs runtime guards
-  const runtimeModifiers = modifiers.filter(m => !isEventOptionModifier(m))
+    // modifiers for addEventListener() options, e.g. .passive & .capture
+    const eventOptionModifiers = modifiers.filter(isEventOptionModifier)
+    // modifiers that needs runtime guards
+    const runtimeModifiers = modifiers.filter(m => !isEventOptionModifier(m))
 
-  // built-in modifiers that are not keys
-  const nonKeyModifiers = runtimeModifiers.filter(isNonKeyModifier)
-  if (nonKeyModifiers.length) {
-    handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
-      handlerExp,
-      JSON.stringify(nonKeyModifiers)
-    ])
-  }
+    // built-in modifiers that are not keys
+    const nonKeyModifiers = runtimeModifiers.filter(isNonKeyModifier)
+    if (nonKeyModifiers.length) {
+      handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
+        handlerExp,
+        JSON.stringify(nonKeyModifiers)
+      ])
+    }
 
-  const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
-  if (
-    keyModifiers.length &&
-    // if event name is dynamic, always wrap with keys guard
-    (key.type === NodeTypes.COMPOUND_EXPRESSION ||
-      !key.isStatic ||
-      isKeyboardEvent(key.content))
-  ) {
-    handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
-      handlerExp,
-      JSON.stringify(keyModifiers)
-    ])
-  }
+    const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
+    if (
+      keyModifiers.length &&
+      // if event name is dynamic, always wrap with keys guard
+      (key.type === NodeTypes.COMPOUND_EXPRESSION ||
+        !key.isStatic ||
+        isKeyboardEvent(key.content))
+    ) {
+      handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
+        handlerExp,
+        JSON.stringify(keyModifiers)
+      ])
+    }
 
-  if (eventOptionModifiers.length) {
-    handlerExp = createObjectExpression([
-      createObjectProperty('handler', handlerExp),
-      createObjectProperty(
-        'options',
-        createObjectExpression(
-          eventOptionModifiers.map(modifier =>
-            createObjectProperty(
-              modifier,
-              createSimpleExpression('true', false)
+    if (eventOptionModifiers.length) {
+      handlerExp = createObjectExpression([
+        createObjectProperty('handler', handlerExp),
+        createObjectProperty(
+          'options',
+          createObjectExpression(
+            eventOptionModifiers.map(modifier =>
+              createObjectProperty(
+                modifier,
+                createSimpleExpression('true', false)
+              )
             )
           )
         )
-      ),
-      // so the runtime knows the options never change
-      createObjectProperty('persistent', createSimpleExpression('true', false))
-    ])
-  }
+      ])
+    }
 
-  return {
-    props: [createObjectProperty(key, handlerExp)],
-    needRuntime: false
-  }
+    return {
+      props: [createObjectProperty(key, handlerExp)],
+      needRuntime: false
+    }
+  })
 }