perf(compiler-vaporl): finer update granularity

related #154

Author: Doctor-wu

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

@@ -6,13 +6,13 @@ const t0 = _template("foo")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
-  const n2 = _createComponent(_component_Comp, null, null, () => [{
+  const n2 = _createComponent(_component_Comp, null, null, [() => ({
     name: _ctx.name, 
     fn: () => {
       const n0 = t0()
       return n0
     }
-  }], true)
+  })], true)
   return n2
 }"
 `;
@@ -23,13 +23,13 @@ const t0 = _template("foo")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
-  const n2 = _createComponent(_component_Comp, null, null, () => [_createForSlots(_ctx.list, (item) => ({
+  const n2 = _createComponent(_component_Comp, null, null, [() => (_createForSlots(_ctx.list, (item) => ({
     name: item, 
     fn: () => {
       const n0 = t0()
       return n0
     }
-  }))], true)
+  })))], true)
   return n2
 }"
 `;
@@ -40,13 +40,13 @@ const t0 = _template("foo")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
-  const n2 = _createComponent(_component_Comp, null, null, () => [_createForSlots(_ctx.list, (_, __, index) => ({
+  const n2 = _createComponent(_component_Comp, null, null, [() => (_createForSlots(_ctx.list, (_, __, index) => ({
     name: index, 
     fn: () => {
       const n0 = t0()
       return n0
     }
-  }))], true)
+  })))], true)
   return n2
 }"
 `;
@@ -59,7 +59,7 @@ const t2 = _template("else condition")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
-  const n6 = _createComponent(_component_Comp, null, null, () => [_ctx.condition
+  const n6 = _createComponent(_component_Comp, null, null, [() => (_ctx.condition
     ? {
       name: "condition", 
       fn: () => {
@@ -84,7 +84,7 @@ export function render(_ctx) {
           return n4
         }, 
         key: "2"
-      }], true)
+      })], true)
   return n6
 }"
 `;

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

@@ -159,24 +159,30 @@ function genDynamicSlots(
   dynamicSlots: ComponentDynamicSlot[],
   context: CodegenContext,
 ) {
-  const slotsExpr = genMulti(
+  return genMulti(
     dynamicSlots.length > 1 ? DELIMITERS_ARRAY_NEWLINE : DELIMITERS_ARRAY,
-    ...dynamicSlots.map(slot => genDynamicSlot(slot, context)),
+    ...dynamicSlots.map(slot => genDynamicSlot(slot, context, true)),
   )
-  return ['() => ', ...slotsExpr]
 }
 
 function genDynamicSlot(
   slot: ComponentDynamicSlot,
   context: CodegenContext,
+  top = false,
 ): CodeFragment[] {
   switch (slot.slotType) {
     case DynamicSlotType.BASIC:
-      return genBasicDynamicSlot(slot, context)
+      return top
+        ? ['() => (', ...genBasicDynamicSlot(slot, context), ')']
+        : genBasicDynamicSlot(slot, context)
     case DynamicSlotType.LOOP:
-      return genLoopSlot(slot, context)
+      return top
+        ? ['() => (', ...genLoopSlot(slot, context), ')']
+        : genLoopSlot(slot, context)
     case DynamicSlotType.CONDITIONAL:
-      return genConditionalSlot(slot, context)
+      return top
+        ? ['() => (', ...genConditionalSlot(slot, context), ')']
+        : genConditionalSlot(slot, context)
   }
 }
 

packages/runtime-vapor/src/componentSlots.ts

@@ -33,7 +33,9 @@ export interface DynamicSlot {
   key?: string
 }
 
-export type DynamicSlots = () => (DynamicSlot | DynamicSlot[])[]
+type DynamicSlotFn = () => DynamicSlot | DynamicSlot[]
+
+export type DynamicSlots = DynamicSlotFn[]
 
 export function initSlots(
   instance: ComponentInternalInstance,