@abide/abide 0.41.0 → 0.42.0

package/src/lib/ui/dom/applyResolved.ts

@@ -1,5 +1,5 @@
-import { RESUME } from '../runtime/RESUME.ts'
-import { seedStreamedResolution } from '../seedStreamedResolution.ts'
+import { seedResolved } from '../seedResolved.ts'
+import { isComment } from './isComment.ts'
 
 /*
 Bundle-side consumer of an SSR stream chunk, the counterpart of the doc stream's inline
@@ -31,7 +31,7 @@ export function applyResolved(root: Element, frame: string): void {
        bundle-consumed stream can't adopt a resolved branch while dropping its cache key. */
     if (resolved.nodeName === 'ABIDE-CACHE') {
         try {
-            seedStreamedResolution(JSON.parse(resolved.textContent ?? 'null'))
+            seedResolved({ kind: 'cache', resolution: JSON.parse(resolved.textContent ?? 'null') })
         } catch {
             /* malformed payload — leave unseeded; the read falls back to a live fetch */
         }
@@ -47,7 +47,7 @@ export function applyResolved(root: Element, frame: string): void {
        recording it lets a later hydrate adopt this branch (no re-fetch). */
     const payload = resolved.firstChild as Element | null
     if (payload !== null && payload.nodeName === 'SCRIPT') {
-        RESUME[Number(id)] = payload.textContent ?? ''
+        seedResolved({ kind: 'resume', id: Number(id), resume: payload.textContent ?? '' })
         payload.remove()
     }
     const open = `abide:await:${id}`
@@ -72,11 +72,6 @@ export function applyResolved(root: Element, frame: string): void {
     }
 }
 
-/* A comment node carrying exactly `data`. */
-function isComment(node: Node, data: string): boolean {
-    return (node as { data?: string }).data === data && node.childNodes.length === 0
-}
-
 /* Depth-first search for the parent + open-marker comment of a boundary. */
 function findBoundary(node: Node, open: string): { parent: Node; start: Node } | undefined {
     for (const child of [...node.childNodes]) {

package/src/lib/ui/dom/awaitBlock.ts

@@ -1,6 +1,7 @@
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import type { ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
@@ -8,14 +9,17 @@ import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { state } from '../state.ts'
+import { buildDetachedRange } from './buildDetachedRange.ts'
 import { discardBoundary } from './discardBoundary.ts'
-import { enterNamespace } from './enterNamespace.ts'
+import { removeRange } from './removeRange.ts'
 
 /*
 Async binding — the runtime for `<template await>`. Renders the pending branch,
 then swaps to the resolved branch (with the value) or the error branch on settle.
-Each branch is a RANGE of element roots, tracked as a node array so a multi-root
-branch inserts/removes as a unit.
+Each branch's content lives in a RANGE bounded by two comment markers (`[`…`]`), the
+same model `when`/`switch`/`each` use — so a multi-root branch inserts as a unit
+(`buildDetachedRange`) and detaches as a unit (`removeRange`), rather than tracking and
+removing a node array by hand.
 
 The read runs inside a abide-ui `effect`, so it's reactive: `abide/shared/cache`'s
 store subscribes the key it reads to this effect (createSubscriber is abide-ui-
@@ -49,7 +53,7 @@ export function awaitBlock(
     /* The live branch's scope, registered with the owner so it disposes on owner
        teardown — not only when a settle/re-run swaps branches via detach. */
     const group = scopeGroup()
-    let active: { nodes: Node[]; dispose: () => void } | undefined
+    let active: { start: Comment; end: Comment; dispose: () => void } | undefined
     let anchor: Node | undefined
     let first = true
     /* Bumped each run so a prior run's in-flight promise can't clobber a newer one. */
@@ -67,29 +71,26 @@ export function awaitBlock(
     const detach = (): void => {
         if (active !== undefined) {
             active.dispose()
-            /* Remove via each node's LIVE parent, not the captured `parent` — when this
-               await is a bare child of a control-flow branch, `parent` is the branch's
-               build fragment, emptied into the document once the enclosing block placed
-               it (`place` already inserts via `anchor.parentNode` for the same reason). */
-            for (const node of active.nodes) {
-                node.parentNode?.removeChild(node)
-            }
+            /* `removeRange` evicts the markers AND everything between them via the end
+               marker's LIVE parent — not the captured `parent`, which (when this await is a
+               bare child of a control-flow branch) is the branch's build fragment, emptied
+               into the document once the enclosing block placed it. */
+            removeRange(active.start, active.end)
             active = undefined
         }
     }
 
-    /* Replace the current content with a freshly-built branch, before the anchor. The
-       branch builds into a fragment (so any content — components, text, nested blocks
-       — appends freely), whose top-level nodes are tracked for the next swap. */
+    /* Replace the current content with a freshly-built branch, before the anchor. The branch
+       builds into a detached `[`…`]`-bracketed fragment (so any content — components, text,
+       nested blocks — appends freely), the same create primitive the keyed-list runtimes use,
+       which lands as a marker-bounded range the next swap detaches with `removeRange`. */
     const place = (build: (parent: Node) => void): void => {
         detach()
-        const fragment = document.createDocumentFragment()
-        const dispose = group.track(
-            enterNamespace(anchor?.parentNode ?? parent, () => scope(() => build(fragment))),
-        )
-        const nodes = [...fragment.childNodes]
-        ;(anchor?.parentNode ?? parent).insertBefore(fragment, anchor ?? null)
-        active = { nodes, dispose }
+        const namespaceParent = anchor?.parentNode ?? parent
+        const { start, end, fragment, dispose } = buildDetachedRange(namespaceParent, build)
+        const tracked = group.track(dispose)
+        namespaceParent.insertBefore(fragment, anchor ?? null)
+        active = { start, end, dispose: tracked }
     }
 
     /* Settle to a resolved value. then→then updates the cell in place — the branch and its
@@ -151,23 +152,28 @@ export function awaitBlock(
         )
     }
 
-    /* Adopt an SSR-resolved branch in place (its content claims the existing nodes),
-       then park an anchor just before the close marker for later swaps. The adopted
-       content is everything the build claimed between the open and close markers. */
+    /* Adopt an SSR-resolved branch in place (its content claims the existing nodes), then
+       wrap the adopted region in `[`…`]` markers and park an anchor just before the close
+       marker for later swaps. The adopted content is everything the build claimed between
+       the open and close markers; bracketing it makes the adopted branch a marker-bounded
+       range identical to a freshly-`place`d one, so the FIRST swap detaches it with
+       `removeRange` like every later swap (no node-array special case). */
     const adopt = (open: Node | null, build: (parent: Node) => void): void => {
         const cursor = hydration as NonNullable<typeof hydration>
-        cursor.next.set(parent, open?.nextSibling ?? null)
+        const firstAdopted = open?.nextSibling ?? null
+        cursor.next.set(parent, firstAdopted)
         const dispose = group.track(scope(() => build(parent)))
         const close = claimChild(cursor, parent)
         cursor.next.set(parent, close?.nextSibling ?? null)
-        const nodes: Node[] = []
-        for (let node = open?.nextSibling ?? null; node !== null && node !== close; ) {
-            nodes.push(node)
-            node = node.nextSibling
-        }
+        /* Bracket the adopted nodes: `[` before the first claimed node (or before `close`
+           for an empty branch), `]` then the anchor just before `close`. */
+        const start = document.createComment(RANGE_OPEN)
+        parent.insertBefore(start, firstAdopted ?? close)
+        const end = document.createComment(RANGE_CLOSE)
+        parent.insertBefore(end, close)
         anchor = document.createTextNode('')
         parent.insertBefore(anchor, close)
-        active = { nodes, dispose }
+        active = { start, end, dispose }
     }
 
     /* Discard the SSR boundary and (re)build the block from the live promise, fresh

package/src/lib/ui/dom/buildDetachedRange.ts

@@ -0,0 +1,30 @@
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
+import { scope } from '../runtime/scope.ts'
+import { enterNamespace } from './enterNamespace.ts'
+
+/*
+Builds a `[ … ]`-bounded content range into a DETACHED fragment under a fresh reactive
+scope, then returns the markers, the fragment, and the scope disposer — leaving
+INSERTION to the caller. The create-path range builder for the keyed list runtimes
+(`each` / `eachAsync`): `each` holds the fragment in `pending` for deferred placement
+(its reconcile reorders rows), `eachAsync` inserts it immediately at the stream anchor
+(arrival order). Both need the same bracketed-fragment build, so it lives here once.
+
+Unlike `openMarker`, this never touches a live parent or the hydrate claim cursor — the
+markers are created fresh and parked in a fragment — so it is a pure CREATE primitive;
+the hydrate paths claim their server markers directly. `namespaceParent` sets the
+ambient foreign namespace for the build (a row's svg/math children read it off the
+fragment's eventual parent), matching `fillBefore`/`enterNamespace`.
+*/
+export function buildDetachedRange(
+    namespaceParent: Node,
+    build: (into: Node) => void,
+): { start: Comment; end: Comment; fragment: DocumentFragment; dispose: () => void } {
+    const start = document.createComment(RANGE_OPEN)
+    const end = document.createComment(RANGE_CLOSE)
+    const fragment = document.createDocumentFragment()
+    fragment.appendChild(start)
+    const dispose = enterNamespace(namespaceParent, () => scope(() => build(fragment)))
+    fragment.appendChild(end)
+    return { start, end, fragment, dispose }
+}

package/src/lib/ui/dom/depthZeroNodes.ts

@@ -0,0 +1,34 @@
+import { commentData } from './commentData.ts'
+import { markerDepthDelta } from './markerDepthDelta.ts'
+
+/*
+A sibling list's DEPTH-0 nodes — those belonging to THIS skeleton's own structure, excluding
+any node inside a block/component's `[`…`]` / `abide:` range (depth > 0), whose anchors belong
+to that range's OWN skeleton. The realized-DOM analogue of the compiler's fresh-context
+boundary: the shared anchor walk (`walkAnchorOrder`) classifies one node at a time and so can't
+skip a sibling RUN, so the marker-depth skip lives here, feeding the walk only own-skeleton
+nodes. In create mode the clone is shallow (no markers built yet), so depth stays 0 and every
+node is returned — a plain document scan.
+*/
+export function depthZeroNodes(nodes: ArrayLike<Node>): Node[] {
+    const own: Node[] = []
+    let depth = 0
+    for (let index = 0; index < nodes.length; index += 1) {
+        const node = nodes[index] as Node
+        const data = commentData(node)
+        if (data === undefined) {
+            if (depth === 0) {
+                own.push(node)
+            }
+            continue
+        }
+        const delta = markerDepthDelta(data)
+        if (delta !== 0) {
+            depth += delta
+        } else if (depth === 0) {
+            /* A non-marker comment (this skeleton's own `a` anchor) at depth 0. */
+            own.push(node)
+        }
+    }
+    return own
+}

package/src/lib/ui/dom/domAnchorAdapter.ts

@@ -0,0 +1,29 @@
+import type { AnchorRole, AnchorWalkAdapter } from '../compile/walkAnchorOrder.ts'
+import { ANCHOR } from '../runtime/RANGE_MARKER.ts'
+import { commentData } from './commentData.ts'
+import { depthZeroNodes } from './depthZeroNodes.ts'
+import { isElement } from './isElement.ts'
+
+/*
+The realized-DOM side of the shared anchor-ordering rule (`walkAnchorOrder`). Classifies each
+recovered node by the SAME positions the template-AST side numbered (`templateAnchorAdapter`),
+so `scanAnchors`'s collection lines up with the compiler's `anIndex`.
+
+An `a` comment is this skeleton's own anchor (one position); an element is an own-skeleton
+container to descend; anything else contributes nothing. `childrenOf` returns only depth-0
+nodes — a nested block/component's marker-bracketed content is skipped exactly as the compiler
+stops at a fresh-context boundary.
+*/
+export const domAnchorAdapter: AnchorWalkAdapter<Node> = {
+    classify: (node: Node): AnchorRole => {
+        const data = commentData(node)
+        if (data === ANCHOR) {
+            return { kind: 'anchor', positions: [node] }
+        }
+        if (data === undefined && isElement(node)) {
+            return { kind: 'recurse' }
+        }
+        return { kind: 'skip' }
+    },
+    childrenOf: (node: Node): readonly Node[] => depthZeroNodes(node.childNodes),
+}

package/src/lib/ui/dom/domElementAdapter.ts

@@ -0,0 +1,20 @@
+import type { ElementRole, ElementWalkAdapter } from '../compile/walkElementOrder.ts'
+import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
+import { isElement } from './isElement.ts'
+
+/*
+The parsed-DOM side of the shared element-hole numbering rule (`walkElementOrder`). Classifies
+each node of the parsed skeleton by the SAME holes the template-AST side numbered
+(`templateElementAdapter`), so the runtime's collected element paths line up with the compiler's
+`elIndex`. Runs over the SHALLOW parsed skeleton (blocks/components/slots are already `<!--a-->`
+anchors, not elements), so a `HOLE_ATTRIBUTE` element is a hole and every element is descended;
+everything else skips. The collected paths resolve against the expanded server DOM separately
+(`resolveElementHole`, which skips nested ranges there).
+*/
+export const domElementAdapter: ElementWalkAdapter<Node> = {
+    classify: (node: Node): ElementRole =>
+        isElement(node)
+            ? { kind: 'element', isHole: node.hasAttribute(HOLE_ATTRIBUTE) }
+            : { kind: 'skip' },
+    childrenOf: (node: Node): readonly Node[] => Array.from(node.childNodes),
+}

package/src/lib/ui/dom/each.ts

@@ -6,7 +6,7 @@ import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { state } from '../state.ts'
-import { enterNamespace } from './enterNamespace.ts'
+import { buildDetachedRange } from './buildDetachedRange.ts'
 import { moveRange } from './moveRange.ts'
 import { removeRange } from './removeRange.ts'
 import type { EachRow } from './types/EachRow.ts'
@@ -70,17 +70,13 @@ export function each<T>(
             hydration.next.set(parent, end.nextSibling)
             return { start, end, dispose, cell, indexCell }
         }
-        const start = document.createComment('[')
-        const end = document.createComment(']')
-        const pending = document.createDocumentFragment()
-        pending.appendChild(start)
-        /* Build under `parent`'s foreign namespace so foreign row elements (svg/math)
-           built into the detached fragment are namespaced, not built as HTML. */
-        const dispose = group.track(
-            enterNamespace(parent, () => scope(() => render(pending, cell as State<T>, indexCell))),
+        /* Shared detached-range create primitive: a `[ … ]` fragment built under `parent`'s
+           foreign namespace (so svg/math row children are namespaced, not built as HTML),
+           held in `pending` until placement inserts it. */
+        const { start, end, fragment, dispose } = buildDetachedRange(parent, (host) =>
+            render(host, cell as State<T>, indexCell),
         )
-        pending.appendChild(end)
-        return { start, end, dispose, cell, indexCell, pending }
+        return { start, end, dispose: group.track(dispose), cell, indexCell, pending: fragment }
     }
 
     /* Place a row so its range ends just before `cursor`: insert a fresh row's

package/src/lib/ui/dom/eachAsync.ts

@@ -2,11 +2,10 @@ import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { state } from '../state.ts'
-import { enterNamespace } from './enterNamespace.ts'
+import { buildDetachedRange } from './buildDetachedRange.ts'
 import { removeRange } from './removeRange.ts'
 import type { EachRow } from './types/EachRow.ts'
 
@@ -49,24 +48,20 @@ export function eachAsync<T>(
         parent.insertBefore(anchor, before) // `before` places rows before a static suffix
     }
 
-    /* Build a content range and insert it just before the anchor (arrival order). A bare
-       range (no item cell) — the data-row site adds the cell, the error branch needs none. */
+    /* Build a content range (the shared detached-range create primitive) and insert it
+       just before the anchor (arrival order). A bare range (no item cell) — the data-row
+       site adds the cell, the error branch needs none. */
     const insertRange = (
         build: (into: Node) => void,
     ): { start: Node; end: Node; dispose: () => void } => {
-        const start = document.createComment('[')
-        const end = document.createComment(']')
-        const fragment = document.createDocumentFragment()
-        fragment.appendChild(start)
-        const dispose = group.track(
-            enterNamespace(anchor.parentNode ?? parent, () => scope(() => build(fragment))),
-        )
-        fragment.appendChild(end)
-        /* Insert via the anchor's LIVE parent: when this `each` is a bare child of a
-           control-flow branch, the captured `parent` is the branch's build fragment,
-           emptied into the document once the enclosing block placed it. */
-        ;(anchor.parentNode ?? parent).insertBefore(fragment, anchor)
-        return { start, end, dispose }
+        /* Namespace the build off the anchor's LIVE parent, and insert there too: when this
+           `each` is a bare child of a control-flow branch, the captured `parent` is the
+           branch's build fragment, emptied into the document once the enclosing block
+           placed it. */
+        const host = anchor.parentNode ?? parent
+        const { start, end, fragment, dispose } = buildDetachedRange(host, build)
+        host.insertBefore(fragment, anchor)
+        return { start, end, dispose: group.track(dispose) }
     }
 
     /* The mounted `<template catch>` range, disposed when a fresh run re-streams. */

package/src/lib/ui/dom/isComment.ts

@@ -0,0 +1,6 @@
+/* A comment node carrying exactly `data`. Empty-child check distinguishes the
+   `<!--data-->` marker from an element that happens to expose a `data` property.
+   Shared by the marker-range scanners in appendText/applyResolved. */
+export function isComment(node: Node, data: string): boolean {
+    return (node as { data?: string }).data === data && node.childNodes.length === 0
+}

package/src/lib/ui/dom/isElement.ts

@@ -0,0 +1,6 @@
+/* An element carries `hasAttribute`; comment/text nodes do not. Detected by method (not
+   `nodeType`) so every skeleton walk runs under the test mini-dom too. Shared by the
+   element-hole path resolver (`skeleton`) and both realized-DOM walk adapters. */
+export function isElement(node: Node): node is Element {
+    return typeof (node as Element).hasAttribute === 'function'
+}

package/src/lib/ui/dom/markerDepthDelta.ts

@@ -0,0 +1,19 @@
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
+
+/* The block-range nesting rule, the single source both marker-depth scans share
+   (`depthZeroNodes`'s anchor filter and `skeleton`'s `elementChildAt` element walk):
+   `+1` opening a range, `-1` closing one, `0` for any other comment. A control-flow
+   block's rendered content sits between an OPEN and CLOSE comment — `[`…`]` for each
+   rows / if / switch / slot ranges, named `abide:…`…`/abide:…` for await / try /
+   snippet / html; the skeleton's own anchor (`a`) sits OUTSIDE any range, so it scores
+   `0`. Keeping the rule here means a new marker family updates one place, so the two
+   scans can never disagree on what nests. */
+export function markerDepthDelta(data: string): number {
+    if (data === RANGE_CLOSE || data.startsWith('/abide:')) {
+        return -1
+    }
+    if (data === RANGE_OPEN || data.startsWith('abide:')) {
+        return 1
+    }
+    return 0
+}

package/src/lib/ui/dom/mountRange.ts

@@ -1,3 +1,4 @@
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import type { UiProps } from '../runtime/types/UiProps.ts'
@@ -31,15 +32,15 @@ export function mountRange(
     label: string | undefined = undefined,
 ): { start: Comment; end: Comment; dispose: () => void } {
     const hydration = RENDER.hydration
-    const start = openMarker(parent, '[', before)
+    const start = openMarker(parent, RANGE_OPEN, before)
     if (hydration === undefined) {
-        const end = openMarker(parent, ']', before)
+        const end = openMarker(parent, RANGE_CLOSE, before)
         return fillRange(start, end, build, props, label)
     }
     /* Hydrate: adopt the server range in place. Establish the child's lexical scope
        and render pass (same as `fillRange`), build claiming the existing nodes, then
        claim the end marker the build's content stops before. */
     const scoped = withScope(label, () => scope(() => build(parent, props)))
-    const end = openMarker(parent, ']')
+    const end = openMarker(parent, RANGE_CLOSE)
     return { start, end, dispose: disposeRange(scoped, start, end) }
 }

package/src/lib/ui/dom/mountSlot.ts

@@ -1,3 +1,4 @@
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
@@ -26,12 +27,12 @@ export function mountSlot(
        dispose on owner teardown (a navigation) — the slot never toggles, so the
        group only ever tracks this one child. */
     const group = scopeGroup()
-    openMarker(parent, '[', before)
+    openMarker(parent, RANGE_OPEN, before)
     if (hydration !== undefined) {
         group.track(scope(() => render(parent))) // content claims the SSR range in place
-        openMarker(parent, ']')
+        openMarker(parent, RANGE_CLOSE)
     } else {
-        const end = openMarker(parent, ']', before)
+        const end = openMarker(parent, RANGE_CLOSE, before)
         group.track(fillBefore(end, render))
     }
 }

package/src/lib/ui/dom/on.ts

@@ -1,3 +1,4 @@
+import { batch } from '../runtime/batch.ts'
 import { CURRENT_SCOPE } from '../runtime/CURRENT_SCOPE.ts'
 import { inScope } from '../runtime/inScope.ts'
 import { OWNER } from '../runtime/OWNER.ts'
@@ -20,7 +21,11 @@ export function on(element: Element, type: string, handler: EventListener): void
         return
     }
     const captured = CURRENT_SCOPE.current
-    const wrapped: EventListener = (event) => inScope(captured, () => handler(event))
+    /* Coalesce the handler's writes: a handler setting several signals re-runs each
+       dependent effect once on batch exit, not once per write (the unbatched default
+       flushed eagerly per `trigger`). Stays synchronous — flush runs at handler-end
+       before it returns, so the causal stack (dispatch → handler → effects) is intact. */
+    const wrapped: EventListener = (event) => inScope(captured, () => batch(() => handler(event)))
     element.addEventListener(type, wrapped)
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => element.removeEventListener(type, wrapped))

package/src/lib/ui/dom/replaceRange.ts

@@ -0,0 +1,24 @@
+import { clearBetween } from './clearBetween.ts'
+import { fillBefore } from './fillBefore.ts'
+
+/*
+The one "replace a marker-bounded region's contents" operation. A control-flow block
+that swaps a branch as a unit (if/else, switch, snippet) clears the live range
+(disposing its scope and removing its nodes via `clearBetween`), then — if the new
+branch has content — builds it fresh into the range before the close marker
+(`fillBefore`). Returns the new content's disposer, or `undefined` for an empty
+branch.
+
+This is the single seam those blocks shared by copy-paste: same `clearBetween` +
+conditional `fillBefore` shape, hand-rolled three times. Routing them through one
+helper makes the region-update strategy a named, testable primitive.
+*/
+export function replaceRange(
+    start: Node,
+    end: Node,
+    dispose: (() => void) | undefined,
+    content: ((into: Node) => void) | undefined,
+): (() => void) | undefined {
+    clearBetween(start, end, dispose)
+    return content !== undefined ? fillBefore(end, content) : undefined
+}