@microsoft/webui-framework 0.0.18 → 0.0.19

package/README.md

@@ -87,16 +87,21 @@ Build with `--dom=shadow` (default) to wrap in a declarative shadow root, or `--
 <counter-card label="Taps"></counter-card>
 ```
 
-### HTML-only components
+### HTML-only dormant components
 
 If a component has no event handlers, custom lifecycle code, or client-only
 methods, it can ship only `component.html` and optional `component.css`.
 
-When HTML-only components receive server or route state, import
-`@microsoft/webui-framework` somewhere in the browser entry. The framework root
-installs the static host runtime, which only claims compiler-owned HTML-only
-components whose templates need hidden state or observed host attributes. Fully
-static HTML-only components stay as plain SSR DOM.
+The sibling `.ts` or `.js` file is the authored behavior boundary. With
+manifest-enabled projection, only `@observable` and `@attr` fields opt into
+initial state hydration; template-only roots stay in the trusted SSR DOM.
+Without a module, template bindings render on the server and the component
+contributes no projected keys. Without projection metadata, the server
+preserves full state. The compiler still emits template metadata for scriptless
+components. When the framework is loaded, it can activate that template when
+browser state or client-side creation needs it.
+If that first write omits a repeat collection, the host preserves the existing
+SSR items until the collection is explicitly supplied.
 
 Create a custom element only for an Interactive Island: event handlers, custom
 lifecycle code, imperative methods, or state that TypeScript code reads or
@@ -111,9 +116,15 @@ cargo run -p microsoft-webui-cli -- build ./src --out ./dist --plugin=webui
 
 The WebUI plugin prepares component templates for the browser. Bundle your
 source browser entry directly. Import `@microsoft/webui-framework` from authored
-component modules, or once from the browser entry when the app has no authored
-components but still uses HTML-only components that receive server or route
-state.
+component modules. An app that stays static after SSR needs no framework
+browser import. Import the framework once when HTML-only components must accept
+browser state or participate in soft navigation.
+
+The plugin alone preserves full server state. To emit exact `@observable` and
+`@attr` state surfaces, run the application's bundler first with
+`@microsoft/webui/projection.js`, then pass its manifest to `webui build` with
+`--projection-manifest`. The manifest tooling is build-only; this runtime
+package does not depend on esbuild or TypeScript.
 
 ### Property binding lifecycle
 
