@adobe/ecs 0.0.0-stage → 0.1.0

package/src/samples/todo/features/todos/dom.browser.test.ts

@@ -0,0 +1,205 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { Entity, System, workers, World } from "../../../../index.js";
+import { entityOfElement } from "../../shared/attach.js";
+import { settled, watchTicks } from "../../shared/ticks.test-helper.js";
+import { dom, list, row } from "./dom.js";
+import { TodoList } from "./elements/todo-list.js";
+import { TodoRow } from "./elements/todo-row.js";
+import { addTodo, deleteTodo, editTodo, moveTodo, toggleTodo } from "./model.js";
+import { todosOf } from "./todos.test-helper.js";
+import { define } from "../../shared/elements/define.js";
+
+define({ "todo-list": TodoList, "todo-row": TodoRow });
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+/** A world driving a list on the page through the todos feature's DOM systems. */
+const createDriven = async (): Promise<{ readonly world: World; readonly element: TodoList }> => {
+    const element = document.createElement("todo-list");
+    document.body.append(element);
+    const world = World.create({ [workers]: 0, [list]: element });
+    await watchTicks(world);
+    world.add(dom);
+    return { world, element };
+};
+
+const rowsOf = (element: TodoList): TodoRow[] => [...element.querySelectorAll("todo-row")];
+
+let rows = 0;
+const countRows = System.create({ name: "test/countRows", observer: true, components: { has: [row] } }, () => {
+    rows += 1;
+});
+
+/** How many todos have a row, placed or not. */
+const rowCount = async (world: World): Promise<number> => {
+    rows = 0;
+    await world.run(countRows);
+    return rows;
+};
+
+/** The element a mutation of `node` belongs to: the host of the shadow root it's in, or itself. */
+const hostOf = (node: Node): Node => {
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root.host : node;
+};
+
+const shown = (element: TodoList): string[] => rowsOf(element).map(row => `${row.done ? "x" : "-"} ${row.label}`);
+
+const todoAt = (element: TodoList, index: number): Entity => {
+    const row = rowsOf(element)[index];
+    const entity = entityOfElement(row ?? null);
+    if (entity === Entity.none) throw new Error(`No row ${index}.`);
+    return entity;
+};
+
+/** The child list changes `run` makes to the list once its tick passed. */
+const childChanges = async (element: TodoList, run: () => Promise<number>): Promise<{ readonly added: number; readonly removed: number }> => {
+    const records: MutationRecord[] = [];
+    const observer = new MutationObserver(delivered => records.push(...delivered));
+    observer.observe(element, { childList: true });
+    await settled(run());
+    records.push(...observer.takeRecords());
+    observer.disconnect();
+    return { added: records.reduce((sum, record) => sum + record.addedNodes.length, 0), removed: records.reduce((sum, record) => sum + record.removedNodes.length, 0) };
+};
+
+describe("the todos feature's DOM systems", () => {
+    it("give each todo a row, in list order, once the tick after it passed", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        await world.run(addTodo, { label: "milk" });
+        await settled(world.run(addTodo, { label: "eggs" }));
+        expect(shown(element)).toEqual(["- milk", "- eggs"]);
+    });
+
+    it("write only the rows whose todo changed", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        for (const text of ["a", "b", "c"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "d" }));
+        const rows = rowsOf(element);
+        const records: MutationRecord[] = [];
+        const observer = new MutationObserver(delivered => records.push(...delivered));
+        for (const row of rows) {
+            observer.observe(row, { attributes: true });
+            if (row.shadowRoot !== null) observer.observe(row.shadowRoot, { subtree: true, childList: true, characterData: true, attributes: true });
+        }
+        await settled(world.run(toggleTodo, { entity: todoAt(element, 1) }));
+        await settled(world.run(editTodo, { entity: todoAt(element, 2), label: "C" }));
+        records.push(...observer.takeRecords());
+        const changed = new Set(records.map(record => hostOf(record.target)));
+        observer.disconnect();
+        expect([...changed]).toEqual([rows[1], rows[2]]);
+        expect(shown(element)).toEqual(["- a", "x b", "- C", "- d"]);
+    });
+
+    it("remove a deleted todo's row, leaving no node behind", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        for (const text of ["a", "b"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "c" }));
+        const removed = rowsOf(element)[1];
+        await settled(world.run(deleteTodo, { entity: todoAt(element, 1) }));
+        expect(shown(element)).toEqual(["- a", "- c"]);
+        expect(removed?.isConnected).toBe(false);
+        await settled(world.run(editTodo, { entity: todoAt(element, 0), label: " " }));
+        expect(shown(element)).toEqual(["- c"]);
+        expect(element.children).toHaveLength(1);
+    });
+
+    it("move only the row whose todo moved", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        for (const text of ["a", "b", "c"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "d" }));
+        expect(await childChanges(element, () => world.run(moveTodo, { entity: todoAt(element, 3), before: todoAt(element, 1) }))).toEqual({ added: 1, removed: 1 });
+        expect(shown(element)).toEqual(["- a", "- d", "- b", "- c"]);
+        expect(await childChanges(element, () => world.run(moveTodo, { entity: todoAt(element, 0), before: Entity.none }))).toEqual({ added: 1, removed: 1 });
+        expect(shown(element)).toEqual(["- d", "- b", "- c", "- a"]);
+        expect(await childChanges(element, () => world.run(moveTodo, { entity: todoAt(element, 3), before: todoAt(element, 0) }))).toEqual({ added: 1, removed: 1 });
+        expect(shown(element)).toEqual(["- a", "- d", "- b", "- c"]);
+    });
+
+    it("keep a moved row focused, so it can be moved again by keyboard", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        for (const text of ["a", "b"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "c" }));
+        const moved = rowsOf(element)[2];
+        moved?.focus();
+        expect(document.activeElement).toBe(moved);
+        await settled(world.run(moveTodo, { entity: todoAt(element, 2), before: todoAt(element, 0) }));
+        expect(shown(element)).toEqual(["- c", "- a", "- b"]);
+        expect(document.activeElement).toBe(moved);
+    });
+
+    it("keep a moved row focused where the browser has no moveBefore", async () => {
+        const descriptor = Object.getOwnPropertyDescriptor(Element.prototype, "moveBefore");
+        Reflect.deleteProperty(Element.prototype, "moveBefore");
+        try {
+            const { world, element } = await createDriven();
+            await using _ = world;
+            for (const text of ["a", "b"]) await world.run(addTodo, { label: text });
+            await settled(world.run(addTodo, { label: "c" }));
+            const moved = rowsOf(element)[2];
+            moved?.focus();
+            await settled(world.run(moveTodo, { entity: todoAt(element, 2), before: todoAt(element, 0) }));
+            expect(shown(element)).toEqual(["- c", "- a", "- b"]);
+            expect(document.activeElement).toBe(moved);
+        }
+        finally {
+            if (descriptor !== undefined) Object.defineProperty(Element.prototype, "moveBefore", descriptor);
+        }
+    });
+
+    it("make no rows while the page has no list", async () => {
+        await using world = World.create({ [workers]: 0 });
+        await watchTicks(world);
+        world.add(dom);
+        await settled(world.run(addTodo, { label: "a" }));
+        expect(await rowCount(world)).toBe(0);
+    });
+
+    it("give no row to a todo deleted before the tick that would make it", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        await world.run(addTodo, { label: "a" });
+        const [added] = await todosOf(world);
+        await settled(world.run(deleteTodo, { entity: added?.entity ?? Entity.none }));
+        expect(element.children).toHaveLength(0);
+        expect(await rowCount(world)).toBe(0);
+    });
+
+    it("show what several runs before one tick changed", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        await world.run(addTodo, { label: "a" });
+        const [added] = await todosOf(world);
+        const entity = added?.entity ?? Entity.none;
+        await world.run(toggleTodo, { entity });
+        await settled(world.run(editTodo, { entity, label: "A" }));
+        expect(shown(element)).toEqual(["x A"]);
+    });
+
+    it("place the rows of todos added together in list order", async () => {
+        const { world, element } = await createDriven();
+        await using _ = world;
+        await world.run(addTodo, { label: "a" });
+        await settled(world.run(addTodo, { label: "b" }));
+        await world.run(moveTodo, { entity: todoAt(element, 1), before: todoAt(element, 0) });
+        for (const text of ["c", "d"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "e" }));
+        expect(shown(element)).toEqual(["- b", "- a", "- c", "- d", "- e"]);
+    });
+
+    it("remove every row when the world is disposed", async () => {
+        const { world, element } = await createDriven();
+        for (const text of ["a", "b"]) await world.run(addTodo, { label: text });
+        await settled(world.run(addTodo, { label: "c" }));
+        expect(element.children).toHaveLength(3);
+        await world.dispose();
+        expect(element.children).toHaveLength(0);
+    });
+});

