wip: update

Author: edison1105

packages/runtime-vapor/__tests__/hydration.spec.ts

@@ -1963,8 +1963,56 @@ describe('Vapor Mode hydration', () => {
         data,
       )
 
-      expect(container.innerHTML).toMatchInlineSnapshot(
-        `"<div><!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->hi</div>"`,
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `hi` +
+          `</div>`,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `bar` +
+          `</div>`,
+      )
+    })
+
+    test('mixed root slot and text node', async () => {
+      const data = reactive({
+        text: 'foo',
+        msg: 'hi',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.text}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template>{{data.text}}<slot/>{{data.msg}}</template>`,
+        },
+        data,
+      )
+
+      expect(container.innerHTML).toBe(
+        `<!--[-->` +
+          `foo` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `hi` +
+          `<!--]-->`,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<!--[-->` +
+          `foo` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `bar` +
+          `<!--]-->`,
       )
     })
 
@@ -1985,8 +2033,20 @@ describe('Vapor Mode hydration', () => {
         data,
       )
 
-      expect(container.innerHTML).toMatchInlineSnapshot(
-        `"<div><!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}--><div>hi</div></div>"`,
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `<div>hi</div>` +
+          `</div>`,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[--><span>foo</span><!--]--><!--${slotAnchorLabel}-->` +
+          `<div>bar</div>` +
+          `</div>`,
       )
     })
 
@@ -2024,6 +2084,7 @@ describe('Vapor Mode hydration', () => {
           `<div>bar</div>` +
           `</div>`,
       )
+
       data.msg2 = 'hello'
       await nextTick()
       expect(container.innerHTML).toBe(

packages/runtime-vapor/src/apiCreateDynamicComponent.ts

@@ -22,7 +22,10 @@ export function createDynamicComponent(
   const _insertionAnchor = insertionAnchor
   if (!isHydrating) resetInsertionState()
 
-  const frag = new DynamicFragment(DYNAMIC_COMPONENT_ANCHOR_LABEL)
+  const frag =
+    isHydrating || __DEV__
+      ? new DynamicFragment(DYNAMIC_COMPONENT_ANCHOR_LABEL)
+      : new DynamicFragment()
   renderEffect(() => {
     const value = getter()
     frag.update(

packages/runtime-vapor/src/apiCreateIf.ts

@@ -22,7 +22,10 @@ export function createIf(
   if (once) {
     frag = condition() ? b1() : b2 ? b2() : []
   } else {
-    frag = new DynamicFragment(IF_ANCHOR_LABEL)
+    frag =
+      isHydrating || __DEV__
+        ? new DynamicFragment(IF_ANCHOR_LABEL)
+        : new DynamicFragment()
     renderEffect(() => (frag as DynamicFragment).update(condition() ? b1 : b2))
   }
 

packages/runtime-vapor/src/componentSlots.ts

@@ -124,7 +124,10 @@ export function createSlot(
       fallback,
     )
   } else {
-    fragment = new DynamicFragment(SLOT_ANCHOR_LABEL)
+    fragment =
+      isHydrating || __DEV__
+        ? new DynamicFragment(SLOT_ANCHOR_LABEL)
+        : new DynamicFragment()
     const isDynamicName = isFunction(name)
     const renderSlot = () => {
       const slot = getSlot(rawSlots, isFunction(name) ? name() : name)

packages/runtime-vapor/src/dom/node.ts

@@ -79,7 +79,19 @@ function _next(node: Node): Node {
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function __next(node: Node): Node {
-  node = handleWrappedNode(node)
+  // process dynamic node (<!--[[-->...<!--]]-->) as a single node
+  if (isComment(node, DYNAMIC_START_ANCHOR_LABEL)) {
+    node = locateEndAnchor(
+      node,
+      DYNAMIC_START_ANCHOR_LABEL,
+      DYNAMIC_END_ANCHOR_LABEL,
+    )!
+  }
+
+  // process fragment (<!--[-->...<!--]-->) as a single node
+  else if (isComment(node, '[')) {
+    node = locateEndAnchor(node)!
+  }
 
   let n = node.nextSibling!
   while (n && isNonHydrationNode(n)) {
@@ -145,7 +157,7 @@ export function disableHydrationNodeLookup(): void {
 
 function isNonHydrationNode(node: Node) {
   return (
-    // empty text nodes, no need to hydrate
+    // empty text nodes
     isEmptyText(node) ||
     // dynamic node anchors (<!--[[-->, <!--]]-->)
     isDynamicAnchor(node) ||
@@ -168,21 +180,3 @@ export function findVaporFragmentAnchor(
 
   return null
 }
-
-function handleWrappedNode(node: Node): Node {
-  // process dynamic node (<!--[[-->...<!--]]-->) as a single one
-  if (isComment(node, DYNAMIC_START_ANCHOR_LABEL)) {
-    return locateEndAnchor(
-      node,
-      DYNAMIC_START_ANCHOR_LABEL,
-      DYNAMIC_END_ANCHOR_LABEL,
-    )!
-  }
-
-  // process fragment (<!--[-->...<!--]-->) as a single one
-  else if (isComment(node, '[')) {
-    return locateEndAnchor(node)!
-  }
-
-  return node
-}