feat(dom): transform + runtime for v-on (#213)

packages/compiler-dom/src/index.ts

@@ -6,6 +6,7 @@ import { transformCloak } from './transforms/vCloak'
 import { transformVHtml } from './transforms/vHtml'
 import { transformVText } from './transforms/vText'
 import { transformModel } from './transforms/vModel'
+import { transformOn } from './transforms/vOn'
 
 export function compile(
   template: string,
@@ -20,6 +21,7 @@ export function compile(
       html: transformVHtml,
       text: transformVText,
       model: transformModel, // override compiler-core
+      on: transformOn,
       ...(options.directiveTransforms || {})
     }
   })

packages/compiler-dom/src/runtimeHelpers.ts

@@ -6,10 +6,15 @@ export const V_MODEL_TEXT = Symbol(__DEV__ ? `vModelText` : ``)
 export const V_MODEL_SELECT = Symbol(__DEV__ ? `vModelSelect` : ``)
 export const V_MODEL_DYNAMIC = Symbol(__DEV__ ? `vModelDynamic` : ``)
 
+export const V_ON_MODIFIERS_GUARD = Symbol(__DEV__ ? `vOnModifiersGuard` : ``)
+export const V_ON_KEYS_GUARD = Symbol(__DEV__ ? `vOnKeysGuard` : ``)
+
 registerRuntimeHelpers({
   [V_MODEL_RADIO]: `vModelRadio`,
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,
   [V_MODEL_TEXT]: `vModelText`,
   [V_MODEL_SELECT]: `vModelSelect`,
-  [V_MODEL_DYNAMIC]: `vModelDynamic`
+  [V_MODEL_DYNAMIC]: `vModelDynamic`,
+  [V_ON_MODIFIERS_GUARD]: `vOnModifiersGuard`,
+  [V_ON_KEYS_GUARD]: `vOnKeysGuard`
 })

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

@@ -1 +1,81 @@
-// TODO
+import {
+  transformOn as baseTransform,
+  DirectiveTransform,
+  createObjectProperty,
+  createCallExpression,
+  createObjectExpression,
+  createSimpleExpression,
+  NodeTypes
+} from '@vue/compiler-core'
+import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers'
+
+const EVENT_OPTION_MODIFIERS = { passive: true, once: true, capture: true }
+const NOT_KEY_MODIFIERS = {
+  stop: true,
+  prevent: true,
+  self: true,
+  // system
+  ctrl: true,
+  shift: true,
+  alt: true,
+  meta: true,
+  // mouse
+  left: true,
+  middle: true,
+  right: true,
+  // exact
+  exact: true
+}
+const KEYBOARD_EVENTS = { onkeyup: true, onkeydown: true, onkeypress: true }
+
+export const transformOn: DirectiveTransform = (dir, node, context) => {
+  const { modifiers } = dir
+  const baseResult = baseTransform(dir, node, context)
+  if (!modifiers.length) return baseResult
+  const { key, value } = baseResult.props[0]
+  const runtimeModifiers = modifiers.filter(m => !(m in EVENT_OPTION_MODIFIERS))
+  let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [
+    value,
+    JSON.stringify(runtimeModifiers.filter(m => m in NOT_KEY_MODIFIERS))
+  ])
+  if (
+    // if event name is dynamic, always wrap with keys guard
+    key.type === NodeTypes.COMPOUND_EXPRESSION ||
+    !(key.isStatic) ||
+    key.content.toLowerCase() in KEYBOARD_EVENTS
+  ) {
+    handler = createCallExpression(context.helper(V_ON_KEYS_GUARD), [
+      handler,
+      JSON.stringify(runtimeModifiers.filter(m => !(m in NOT_KEY_MODIFIERS)))
+    ])
+  }
+  const properties = [
+    createObjectProperty('handler', handler),
+    // so the runtime knows the options never change
+    createObjectProperty('persistent', createSimpleExpression('true', false))
+  ]
+
+  const eventOptionModifiers = modifiers.filter(
+    modifier => modifier in EVENT_OPTION_MODIFIERS
+  )
+  if (eventOptionModifiers.length) {
+    properties.push(
+      createObjectProperty(
+        'options',
+        createObjectExpression(
+          eventOptionModifiers.map(modifier =>
+            createObjectProperty(
+              modifier,
+              createSimpleExpression('true', false)
+            )
+          )
+        )
+      )
+    )
+  }
+
+  return {
+    props: [createObjectProperty(key, createObjectExpression(properties))],
+    needRuntime: false
+  }
+}