package/src/samples/todo/features/todos/dom.ts

@@ -0,0 +1,90 @@
+import { Component, Finalizer, Index, Resource, System } from "../../../../index.js";
+import { attach } from "../../shared/attach.js";
+import { done, label, order, todo } from "./data.js";
+import { TodoList } from "./elements/todo-list.js";
+import { TodoRow } from "./elements/todo-row.js";
+
+/** The row showing a todo. */
+export const row = Symbol("row");
+/** The page's list, which rows are placed in; null until the page provides it. */
+export const list = Symbol("list");
+
+declare module "@adobe/ecs" {
+    interface Components {
+        [row]: { type: TodoRow; thread: "main" };
+    }
+    interface Resources {
+        [list]: { type: TodoList | null; thread: "main" };
+    }
+}
+
+Component.register(row, { thread: "main" });
+Resource.register(list, { thread: "main" });
+
+/** Todos with rows, in list order. */
+const placed = Index.create({ name: "todos/placed", key: [order], sorted: true, components: { has: [todo, row] } });
+
+/**
+ * Gives each new todo a row, attached to it for events from the row, while the page has a list for it. It isn't placed
+ * until the row is the todo's, so a todo gone first never shows one.
+ */
+export const createRows = System.create({
+    name: "todos/createRows",
+    components: { has: [todo], not: [row] },
+    resources: { is: [list] },
+}, (item, { commands }) => {
+    commands.add(item.entity, row, attach(document.createElement("todo-row"), item.entity));
+});
+
+/** Writes what changed of each todo to its row. */
+export const bindRows = System.create({
+    name: "todos/bindRows",
+    observer: true,
+    components: { read: [label, done, row], changed: [label, done, row] },
+}, item => {
+    const element = item[row];
+    element.label = item[label];
+    element.done = item[done];
+});
+
+/**
+ * Puts `element` before `before` in `parent`. One already there moves with `moveBefore`, without leaving it, where the
+ * browser has it; otherwise it leaves and comes back, and gets back the focus it had.
+ */
+const place = (parent: Element, element: HTMLElement, before: Element | null): void => {
+    const moveBefore: unknown = Reflect.get(parent, "moveBefore");
+    if (element.parentNode === parent && typeof moveBefore === "function") {
+        Reflect.apply(moveBefore, parent, [element, before]);
+        return;
+    }
+    const focused = element.matches(":focus");
+    parent.insertBefore(element, before);
+    if (focused) element.focus({ preventScroll: true });
+};
+
+/**
+ * Places each new or moved row after the row before it in list order. Rows pass in list order, so the one before is
+ * always placed already. A row already there isn't touched, and one in the list moves without leaving it, which keeps
+ * its focus.
+ */
+export const placeRows = System.create({
+    name: "todos/placeRows",
+    observer: true,
+    components: { read: [row, order], changed: [row, order] },
+    order: placed,
+    resources: { is: [list] },
+    lookup: { placed: { index: placed, read: [row] } },
+}, (item, { resources, lookup }) => {
+    const element = item[row];
+    const parent = resources[list];
+    const earlier = lookup.placed({ "<": item[order] });
+    const before = earlier.length === 0 ? parent.firstElementChild : earlier.at(earlier.length - 1)[row].nextElementSibling;
+    if (before !== element) place(parent, element, before);
+});
+
+Finalizer.create({ name: "todos/removeRows", components: { read: [row] } }, item => {
+    item[row].remove();
+});
+
+/** The todos feature's DOM systems, as one composite: added, it runs on every tick. */
+export const dom = System.create([createRows, bindRows, placeRows]);

