fix(compiler-vapor): further optimize renderEffect

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,9 @@ 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+1]: _unref(foo)[key.value+1]() }], true)))
+  let _key_value_foo
+  _renderEffect(() => 
+  _key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))
   return n0
 "
 `;

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

@@ -194,8 +194,8 @@
       })
       expect(code).matchSnapshot()
       expect(code).contains('key.value+1')
       expect(code).contains(
-        '(_key_value !== key.value || _foo !== _unref(foo)) && (_key_value_foo = _setDynamicProps(n0, _key_value_foo, [{ [key.value+1]: _unref(foo)[key.value+1]() }], true))',
+        '(_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))',
       )
     })
 

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
 }"
 `;
@@ -346,10 +353,11 @@ exports[`compiler: element transform > v-bind="obj" 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
-export function render(_ctx) {
+export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj], true)))
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj], true))
   return n0
 }"
 `;
@@ -358,10 +366,11 @@ exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
-export function render(_ctx) {
+export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj], true)))
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, _ctx.obj], true))
   return n0
 }"
 `;
@@ -370,10 +379,11 @@ exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 
-export function render(_ctx) {
+export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [_ctx.obj, { id: "foo" }], true)))
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [_ctx.obj, { id: "foo" }], true))
   return n0
 }"
 `;
@@ -384,8 +394,9 @@ const t0 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  let _obj
-  _renderEffect(() => _obj !== _ctx.obj && (_obj = _setDynamicProps(n0, _obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true)))
+  let _prev_obj
+  _renderEffect(() => 
+  _prev_obj = _setDynamicProps(n0, _prev_obj, [{ id: "foo" }, _ctx.obj, { class: "bar" }], true))
   return n0
 }"
 `;
@@ -396,7 +407,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
 }"
 `;