test: update snap

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

@@ -6,8 +6,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _count
-  _renderEffect(() => _count !== _ctx.count && _setText(n0, "count is ", (_count = _ctx.count), "."))
+  let _count, __count
+  _renderEffect(() => {
+    __count = _ctx.count
+    if(_count !== __count) {
+      _setText(n0, "count is ", __count, ".")
+      _count = __count
+    }
+  })
   return n0
 }"
 `;
@@ -160,8 +166,14 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = _createComponentWithFallback(_component_Comp)
   const n2 = _createTextNode(() => [_ctx.bar])
   _insert([n1, n2], n3)
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n3, "id", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setDOMProp(n3, "id", __foo)
+      _foo = __foo
+    }
+  })
   return [n0, n3]
 }"
 `;
@@ -183,12 +195,13 @@ _delegateEvents("click")
 export function render(_ctx) {
   const n0 = t0()
   _delegate(n0, "click", () => _ctx.handleClick)
-  let _count
+  let _count, __count
   _renderEffect(() => {
-    if(_count !== _ctx.count) {
-      _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count)
-      _setDOMProp(n0, "id", _ctx.count)
-      _count = _ctx.count
+    __count = _ctx.count
+    if(_count !== __count) {
+      _setText(n0, __count, "foo", __count, "foo", __count)
+      _setDOMProp(n0, "id", __count)
+      _count = __count
     }
   })
   return n0
@@ -205,8 +218,11 @@ exports[`compile > expression parsing > interpolation 1`] = `
 exports[`compile > expression parsing > v-bind 1`] = `
 "
   const n0 = t0()
-  let _key_value, _foo, _key_value_foo
-  _renderEffect(() => (_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [(_key_value = key.value)+1]: (_foo = _unref(foo))[key.value+1]() }], true)))
+  _renderEffect(() => {
+    __key_value = key.value;__foo = _unref(foo);__key_value = key.value+1]()
+    
+    (_key_value__key_value_foo__foo = _setDynamicProps(n0, _key_value__key_value_foo__foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
+  })
   return n0
 "
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -11,10 +11,18 @@ export function render(_ctx) {
   const n2 = n3.nextSibling
   const n1 = _createTextNode(() => [_ctx.second, " ", _ctx.third, " "])
   _insert(n1, n4, n3)
-  let _first, _forth
+  let _first, __first, _forth, __forth
   _renderEffect(() => {
-    _first !== _ctx.first && _setText(n0, (_first = _ctx.first))
-    _forth !== _ctx.forth && _setText(n2, (_forth = _ctx.forth))
+    __first = _ctx.first
+    if(_first !== __first) {
+      _setText(n0, __first)
+      _first = __first
+    }
+    __forth = _ctx.forth
+    if(_forth !== __forth) {
+      _setText(n2, __forth)
+      _forth = __forth
+    }
   })
   return n4
 }"

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -298,8 +298,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _isBar
-  _renderEffect(() => _isBar !== _ctx.isBar && _setClass(n0, ["foo", { bar: (_isBar = _ctx.isBar) }], true))
+  let _isBar, __isBar
+  _renderEffect(() => {
+    __isBar = _ctx.isBar
+    if(_isBar !== __isBar) {
+      _setClass(n0, ["foo", { bar: __isBar }], true)
+      _isBar = __isBar
+    }
+  })
   return n0
 }"
 `;
@@ -327,7 +333,8 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }], true))
+  _renderEffect(() => 
+  _setStyle(n0, ["color: green", { color: 'red' }], true))
   return n0
 }"
 `;
@@ -348,8 +355,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _prev_obj
-  _renderEffect(() => _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj], true))
+  _renderEffect(() => {
+    __obj = _ctx.obj
+    
+    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj], true))
+  })
   return n0
 }"
 `;
@@ -360,8 +370,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _obj, _prev_obj
-  _renderEffect(() => _obj !== _ctx.obj && (_prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, (_obj = _ctx.obj)], true)))
+  _renderEffect(() => {
+    __obj = _ctx.obj
+    
+    (_obj__obj = _setDynamicProps(n0, _obj__obj, [{ id: "foo" }, _ctx.obj], true))
+  })
   return n0
 }"
 `;
