@adobe/ecs 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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