|
|
@@ -9,37 +9,6 @@ import {
|
|
|
import { renderEffect } from './renderEffect'
|
|
|
import { DynamicFragment } from './fragment'
|
|
|
|
|
|
-const ifStack = [] as DynamicFragment[]
|
|
|
-const insertionParents = new WeakMap<DynamicFragment, Node[]>()
|
|
|
-
|
|
|
-/**
|
|
|
- * Collects insertionParents inside an if block during hydration
|
|
|
- * When the if condition becomes false on the client, clears the
|
|
|
- * HTML of these insertionParents to prevent duplicate rendering
|
|
|
- * results when the condition becomes true again
|
|
|
- *
|
|
|
- * Example:
|
|
|
- * const t2 = _template("<div></div>")
|
|
|
- * const n2 = _createIf(() => show.value, () => {
|
|
|
- * const n5 = t2()
|
|
|
- * _setInsertionState(n5)
|
|
|
- * const n4 = _createComponent(Comp) // renders `<span></span>`
|
|
|
- * return n5
|
|
|
- * })
|
|
|
- *
|
|
|
- * After hydration, the HTML of `n5` is `<div><span></span></div>` instead of `<div></div>`.
|
|
|
- * When `show.value` becomes false, the HTML of `n5` needs to be cleared,
|
|
|
- * to avoid duplicated rendering when `show.value` becomes true again.
|
|
|
- */
|
|
|
-export function collectInsertionParents(insertionParent: ParentNode): void {
|
|
|
- const currentIf = ifStack[ifStack.length - 1]
|
|
|
- if (currentIf) {
|
|
|
- let nodes = insertionParents.get(currentIf)
|
|
|
- if (!nodes) insertionParents.set(currentIf, (nodes = []))
|
|
|
- nodes.push(insertionParent)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
export function createIf(
|
|
|
condition: () => any,
|
|
|
b1: BlockFn,
|
|
|
@@ -61,19 +30,7 @@ export function createIf(
|
|
|
elseIf && isHydrating ? ELSE_IF_ANCHOR_LABEL : IF_ANCHOR_LABEL,
|
|
|
)
|
|
|
: new DynamicFragment()
|
|
|
- if (isHydrating) {
|
|
|
- ;(frag as DynamicFragment).teardown = () => {
|
|
|
- const nodes = insertionParents.get(frag as DynamicFragment)
|
|
|
- if (nodes) {
|
|
|
- nodes.forEach(p => ((p as Element).innerHTML = ''))
|
|
|
- insertionParents.delete(frag as DynamicFragment)
|
|
|
- }
|
|
|
- ;(frag as DynamicFragment).teardown = undefined
|
|
|
- }
|
|
|
- ifStack.push(frag as DynamicFragment)
|
|
|
- }
|
|
|
renderEffect(() => (frag as DynamicFragment).update(condition() ? b1 : b2))
|
|
|
- isHydrating && ifStack.pop()
|
|
|
}
|
|
|
|
|
|
if (!isHydrating) {
|