@@ -372,8 +385,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _prev_obj
-  _renderEffect(() => _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj, { id: "foo" }], true))
+  _renderEffect(() => {
+    __obj = _ctx.obj
+    
+    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj, { id: "foo" }], true))
+  })
   return n0
 }"
 `;
@@ -384,8 +400,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj, _prev_obj
-  _renderEffect(() => _obj !== _ctx.obj && (_prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, (_obj = _ctx.obj), { class: "bar" }], true)))
+  _renderEffect(() => {
+    __obj = _ctx.obj
+    
+    (_obj__obj = _setDynamicProps(n0, _obj__obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
+  })
   return n0
 }"
 `;
@@ -396,7 +415,8 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setDynamicEvents(n0, _ctx.obj))
+  _renderEffect(() => 
+  _setDynamicEvents(n0, _ctx.obj))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap

@@ -7,7 +7,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   let r0
-  _renderEffect(() => r0 = _setRef(n0, _ctx.foo, r0))
+  _renderEffect(() => 
+  r0 = _setRef(n0, _ctx.foo, r0))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap

@@ -6,8 +6,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setAttr(n0, "foo-bar", (_id = _ctx.id)))
+  let _id, __id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setAttr(n0, "foo-bar", __id)
+      _id = __id
+    }
+  })
   return n0
 }"
 `;
@@ -18,8 +24,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "innerHTML", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setAttr(n0, "innerHTML", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -30,8 +42,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setAttr(n0, "foo-bar", (_fooBar = _ctx.fooBar)))
+  let _fooBar, __fooBar
+  _renderEffect(() => {
+    __fooBar = _ctx.fooBar
+    if(_fooBar !== __fooBar) {
+      _setAttr(n0, "foo-bar", __fooBar)
+      _fooBar = __fooBar
+    }
+  })
   return n0
 }"
 `;
@@ -42,8 +60,14 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setAttr(n0, "value", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -54,8 +78,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "textContent", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setAttr(n0, "textContent", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -66,8 +96,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setAttr(n0, "value", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setAttr(n0, "value", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -78,8 +114,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _prev_id
-  _renderEffect(() => _id !== _ctx.id && (_prev_id = _setDynamicProp(n0, "fooBar", _prev_id, (_id = _ctx.id))))
+  let _id, __id, _id__id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      (_id__id = _setDynamicProp(n0, "fooBar", _id__id, _ctx.id))
+      _id = __id
+    }
+  })
   return n0
 }"
 `;
@@ -90,8 +132,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo, _id, _foo_id
-  _renderEffect(() => (_foo !== _ctx.foo || _id !== _ctx.id) && (_foo_id = _setDynamicProps(n0, _foo_id, [{ [_camelize((_foo = _ctx.foo))]: (_id = _ctx.id) }], true)))
+  _renderEffect(() => {
+    __foo = _ctx.foo;__id = _ctx.id
+    
+    (_foo__foo_id__id = _setDynamicProps(n0, _foo__foo_id__id, [{ [_camelize(_ctx.foo)]: _ctx.id }], true))
+  })
   return n0
 }"
 `;
@@ -102,8 +147,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar, _prev_fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && (_prev_fooBar = _setDynamicProp(n0, "fooBar", _prev_fooBar, (_fooBar = _ctx.fooBar))))
+  let _fooBar, __fooBar, _fooBar__fooBar
+  _renderEffect(() => {
+    __fooBar = _ctx.fooBar
+    if(_fooBar !== __fooBar) {
+      (_fooBar__fooBar = _setDynamicProp(n0, "fooBar", _fooBar__fooBar, _ctx.fooBar))
+      _fooBar = __fooBar
+    }
+  })
   return n0
 }"
 `;
@@ -114,8 +165,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+  let _id, __id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "fooBar", __id)
+      _id = __id
+    }
+  })
   return n0
 }"
 `;
@@ -126,8 +183,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setHtml(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -138,8 +201,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+  let _fooBar, __fooBar
+  _renderEffect(() => {
+    __fooBar = _ctx.fooBar
+    if(_fooBar !== __fooBar) {
+      _setDOMProp(n0, "fooBar", __fooBar)
+      _fooBar = __fooBar
+    }
+  })
   return n0
 }"
 `;
@@ -150,8 +219,14 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setDOMProp(n0, "value", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -162,8 +237,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setText(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -174,8 +255,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setValue(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -186,8 +273,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "fooBar", (_id = _ctx.id)))
+  let _id, __id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "fooBar", __id)
+      _id = __id
+    }
+  })
   return n0
 }"
 `;
