${state.label()}keyed
`;
+ });
+
+ const el = makeEl();
+ const unmount = Island.mount(el);
+ const keyed = el.querySelector("span")!;
+
+ // Empty string interpolation emits nothing; a non-empty one prepends a
+ // text node at the keyed element's position.
+ setLabel("hello");
+
+ const div = el.querySelector("div")!;
+ expect(div.textContent).toBe("hellokeyed");
+ expect(el.querySelector("span")).toBe(keyed);
+ unmount();
+ cleanup(el);
+ });
+
+ it("does not let a duplicate data-key steal an already-placed element", () => {
+ let setKeys!: (v?: string[]) => string[] | void;
+ const Island = ilha.state("keys", ["a", "b"]).render(({ state }) => {
+ setKeys = state.keys as typeof setKeys;
+ return html`-
+ ${state.keys().map((k, i) => html`
- ${k}${i} `)} +
+
`;
+ });
+
+ const el = makeEl();
+ const unmount = Island.mount(el);
+ const input = el.querySelector("input")!;
+ input.checked = true;
+
+ // The checked attribute is absent in both trees — the user's live
+ // property state must survive the morph untouched.
+ setCount(1);
+ expect(el.querySelector("input")).toBe(input);
+ expect(input.checked).toBe(true);
+ unmount();
+ cleanup(el);
+ });
+
+ it("updates the live value property when the value attribute changes", () => {
+ let setName!: (v?: string) => string | void;
+ const Island = ilha.state("name", "ada").render(({ state }) => {
+ setName = state.name as typeof setName;
+ return html``;
+ });
+
+ const el = makeEl();
+ const unmount = Island.mount(el);
+ const input = el.querySelector("input")!;
+ // User typed over the rendered value; a template change must win...
+ input.value = "typed";
+ setName("grace");
+ expect(input.value).toBe("grace");
+ unmount();
+ cleanup(el);
+ });
+
+ it("preserves in-progress typing when the value attribute is unchanged", () => {
+ let setCount!: (v?: number) => number | void;
+ const Island = ilha.state("count", 0).render(({ state }) => {
+ setCount = state.count as typeof setCount;
+ return html`${state.count()}
+ +
+
`;
+ });
+
+ const el = makeEl();
+ const unmount = Island.mount(el);
+ const input = el.querySelector("input")!;
+ input.value = "user typing";
+
+ setCount(1);
+ expect(input.value).toBe("user typing");
+ unmount();
+ cleanup(el);
+ });
});
describe("island.define() custom elements", () => {
diff --git a/packages/ilha/src/index.ts b/packages/ilha/src/index.ts
index 660f954..c5162fe 100644
--- a/packages/ilha/src/index.ts
+++ b/packages/ilha/src/index.ts
@@ -360,23 +360,30 @@ function morphChildren(fromParent: Element, toParent: Element): void {
const toNode = toNodes[i]!;
let fromNode: ChildNode | undefined = fromParent.childNodes[i];
- if (fromKeyed !== null && toNode.nodeType === 1) {
- const key = (toNode as Element).getAttribute("data-key");
- if (key !== null) {
- const match = fromKeyed.get(key);
+ if (fromKeyed !== null) {
+ const toKey = toNode.nodeType === 1 ? (toNode as Element).getAttribute("data-key") : null;
+ if (toKey !== null) {
+ const match = fromKeyed.get(toKey);
if (match) {
+ // Consume the key so a duplicate data-key later in the new tree
+ // cannot steal this node back out of its settled position.
+ fromKeyed.delete(toKey);
if (match !== fromNode) {
fromParent.insertBefore(match, fromNode ?? null);
fromNode = match;
}
- } else if (fromNode instanceof Element) {
- const fromKey = fromNode.getAttribute("data-key");
- if (fromKey !== null && toKeys!.has(fromKey)) {
- // The element at this position belongs to a different SURVIVING
- // key — insert the new child fresh instead of clobbering it.
- fromParent.insertBefore(toNode.cloneNode(true), fromNode);
- continue;
- }
+ }
+ }
+ // The from-element at this position belongs to a DIFFERENT surviving
+ // key (the to-node is unkeyed, a text/comment node, or a new key) —
+ // insert the new child fresh instead of clobbering the survivor. When
+ // fromNode is the keyed match itself, its key equals toKey and this
+ // guard is skipped.
+ if (fromNode instanceof Element) {
+ const fromKey = fromNode.getAttribute("data-key");
+ if (fromKey !== null && fromKey !== toKey && toKeys!.has(fromKey)) {
+ fromParent.insertBefore(toNode.cloneNode(true), fromNode);
+ continue;
}
}
}
@@ -415,6 +422,24 @@ function morphChildren(fromParent: Element, toParent: Element): void {
continue;
}
+ if (fromEl.localName === "input") {
+ // Attributes only set the DEFAULT checked/value; once the user (or a
+ // bind write) touches the live property, attribute updates alone no
+ // longer reflect in the UI, so a positionally-reused input would keep
+ // showing the previous item's state. Mirror the template's attribute
+ // into the property — but only when the attribute actually changed,
+ // so unrelated re-renders never clobber in-progress user input
+ // (same policy as textarea below).
+ const hadChecked = fromEl.hasAttribute("checked");
+ const hadValue = fromEl.getAttribute("value");
+ syncAttributes(fromEl, toEl);
+ const hasChecked = toEl.hasAttribute("checked");
+ if (hasChecked !== hadChecked) (fromEl as HTMLInputElement).checked = hasChecked;
+ const newValue = toEl.getAttribute("value");
+ if (newValue !== hadValue) (fromEl as HTMLInputElement).value = newValue ?? "";
+ continue;
+ }
+
syncAttributes(fromEl, toEl);
if (fromEl.localName === "textarea") {
diff --git a/packages/ilha/src/jsx-runtime.test.tsx b/packages/ilha/src/jsx-runtime.test.tsx
index 0bcc405..d9a9daf 100644
--- a/packages/ilha/src/jsx-runtime.test.tsx
+++ b/packages/ilha/src/jsx-runtime.test.tsx
@@ -108,6 +108,96 @@ describe("ilha JSX runtime", () => {
expect(().value).toBe('');
});
+ it("emits key as data-key on host elements", () => {
+ expect((${state.count()}
+ +
+ {state.todos().map((todo) => (
+ |
+ ))}
+
+ );
+ });
+
+ const el = makeEl();
+ const unmount = Island.mount(el);
+
+ // User checks the first todo; the checkbox controller reflects it onto
+ // the live checked property and the data-checked presence attr.
+ const firstInput = el.querySelector