fix: do not wrap registering event listeners under effect (#27)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap

@@ -71,29 +71,25 @@ export function render(_ctx) {
 `;
 
 exports[`compile > directives > v-on > event modifier 1`] = `
-"import { template as _template, children as _children, effect as _effect, on as _on, withModifiers as _withModifiers } from 'vue/vapor';
+"import { template as _template, children as _children, on as _on, withModifiers as _withModifiers } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template(\\"<div></div>\\")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
-    _on(n1, \\"click\\", _withModifiers(handleClick, [\\"prevent\\", \\"stop\\"]))
-  })
+  _on(n1, \\"click\\", _withModifiers(handleClick, [\\"prevent\\", \\"stop\\"]))
   return n0
 }"
 `;
 
 exports[`compile > directives > v-on > simple expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, on as _on } from 'vue/vapor';
+"import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template(\\"<div></div>\\")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
-    _on(n1, \\"click\\", handleClick)
-  })
+  _on(n1, \\"click\\", handleClick)
   return n0
 }"
 `;
@@ -220,7 +216,7 @@ export function render(_ctx) {
 `;
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, effect as _effect, setText as _setText, on as _on, setAttr as _setAttr } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, effect as _effect, setText as _setText, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template(\\"<button>foo<!>foo</button>\\")
@@ -232,6 +228,7 @@ export function render(_ctx) {
   _prepend(n4, n1)
   _insert(n2, n4, n5)
   _append(n4, n3)
+  _on(n4, \\"click\\", handleClick)
   _effect(() => {
     _setText(n1, undefined, count)
   })
@@ -241,9 +238,6 @@ export function render(_ctx) {
   _effect(() => {
     _setText(n3, undefined, count)
   })
-  _effect(() => {
-    _on(n4, \\"click\\", handleClick)
-  })
   _effect(() => {
     _setAttr(n4, \\"id\\", undefined, count)
   })

packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`fixtures 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, setText as _setText, effect as _effect, on as _on, setHtml as _setHtml } from 'vue/vapor';import { ref, computed } from 'vue'
+import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, on as _on, setText as _setText, effect as _effect, setHtml as _setHtml } from 'vue/vapor';import { ref, computed } from 'vue'
 
 const html = '<b>HTML</b>'
 
@@ -23,6 +23,7 @@ return (() => {
   _append(n2, n1)
   const n3 = _createTextNode(double.value)
   _append(n4, n3)
+  _on(n5, \\"click\\", increment)
   const n7 = _createTextNode(count.value)
   _setText(n7, undefined, count.value)
   _append(n8, n7)
@@ -32,9 +33,6 @@ return (() => {
   _effect(() => {
     _setText(n3, undefined, double.value)
   })
-  _effect(() => {
-    _on(n5, \\"click\\", increment)
-  })
   _effect(() => {
     _setHtml(n6, undefined, html)
   })

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -128,19 +128,15 @@ function transformProp(
         return
       }
 
-      context.registerEffect(
-        [exp],
-        [
-          {
-            type: IRNodeTypes.SET_EVENT,
-            loc: prop.loc,
-            element: context.reference(),
-            name: arg,
-            value: exp,
-            modifiers,
-          },
-        ],
-      )
+      // TODO reactive
+      context.registerOperation({
+        type: IRNodeTypes.SET_EVENT,
+        loc: node.loc,
+        element: context.reference(),
+        name: arg,
+        value: exp,
+        modifiers,
+      })
       break
     }
   }