@@ -198,8 +291,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar, _id, _fooBar_id
-  _renderEffect(() => (_fooBar !== _ctx.fooBar || _id !== _ctx.id) && (_fooBar_id = _setDynamicProps(n0, _fooBar_id, [{ ["." + (_fooBar = _ctx.fooBar)]: (_id = _ctx.id) }], true)))
+  _renderEffect(() => {
+    __fooBar = _ctx.fooBar;__id = _ctx.id
+    
+    (_fooBar__fooBar_id__id = _setDynamicProps(n0, _fooBar__fooBar_id__id, [{ ["." + _ctx.fooBar]: _ctx.id }], true))
+  })
   return n0
 }"
 `;
@@ -210,8 +306,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setHtml(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -222,8 +324,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _fooBar
-  _renderEffect(() => _fooBar !== _ctx.fooBar && _setDOMProp(n0, "fooBar", (_fooBar = _ctx.fooBar)))
+  let _fooBar, __fooBar
+  _renderEffect(() => {
+    __fooBar = _ctx.fooBar
+    if(_fooBar !== __fooBar) {
+      _setDOMProp(n0, "fooBar", __fooBar)
+      _fooBar = __fooBar
+    }
+  })
   return n0
 }"
 `;
@@ -234,8 +342,14 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setDOMProp(n0, "value", (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setDOMProp(n0, "value", __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -246,8 +360,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setText(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -258,8 +378,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setValue(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -270,8 +396,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setHtml(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setHtml(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -282,8 +414,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setText(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setText(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -294,8 +432,14 @@ const t0 = _template("<input>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo
-  _renderEffect(() => _foo !== _ctx.foo && _setValue(n0, (_foo = _ctx.foo)))
+  let _foo, __foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      _setValue(n0, __foo)
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -306,8 +450,14 @@ const t0 = _template("<progress></progress>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _foo, _prev_foo
-  _renderEffect(() => _foo !== _ctx.foo && (_prev_foo = _setDynamicProp(n0, "value", _prev_foo, (_foo = _ctx.foo))))
+  let _foo, __foo, _foo__foo
+  _renderEffect(() => {
+    __foo = _ctx.foo
+    if(_foo !== __foo) {
+      (_foo__foo = _setDynamicProp(n0, "value", _foo__foo, _ctx.foo))
+      _foo = __foo
+    }
+  })
   return n0
 }"
 `;
@@ -318,13 +468,33 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _title, _lang, _dir, _tabindex
+  let _id, __id, _title, __title, _lang, __lang, _dir, __dir, _tabindex, __tabindex
   _renderEffect(() => {
-    _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
-    _title !== _ctx.title && _setDOMProp(n0, "title", (_title = _ctx.title))
-    _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
-    _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "id", __id)
+      _id = __id
+    }
+    __title = _ctx.title
+    if(_title !== __title) {
+      _setDOMProp(n0, "title", __title)
+      _title = __title
+    }
+    __lang = _ctx.lang
+    if(_lang !== __lang) {
+      _setDOMProp(n0, "lang", __lang)
+      _lang = __lang
+    }
+    __dir = _ctx.dir
+    if(_dir !== __dir) {
+      _setDOMProp(n0, "dir", __dir)
+      _dir = __dir
+    }
+    __tabindex = _ctx.tabindex
+    if(_tabindex !== __tabindex) {
+      _setDOMProp(n0, "tabindex", __tabindex)
+      _tabindex = __tabindex
+    }
   })
   return n0
 }"
@@ -336,13 +506,33 @@ const t0 = _template("<math></math>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _autofucus, _dir, _displaystyle, _mathcolor, _tabindex
+  let _autofucus, __autofucus, _dir, __dir, _displaystyle, __displaystyle, _mathcolor, __mathcolor, _tabindex, __tabindex
   _renderEffect(() => {
-    _autofucus !== _ctx.autofucus && _setDOMProp(n0, "autofucus", (_autofucus = _ctx.autofucus))
-    _dir !== _ctx.dir && _setDOMProp(n0, "dir", (_dir = _ctx.dir))
-    _displaystyle !== _ctx.displaystyle && _setDOMProp(n0, "displaystyle", (_displaystyle = _ctx.displaystyle))
-    _mathcolor !== _ctx.mathcolor && _setDOMProp(n0, "mathcolor", (_mathcolor = _ctx.mathcolor))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
+    __autofucus = _ctx.autofucus
+    if(_autofucus !== __autofucus) {
+      _setDOMProp(n0, "autofucus", __autofucus)
+      _autofucus = __autofucus
+    }
+    __dir = _ctx.dir
+    if(_dir !== __dir) {
+      _setDOMProp(n0, "dir", __dir)
+      _dir = __dir
+    }
+    __displaystyle = _ctx.displaystyle
+    if(_displaystyle !== __displaystyle) {
+      _setDOMProp(n0, "displaystyle", __displaystyle)
+      _displaystyle = __displaystyle
+    }
+    __mathcolor = _ctx.mathcolor
+    if(_mathcolor !== __mathcolor) {
+      _setDOMProp(n0, "mathcolor", __mathcolor)
+      _mathcolor = __mathcolor
+    }
+    __tabindex = _ctx.tabindex
+    if(_tabindex !== __tabindex) {
+      _setDOMProp(n0, "tabindex", __tabindex)
+      _tabindex = __tabindex
+    }
   })
   return n0
 }"
@@ -354,11 +544,23 @@ const t0 = _template("<svg></svg>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _lang, _tabindex
+  let _id, __id, _lang, __lang, _tabindex, __tabindex
   _renderEffect(() => {
-    _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id))
-    _lang !== _ctx.lang && _setDOMProp(n0, "lang", (_lang = _ctx.lang))
-    _tabindex !== _ctx.tabindex && _setDOMProp(n0, "tabindex", (_tabindex = _ctx.tabindex))
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "id", __id)
+      _id = __id
+    }
+    __lang = _ctx.lang
+    if(_lang !== __lang) {
+      _setDOMProp(n0, "lang", __lang)
+      _lang = __lang
+    }
+    __tabindex = _ctx.tabindex
+    if(_tabindex !== __tabindex) {
+      _setDOMProp(n0, "tabindex", __tabindex)
+      _tabindex = __tabindex
+    }
   })
   return n0
 }"
@@ -382,27 +584,53 @@ export function render(_ctx) {
   const n4 = t4()
   const n5 = t5()
   const n6 = t6()
-  let _spellcheck, _draggable, _translate, _form, _list, _type, _width, _height
-  _renderEffect(() => {
-    _spellcheck !== _ctx.spellcheck && _setAttr(n0, "spellcheck", (_spellcheck = _ctx.spellcheck))
-    _draggable !== _ctx.draggable && _setAttr(n0, "draggable", (_draggable = _ctx.draggable))
-    _translate !== _ctx.translate && _setAttr(n0, "translate", (_translate = _ctx.translate))
-    _form !== _ctx.form && _setAttr(n0, "form", (_form = _ctx.form))
-    _list !== _ctx.list && _setAttr(n1, "list", (_list = _ctx.list))
-    _type !== _ctx.type && _setAttr(n2, "type", (_type = _ctx.type))
-    if(_width !== _ctx.width) {
-      _setAttr(n3, "width", _ctx.width)
-      _setAttr(n4, "width", _ctx.width)
-      _setAttr(n5, "width", _ctx.width)
-      _setAttr(n6, "width", _ctx.width)
-      _width = _ctx.width
-    }
-    if(_height !== _ctx.height) {
-      _setAttr(n3, "height", _ctx.height)
-      _setAttr(n4, "height", _ctx.height)
-      _setAttr(n5, "height", _ctx.height)
-      _setAttr(n6, "height", _ctx.height)
-      _height = _ctx.height
+  let _spellcheck, __spellcheck, _draggable, __draggable, _translate, __translate, _form, __form, _list, __list, _type, __type, _width, __width, _height, __height
+  _renderEffect(() => {
+    __spellcheck = _ctx.spellcheck
+    if(_spellcheck !== __spellcheck) {
+      _setAttr(n0, "spellcheck", __spellcheck)
+      _spellcheck = __spellcheck
+    }
+    __draggable = _ctx.draggable
+    if(_draggable !== __draggable) {
+      _setAttr(n0, "draggable", __draggable)
+      _draggable = __draggable
+    }
+    __translate = _ctx.translate
+    if(_translate !== __translate) {
+      _setAttr(n0, "translate", __translate)
+      _translate = __translate
+    }
+    __form = _ctx.form
+    if(_form !== __form) {
+      _setAttr(n0, "form", __form)
+      _form = __form
+    }
+    __list = _ctx.list
+    if(_list !== __list) {
+      _setAttr(n1, "list", __list)
+      _list = __list
+    }
+    __type = _ctx.type
+    if(_type !== __type) {
+      _setAttr(n2, "type", __type)
+      _type = __type
+    }
+    __width = _ctx.width
+    if(_width !== __width) {
+      _setAttr(n3, "width", __width)
+      _setAttr(n4, "width", __width)
+      _setAttr(n5, "width", __width)
+      _setAttr(n6, "width", __width)
+      _width = __width
+    }
+    __height = _ctx.height
+    if(_height !== __height) {
+      _setAttr(n3, "height", __height)
+      _setAttr(n4, "height", __height)
+      _setAttr(n5, "height", __height)
+      _setAttr(n6, "height", __height)
+      _height = __height
     }
   })
   return [n0, n1, n2, n3, n4, n5, n6]
@@ -415,8 +643,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+  let _id, __id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "id", __id)
+      _id = __id
+    }
+  })
   return n0
 }"
 `;
@@ -427,8 +661,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj.count.bar && _setDOMProp(n0, "id", (_obj = _ctx.obj.count.bar)))
+  let _obj, __obj
+  _renderEffect(() => {
+    __obj = _ctx.obj.count.bar
+    if(_obj !== __obj) {
+      _setDOMProp(n0, "id", __obj)
+      _obj = __obj
+    }
+  })
   return [n0, n1]
 }"
 `;
@@ -439,8 +679,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _title, _id_title
-  _renderEffect(() => (_id !== _ctx.id || _title !== _ctx.title) && (_id_title = _setDynamicProps(n0, _id_title, [{ [(_id = _ctx.id)]: _ctx.id, [(_title = _ctx.title)]: _ctx.title }], true)))
+  _renderEffect(() => {
+    __id = _ctx.id;__title = _ctx.title
+    
+    (_id__id_title__title = _setDynamicProps(n0, _id__id_title__title, [{ [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }], true))
+  })
   return n0
 }"
 `;
@@ -451,8 +694,11 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id, _prev_id
-  _renderEffect(() => _id !== _ctx.id && (_prev_id = _setDynamicProps(n0, _prev_id, [{ [(_id = _ctx.id)]: _ctx.id, foo: "bar", checked: "" }], true)))
+  _renderEffect(() => {
+    __id = _ctx.id
+    
+    (_id__id = _setDynamicProps(n0, _id__id, [{ [_ctx.id]: _ctx.id, foo: "bar", checked: "" }], true))
+  })
   return n0
 }"
 `;
@@ -463,8 +709,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _camelCase, _prev_camelCase
-  _renderEffect(() => _camelCase !== _ctx.camelCase && (_prev_camelCase = _setDynamicProp(n0, "camel-case", _prev_camelCase, (_camelCase = _ctx.camelCase))))
+  let _camelCase, __camelCase, _camelCase__camelCase
+  _renderEffect(() => {
+    __camelCase = _ctx.camelCase
+    if(_camelCase !== __camelCase) {
+      (_camelCase__camelCase = _setDynamicProp(n0, "camel-case", _camelCase__camelCase, _ctx.camelCase))
+      _camelCase = __camelCase
+    }
+  })
   return n0
 }"
 `;
@@ -475,8 +727,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _id
-  _renderEffect(() => _id !== _ctx.id && _setDOMProp(n0, "id", (_id = _ctx.id)))
+  let _id, __id
+  _renderEffect(() => {
+    __id = _ctx.id
+    if(_id !== __id) {
+      _setDOMProp(n0, "id", __id)
+      _id = __id
+    }
+  })
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap

@@ -7,7 +7,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    _renderEffect(() => 
+    _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
     return n2
   }), ([id, ...other], index) => (id))
   return n0
@@ -23,7 +24,8 @@ export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
     _delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0].value)))
-    _renderEffect(() => _setText(n2, _ctx0[0].value))
+    _renderEffect(() => 
+    _setText(n2, _ctx0[0].value))
     return n2
   }, (item) => (item.id))
   return n0
