refactor(compiler-vapor): simplify renderEffect with a single statement

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

@@ -10,9 +10,7 @@ export function render(_ctx) {
   const { 0: [n3, { 1: [n2],}],} = _children(n0)
   const n1 = _createTextNode()
   _insert(n1, n3, n2)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, _ctx.count))
-    _setText(n1, _ctx.count)
-  })
   return n0
 }"
 `;
@@ -153,12 +151,8 @@ export function render(_ctx) {
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode()
   _append(n2, n1)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, _ctx.bar))
-    _setText(n1, _ctx.bar)
+  _renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
-  })
-  _renderEffect(() => {
-    _setDynamicProp(n2, "id", _ctx.foo)
-  })
   return n0
 }"
 `;
@@ -173,12 +167,8 @@ export function render(_ctx) {
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode()
   _append(n2, n1)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, _ctx.bar))
-    _setText(n1, _ctx.bar)
+  _renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
-  })
-  _renderEffect(() => {
-    _setDynamicProp(n2, "id", _ctx.foo)
-  })
   return n0
 }"
 `;
@@ -193,12 +183,8 @@ export function render(_ctx) {
   const n1 = _createTextNode()
   const n2 = _createTextNode()
   _append(n0, n1, n2)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, 1))
-    _setText(n1, 1)
+  _renderEffect(() => _setText(n2, 2))
-  })
-  _renderEffect(() => {
-    _setText(n2, 2)
-  })
   return n0
 }"
 `;
@@ -222,8 +208,7 @@ export function render(_ctx) {
     _setText(n1, _ctx.count)
     _setText(n2, _ctx.count)
     _setText(n3, _ctx.count)
-    _setDynamicProp(n4, "id", _ctx.count)
+    _setDynamicProp(n4, "id", _ctx.count)})
-  })
   return n0
 }"
 `;
@@ -235,9 +220,7 @@ const t0 = _fragment()
   const n0 = t0()
   const n1 = _createTextNode()
   _append(n0, n1)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, a + b.value))
-    _setText(n1, a + b.value)
-  })
   return n0
 })()"
 `;
@@ -248,9 +231,7 @@ const t0 = _template("<div></div>")
 (() => {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { [key.value+1]: _unref(foo)[key.value+1]() }))
-    _setDynamicProps(n1, { [key.value+1]: _unref(foo)[key.value+1]() })
-  })
   return n0
 })()"
 `;
@@ -286,30 +267,14 @@ export function render(_ctx) {
   _insert([n3, n4], n0, n9)
   _insert([n5, n6], n0, n10)
   _append(n0, n7, n8)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, 1))
-    _setText(n1, 1)
+  _renderEffect(() => _setText(n2, 2))
-  })
+  _renderEffect(() => _setText(n3, 4))
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n4, 5))
-    _setText(n2, 2)
+  _renderEffect(() => _setText(n5, 7))
-  })
+  _renderEffect(() => _setText(n6, 8))
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n7, 'A'))
-    _setText(n3, 4)
+  _renderEffect(() => _setText(n8, 'B'))
-  })
-  _renderEffect(() => {
-    _setText(n4, 5)
-  })
-  _renderEffect(() => {
-    _setText(n5, 7)
-  })
-  _renderEffect(() => {
-    _setText(n6, 8)
-  })
-  _renderEffect(() => {
-    _setText(n7, 'A')
-  })
-  _renderEffect(() => {
-    _setText(n8, 'B')
-  })
   return n0
 }"
 `;

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

@@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setClass(n1, ["foo", { bar: _ctx.isBar }]))
-    _setClass(n1, ["foo", { bar: _ctx.isBar }])
-  })
   return n0
 }"
 `;
@@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setStyle(n1, ["color: green", { color: 'red' }]))
-    _setStyle(n1, ["color: green", { color: 'red' }])
-  })
   return n0
 }"
 `;
@@ -49,9 +45,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, _ctx.obj))
-    _setDynamicProps(n1, _ctx.obj)
-  })
   return n0
 }"
 `;
@@ -64,9 +58,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { id: "foo" }, _ctx.obj))
-    _setDynamicProps(n1, { id: "foo" }, _ctx.obj)
-  })
   return n0
 }"
 `;
@@ -79,9 +71,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, _ctx.obj, { id: "foo" }))
-    _setDynamicProps(n1, _ctx.obj, { id: "foo" })
-  })
   return n0
 }"
 `;
@@ -94,9 +84,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" }))
-    _setDynamicProps(n1, { id: "foo" }, _ctx.obj, { class: "bar" })
-  })
   return n0
 }"
 `;

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

@@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setAttr(n1, "foo-bar", _ctx.id))
-    _setAttr(n1, "foo-bar", _ctx.id)
-  })
   return n0
 }"
 `;
@@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setAttr(n1, "foo-bar", _ctx.fooBar))
-    _setAttr(n1, "foo-bar", _ctx.fooBar)
-  })
   return n0
 }"
 `;
@@ -38,9 +34,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProp(n1, "fooBar", _ctx.id))
-    _setDynamicProp(n1, "fooBar", _ctx.id)
-  })
   return n0
 }"
 `;
@@ -54,9 +48,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { [_camelize(_ctx.foo)]: _ctx.id }))
-    _setDynamicProps(n1, { [_camelize(_ctx.foo)]: _ctx.id })
-  })
   return n0
 }"
 `;
@@ -69,9 +61,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProp(n1, "fooBar", _ctx.fooBar))
-    _setDynamicProp(n1, "fooBar", _ctx.fooBar)
-  })
   return n0
 }"
 `;
@@ -84,9 +74,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.fooBar))
-    _setDOMProp(n1, "fooBar", _ctx.fooBar)
-  })
   return n0
 }"
 `;
