@adobe/ecs 0.0.0-stage → 0.1.0

package/src/samples/todo/features/completion/elements/todo-toggle-all.ts

@@ -0,0 +1,69 @@
+/**
+ * `<todo-toggle-all>`: the checkbox that marks every todo done, or none. Property `checked` is whether all are done,
+ * and `empty`, reflected as an attribute, hides it while there are none. A click dispatches `todo-toggle-all` with
+ * the state chosen, and the owner writes `checked` back.
+ */
+
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+    :host { display: flex; align-items: center; padding-left: 12px; }
+    :host([empty]) { visibility: hidden; }
+    input { width: 18px; height: 18px; margin: 0; accent-color: var(--todo-accent, #2563eb); }
+</style>
+<input type="checkbox" aria-label="Mark all as complete">`;
+
+export type TodoToggleAllEvents = {
+    readonly "todo-toggle-all": CustomEvent<{ readonly done: boolean }>;
+};
+
+export class TodoToggleAll extends HTMLElement {
+    readonly #input: HTMLInputElement;
+    #checked = false;
+    #empty = true;
+
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: "open" });
+        root.append(template.content.cloneNode(true));
+        const input = root.querySelector("input");
+        if (input === null) throw new Error("todo-toggle-all's template has no input.");
+        this.#input = input;
+        input.addEventListener("change", () => {
+            const chosen = input.checked;
+            input.checked = this.#checked;
+            this.dispatchEvent(new CustomEvent("todo-toggle-all", { detail: { done: chosen }, bubbles: true, composed: true }));
+        });
+    }
+
+    connectedCallback(): void {
+        this.toggleAttribute("empty", this.#empty);
+    }
+
+    get checked(): boolean {
+        return this.#checked;
+    }
+
+    set checked(value: boolean) {
+        if (value === this.#checked) return;
+        this.#checked = value;
+        this.#input.checked = value;
+    }
+
+    get empty(): boolean {
+        return this.#empty;
+    }
+
+    set empty(value: boolean) {
+        if (value === this.#empty) return;
+        this.#empty = value;
+        this.toggleAttribute("empty", value);
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "todo-toggle-all": TodoToggleAll;
+    }
+    interface HTMLElementEventMap extends TodoToggleAllEvents {}
+}

package/src/samples/todo/features/completion/events.ts

@@ -0,0 +1,7 @@
+import { all, on, type Connect } from "../../shared/connect.js";
+import { clearCompleted, toggleAll } from "./model.js";
+
+export const connect: Connect = (world, root) => all(
+    on(root, "todo-toggle-all", event => void world.run(toggleAll, { done: event.detail.done })),
+    on(root, "todo-clear-completed", () => void world.run(clearCompleted)),
+);

package/src/samples/todo/features/completion/feature.ts

@@ -0,0 +1,13 @@
+import type { Feature } from "../../shared/feature.js";
+import { dom, summary, toggleAllBox } from "./dom.js";
+import { TodoSummary } from "./elements/todo-summary.js";
+import { TodoToggleAll } from "./elements/todo-toggle-all.js";
+import { connect } from "./events.js";
+
+/** Completion: how many todos are left, marking all done or none, and clearing those done. */
+export const completion: Feature = {
+    elements: { "todo-summary": TodoSummary, "todo-toggle-all": TodoToggleAll },
+    resources: root => ({ [summary]: root.querySelector("todo-summary"), [toggleAllBox]: root.querySelector("todo-toggle-all") }),
+    system: dom,
+    connect,
+};

package/src/samples/todo/features/completion/model.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { System } from "../../../../index.js";
+import { toggleTodo } from "../todos/model.js";
+import { entityOf, todosOf, withTodos } from "../todos/todos.test-helper.js";
+import { done } from "../todos/data.js";
+import { clearCompleted, toggleAll } from "./model.js";
+
+let writes = 0;
+/** Counts the todos written since it last ran. */
+const countWrites = System.create({ name: "test/countWrites", observer: true, components: { has: [done], changed: [done] } }, () => {
+    writes += 1;
+});
+
+describe("completion", () => {
+    it("marks every todo done, or none, writing only those that change", async () => {
+        await using world = await withTodos("a", "b", "c");
+        await world.run(toggleTodo, { entity: await entityOf(world, "b") });
+        await world.run(countWrites);
+        writes = 0;
+        await world.run(toggleAll, { done: true });
+        expect((await todosOf(world)).map(item => item.done)).toEqual([true, true, true]);
+        await world.run(countWrites);
+        expect(writes).toBe(2);
+        writes = 0;
+        await world.run(toggleAll, { done: false });
+        expect((await todosOf(world)).map(item => item.done)).toEqual([false, false, false]);
+        await world.run(countWrites);
+        expect(writes).toBe(3);
+    });
+
+    it("clears the todos that are done", async () => {
+        await using world = await withTodos("a", "b", "c");
+        await world.run(toggleTodo, { entity: await entityOf(world, "a") });
+        await world.run(toggleTodo, { entity: await entityOf(world, "c") });
+        await world.run(clearCompleted);
+        expect((await todosOf(world)).map(item => item.label)).toEqual(["b"]);
+        await world.run(clearCompleted);
+        expect((await todosOf(world)).map(item => item.label)).toEqual(["b"]);
+    });
+});

package/src/samples/todo/features/completion/model.ts

@@ -0,0 +1,21 @@
+import { System } from "../../../../index.js";
+import { done, todo } from "../todos/data.js";
+import { byDone } from "./data.js";
+
+/** Marks every todo done, or every one not done. Only todos that change are written. */
+export const toggleAll = System.create({
+    name: "completion/toggleAll",
+    input: { type: "object", properties: { done: { type: "boolean" } } },
+    components: { write: [done], has: [todo] },
+}, (row, { input }) => {
+    if (row[done] !== input.done) row[done] = input.done;
+});
+
+/** Deletes the todos that are done. */
+export const clearCompleted = System.create({
+    name: "completion/clearCompleted",
+    lookup: { byDone: { index: byDone } },
+}, ({ lookup, commands }) => {
+    const completed = lookup.byDone(true);
+    for (let i = 0; i < completed.length; i++) commands.despawn(completed.at(i).entity);
+});

package/src/samples/todo/features/filter/data.ts

@@ -0,0 +1,16 @@
+import { Resource } from "../../../../index.js";
+
+export type Filter = "all" | "active" | "completed";
+
+export const filterSchema = { anyOf: [{ const: "all" }, { const: "active" }, { const: "completed" }] } as const;
+
+/** Which todos the list shows: all, those not done, or those done. */
+export const filter = Symbol("filter");
+
+declare module "@adobe/ecs" {
+    interface Resources {
+        [filter]: { type: Filter };
+    }
+}
+
+Resource.register(filter, { type: { ...filterSchema, default: "all" } });

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

@@ -0,0 +1,84 @@
+import { afterEach, expect, it } from "vitest";
+import { Entity, workers, World } from "../../../../index.js";
+import { entityOfElement } from "../../shared/attach.js";
+import { settled, watchTicks } from "../../shared/ticks.test-helper.js";
+import * as todos from "../todos/dom.js";
+import { TodoList } from "../todos/elements/todo-list.js";
+import { TodoRow } from "../todos/elements/todo-row.js";
+import { addTodo, toggleTodo } from "../todos/model.js";
+import { dom, filters } from "./dom.js";
+import { TodoFilters } from "./elements/todo-filters.js";
+import { setFilter } from "./model.js";
+import { define } from "../../shared/elements/define.js";
+
+define({ "todo-list": TodoList, "todo-row": TodoRow, "todo-filters": TodoFilters });
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+it("shows the filter on its buttons, and hides the rows it leaves out, writing only those that change", async () => {
+    const list = document.createElement("todo-list");
+    const buttons = document.createElement("todo-filters");
+    document.body.append(buttons, list);
+    await using world = World.create({ [workers]: 0, [todos.list]: list, [filters]: buttons });
+    await watchTicks(world);
+    for (const system of [todos.dom, dom]) world.add(system);
+    for (const text of ["a", "b"]) await world.run(addTodo, { label: text });
+    await settled(world.run(addTodo, { label: "c" }));
+    const rows = [...list.querySelectorAll("todo-row")];
+    const entityAt = (index: number): Entity => {
+        const element = rows[index];
+        const entity = entityOfElement(element ?? null);
+        if (entity === Entity.none) throw new Error(`No row ${index}.`);
+        return entity;
+    };
+    await settled(world.run(toggleTodo, { entity: entityAt(1) }));
+    const shown = (): string => rows.map(element => element.checkVisibility() ? element.label : "_").join("");
+    expect(shown()).toBe("abc");
+
+    const records: MutationRecord[] = [];
+    const observer = new MutationObserver(delivered => records.push(...delivered));
+    observer.observe(list, { attributes: true, attributeFilter: ["hidden"], subtree: true });
+    const hiddenWrites = (): number => {
+        records.push(...observer.takeRecords());
+        return records.splice(0).length;
+    };
+    await settled(world.run(setFilter, { filter: "active" }));
+    expect(buttons.filter).toBe("active");
+    expect(shown()).toBe("a_c");
+    expect(hiddenWrites()).toBe(1);
+    await settled(world.run(setFilter, { filter: "completed" }));
+    expect(shown()).toBe("_b_");
+    expect(hiddenWrites()).toBe(3);
+    // A todo that changes hides or shows as the filter has it.
+    await settled(world.run(toggleTodo, { entity: entityAt(0) }));
+    expect(shown()).toBe("ab_");
+    expect(hiddenWrites()).toBe(1);
+    await settled(world.run(addTodo, { label: "d" }));
+    expect([...list.querySelectorAll("todo-row")].map(element => element.checkVisibility())).toEqual([true, true, false, false]);
+    await settled(world.run(setFilter, { filter: "all" }));
+    expect(shown()).toBe("abc");
+    observer.disconnect();
+});
+
+it("moves focus off a row it hides, to the nearest row it shows", async () => {
+    const list = document.createElement("todo-list");
+    document.body.append(list);
+    await using world = World.create({ [workers]: 0, [todos.list]: list });
+    await watchTicks(world);
+    for (const system of [todos.dom, dom]) world.add(system);
+    for (const text of ["a", "b", "c"]) await world.run(addTodo, { label: text });
+    await settled(world.run(addTodo, { label: "d" }));
+    const [a, b, c, d] = [...list.querySelectorAll("todo-row")];
+    const entityOf = (element: Element | undefined): Entity => entityOfElement(element ?? null);
+    await world.run(toggleTodo, { entity: entityOf(b) });
+    await settled(world.run(toggleTodo, { entity: entityOf(c) }));
+    // Filtered out: b's nearest row shown is d, after c, which is hidden too.
+    b?.focus();
+    await settled(world.run(setFilter, { filter: "active" }));
+    expect(document.activeElement).toBe(d);
+    // Toggled out from under the filter: d has no row shown after it, so a gets the focus.
+    await settled(world.run(toggleTodo, { entity: entityOf(d) }));
+    expect(document.activeElement).toBe(a);
+});

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

@@ -0,0 +1,63 @@
+import { Resource, System } from "../../../../index.js";
+import { done } from "../todos/data.js";
+import { row } from "../todos/dom.js";
+import { TodoRow } from "../todos/elements/todo-row.js";
+import { filter, type Filter } from "./data.js";
+import { TodoFilters } from "./elements/todo-filters.js";
+
+/** The page's filter buttons; null until the page provides them. */
+export const filters = Symbol("filters");
+
+declare module "@adobe/ecs" {
+    interface Resources {
+        [filters]: { type: TodoFilters | null; thread: "main" };
+    }
+}
+
+Resource.register(filters, { thread: "main" });
+
+/** Whether the filter leaves a todo out. */
+const leavesOut = (chosen: Filter, isDone: boolean): boolean => chosen === "completed" ? !isDone : chosen === "active" && isDone;
+
+const siblingOf = (node: Element, forward: boolean): Element | null => forward ? node.nextElementSibling : node.previousElementSibling;
+
+/**
+ * Focuses the row nearest `hiding` that the filter shows, after it or else before it, judged by the rows' `done`
+ * rather than their `hidden`, which this pass may not have reached yet.
+ */
+const focusNearest = (hiding: Element, chosen: Filter): void => {
+    for (const forward of [true, false]) {
+        for (let node = siblingOf(hiding, forward); node !== null; node = siblingOf(node, forward)) {
+            if (node instanceof TodoRow && !leavesOut(chosen, node.done)) return node.focus({ preventScroll: true });
+        }
+    }
+};
+
+/**
+ * Hides each row the filter leaves out, as its todo or the filter changes, moving focus off it. A new filter passes
+ * every row, but writes only those whose visibility changes; restyling them costs far more than the pass (see the
+ * README).
+ */
+export const filterRows = System.create({
+    name: "filter/filterRows",
+    observer: true,
+    components: { read: [done, row], changed: [done, row] },
+    resources: { read: [filter], changed: [filter] },
+}, (item, { resources }) => {
+    const element = item[row];
+    const hidden = leavesOut(resources[filter], item[done]);
+    if (element.hidden === hidden) return;
+    if (hidden && element.matches(":focus-within")) focusNearest(element, resources[filter]);
+    element.hidden = hidden;
+});
+
+export const bindFilters = System.create({
+    name: "filter/bindFilters",
+    observer: true,
+    resources: { read: [filter], changed: [filter], is: [filters] },
+}, ({ resources }) => {
+    resources[filters].filter = resources[filter];
+});
+
+/** The filter feature's DOM systems, as one composite: added, it runs on every tick. */
+export const dom = System.create([filterRows, bindFilters]);

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

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mutationsOf, part, record } from "../../../shared/elements/elements.test-helper.js";
+import { TodoFilters } from "./todo-filters.js";
+import { define } from "../../../shared/elements/define.js";
+
+define({ "todo-filters": TodoFilters });
+
+afterEach(() => {
+    document.body.replaceChildren();
+});
+
+describe("todo-filters", () => {
+    const pressed = (filters: HTMLElement): string[] => [...filters.shadowRoot?.querySelectorAll("button[aria-pressed=true]") ?? []].map(button => button.textContent ?? "");
+
+    it("marks the button of its filter", () => {
+        const filters = document.createElement("todo-filters");
+        document.body.append(filters);
+        expect(pressed(filters)).toEqual(["All"]);
+        filters.filter = "completed";
+        expect(pressed(filters)).toEqual(["Completed"]);
+    });
+
+    it("writes only the buttons whose state changes", () => {
+        const filters = document.createElement("todo-filters");
+        document.body.append(filters);
+        expect(mutationsOf(filters, () => {
+            filters.filter = "active";
+        }).map(record => record.target instanceof HTMLElement ? record.target.dataset.filter : null)).toEqual(["all", "active"]);
+    });
+
+    it("dispatches todo-filter with a clicked button's filter, keeping the filter it was given", () => {
+        const filters = document.createElement("todo-filters");
+        document.body.append(filters);
+        const seen = record(document.body, "todo-filter");
+        part(filters, "[data-filter=active]", HTMLButtonElement).click();
+        part(filters, "[data-filter=all]", HTMLButtonElement).click();
+        expect(seen).toEqual([
+            { type: "todo-filter", detail: { filter: "active" }, target: filters },
+            { type: "todo-filter", detail: { filter: "all" }, target: filters },
+        ]);
+        expect(pressed(filters)).toEqual(["All"]);
+    });
+});

package/src/samples/todo/features/filter/elements/todo-filters.ts

@@ -0,0 +1,70 @@
+/**
+ * `<todo-filters>`: the choice of which todos to show. Its `filter` property marks the chosen button; a click
+ * dispatches `todo-filter` with the button's filter, and the owner writes `filter` back.
+ */
+
+export type Filter = "all" | "active" | "completed";
+
+const filters: readonly Filter[] = ["all", "active", "completed"];
+
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+    :host { display: flex; gap: 4px; }
+    button { font: inherit; padding: 2px 8px; border: 1px solid transparent; border-radius: 4px; background: none;
+        color: inherit; cursor: pointer; }
+    button:hover { border-color: var(--todo-line, #e5e7eb); }
+    button[aria-pressed="true"] { border-color: var(--todo-accent, #2563eb); color: var(--todo-accent, #2563eb); }
+</style>
+<button data-filter="all" aria-pressed="true">All</button>
+<button data-filter="active" aria-pressed="false">Active</button>
+<button data-filter="completed" aria-pressed="false">Completed</button>`;
+
+export type TodoFiltersEvents = {
+    readonly "todo-filter": CustomEvent<{ readonly filter: Filter }>;
+};
+
+const isFilter = (value: string | undefined): value is Filter => filters.some(item => item === value);
+
+const listen = (host: HTMLElement, root: ShadowRoot): void => {
+    root.addEventListener("click", event => {
+        const chosen = event.target instanceof HTMLButtonElement ? event.target.dataset.filter : undefined;
+        if (isFilter(chosen)) host.dispatchEvent(new CustomEvent("todo-filter", { detail: { filter: chosen }, bubbles: true, composed: true }));
+    });
+};
+
+const show = (root: ShadowRoot, chosen: Filter): void => {
+    for (const button of root.querySelectorAll("button")) {
+        const pressed = String(button.dataset.filter === chosen);
+        if (button.getAttribute("aria-pressed") !== pressed) button.setAttribute("aria-pressed", pressed);
+    }
+};
+
+export class TodoFilters extends HTMLElement {
+    readonly #root: ShadowRoot;
+    #filter: Filter = "all";
+
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: "open" });
+        this.#root.append(template.content.cloneNode(true));
+        listen(this, this.#root);
+    }
+
+    get filter(): Filter {
+        return this.#filter;
+    }
+
+    set filter(value: Filter) {
+        if (value === this.#filter) return;
+        this.#filter = value;
+        show(this.#root, value);
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "todo-filters": TodoFilters;
+    }
+    interface HTMLElementEventMap extends TodoFiltersEvents {}
+}

package/src/samples/todo/features/filter/events.ts

@@ -0,0 +1,4 @@
+import { on, type Connect } from "../../shared/connect.js";
+import { setFilter } from "./model.js";
+
+export const connect: Connect = (world, root) => on(root, "todo-filter", event => void world.run(setFilter, { filter: event.detail.filter }));

package/src/samples/todo/features/filter/feature.ts

@@ -0,0 +1,12 @@
+import type { Feature } from "../../shared/feature.js";
+import { dom, filters } from "./dom.js";
+import { TodoFilters } from "./elements/todo-filters.js";
+import { connect } from "./events.js";
+
+/** Filtering: showing all todos, those not done, or those done. */
+export const filter: Feature = {
+    elements: { "todo-filters": TodoFilters },
+    resources: root => ({ [filters]: root.querySelector("todo-filters") }),
+    system: dom,
+    connect,
+};

package/src/samples/todo/features/filter/model.test.ts

@@ -0,0 +1,18 @@
+import { expect, it } from "vitest";
+import { System, workers, World } from "../../../../index.js";
+import { filter, type Filter } from "./data.js";
+import { setFilter } from "./model.js";
+
+let seen: Filter | null = null;
+const readFilter = System.create({ name: "test/readFilter", observer: true, resources: { read: [filter] } }, ({ resources }) => {
+    seen = resources[filter];
+});
+
+it("shows every todo until a filter is set", async () => {
+    await using world = World.create({ [workers]: 0 });
+    await world.run(readFilter);
+    expect(seen).toBe("all");
+    await world.run(setFilter, { filter: "completed" });
+    await world.run(readFilter);
+    expect(seen).toBe("completed");
+});

package/src/samples/todo/features/filter/model.ts

@@ -0,0 +1,10 @@
+import { System } from "../../../../index.js";
+import { filter, filterSchema } from "./data.js";
+
+export const setFilter = System.create({
+    name: "filter/set",
+    input: { type: "object", properties: { filter: filterSchema } },
+    resources: { write: [filter] },
+}, ({ input, resources }) => {
+    resources[filter] = input.filter;
+});

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

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { part, record } from "../../../shared/elements/elements.test-helper.js";
+import { TodoGenerate } from "./todo-generate.js";
+import { define } from "../../../shared/elements/define.js";
+
+define({ "todo-generate": TodoGenerate });
+
+describe("todo-generate", () => {
+    it("dispatches todo-generate with each button's count", () => {
+        const generate = document.createElement("todo-generate");
+        document.body.append(generate);
+        const seen = record(document.body, "todo-generate");
+        part(generate, "[data-count='10']", HTMLButtonElement).click();
+        part(generate, "[data-count='1000']", HTMLButtonElement).click();
+        expect(seen.map(event => event.detail)).toEqual([{ count: 10 }, { count: 1000 }]);
+        generate.remove();
+    });
+});

package/src/samples/todo/features/generate/elements/todo-generate.ts

@@ -0,0 +1,36 @@
+/** `<todo-generate>`: buttons that ask for generated todos, each dispatching `todo-generate` with its count. */
+
+const counts = [10, 1000];
+
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+    :host { display: flex; gap: 6px; }
+    button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--todo-line, #e5e7eb); border-radius: 4px;
+        background: var(--todo-surface, #fff); color: inherit; cursor: pointer; }
+    button:hover { border-color: var(--todo-accent, #2563eb); }
+</style>
+${counts.map(count => `<button data-count="${count}">Add ${count.toLocaleString("en-US")}</button>`).join("")}`;
+
+export type TodoGenerateEvents = {
+    readonly "todo-generate": CustomEvent<{ readonly count: number }>;
+};
+
+export class TodoGenerate extends HTMLElement {
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: "open" });
+        root.append(template.content.cloneNode(true));
+        root.addEventListener("click", event => {
+            const count = event.target instanceof HTMLButtonElement ? Number(event.target.dataset.count) : NaN;
+            if (Number.isInteger(count)) this.dispatchEvent(new CustomEvent("todo-generate", { detail: { count }, bubbles: true, composed: true }));
+        });
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "todo-generate": TodoGenerate;
+    }
+    interface HTMLElementEventMap extends TodoGenerateEvents {}
+}

package/src/samples/todo/features/generate/events.ts

@@ -0,0 +1,4 @@
+import { on, type Connect } from "../../shared/connect.js";
+import { addGenerated } from "./model.js";
+
+export const connect: Connect = (world, root) => on(root, "todo-generate", event => void world.run(addGenerated, { count: event.detail.count }));

package/src/samples/todo/features/generate/feature.ts

@@ -0,0 +1,11 @@
+import type { Feature } from "../../shared/feature.js";
+import { TodoGenerate } from "./elements/todo-generate.js";
+import { connect } from "./events.js";
+
+/** Generating: adding many todos at once, to try the app at scale. Its element drives nothing, so it has no DOM systems. */
+export const generate: Feature = {
+    elements: { "todo-generate": TodoGenerate },
+    resources: () => ({}),
+    system: null,
+    connect,
+};

package/src/samples/todo/features/generate/model.test.ts

@@ -0,0 +1,13 @@
+import { expect, it } from "vitest";
+import { labelsOf, todosOf, withTodos } from "../todos/todos.test-helper.js";
+import { addGenerated, generatedLabel } from "./model.js";
+
+it("adds generated todos after the ones there, each label numbered", async () => {
+    await using world = await withTodos("first");
+    await world.run(addGenerated, { count: 3 });
+    expect(await labelsOf(world)).toEqual(["first", generatedLabel(1), generatedLabel(2), generatedLabel(3)]);
+    expect(new Set(await labelsOf(world)).size).toBe(4);
+    const orders = (await todosOf(world)).map(item => item.order);
+    expect([...orders].sort((a, b) => a - b)).toEqual(orders);
+    expect(generatedLabel(0)).toBe("Buy milk #1");
+});

package/src/samples/todo/features/generate/model.ts

@@ -0,0 +1,19 @@
+import { System } from "../../../../index.js";
+import { Todo, done, label, order, orderAfter, ordered } from "../todos/data.js";
+
+const tasks = ["Buy milk", "Call the plumber", "Fix the bike", "Read a novel", "Write a letter", "Plan the trip", "Clean the kitchen", "Book a table"];
+
+/** The label of the `n`th generated todo. */
+export const generatedLabel = (n: number): string => `${tasks[n % tasks.length]} #${n + 1}`;
+
+/** Adds `count` todos with generated labels at the end of the list. */
+export const addGenerated = System.create({
+    name: "generate/add",
+    input: { type: "object", properties: { count: { type: "integer", minimum: 0 } } },
+    lookup: { ordered: { index: ordered, read: [order] } },
+}, ({ input, lookup, commands }) => {
+    const all = lookup.ordered();
+    const first = orderAfter(all);
+    const spawn = commands.spawn(Todo);
+    for (let i = 0; i < input.count; i++) spawn({ [label]: generatedLabel(all.length + i), [done]: false, [order]: first + i });
+});

package/src/samples/todo/features/index.ts

@@ -0,0 +1,4 @@
+export { completion } from "./completion/feature.js";
+export { filter } from "./filter/feature.js";
+export { generate } from "./generate/feature.js";
+export { todos } from "./todos/feature.js";

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

@@ -0,0 +1,31 @@
+import { Archetype, Component, Index } from "../../../../index.js";
+
+/** A todo's text. */
+export const label = Symbol("label");
+export const done = Symbol("done");
+/** Where a todo sits in the list: todos are listed by ascending order. */
+export const order = Symbol("order");
+export const todo = Symbol("todo");
+
+declare module "@adobe/ecs" {
+    interface Components {
+        [label]: { type: string };
+        [done]: { type: boolean };
+        [order]: { type: number };
+        [todo]: { type: true };
+    }
+}
+
+Component.register(label, { type: { type: "string" } });
+Component.register(done, { type: { type: "boolean" } });
+Component.register(order, { type: { type: "number" } });
+Component.register(todo, { type: { const: true } });
+
+export const Todo = Archetype.create([todo, label, done, order]);
+
+/** Every todo, in list order. */
+export const ordered = Index.create({ name: "todos/ordered", key: [order], sorted: true, components: { has: [todo] } });
+
+/** The order just after the last of `ordered`'s todos, as a lookup through it gives them: 0 for none. */
+export const orderAfter = (todos: { readonly length: number; readonly at: (index: number) => { readonly [order]: number } }): number =>
+    todos.length === 0 ? 0 : todos.at(todos.length - 1)[order] + 1;