@@ -140,6 +151,13 @@ development-only and is dead-code-eliminated from production bundles via the
 `false`). See the
 [Interactivity Guide](https://microsoft.github.io/webui/guide/concepts/interactivity#setting-observable-state-during-setup).
 
+`super.connectedCallback()` is the synchronous hydration boundary for an
+authored component. When it returns, bindings, events, and `w-ref` references
+are wired. Use a parser-inserted, non-async ES module script or a classic
+`defer` script. A blocking classic script must follow every SSR instance it may
+upgrade. Descendants must not structurally mutate a containing component's SSR
+subtree before it hydrates, because hydration relies on stable compiled paths.
+
 ### DOM strategy (`--dom`)
 
 The `--dom` flag controls how the server renders component content:
@@ -240,6 +258,7 @@ Notes:
 
 - default attribute names use kebab-case
 - attribute values arrive as strings
+- during SSR hydration, an existing host attribute wins over projected state
 - use `@observable` for state that client code reads or mutates
 
 ### `@volatile`
@@ -269,7 +288,8 @@ The WebUI plugin supports these template features:
 - repeats: `<for each="item in items">`
 
 Components that use `@event` must have authored `.ts` or `.js` code that
-defines a `WebUIElement` for the tag; HTML-only components are declarative only.
+defines a `WebUIElement` for the tag. HTML-only components do not provide
+application event handlers.
 
 Example from `examples/app/todo-webui`:
 
@@ -302,8 +322,10 @@ Root-level events (e.g. `@toggle-item="{onToggleItem(e)}"`) can be declared on t
 - Use `w-ref` for true DOM-only concerns like focus or reading input values.
 - Omit `@observable` for values that are only read by the template and seeded
   externally after construction.
-- Omit the TypeScript class for HTML-only components that only need template
-  bindings and router/server state.
+- Omit the TypeScript class when compiled template behavior is sufficient,
+  including browser-applied state, route updates, and client-created instances.
+  Add a same-named module only for authored events, lifecycle, decorators, or
+  imperative APIs.
 
 Avoid imperative DOM mutation for application state that can be represented by reactive properties.
 
@@ -437,7 +459,7 @@ flowchart LR
 graph TD
     EL["element.ts (~850 lines)<br/><i>Orchestrator</i><br/>$mount, $wire, $hydrate,<br/>$resolveSSR, $applySSRState,<br/>$update, events, cleanup"]
 
-    DIFF["element/diff.ts (~130 lines)<br/><i>List Reconciliation</i><br/>keyed/sequential diffing<br/>for @for repeat blocks"]
+    DIFF["element/diff.ts<br/><i>List Reconciliation</i><br/>positional + explicit-key diffing<br/>for &lt;for&gt; repeat blocks"]
 
     COND["element/conditions.ts<br/><i>Condition Evaluation</i><br/>evaluateCondition (iterative),<br/>conditionUsesPath"]
 
@@ -484,7 +506,7 @@ sequenceDiagram
     CE->>CE: attributeChangedCallback (pre-existing attrs)
     CE->>FW: connectedCallback() → $mount()
     FW->>FW: SSR DOM detected (shadow root or children exist)
-    FW->>FW: $applySSRState() — seed decorated + template state
+    FW->>FW: $applySSRState() — seed decorated state
     FW->>FW: $hydrate() — template-parallel path resolution
     FW->>FW: $resolveSSR() — match SSR nodes via ordinal traversal
     FW->>FW: $wireEvents() + $wireRefs()
@@ -538,7 +560,8 @@ interface TemplateMeta {
   sa?: string;                         // Adopted stylesheet specifier
   sd?: boolean;                        // Shadow DOM flag for client-created
   re?: [event, handler, argSpecs][];    // Root-level events
-  th?: 1;                               // Compiler-owned static host
+  tr?: string[];                       // Template state roots
+  ta?: string[];                       // Host attributes aligned with tr
 }
 ```
 
@@ -635,61 +658,53 @@ sees `42` in the DOM before the component's JavaScript state exists. Without
 seeding, the first `$update()` would overwrite the SSR content with the wrong
 value.
 
-State seeding uses `window.__webui.state` — a JSON object loaded from the
-server-emitted `#webui-data` block.  Like Preact's props, this delivers the
-same data used for SSR rendering to the client. During `$mount()`,
-`$applySSRState()` writes matching decorated keys directly to observable backing
-fields and stores undecorated template roots in hidden framework state before
-any bindings are wired:
+State seeding uses `window.__webui.state` loaded from the server-emitted
+`#webui-data` block. When the protocol contains projection metadata, only
+`@observable` and `@attr` keys from reachable authored components select
+initial state; HTML-only dormant components and authored template-only roots
+contribute no startup keys. Without projection metadata, the server preserves
+full state. During `$mount()`, `$applySSRState()` writes matching decorated keys
+directly to observable backing fields before any bindings are wired:
 
 ```mermaid
 flowchart LR
-    SCRIPT["&lt;script type='application/json' id='webui-data'&gt;<br/>{ state: { count: 42, title: 'Hello' } }"] --> APPLY["$applySSRState()"]
-    APPLY --> SEED["Write decorated fields + hidden template state"]
+    SCRIPT["&lt;script type='application/json' id='webui-data'&gt;<br/>{ state: { count: 42 } }"] --> APPLY["$applySSRState()"]
+    APPLY --> SEED["Write decorated backing fields"]
     SEED --> HYDRATE["$hydrate() — bindings match<br/>server-rendered DOM"]
 ```
 
-`$applySSRState()` only accepts keys that are decorated properties or compiled
-template roots. Unknown keys are ignored. Decorated writes go to the backing
-field (`_prop`) directly, and undecorated template roots stay internal, avoiding
-reactive updates before bindings are wired.
+Decorated writes go to the backing field (`_prop`) directly, avoiding reactive
+updates before bindings are wired. For `@attr`, an existing SSR host attribute
+takes precedence and the projected value is skipped. Template-only values
+remain represented by the SSR DOM until browser state explicitly changes them.
+Later `setState()` calls, including router partials, accept both decorated
+properties and compiled template roots; undecorated roots are stored in hidden
+framework state. The first write to a dormant HTML-only host replays only the
+roots present in that write, preserving omitted SSR text, attributes,
+conditions, and repeats.
 
 ---
 
 ## Repeat Reconciliation
 
-`@for(item of items)` blocks support two reconciliation strategies,
-implemented in `element/diff.ts` (~130 lines):
-
-### Keyed Reconciliation
-
-When the repeat block's root element has attribute bindings (e.g.
-`<todo-item id="{{item.id}}">`), the framework uses the first attribute as a
-key.  This preserves DOM nodes across reorders:
-
-```mermaid
-flowchart TD
-    subgraph Before ["Before: items = [A, B, C]"]
-        A1["&lt;todo-item&gt; key=A"]
-        B1["&lt;todo-item&gt; key=B"]
-        C1["&lt;todo-item&gt; key=C"]
-    end
-
-    subgraph After ["After: items = [C, A]"]
-        C2["&lt;todo-item&gt; key=C ← reused"]
-        A2["&lt;todo-item&gt; key=A ← reused"]
-        B2["key=B ← removed"]
-    end
-
-    A1 -.->|"moved"| A2
-    C1 -.->|"moved"| C2
-    B1 -.->|"destroyed"| B2
-```
-
-### Sequential Reconciliation
-
-When no keying attributes exist, items are matched by position.  Excess items
-are removed; new items are appended.
+`<for>` blocks reconcile by array position by default. The existing block at
+index `i` receives the current item at index `i`; only a new or removed tail
+creates or removes blocks.
+
+Duplicate values and attributes are safe because dynamic attributes never act
+as hidden keys. Reordering rebinds existing blocks in place, so local
+browser-owned or component state remains associated with positions rather than
+logical items.
+
+For reorderable or stateful lists, author `key="{{item.id}}"` on the first
+child inside `<for>` to move existing blocks with their logical items.
+`key="{{item}}"` supports arrays of unique string or finite-number primitives.
+`key` is compiler-only metadata and is removed from SSR and client HTML;
+`data-key` remains an ordinary attribute with no identity semantics. Key paths
+are compiler-validated and stored only for explicitly keyed repeats, so
+unkeyed bindings carry no key state or map allocation. Duplicate or invalid
+runtime keys warn once, clear identity, and use positional reconciliation until
+valid identity is re-established.
 
 ### SSR State Reading
 