@@ -99,9 +87,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.id))
-    _setDOMProp(n1, "fooBar", _ctx.id)
-  })
   return n0
 }"
 `;
@@ -114,9 +100,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.id))
-    _setDOMProp(n1, "fooBar", _ctx.id)
-  })
   return n0
 }"
 `;
@@ -129,9 +113,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { [\`.\${_ctx.fooBar}\`]: _ctx.id }))
-    _setDynamicProps(n1, { [\`.\${_ctx.fooBar}\`]: _ctx.id })
-  })
   return n0
 }"
 `;
@@ -144,9 +126,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDOMProp(n1, "fooBar", _ctx.fooBar))
-    _setDOMProp(n1, "fooBar", _ctx.fooBar)
-  })
   return n0
 }"
 `;
@@ -159,9 +139,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProp(n1, "id", _ctx.id))
-    _setDynamicProp(n1, "id", _ctx.id)
-  })
   return n0
 }"
 `;
@@ -174,9 +152,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title }))
-    _setDynamicProps(n1, { [_ctx.id]: _ctx.id, [_ctx.title]: _ctx.title })
-  })
   return n0
 }"
 `;
@@ -189,9 +165,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProps(n1, { [_ctx.id]: _ctx.id, foo: "bar", checked: "" }))
-    _setDynamicProps(n1, { [_ctx.id]: _ctx.id, foo: "bar", checked: "" })
-  })
   return n0
 }"
 `;
@@ -204,9 +178,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProp(n1, "camel-case", _ctx.camelCase))
-    _setDynamicProp(n1, "camel-case", _ctx.camelCase)
-  })
   return n0
 }"
 `;
@@ -219,9 +191,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setDynamicProp(n1, "id", _ctx.id))
-    _setDynamicProp(n1, "id", _ctx.id)
-  })
   return n0
 }"
 `;

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

@@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setHtml(n1, _ctx.code))
-    _setHtml(n1, _ctx.code)
-  })
   return n0
 }"
 `;
@@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setHtml(n1, _ctx.test))
-    _setHtml(n1, _ctx.test)
-  })
   return n0
 }"
 `;

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

@@ -11,9 +11,7 @@ export function render(_ctx) {
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
     const { 0: [n3],} = _children(n2)
-    _renderEffect(() => {
+    _renderEffect(() => _setText(n3, _ctx.msg))
-      _setText(n3, _ctx.msg)
-    })
     return n2
   })
   _append(n0, n1)
@@ -43,9 +41,7 @@ export function render(_ctx) {
     return n4
   }))
   _prepend(n0, n1)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n5, _ctx.text))
-    _setText(n5, _ctx.text)
-  })
   return n0
 }"
 `;
@@ -82,9 +78,7 @@ export function render(_ctx) {
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
     const { 2: [n3],} = _children(n2)
-    _renderEffect(() => {
+    _renderEffect(() => _setText(n3, _ctx.msg))
-      _setText(n3, _ctx.msg)
-    })
     return n2
   })
   _append(n0, n1)

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

@@ -34,9 +34,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args))))
-    _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args)))
-  })
   return n0
 }"
 `;
@@ -49,9 +47,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, _ctx.event(_ctx.foo), (...args) => (_ctx.handler && _ctx.handler(...args))))
-    _on(n1, _ctx.event(_ctx.foo), (...args) => (_ctx.handler && _ctx.handler(...args)))
-  })
   return n0
 }"
 `;
@@ -64,9 +60,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args))))
-    _on(n1, _ctx.event, (...args) => (_ctx.handler && _ctx.handler(...args)))
-  })
   return n0
 }"
 `;
@@ -316,9 +310,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["middle"])))
-    _on(n1, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["middle"]))
-  })
   return n0
 }"
 `;
@@ -344,9 +336,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["right"]), ["right"])))
-    _on(n1, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["right"]), ["right"]))
-  })
   return n0
 }"
 `;
@@ -372,9 +362,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _on(n1, _ctx.e, _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["left"]), ["left"])))
-    _on(n1, _ctx.e, _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["left"]), ["left"]))
-  })
   return n0
 }"
 `;

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

@@ -8,9 +8,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, _ctx.str))
-    _setText(n1, _ctx.str)
-  })
   return n0
 }"
 `;
@@ -23,9 +21,7 @@ const t0 = _template("<div></div>")
 export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _renderEffect(() => {
+  _renderEffect(() => _setText(n1, _ctx.test))
-    _setText(n1, _ctx.test)
-  })
   return n0
 }"
 `;

packages/compiler-vapor/src/generators/operation.ts

@@ -73,10 +73,18 @@ export function genEffect({ operations }: IREffect, context: CodegenContext) {
   const { vaporHelper } = context
   const [frag, push] = buildCodeFragment(
     NEWLINE,
-    `${vaporHelper('renderEffect')}(() => {`,
+    `${vaporHelper('renderEffect')}(() => `,
-    INDENT_START,
   )
-  operations.forEach(op => push(...genOperation(op, context)))
+
-  push(INDENT_END, NEWLINE, '})')
+  const [fragOps, pushOps] = buildCodeFragment()
+  operations.forEach(op => pushOps(...genOperation(op, context)))
+
+  const newlineCount = fragOps.filter(frag => frag === NEWLINE).length
+  if (newlineCount > 1) {
+    push('{', INDENT_START, ...fragOps, INDENT_END, '})')
+  } else {
+    push(...fragOps.filter(frag => frag !== NEWLINE), ')')
+  }
+
   return frag
 }