fix: Click handler on element with v-lazy-show (#12)

playgrounds/nuxt/app.vue

@@ -4,13 +4,16 @@ import HelloWorld from './HelloWorld.vue'
 
 const enabled = ref(false)
 const role = ref('button')
+function handler() {
+  console.log('click')
+}
 </script>
 
 <template>
   <button @click="enabled = !enabled">
     Toggle
   </button>
-  <div v-lazy-show="enabled">
+  <div v-lazy-show="enabled" @click="handler">
     v-lazy-show
   </div>
   <div v-show="enabled">

playgrounds/vite/src/App.vue

@@ -3,24 +3,27 @@ import { ref } from 'vue'
 import HelloWorld from './HelloWorld.vue'
 
 const enabled = ref(false)
+function handler(msg?: string) {
+  console.log(msg || '111')
+}
 </script>
 
 <template>
   <button @click="enabled = !enabled">
     Toggle
   </button>
-  <div v-lazy-show="enabled">
+  <div v-lazy-show="enabled" @click="handler('v-lazy-show')">
     v-lazy-show
   </div>
-  <div v-show="enabled">
+  <div v-show="enabled" @click="handler('v-show')">
     v-show
   </div>
   <div v-if="enabled">
     v-if
   </div>
   <hr>
   <div v-lazy-show="enabled">
-    <HelloWorld msg="v-lazy-show" />
+    <HelloWorld msg="v-lazy-show" :handler="handler" />
   </div>
   <div v-show="enabled">
     <HelloWorld msg="v-show" />

src/index.ts

@@ -48,6 +48,8 @@ export const transformLazyShow = createStructuralDirectiveTransform(
 
     node.props
       .forEach((prop) => {
+        if (prop.name === 'on')
+          return
         if ('exp' in prop && prop.exp && 'content' in prop.exp && prop.exp.loc.source)
           prop.exp = createSimpleExpression(prop.exp.loc.source)
       })
@@ -115,11 +117,12 @@ export const transformLazyShow = createStructuralDirectiveTransform(
       name: DIRECTIVE_NODES.SHOW,
     })
 
+    const _context = Object.assign({}, context)
     context.replaceNode(<TemplateChildNode><unknown>wrapNode)
 
     return () => {
       if (!node.codegenNode)
-        traverseNode(node, context)
+        traverseNode(node, _context)
     }
   },
 )

test/cases/event-props/input.html

@@ -0,0 +1,3 @@
+<span v-lazy-show="foo" @click="handle" :id="id" class="111">
+  Hello
+</span>

test/cases/event-props/output.csr.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
+
+export function render(_ctx, _cache) {
+  return (_cache._lazyshow1 || _ctx.foo)
+    ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
+        _withDirectives(_createElementVNode("span", {
+          onClick: _cache[1] || (_cache[1] = $event => (_ctx._ctx.handle && _ctx.handle(...args))),
+          id: _ctx.id,
+          class: "111"
+        }, " Hello ", 8 /* PROPS */, ["id"]), [
+          [_vShow, _ctx.foo]
+        ])
+      ], 64)))
+    : _createCommentVNode("v-show-if", true)
+}

test/cases/event-props/output.ssr.js

@@ -0,0 +1,13 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue"
+import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
+
+export function ssrRender(_ctx, _push, _parent, _attrs) {
+  if (_ctx.foo) {
+    _push(`<span${_ssrRenderAttrs(_mergeProps({
+      id: _ctx.id,
+      class: "111"
+    }, _attrs, _attrs))}> Hello </span>`)
+  } else {
+    _push(`<!---->`)
+  }
+}