From c7164c3771e3cba722d700e8e1b2472181117a24 Mon Sep 17 00:00:00 2001
From: levan <94957639+lezzhao@users.noreply.github.com>
Date: Wed, 18 Dec 2024 00:23:25 +0800
Subject: [PATCH] fix: Click handler on element with v-lazy-show (#12)

---
 playgrounds/nuxt/app.vue             |  5 ++++-
 playgrounds/vite/src/App.vue         |  9 ++++++---
 src/index.ts                         |  5 ++++-
 test/cases/event-props/input.html    |  3 +++
 test/cases/event-props/output.csr.js | 15 +++++++++++++++
 test/cases/event-props/output.ssr.js | 13 +++++++++++++
 6 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 test/cases/event-props/input.html
 create mode 100644 test/cases/event-props/output.csr.js
 create mode 100644 test/cases/event-props/output.ssr.js

diff --git a/playgrounds/nuxt/app.vue b/playgrounds/nuxt/app.vue
index 68fec67..499b37c 100644
--- a/playgrounds/nuxt/app.vue
+++ b/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">
diff --git a/playgrounds/vite/src/App.vue b/playgrounds/vite/src/App.vue
index 058703a..ce3e56a 100644
--- a/playgrounds/vite/src/App.vue
+++ b/playgrounds/vite/src/App.vue
@@ -3,16 +3,19 @@ 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">
@@ -20,7 +23,7 @@ const enabled = ref(false)
   </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" />
diff --git a/src/index.ts b/src/index.ts
index b147044..8750074 100644
--- a/src/index.ts
+++ b/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)
     }
   },
 )
diff --git a/test/cases/event-props/input.html b/test/cases/event-props/input.html
new file mode 100644
index 0000000..eddeddb
--- /dev/null
+++ b/test/cases/event-props/input.html
@@ -0,0 +1,3 @@
+<span v-lazy-show="foo" @click="handle" :id="id" class="111">
+  Hello
+</span>
diff --git a/test/cases/event-props/output.csr.js b/test/cases/event-props/output.csr.js
new file mode 100644
index 0000000..76d7b02
--- /dev/null
+++ b/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)
+}
\ No newline at end of file
diff --git a/test/cases/event-props/output.ssr.js b/test/cases/event-props/output.ssr.js
new file mode 100644
index 0000000..f3d389d
--- /dev/null
+++ b/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(`<!---->`)
+  }
+}
\ No newline at end of file