@@ -763,7 +778,7 @@ This template-parallel traversal eliminates the need for any marker comments,
 | Initial hydration | O(bindings) | Single pass over compiled path mappings |
 | Reactive update | O(affected) | Per-path index skips unrelated bindings |
 | Conditional toggle | O(block size) | Create/destroy a block instance |
-| Repeat reconciliation | O(items) | Keyed map lookup or sequential scan |
+| Repeat reconciliation | O(items) | Positional scan; explicit keys use a reusable map only when order changes |
 | Event wiring | O(events) | One-time during hydration |
 
 ### What the framework does NOT do

package/dist/decorators.d.ts

@@ -1,6 +1,7 @@
 export declare function toKebabCase(str: string): string;
 export declare function getObservableNames(ctor: Function): Set<string>;
 export declare function isAttributeProperty(ctor: Function, property: string): boolean;
+export declare function attributeNameForProperty(ctor: Function, property: string): string | undefined;
 export declare function syncAttrProperties(instance: object, ctor: Function): void;
 export declare function observable(target: object, name: string): void;
 export interface AttrOptions {

package/dist/decorators.js

@@ -94,6 +94,9 @@ function attrPropertyMapFor(ctor) {
 export function isAttributeProperty(ctor, property) {
     return attrPropertyMapFor(ctor)?.has(property) === true;
 }
+export function attributeNameForProperty(ctor, property) {
+    return attrPropertyMapFor(ctor)?.get(property)?.attribute;
+}
 function setReflectingAttribute(instance, attrName) {
     instance[reflectingAttribute] = attrName;
 }

package/dist/element/diff.d.ts

@@ -1,3 +1,5 @@
-import type { RepeatBinding, RepeatHost } from './types.js';
+import type { RepeatBinding, RepeatHost, RepeatKeyState } from './types.js';
 export declare function dotWalk(cursor: unknown, path: string, from: number): unknown;
+export declare function createRepeatKeyState(path: string): RepeatKeyState;
+export declare function seedHydratedRepeatKeys(rep: RepeatBinding, items: unknown[]): void;
 export declare function syncRepeat(host: RepeatHost, rep: RepeatBinding): void;

package/dist/element/diff.js

@@ -1,8 +1,3 @@
-function asParent(node) {
-    if (!node)
-        return null;
-    return 'childNodes' in node ? node : null;
-}
 export function dotWalk(cursor, path, from) {
     let start = from;
     for (let i = from; i <= path.length; i++) {
@@ -15,111 +10,223 @@ export function dotWalk(cursor, path, from) {
     }
     return cursor;
 }
-function itemKey(item, keyPath) {
-    if (keyPath === undefined || keyPath === '')
-        return null;
-    const v = dotWalk(item, keyPath, 0);
-    return v != null ? String(v) : '';
-}
 function itemScope(rep, item) {
-    return { name: rep.itemVar, value: item, parent: rep.scope };
+    return { name: rep.itemVar, value: item, parent: rep.scope, known: true };
 }
-export function syncRepeat(host, rep) {
-    const resolved = host.$resolveValue(rep.collection, rep.scope);
-    const items = Array.isArray(resolved) ? resolved : [];
-    let container = rep.container
-        ?? (rep.start ? asParent(rep.start.parentNode) : null)
-        ?? (rep.owner.nodes[0] ? asParent(rep.owner.nodes[0].parentNode) : null);
-    if (!container)
+export function createRepeatKeyState(path) {
+    return {
+        path,
+        warned: false,
+        keys: [],
+        nextKeys: [],
+        map: new Map(),
+    };
+}
+export function seedHydratedRepeatKeys(rep, items) {
+    const state = rep.keyState;
+    if (!state || items.length !== rep.instances.length)
         return;
-    rep.container = container;
-    if (!rep.synced && items.length === 0 && rep.instances.length > 0)
+    if (!collectRepeatKeys(items, state))
         return;
-    rep.synced = true;
-    if (items.length === 0) {
-        for (let i = 0; i < rep.instances.length; i += 1) {
-            host.$removeInstance(rep.instances[i].instance);
-        }
-        rep.instances = [];
+    commitKeyIdentity(state);
+}
+function setItemScope(instance, item) {
+    if (!instance.scope)
         return;
+    instance.scope.value = item;
+    instance.scope.known = true;
+}
+function syncPositional(host, rep, items, container) {
+    const instances = rep.instances;
+    const oldLength = instances.length;
+    const reuseCount = Math.min(oldLength, items.length);
+    let nextCount = reuseCount;
+    let created = false;
+    for (let i = 0; i < reuseCount; i += 1) {
+        setItemScope(instances[i], items[i]);
     }
-    const keyPath = rep.keyPath;
-    const hasKeys = keyPath !== undefined && keyPath !== '';
-    const oldInstances = rep.instances;
-    if (!hasKeys) {
-        const oldLength = oldInstances.length;
-        const reuseCount = Math.min(oldLength, items.length);
-        let nextCount = reuseCount;
-        for (let i = 0; i < reuseCount; i += 1) {
-            const entry = oldInstances[i];
-            entry.value = items[i];
-            if (entry.instance.scope)
-                entry.instance.scope.value = items[i];
-        }
-        for (let i = reuseCount; i < items.length; i += 1) {
-            const scope = itemScope(rep, items[i]);
-            const instance = host.$createBlockInstance(rep.blockIndex, scope);
-            if (instance) {
-                oldInstances[nextCount] = { key: null, value: items[i], instance };
-                nextCount += 1;
-            }
+    for (let i = reuseCount; i < items.length; i += 1) {
+        const instance = host.$createBlockInstance(rep.blockIndex, itemScope(rep, items[i]), rep.owner, container);
+        if (instance) {
+            instances[nextCount] = instance;
+            nextCount += 1;
+            created = true;
         }
-        for (let i = reuseCount; i < oldLength; i += 1) {
-            host.$removeInstance(oldInstances[i].instance);
+    }
+    for (let i = reuseCount; i < oldLength; i += 1) {
+        host.$removeInstance(instances[i]);
+    }
+    instances.length = nextCount;
+    const removed = oldLength > reuseCount;
+    let cursor = rep.start;
+    for (let i = 0; i < instances.length; i += 1) {
+        cursor = host.$insertInstanceAfter(cursor, container, instances[i]);
+    }
+    for (let i = 0; i < reuseCount; i += 1) {
+        host.$updateInstance(instances[i]);
+    }
+    if (created || removed)
+        host.$changeStructure(removed ? rep.owner : undefined);
+}
+function readRepeatKey(item, path) {
+    if (path.length === 0)
+        return item;
+    return dotWalk(item, path, 0);
+}
+function isRepeatKey(value) {
+    return (typeof value === 'string' ||
+        (typeof value === 'number' && Number.isFinite(value)));
+}
+function collectRepeatKeys(items, state) {
+    const keys = state.nextKeys;
+    const seen = state.map;
+    keys.length = items.length;
+    seen.clear();
+    for (let i = 0; i < items.length; i += 1) {
+        let value;
+        try {
+            value = readRepeatKey(items[i], state.path);
         }
-        oldInstances.length = nextCount;
-        let cursor = rep.start;
-        for (let i = 0; i < oldInstances.length; i += 1) {
-            cursor = host.$insertInstanceAfter(cursor, container, oldInstances[i].instance);
+        catch {
+            keys.length = 0;
+            seen.clear();
+            return false;
         }
-        for (let i = 0; i < reuseCount; i += 1) {
-            host.$updateInstance(oldInstances[i].instance);
+        if (!isRepeatKey(value) || seen.has(value)) {
+            keys.length = 0;
+            seen.clear();
+            return false;
         }
-        return;
-    }
-    const oldByKey = new Map();
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        const entry = oldInstances[i];
-        const k = entry.key;
-        if (k != null)
-            oldByKey.set(k, entry);
+        keys[i] = value;
+        seen.set(value, null);
     }
+    seen.clear();
+    return true;
+}
+function commitKeyIdentity(state) {
+    const oldKeys = state.keys;
+    state.keys = state.nextKeys;
+    state.nextKeys = oldKeys;
+    state.nextKeys.length = 0;
+}
+function clearKeyIdentity(state) {
+    state.keys.length = 0;
+    state.nextKeys.length = 0;
+    state.map.clear();
+}
+function warnKeyFallback(rep, state) {
+    if (state.warned)
+        return;
+    state.warned = true;
+    const key = state.path.length === 0
+        ? rep.itemVar
+        : `${rep.itemVar}.${state.path}`;
+    console.warn(`[webui] repeat "${rep.collection}" produced duplicate or invalid values for child key="${key}"; using positional reconciliation`);
+}
+function reconcileByKey(host, rep, items, container, state) {
+    const instances = rep.instances;
+    const map = state.map;
     let nextCount = 0;
+    let created = false;
+    let removed = false;
     for (let i = 0; i < items.length; i += 1) {
-        const item = items[i];
-        const key = itemKey(item, keyPath);
-        const existing = key != null ? oldByKey.get(key) : undefined;
-        if (existing) {
-            oldByKey.set(key, undefined);
-            existing.value = item;
-            existing.key = key;
-            if (existing.instance.scope)
-                existing.instance.scope.value = item;
-            oldInstances[nextCount] = existing;
-            nextCount += 1;
+        const key = state.nextKeys[i];
+        let instance = map.get(key);
+        if (instance) {
+            map.set(key, null);
+            setItemScope(instance, items[i]);
         }
         else {
-            const scope = itemScope(rep, item);
-            const instance = host.$createBlockInstance(rep.blockIndex, scope);
-            if (instance) {
-                oldInstances[nextCount] = { key: key ?? null, value: item, instance };
-                nextCount += 1;
-            }
+            instance = host.$createBlockInstance(rep.blockIndex, itemScope(rep, items[i]), rep.owner, container) ?? undefined;
+            if (instance)
+                created = true;
+        }
+        if (instance) {
+            instances[nextCount] = instance;
+            state.nextKeys[nextCount] = key;
+            nextCount += 1;
         }
     }
-    for (const leftover of oldByKey.values()) {
-        if (leftover)
-            host.$removeInstance(leftover.instance);
+    state.nextKeys.length = nextCount;
+    for (const instance of map.values()) {
+        if (instance) {
+            host.$removeInstance(instance);
+            removed = true;
+        }
     }
-    oldInstances.length = nextCount;
     let cursor = rep.start;
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        cursor = host.$insertInstanceAfter(cursor, container, oldInstances[i].instance);
+    for (let i = 0; i < nextCount; i += 1) {
+        cursor = host.$insertInstanceAfter(cursor, container, instances[i]);
+    }
+    for (let i = 0; i < nextCount; i += 1) {
+        if (map.get(state.nextKeys[i]) === null) {
+            host.$updateInstance(instances[i]);
+        }
+    }
+    map.clear();
+    instances.length = nextCount;
+    commitKeyIdentity(state);
+    if (created || removed)
+        host.$changeStructure(removed ? rep.owner : undefined);
+}
+function syncKeyed(host, rep, items, container, state) {
+    if (!collectRepeatKeys(items, state)) {
+        warnKeyFallback(rep, state);
+        clearKeyIdentity(state);
+        syncPositional(host, rep, items, container);
+        return;
+    }
+    let sharedOrder = true;
+    const sharedLength = Math.min(state.keys.length, state.nextKeys.length);
+    for (let i = 0; sharedOrder && i < sharedLength; i += 1) {
+        sharedOrder = state.keys[i] === state.nextKeys[i];
     }
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        const entry = oldInstances[i];
-        if (entry.key != null && oldByKey.has(entry.key) && oldByKey.get(entry.key) === undefined) {
-            host.$updateInstance(entry.instance);
+    if (state.keys.length !== rep.instances.length || sharedOrder) {
+        syncPositional(host, rep, items, container);
+        if (rep.instances.length === items.length) {
+            commitKeyIdentity(state);
+        }
+        else {
+            clearKeyIdentity(state);
         }
+        return;
+    }
+    for (let i = 0; i < state.keys.length; i += 1) {
+        state.map.set(state.keys[i], rep.instances[i]);
+    }
+    reconcileByKey(host, rep, items, container, state);
+}
+export function syncRepeat(host, rep) {
+    const resolved = host.$resolveValue(rep.collection, rep.scope);
+    const items = Array.isArray(resolved) ? resolved : [];
+    const container = (rep.container
+        ?? rep.start?.parentNode
+        ?? rep.owner.nodes[0]?.parentNode);
+    if (!container)
+        return;
+    rep.container = container;
+    if (!rep.synced
+        && rep.instances.length > 0
+        && !host.$hasStateRoot(rep.collection, rep.scope))
+        return;
+    rep.synced = true;
+    if (items.length === 0) {
+        const hadInstances = rep.instances.length !== 0;
+        for (let i = 0; i < rep.instances.length; i += 1) {
+            host.$removeInstance(rep.instances[i]);
+        }
+        rep.instances.length = 0;
+        if (hadInstances)
+            host.$changeStructure(rep.owner);
+        if (rep.keyState) {
+            clearKeyIdentity(rep.keyState);
+        }
+        return;
+    }
+    if (rep.keyState) {
+        syncKeyed(host, rep, items, container, rep.keyState);
+    }
+    else {
+        syncPositional(host, rep, items, container);
     }
 }

package/dist/element/markers.js

@@ -6,16 +6,24 @@ const MARKER_REPEAT_ITEM = 'wi';
 export function collectItemMarkers(repeatStart) {
     const items = [];
     let end = null;
+    let depth = 1;
     let node = repeatStart.nextSibling;
     while (node) {
         if (node.nodeType === 8) {
             const data = node.data;
-            if (data === MARKER_REPEAT_END) {
-                end = node;
-                break;
+            if (data === MARKER_REPEAT_START) {
+                depth++;
             }
-            if (data === MARKER_REPEAT_ITEM)
+            else if (data === MARKER_REPEAT_END) {
+                depth--;
+                if (depth === 0) {
+                    end = node;
+                    break;
+                }
+            }
+            else if (data === MARKER_REPEAT_ITEM && depth === 1) {
                 items.push(node);
+            }
         }
         node = node.nextSibling;
     }
@@ -28,7 +36,7 @@ export function nextElement(marker) {
             return node;
         if (node.nodeType === 8) {
             const data = node.data;
-            if (data === MARKER_REPEAT_END || data === MARKER_REPEAT_ITEM)
+            if (data === MARKER_REPEAT_END || data === MARKER_REPEAT_ITEM || data === MARKER_COND_END)
                 return null;
         }
         node = node.nextSibling;