package/src/samples/todo/features/todos/elements/elements.browser.test.ts

@@ -0,0 +1,211 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mutationsOf, part, record } from "../../../shared/elements/elements.test-helper.js";
+import { TodoEntry } from "./todo-entry.js";
+import { TodoList } from "./todo-list.js";
+import { TodoRow } from "./todo-row.js";
+import { define } from "../../../shared/elements/define.js";
+
+define({ "todo-entry": TodoEntry, "todo-list": TodoList, "todo-row": TodoRow });
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+const createRow = (label: string, done = false): HTMLElementTagNameMap["todo-row"] => {
+    const row = document.createElement("todo-row");
+    row.label = label;
+    row.done = done;
+    document.body.append(row);
+    return row;
+};
+
+describe("todo-row", () => {
+    it("renders its label and done state, reflecting done as an attribute", () => {
+        const row = createRow("Buy milk");
+        expect(part(row, ".label", HTMLElement).textContent).toBe("Buy milk");
+        expect(part(row, ".toggle", HTMLInputElement).checked).toBe(false);
+        expect(row.hasAttribute("done")).toBe(false);
+        row.done = true;
+        row.label = "Buy oat milk";
+        expect(part(row, ".toggle", HTMLInputElement).checked).toBe(true);
+        expect(row.hasAttribute("done")).toBe(true);
+        expect(part(row, ".label", HTMLElement).textContent).toBe("Buy oat milk");
+    });
+
+    it("isn't shown while hidden", () => {
+        const row = createRow("Buy milk");
+        expect(row.checkVisibility()).toBe(true);
+        row.hidden = true;
+        expect(row.checkVisibility()).toBe(false);
+    });
+
+    it("drops writes of the value it has", () => {
+        const row = createRow("Buy milk", true);
+        expect(mutationsOf(row, () => {
+            row.label = "Buy milk";
+            row.done = true;
+        })).toEqual([]);
+    });
+
+    it("dispatches todo-toggle on a click, keeping the done state it was given", () => {
+        const row = createRow("Buy milk");
+        const seen = record(document.body, "todo-toggle");
+        part(row, ".toggle", HTMLInputElement).click();
+        expect(seen).toEqual([{ type: "todo-toggle", detail: null, target: row }]);
+        expect(row.done).toBe(false);
+        expect(part(row, ".toggle", HTMLInputElement).checked).toBe(false);
+    });
+
+    it("dispatches todo-delete", () => {
+        const row = createRow("Buy milk");
+        const seen = record(document.body, "todo-delete");
+        part(row, ".delete", HTMLButtonElement).click();
+        expect(seen).toEqual([{ type: "todo-delete", detail: null, target: row }]);
+    });
+
+    it("edits on a double click: Enter and blur dispatch todo-edit, Escape cancels, and the label stays as given", () => {
+        const row = createRow("Buy milk");
+        const seen = record(document.body, "todo-edit");
+        const label = part(row, ".label", HTMLElement);
+        const edit = part(row, ".edit", HTMLInputElement);
+        label.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+        expect(edit.hidden).toBe(false);
+        expect(edit.value).toBe("Buy milk");
+        expect(row.shadowRoot?.activeElement).toBe(edit);
+        edit.value = "Buy oat milk";
+        edit.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+        expect(seen).toEqual([{ type: "todo-edit", detail: { label: "Buy oat milk" }, target: row }]);
+        expect(edit.hidden).toBe(true);
+        expect(label.textContent).toBe("Buy milk");
+
+        label.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+        edit.value = "Never mind";
+        edit.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+        expect(seen).toHaveLength(1);
+
+        label.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+        edit.value = "Blurred";
+        edit.blur();
+        expect(seen.map(event => event.detail)).toEqual([{ label: "Buy oat milk" }, { label: "Blurred" }]);
+    });
+
+    it("isn't draggable while editing, so its text can be selected, and ignores Enter while composing", () => {
+        const row = createRow("Buy milk");
+        const seen = record(document.body, "todo-edit");
+        part(row, ".label", HTMLElement).dispatchEvent(new MouseEvent("dblclick"));
+        expect(row.draggable).toBe(false);
+        const edit = part(row, ".edit", HTMLInputElement);
+        edit.value = "Buy 牛乳";
+        edit.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", isComposing: true }));
+        expect(seen).toEqual([]);
+        edit.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+        expect(seen.map(event => event.detail)).toEqual([{ label: "Buy 牛乳" }]);
+        expect(row.draggable).toBe(true);
+    });
+
+    it("is focusable and draggable once connected, and can be created before it is", () => {
+        const row = document.createElement("todo-row");
+        expect(row.hasAttribute("tabindex")).toBe(false);
+        document.body.append(row);
+        expect(row.tabIndex).toBe(0);
+        expect(row.draggable).toBe(true);
+    });
+});
+
+
+describe("todo-list", () => {
+    type Row = HTMLElementTagNameMap["todo-row"];
+
+    /** A list of four rows, a to d, on the page. */
+    const createList = (): { readonly list: HTMLElementTagNameMap["todo-list"]; readonly rows: readonly [Row, Row, Row, Row] } => {
+        const list = document.createElement("todo-list");
+        document.body.append(list);
+        const row = (label: string): Row => {
+            const created = document.createElement("todo-row");
+            created.label = label;
+            list.append(created);
+            return created;
+        };
+        return { list, rows: [row("a"), row("b"), row("c"), row("d")] };
+    };
+
+    const press = (row: Row, key: "ArrowUp" | "ArrowDown", altKey = true): void => {
+        row.dispatchEvent(new KeyboardEvent("keydown", { key, altKey, bubbles: true }));
+    };
+
+    it("dispatches todo-move for Alt+ArrowUp and Alt+ArrowDown, and never moves children itself", () => {
+        const { list, rows } = createList();
+        const [a, b, c, d] = rows;
+        const seen = record(document.body, "todo-move");
+        press(c, "ArrowUp");
+        press(a, "ArrowDown");
+        press(b, "ArrowDown");
+        // At either end there's nowhere to go, and without Alt the keys do nothing.
+        press(a, "ArrowUp");
+        press(d, "ArrowDown");
+        press(c, "ArrowUp", false);
+        expect(seen.map(event => event.detail)).toEqual([{ item: c, before: b }, { item: a, before: c }, { item: b, before: d }]);
+        expect([...list.children]).toEqual(rows);
+    });
+
+    it("skips hidden children when moving by keyboard", () => {
+        const { rows } = createList();
+        const [a, b, c, d] = rows;
+        b.hidden = true;
+        d.hidden = true;
+        const seen = record(document.body, "todo-move");
+        press(c, "ArrowDown");
+        press(a, "ArrowDown");
+        press(c, "ArrowUp");
+        expect(seen.map(event => event.detail)).toEqual([{ item: a, before: null }, { item: c, before: a }]);
+    });
+
+    it("dispatches todo-move for a drop: before the child dropped on, or after it in its lower half", () => {
+        const { list, rows } = createList();
+        const [a, b, c] = rows;
+        const seen = record(document.body, "todo-move");
+        const drop = (item: HTMLElement, onto: HTMLElement, lower: boolean): void => {
+            const dataTransfer = new DataTransfer();
+            item.dispatchEvent(new DragEvent("dragstart", { bubbles: true, composed: true, dataTransfer }));
+            const bounds = onto.getBoundingClientRect();
+            const clientY = lower ? bounds.bottom - 1 : bounds.top + 1;
+            onto.dispatchEvent(new DragEvent("dragover", { bubbles: true, cancelable: true, composed: true, dataTransfer, clientY }));
+            onto.dispatchEvent(new DragEvent("drop", { bubbles: true, cancelable: true, composed: true, dataTransfer, clientY }));
+        };
+        drop(c, a, false);
+        drop(a, b, true);
+        expect(seen.map(event => event.detail)).toEqual([{ item: c, before: a }, { item: a, before: c }]);
+        expect([...list.children]).toEqual(rows);
+    });
+});
+
+
+describe("todo-entry", () => {
+    it("dispatches todo-add on Enter and clears itself, ignoring blank text; Escape clears", () => {
+        const entry = document.createElement("todo-entry");
+        document.body.append(entry);
+        const seen = record(document.body, "todo-add");
+        const input = part(entry, "input", HTMLInputElement);
+        input.value = "Buy milk";
+        input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+        expect(seen).toEqual([{ type: "todo-add", detail: { label: "Buy milk" }, target: entry }]);
+        expect(input.value).toBe("");
+        input.value = "   ";
+        input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+        expect(seen).toHaveLength(1);
+        input.value = "Draft";
+        input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+        expect(input.value).toBe("");
+    });
+
+    it("ignores Enter while composing", () => {
+        const entry = document.createElement("todo-entry");
+        document.body.append(entry);
+        const seen = record(document.body, "todo-add");
+        const input = part(entry, "input", HTMLInputElement);
+        input.value = "牛乳";
+        input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", isComposing: true }));
+        expect(seen).toEqual([]);
+        expect(input.value).toBe("牛乳");
+    });
+});

