feat(core): support v-show directive (#310)

packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`compiler: v-show transform simple expression 1`] = `
+"const _Vue = Vue
+
+return function render() {
+  with (this) {
+    const { vShow: _vShow, createVNode: _createVNode, withDirectives: _withDirectives, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+    
+    return (_openBlock(), _withDirectives(_createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */), [
+      [_vShow, a]
+    ]))
+  }
+}"
+`;

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

@@ -0,0 +1,36 @@
+import { parse, transform, generate, CompilerOptions } from '@vue/compiler-core'
+import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformShow } from '../../src/transforms/vShow'
+import { DOMErrorCodes } from '../../src/errors'
+
+function transformWithShow(template: string, options: CompilerOptions = {}) {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformElement],
+    directiveTransforms: {
+      show: transformShow
+    },
+    ...options
+  })
+  return ast
+}
+
+describe('compiler: v-show transform', () => {
+  test('simple expression', () => {
+    const ast = transformWithShow(`<div v-show="a"/>`)
+
+    expect(generate(ast).code).toMatchSnapshot()
+  })
+
+  test('should raise error if has no expression', () => {
+    const onError = jest.fn()
+    transformWithShow(`<div v-show/>`, { onError })
+
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(onError).toHaveBeenCalledWith(
+      expect.objectContaining({
+        code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION
+      })
+    )
+  })
+})

packages/compiler-dom/src/errors.ts

@@ -27,7 +27,8 @@ export const enum DOMErrorCodes {
   X_V_TEXT_WITH_CHILDREN,
   X_V_MODEL_ON_INVALID_ELEMENT,
   X_V_MODEL_ARG_ON_ELEMENT,
-  X_V_MODEL_ON_FILE_INPUT_ELEMENT
+  X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+  X_V_SHOW_NO_EXPRESSION
 }
 
 export const DOMErrorMessages: { [code: number]: string } = {
@@ -37,5 +38,6 @@ export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
   [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
-  [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot used on file inputs since they are read-only. Use a v-on:change listener instead.`
+  [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot used on file inputs since they are read-only. Use a v-on:change listener instead.`,
+  [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`
 }

packages/compiler-dom/src/index.ts

@@ -7,6 +7,7 @@ import { transformVHtml } from './transforms/vHtml'
 import { transformVText } from './transforms/vText'
 import { transformModel } from './transforms/vModel'
 import { transformOn } from './transforms/vOn'
+import { transformShow } from './transforms/vShow'
 
 export function compile(
   template: string,
@@ -22,6 +23,7 @@ export function compile(
       text: transformVText,
       model: transformModel, // override compiler-core
       on: transformOn,
+      show: transformShow,
       ...(options.directiveTransforms || {})
     }
   })

packages/compiler-dom/src/runtimeHelpers.ts

@@ -9,6 +9,8 @@ export const V_MODEL_DYNAMIC = Symbol(__DEV__ ? `vModelDynamic` : ``)
 export const V_ON_WITH_MODIFIERS = Symbol(__DEV__ ? `vOnModifiersGuard` : ``)
 export const V_ON_WITH_KEYS = Symbol(__DEV__ ? `vOnKeysGuard` : ``)
 
+export const V_SHOW = Symbol(__DEV__ ? `vShow` : ``)
+
 registerRuntimeHelpers({
   [V_MODEL_RADIO]: `vModelRadio`,
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,
@@ -16,5 +18,6 @@ registerRuntimeHelpers({
   [V_MODEL_SELECT]: `vModelSelect`,
   [V_MODEL_DYNAMIC]: `vModelDynamic`,
   [V_ON_WITH_MODIFIERS]: `withModifiers`,
-  [V_ON_WITH_KEYS]: `withKeys`
+  [V_ON_WITH_KEYS]: `withKeys`,
+  [V_SHOW]: `vShow`
 })

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

@@ -1 +1,17 @@
-// TODO
+import { DirectiveTransform } from '@vue/compiler-core'
+import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { V_SHOW } from '../runtimeHelpers'
+
+export const transformShow: DirectiveTransform = (dir, node, context) => {
+  const { exp, loc } = dir
+  if (!exp) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc)
+    )
+  }
+
+  return {
+    props: [],
+    needRuntime: context.helper(V_SHOW)
+  }
+}