fix(runtime-vapor): fix v-show value (#70)

Author: kaine0923

packages/runtime-vapor/__tests__/vShow.spec.ts

@@ -15,26 +15,27 @@ beforeEach(() => {
 afterEach(() => {
   host.remove()
 })
-
+const createDemo = (defaultValue: boolean) =>
+  defineComponent({
+    setup() {
+      const visible = ref(defaultValue)
+      function handleClick() {
+        visible.value = !visible.value
+      }
+      const t0 = template('<button>toggle</button><h1>hello world</h1>')
+      const n0 = t0()
+      const {
+        0: [n1],
+        1: [n2],
+      } = children(n0)
+      withDirectives(n2, [[vShow, () => visible.value]])
+      on(n1 as HTMLElement, 'click', handleClick)
+      return n0
+    },
+  })
 describe('directive: v-show', () => {
   test('basic', async () => {
-    const demo = defineComponent({
-      setup() {
-        const visible = ref(true)
-        function handleClick() {
-          visible.value = !visible.value
-        }
-        const t0 = template('<button>toggle</button><h1>hello world</h1>')
-        const n0 = t0()
-        const {
-          0: [n1],
-          1: [n2],
-        } = children(n0)
-        withDirectives(n2, [[vShow, () => visible.value]])
-        on(n1 as HTMLElement, 'click', (...args) => handleClick(...args))
-        return n0
-      },
-    })
+    const demo = createDemo(true)
     render(demo as any, {}, '#host')
     const btn = host.querySelector('button')
     expect(host.innerHTML).toBe('<button>toggle</button><h1>hello world</h1>')
@@ -44,4 +45,14 @@ describe('directive: v-show', () => {
       '<button>toggle</button><h1 style="display: none;">hello world</h1>',
     )
   })
+  test('should hide content when default value is false', async () => {
+    const demo = createDemo(false)
+    render(demo as any, {}, '#host')
+    const btn = host.querySelector('button')
+    const h1 = host.querySelector('h1')
+    expect(h1?.style.display).toBe('none')
+    btn?.click()
+    await nextTick()
+    expect(h1?.style.display).toBe('')
+  })
 })

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

@@ -3,7 +3,7 @@ import type { ObjectDirective } from '../directive'
 const vShowMap = new WeakMap<HTMLElement, string>()
 
 export const vShow: ObjectDirective<HTMLElement> = {
-  beforeMount(node, { source: value }) {
+  beforeMount(node, { value }) {
     vShowMap.set(node, node.style.display === 'none' ? '' : node.style.display)
     setDisplay(node, value)
   },
@@ -13,7 +13,7 @@ export const vShow: ObjectDirective<HTMLElement> = {
     setDisplay(node, value)
   },
 
-  beforeUnmount(node, { source: value }) {
+  beforeUnmount(node, { value }) {
     setDisplay(node, value)
   },
 }