package/src/samples/todo/features/todos/elements/todo-entry.ts

@@ -0,0 +1,45 @@
+/**
+ * `<todo-entry>`: the field a new todo is typed into. Enter dispatches `todo-add` with the text and clears the field,
+ * unless it holds only whitespace; Escape clears it. The draft is its own state.
+ */
+
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+    :host { display: block; flex: 1; }
+    input { box-sizing: border-box; width: 100%; font: inherit; padding: 12px; border: 0; background: none; outline: none; }
+    input::placeholder { color: var(--todo-muted, #9ca3af); font-style: italic; }
+</style>
+<input placeholder="What needs to be done?" aria-label="New todo">`;
+
+export type TodoEntryEvents = {
+    readonly "todo-add": CustomEvent<{ readonly label: string }>;
+};
+
+const listen = (host: HTMLElement, input: HTMLInputElement): void => {
+    input.addEventListener("keydown", event => {
+        if (event.key === "Escape") input.value = "";
+        // Enter while composing text picks the composition.
+        if (event.key !== "Enter" || event.isComposing || input.value.trim() === "") return;
+        host.dispatchEvent(new CustomEvent("todo-add", { detail: { label: input.value }, bubbles: true, composed: true }));
+        input.value = "";
+    });
+};
+
+export class TodoEntry extends HTMLElement {
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: "open", delegatesFocus: true });
+        root.append(template.content.cloneNode(true));
+        const input = root.querySelector("input");
+        if (input === null) throw new Error("todo-entry's template has no input.");
+        listen(this, input);
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "todo-entry": TodoEntry;
+    }
+    interface HTMLElementEventMap extends TodoEntryEvents {}
+}

package/src/samples/todo/features/todos/elements/todo-list.ts

@@ -0,0 +1,93 @@
+/**
+ * `<todo-list>`: holds rows as its children, in the order they're placed. Dragging a child onto another, or
+ * Alt+ArrowUp and Alt+ArrowDown on a focused child, dispatches `todo-move` with the child and the one it should go
+ * before, null for the end, skipping hidden children; the list never moves children itself.
+ */
+
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+    :host { display: block; overflow-y: auto; }
+    .empty { margin: 0; padding: 32px 12px; text-align: center; color: var(--todo-muted, #9ca3af); }
+</style>
+<slot><p class="empty">Nothing to do.</p></slot>`;
+
+export type TodoListEvents = {
+    readonly "todo-move": CustomEvent<{ readonly item: HTMLElement; readonly before: HTMLElement | null }>;
+};
+
+const move = (list: HTMLElement, item: HTMLElement, before: HTMLElement | null): void => {
+    if (item === before) return;
+    list.dispatchEvent(new CustomEvent("todo-move", { detail: { item, before }, bubbles: true, composed: true }));
+};
+
+/** The list's child an event came from, or null. */
+const childOf = (list: HTMLElement, target: EventTarget | null): HTMLElement | null => {
+    for (let node = target instanceof Node ? target : null; node !== null; node = node.parentNode) {
+        if (node.parentNode === list) return node instanceof HTMLElement ? node : null;
+    }
+    return null;
+};
+
+const siblingOf = (node: Element, forward: boolean): Element | null => forward ? node.nextElementSibling : node.previousElementSibling;
+
+/** The nearest sibling not hidden, in the direction given, or null. Reading `hidden` forces no style recalculation. */
+const shownSibling = (item: Element, forward: boolean): HTMLElement | null => {
+    for (let node = siblingOf(item, forward); node !== null; node = siblingOf(node, forward)) {
+        if (node instanceof HTMLElement && !node.hidden) return node;
+    }
+    return null;
+};
+
+const listen = (list: HTMLElement): void => {
+    let dragged: HTMLElement | null = null;
+    list.addEventListener("dragstart", event => {
+        dragged = childOf(list, event.target);
+        if (dragged !== null && event.dataTransfer !== null) event.dataTransfer.effectAllowed = "move";
+    });
+    list.addEventListener("dragover", event => {
+        if (dragged !== null) event.preventDefault();
+    });
+    list.addEventListener("drop", event => {
+        const item = dragged;
+        dragged = null;
+        const target = childOf(list, event.target);
+        if (item === null || target === null) return;
+        event.preventDefault();
+        const bounds = target.getBoundingClientRect();
+        const after = target.nextElementSibling instanceof HTMLElement ? target.nextElementSibling : null;
+        move(list, item, event.clientY < bounds.top + bounds.height / 2 ? target : after);
+    });
+    list.addEventListener("dragend", () => {
+        dragged = null;
+    });
+    list.addEventListener("keydown", event => {
+        if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
+        const item = childOf(list, event.target);
+        if (item === null) return;
+        event.preventDefault();
+        if (event.key === "ArrowUp") {
+            const previous = shownSibling(item, false);
+            if (previous !== null) move(list, item, previous);
+        }
+        else {
+            const next = shownSibling(item, true);
+            if (next !== null) move(list, item, shownSibling(next, true));
+        }
+    });
+};
+
+export class TodoList extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" }).append(template.content.cloneNode(true));
+        listen(this);
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "todo-list": TodoList;
+    }
+    interface HTMLElementEventMap extends TodoListEvents {}
+}