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

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