@@ -37,7 +39,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (items), ([item, __, k]) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, item))
+    _renderEffect(() => 
+    _setText(n2, item))
     return n2
   }, (item, __, k) => (k))
   return n0
@@ -52,7 +55,9 @@ export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
     const n2 = t0()
     _renderEffect(() => {
+      
       _setDynamicProp(n2, "item", _ctx0[0].value)
+      
       _setDynamicProp(n2, "index", _ctx0[1].value)
     })
     return n2
@@ -71,7 +76,8 @@ export function render(_ctx) {
     const n5 = t1()
     const n2 = _createFor(() => (_ctx0[0].value), (_ctx1) => {
       const n4 = t0()
-      _renderEffect(() => _setText(n4, _ctx1[0].value+_ctx0[0].value))
+      _renderEffect(() => 
+      _setText(n4, _ctx1[0].value+_ctx0[0].value))
       return n4
     }, null, n5)
     _insert(n2, n5)
@@ -88,7 +94,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
+    _renderEffect(() => 
+    _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
     return n2
   }), ({ id, ...other }, index) => (id))
   return n0
@@ -102,7 +109,8 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
     const n2 = t0()
-    _renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
+    _renderEffect(() => 
+    _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
     return n2
   }))
   return n0

packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap

@@ -6,8 +6,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _code
-  _renderEffect(() => _code !== _ctx.code && _setHtml(n0, (_code = _ctx.code)))
+  let _code, __code
+  _renderEffect(() => {
+    __code = _ctx.code
+    if(_code !== __code) {
+      _setHtml(n0, __code)
+      _code = __code
+    }
+  })
   return n0
 }"
 `;
@@ -18,8 +24,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _test
-  _renderEffect(() => _test !== _ctx.test && _setHtml(n0, (_test = _ctx.test)))
+  let _test, __test
+  _renderEffect(() => {
+    __test = _ctx.test
+    if(_test !== __test) {
+      _setHtml(n0, __test)
+      _test = __test
+    }
+  })
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap

@@ -7,8 +7,14 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
-    let _msg
-    _renderEffect(() => _msg !== _ctx.msg && _setText(n2, (_msg = _ctx.msg)))
+    let _msg, __msg
+    _renderEffect(() => {
+      __msg = _ctx.msg
+      if(_msg !== __msg) {
+        _setText(n2, __msg)
+        _msg = __msg
+      }
+    })
     return n2
   })
   return n0
@@ -38,8 +44,14 @@ export function render(_ctx) {
     const n11 = t4()
     return [n10, n11]
   }))
-  let _text
-  _renderEffect(() => _text !== _ctx.text && _setText(n13, (_text = _ctx.text)))
+  let _text, __text
+  _renderEffect(() => {
+    __text = _ctx.text
+    if(_text !== __text) {
+      _setText(n13, __text)
+      _text = __text
+    }
+  })
   return [n0, n13]
 }"
 `;
