feat(runtime-vapor): export createBranch

Author: sxzz

packages/runtime-vapor/src/apiCreateIf.ts

@@ -6,19 +6,21 @@ import { createComment, createTextNode, insert, remove } from './dom/element'
 type BlockFn = () => Block
 
 /*! #__NO_SIDE_EFFECTS__ */
-export const createIf = (
-  condition: () => any,
-  b1: BlockFn,
-  b2?: BlockFn,
+export function createBranch(
+  expression: () => any,
+  render: (value: any) => BlockFn | undefined,
   once?: boolean,
+  commentLabel?: string,
   // hydrationNode?: Node,
-): Fragment => {
+): Fragment {
   let newValue: any
   let oldValue: any
   let branch: BlockFn | undefined
   let block: Block | undefined
   let scope: EffectScope | undefined
-  const anchor = __DEV__ ? createComment('if') : createTextNode()
+  const anchor = __DEV__
+    ? createComment(commentLabel || 'dynamic')
+    : createTextNode()
   const fragment: Fragment = shallowReactive({
     nodes: [],
     anchor,
@@ -32,9 +34,9 @@ export const createIf = (
   // }
 
   if (once) {
-    doIf()
+    doChange()
   } else {
-    renderEffect(() => doIf())
+    renderEffect(() => doChange())
   }
 
   // TODO: SSR
@@ -44,14 +46,15 @@ export const createIf = (
 
   return fragment
 
-  function doIf() {
-    if ((newValue = !!condition()) !== oldValue) {
+  function doChange() {
+    if ((newValue = expression()) !== oldValue) {
       const parent = anchor.parentNode
       if (block) {
         scope!.stop()
         remove(block, parent!)
       }
-      if ((branch = (oldValue = newValue) ? b1 : b2)) {
+      oldValue = newValue
+      if ((branch = render(newValue))) {
         scope = effectScope()
         fragment.nodes = block = scope.run(branch)!
         parent && insert(block, parent, anchor)
@@ -62,3 +65,19 @@ export const createIf = (
     }
   }
 }
+
+/*! #__NO_SIDE_EFFECTS__ */
+export function createIf(
+  condition: () => any,
+  b1: BlockFn,
+  b2?: BlockFn,
+  once?: boolean,
+  // hydrationNode?: Node,
+): Fragment {
+  return createBranch(
+    () => !!condition(),
+    value => (value ? b1 : b2),
+    once,
+    __DEV__ ? 'if' : undefined,
+  )
+}

packages/runtime-vapor/src/index.ts

@@ -126,7 +126,7 @@ export {
   type ObjectPlugin,
   type FunctionPlugin,
 } from './apiCreateVaporApp'
-export { createIf } from './apiCreateIf'
+export { createBranch, createIf } from './apiCreateIf'
 export { createFor, createForSlots } from './apiCreateFor'
 export { createComponent } from './apiCreateComponent'
 export { createSelector } from './apiCreateSelector'