`<f-repeat>` Does Not Re-render After Hydration

[mcritzjam]

🐛 Bug Report

After client-side hydration, structural template directives (<f-when>,
<f-repeat>) and property bindings (:prop) do not re-evaluate when their
underlying @observable properties change. Simple {{interpolation}} and
attribute bindings DO work reactively, creating an inconsistency that forces
app developers into imperative DOM workarounds.

💻 Repro or Code Sample

Field	Detail
Expected	<f-repeat value="item in items"> re-renders when items are added or removed.
Actual	The loop renders only the initial SSR items. push(), pop(), splice() have no effect on the DOM. Even replacing the array reference (this.items = [...this.items]) may not trigger re-render.
Root cause	Same as <f-when> — <f-repeat> is a compile-time structural directive not subscribed to observables after hydration. Additionally, FAST's array observation requires reference replacement, not mutation, but even that doesn't help for <f-repeat>.
Affected apps	downloads_btr (download list), history_btr, settings_btr (list-based settings pages), all BTR apps rendering dynamic lists.
Severity	P1 — Broken functionality. Any BTR page with a list that changes after initial render is affected.
Workaround	Array reference replacement + Observable.notify() (partial), or fresh element creation for entire sections. See Workaround B and Workaround C.
Suggested fix	Framework-level: <f-repeat> blocks should subscribe to their source observable during hydration, mirroring repeat() behavior in standard FAST Element.

[janechu]

I've updated this to reflect FAST syntax.

[janechu]

We investigated this issue and found that the behavior described is already covered by existing tests in the packages/fast-html/test/fixtures/repeat fixture.

The test "create a repeat directive" (repeat.spec.ts, line 5) validates the exact scenario:

1. Renders <f-repeat> with initial list = ["Foo", "Bar"] → 2 list items
2. After hydration, replaces the array via node.list = ["A", "B", "C"]
3. Asserts the DOM updates to 3 items with correct content (["A - Bat", "B - Bat", "C - Bat"])

Additionally, the test "repeat directive with no item binding should not error" (line 96) also tests post-hydration reactivity — starting with an empty array, then setting node.list = ["A", "B", "C"] and verifying the DOM updates.

All 5 repeat tests are passing across browser projects, confirming that <f-repeat> does re-render after defer-and-hydrate when the underlying observable array is replaced.

If you're seeing different behavior in your application, it may be related to how the array is being mutated (e.g., in-place mutation via push()/splice() vs. reference replacement) or a difference in your component setup. Could you provide a minimal reproduction so we can investigate further?