@@ -72,8 +84,14 @@ export function render(_ctx) {
     const n2 = t0()
     const n3 = t1()
     const n4 = t2()
-    let _msg
-    _renderEffect(() => _msg !== _ctx.msg && _setText(n4, (_msg = _ctx.msg)))
+    let _msg, __msg
+    _renderEffect(() => {
+      __msg = _ctx.msg
+      if(_msg !== __msg) {
+        _setText(n4, __msg)
+        _msg = __msg
+      }
+    })
     return [n2, n3, n4]
   })
   return n0

packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -242,8 +242,11 @@ export function render(_ctx) {
   const n0 = t0()
   _withDirectives(n0, [[_vModelDynamic, () => _ctx.model]])
   _delegate(n0, "update:modelValue", () => $event => (_ctx.model = $event))
-  let _obj, _prev_obj
-  _renderEffect(() => _obj !== _ctx.obj && (_prev_obj = _setDynamicProps(n0, _prev_obj, [(_obj = _ctx.obj)], true)))
+  _renderEffect(() => {
+    __obj = _ctx.obj
+    
+    (_obj__obj = _setDynamicProps(n0, _obj__obj, [_ctx.obj], true))
+  })
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap

@@ -6,8 +6,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _str
-  _renderEffect(() => _str !== _ctx.str && _setText(n0, (_str = _ctx.str)))
+  let _str, __str
+  _renderEffect(() => {
+    __str = _ctx.str
+    if(_str !== __str) {
+      _setText(n0, __str)
+      _str = __str
+    }
+  })
   return n0
 }"
 `;
@@ -18,8 +24,14 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _test
-  _renderEffect(() => _test !== _ctx.test && _setText(n0, (_test = _ctx.test)))
+  let _test, __test
+  _renderEffect(() => {
+    __test = _ctx.test
+    if(_test !== __test) {
+      _setText(n0, __test)
+      _test = __test
+    }
+  })
   return n0
 }"
 `;