@adobe/ecs 0.1.0 → 0.2.1

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

@@ -1,205 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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

@@ -1,45 +0,0 @@
-/**
- * `<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

@@ -1,93 +0,0 @@
-/**
- * `<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 {}
-}