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

packages/compiler-dom/__tests__/transforms/vOn.spec.ts

@@ -0,0 +1,96 @@
+import {
+  parse,
+  transform,
+  CompilerOptions,
+  ElementNode,
+  ObjectExpression,
+  CallExpression,
+  NodeTypes,
+  Property
+} from '@vue/compiler-core'
+import { transformOn } from '../../src/transforms/vOn'
+import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../../src/runtimeHelpers'
+import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
+import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
+
+function parseVOnProperties(
+  template: string,
+  options: CompilerOptions = {}
+): Property[] {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformExpression, transformElement],
+    directiveTransforms: {
+      on: transformOn
+    },
+    ...options
+  })
+  return (((ast.children[0] as ElementNode).codegenNode as CallExpression)
+    .arguments[1] as ObjectExpression).properties
+}
+
+describe('compiler-dom: transform v-on', () => {
+  it('should support muliple modifiers w/ prefixIdentifiers: true', () => {
+    const [prop] = parseVOnProperties(`<div @click.stop.prevent="test"/>`, {
+      prefixIdentifiers: true
+    })
+    expect(prop).toMatchObject({
+      type: NodeTypes.JS_PROPERTY,
+      value: createObjectMatcher({
+        handler: {
+          callee: V_ON_MODIFIERS_GUARD,
+          arguments: [{ content: '_ctx.test' }, '["stop","prevent"]']
+        },
+        persistent: { content: 'true', isStatic: false }
+      })
+    })
+  })
+
+  it('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
+    const [prop] = parseVOnProperties(
+      `<div @click.stop.capture.passive="test"/>`,
+      { prefixIdentifiers: true }
+    )
+    expect(prop).toMatchObject({
+      type: NodeTypes.JS_PROPERTY,
+      value: createObjectMatcher({
+        handler: {
+          callee: V_ON_MODIFIERS_GUARD,
+          arguments: [{ content: '_ctx.test' }, '["stop"]']
+        },
+        persistent: { content: 'true', isStatic: false },
+        options: createObjectMatcher({
+          capture: { content: 'true', isStatic: false },
+          passive: { content: 'true', isStatic: false }
+        })
+      })
+    })
+  })
+
+  it('should wrap keys guard for keyboard events or dynamic events', () => {
+    const [prop] = parseVOnProperties(
+      `<div @keyDown.stop.capture.ctrl.a="test"/>`,
+      { prefixIdentifiers: true }
+    )
+    expect(prop).toMatchObject({
+      type: NodeTypes.JS_PROPERTY,
+      value: createObjectMatcher({
+        handler: {
+          callee: V_ON_KEYS_GUARD,
+          arguments: [
+            {
+              callee: V_ON_MODIFIERS_GUARD,
+              arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]']
+            },
+            '["a"]'
+          ]
+        },
+        persistent: { content: 'true', isStatic: false },
+        options: createObjectMatcher({
+          capture: { content: 'true', isStatic: false }
+        })
+      })
+    })
+  })
+})

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
+  }
+}