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

packages/runtime-dom/__tests__/directives/vShow.spec.ts

@@ -0,0 +1,128 @@
+import {
+  withDirectives,
+  createComponent,
+  h,
+  nextTick,
+  VNode
+} from '@vue/runtime-core'
+import { createApp, vShow } from '@vue/runtime-dom'
+
+const withVShow = (node: VNode, exp: any) =>
+  withDirectives(node, [[vShow, exp]])
+
+let app: any, root: any
+
+beforeEach(() => {
+  app = createApp()
+  root = document.createElement('div') as any
+})
+
+describe('runtime-dom: v-show directive', () => {
+  test('should check show value is truthy', async () => {
+    const component = createComponent({
+      data() {
+        return { value: true }
+      },
+      render() {
+        return [withVShow(h('div'), this.value)]
+      }
+    })
+    app.mount(component, root)
+
+    const $div = root.querySelector('div')
+
+    expect($div.style.display).toEqual('')
+  })
+
+  test('should check show value is falsy', async () => {
+    const component = createComponent({
+      data() {
+        return { value: false }
+      },
+      render() {
+        return [withVShow(h('div'), this.value)]
+      }
+    })
+    app.mount(component, root)
+
+    const $div = root.querySelector('div')
+
+    expect($div.style.display).toEqual('none')
+  })
+
+  it('should update show value changed', async () => {
+    const component = createComponent({
+      data() {
+        return { value: true }
+      },
+      render() {
+        return [withVShow(h('div'), this.value)]
+      }
+    })
+    app.mount(component, root)
+
+    const $div = root.querySelector('div')
+    const data = root._vnode.component.data
+
+    expect($div.style.display).toEqual('')
+
+    data.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    data.value = {}
+    await nextTick()
+    expect($div.style.display).toEqual('')
+
+    data.value = 0
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    data.value = []
+    await nextTick()
+    expect($div.style.display).toEqual('')
+
+    data.value = null
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    data.value = '0'
+    await nextTick()
+    expect($div.style.display).toEqual('')
+
+    data.value = undefined
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    data.value = 1
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
+
+  test('should respect display value in style attribute', async () => {
+    const component = createComponent({
+      data() {
+        return { value: true }
+      },
+      render() {
+        return [
+          withVShow(h('div', { style: { display: 'block' } }), this.value)
+        ]
+      }
+    })
+    app.mount(component, root)
+
+    const $div = root.querySelector('div')
+    const data = root._vnode.component.data
+
+    expect($div.style.display).toEqual('block')
+
+    data.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    data.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('block')
+  })
+})

packages/runtime-dom/src/directives/vShow.ts

@@ -0,0 +1,45 @@
+import { ObjectDirective } from '@vue/runtime-core'
+
+interface VShowElement extends HTMLElement {
+  // _vod = vue original display
+  _vod: string
+}
+
+export const vShow: ObjectDirective<VShowElement> = {
+  beforeMount(el, { value }, { transition }) {
+    el._vod = el.style.display === 'none' ? '' : el.style.display
+    if (transition && value) {
+      transition.beforeEnter(el)
+    } else {
+      setDisplay(el, value)
+    }
+  },
+  mounted(el, { value }, { transition }) {
+    if (transition && value) {
+      transition.enter(el)
+    }
+  },
+  updated(el, { value, oldValue }, { transition }) {
+    if (!value === !oldValue) return
+    if (transition) {
+      if (value) {
+        transition.beforeEnter(el)
+        setDisplay(el, true)
+        transition.enter(el)
+      } else {
+        transition.leave(el, () => {
+          setDisplay(el, false)
+        })
+      }
+    } else {
+      setDisplay(el, value)
+    }
+  },
+  beforeUnmount(el) {
+    setDisplay(el, true)
+  }
+}
+
+function setDisplay(el: VShowElement, value: unknown): void {
+  el.style.display = value ? el._vod : 'none'
+}

packages/runtime-dom/src/index.ts

@@ -68,6 +68,8 @@ export { withModifiers, withKeys } from './directives/vOn'
 // DOM-only components
 export { Transition, TransitionProps } from './components/Transition'
 
+export { vShow } from './directives/vShow'
+
 // re-export everything from core
 // h, Component, reactivity API, nextTick, flags & types
 export * from '@vue/runtime-core'