feat(vShow): add runtime directive for vShow

apps/test/app/app.js

@@ -10,14 +10,20 @@ import {
 } from 'nativescript-vue'
 
 const testComp = defineComponent({
+    data() {
+        return {
+            toggle: true
+        }
+    },
     template: `<StackLayout v-bind="$attrs">
     <Button text="Hello Button" @tap="tapHandler(true)"/>
-    <Label text="Compiled label from template" />
+    <Label text="Compiled label from template" v-show="toggle" />
     <Label text="Another Compiled label from template" />
     <Label v-text="'Label with v-text...!?!?!?'" v-on:tap="tapHandler(false)" />
 </StackLayout>`,
     methods: {
         tapHandler(isButton = false) {
+            this.toggle = !this.toggle
             if (isButton) {
                 console.log('tap handler has fired for button!')
             } else {

packages/runtime/src/directives/vShow.ts

@@ -0,0 +1,49 @@
+import { ObjectDirective } from '@vue/runtime-core'
+import { NSVElement } from '@nativescript-vue/runtime'
+
+interface VShowElement extends NSVElement {
+  // _vod = vue original display
+  _vod: string
+}
+
+export const vShow: ObjectDirective<VShowElement> = {
+  beforeMount(el, { value }, { transition }) {
+    el._vod =
+      el.getAttribute('visibility') === 'none'
+        ? ''
+        : (el.getAttribute('visibility') as string)
+    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.setAttribute('visibility', value ? el._vod : 'collapsed')
+}

packages/runtime/src/index.ts

@@ -59,6 +59,9 @@ export * from './runtimeHelpers'
 export * from './registry'
 export { resolveComponent } from './resolveAssets'
 
+// runtime directive helpers
+export { vShow } from './directives/vShow'
+
 // Runtime components
 export { ActionBar } from './components/ActionBar'