perf(compiler-dom): generate modifiers in a function (#459)

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

@@ -24,20 +24,46 @@ const isKeyboardEvent = /*#__PURE__*/ makeMap(
   true
 )
 
+const generateModifiers = (modifiers: string[]) => {
+  const keyModifiers = []
+  const nonKeyModifiers = []
+  const eventOptionModifiers = []
+
+  for (let i = 0; i < modifiers.length; i++) {
+    const modifier = modifiers[i]
+
+    if (isEventOptionModifier(modifier)) {
+      // eventOptionModifiers: modifiers for addEventListener() options, e.g. .passive & .capture
+      eventOptionModifiers.push(modifier)
+    } else {
+      // runtimeModifiers: modifiers that needs runtime guards
+      if (isNonKeyModifier(modifier)) {
+        nonKeyModifiers.push(modifier)
+      } else {
+        keyModifiers.push(modifier)
+      }
+    }
+  }
+
+  return {
+    keyModifiers,
+    nonKeyModifiers,
+    eventOptionModifiers
+  }
+}
+
 export const transformOn: DirectiveTransform = (dir, node, context) => {
   return baseTransform(dir, node, context, baseResult => {
     const { modifiers } = dir
     if (!modifiers.length) return baseResult
 
     let { key, value: handlerExp } = baseResult.props[0]
+    const {
+      keyModifiers,
+      nonKeyModifiers,
+      eventOptionModifiers
+    } = generateModifiers(modifiers)
 
-    // 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,
@@ -45,7 +71,6 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
       ])
     }
 
-    const keyModifiers = runtimeModifiers.filter(m => !isNonKeyModifier(m))
     if (
       keyModifiers.length &&
       // if event name is dynamic, always wrap with keys guard