@esportsplus/ui 0.56.3 → 0.57.0

package/scripts/slides.test.mjs

@@ -0,0 +1,126 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { measure, slides } from '../src/shared/animation.ts';
+
+
+const TIMING = { duration: 200, easing: 'ease' };
+
+
+// An element drawn at 'from' until the change, laid out at 'to' after it; every cancel, read and animate is logged.
+function element(name, from, to, log) {
+    let rect = from;
+
+    return {
+        animate(keyframes, options) {
+            log.push(`animate ${name}`);
+
+            return { cancel: () => log.push(`cancel ${name}`), keyframes, options };
+        },
+        getBoundingClientRect() {
+            log.push(`read ${name}`);
+            return rect;
+        },
+        move() {
+            rect = to;
+        },
+        name
+    };
+}
+
+function box(left, top) {
+    return { bottom: top + 10, height: 10, left, right: left + 10, top, width: 10 };
+}
+
+function scene(log) {
+    return [
+        element('a', box(0, 0), box(0, 20), log),
+        element('b', box(0, 20), box(0, 0), log),
+        element('c', box(0, 40), box(0, 40), log)
+    ];
+}
+
+
+test('slides cancel every running slide before reading any box, and hear new elements last', () => {
+    let log = [],
+        elements = scene(log),
+        entered = element('d', null, box(0, 60), log);
+
+    measure(elements);
+    elements.forEach((e) => e.move());
+    slides(elements, TIMING);
+
+    // A second change interrupts the first, so each running slide is cancelled before anything is read.
+    measure(elements);
+    entered.move();
+    log.length = 0;
+
+    let all = [...elements, entered],
+        heard = [];
+
+    slides(all, TIMING, (e) => {
+        heard.push(e.name);
+        log.push(`enter ${e.name}`);
+    });
+
+    assert.deepEqual(log, [
+        'cancel a', 'cancel b',
+        'read a', 'read b', 'read c', 'read d',
+        'enter d'
+    ]);
+    assert.deepEqual(heard, ['d']);
+});
+
+test('slides read the new box only after cancelling, and start a slide only where the box moved', () => {
+    let log = [],
+        elements = scene(log);
+
+    measure(elements);
+    elements.forEach((e) => e.move());
+    log.length = 0;
+    slides(elements, TIMING);
+
+    assert.deepEqual(log, ['read a', 'read b', 'read c', 'animate a', 'animate b']);
+});
+
+test('slides return the same boxes, and start the same slides, as one call per element', () => {
+    let batchLog = [],
+        batched = scene(batchLog),
+        singleLog = [],
+        single = scene(singleLog),
+        started = (log) => log.filter((entry) => entry.startsWith('animate'));
+
+    measure(batched);
+    measure(single);
+    batched.forEach((e) => e.move());
+    single.forEach((e) => e.move());
+
+    let rects = slides(batched, TIMING),
+        expected = single.map((e) => slides([e], TIMING)[0]);
+
+    assert.deepEqual(rects, expected);
+    assert.deepEqual(started(batchLog), started(singleLog));
+});
+
+test('an element measure never saw still reports its box, and enter hears it', () => {
+    let log = [],
+        fresh = element('fresh', null, box(5, 5), log);
+
+    fresh.move();
+
+    let entered = [];
+
+    assert.deepEqual(slides([fresh], TIMING, (e) => entered.push(e)), [box(5, 5)]);
+    assert.deepEqual(entered, [fresh]);
+});
+
+test('without a timing nothing slides, but every box is still read', () => {
+    let log = [],
+        elements = scene(log);
+
+    measure(elements);
+    elements.forEach((e) => e.move());
+    log.length = 0;
+
+    assert.deepEqual(slides(elements, null), [box(0, 20), box(0, 0), box(0, 40)]);
+    assert.deepEqual(log, ['read a', 'read b', 'read c']);
+});

package/scripts/subscribe.test.mjs

@@ -0,0 +1,49 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { ReactiveArray } from '@esportsplus/reactivity';
+import './resolve.mjs';
+const { default: subscribe } = await import('../src/shared/subscribe.ts');
+
+
+test('each mounted metric hears every change and an unmounted one is removed from the array', () => {
+    let data = new ReactiveArray([{ label: 'a', value: 1 }]),
+        first = 0,
+        second = 0,
+        stop = subscribe(data, () => first++),
+        other = subscribe(data, () => second++);
+
+    data.push({ label: 'b', value: 2 });
+    data.splice(0, 1);
+    data.reverse();
+    data.sort((a, b) => a.value - b.value);
+    data.unshift({ label: 'c', value: 3 });
+    data.shift();
+    data.pop();
+    assert.equal(first, 7);
+    assert.equal(second, 7);
+
+    stop();
+    data.push({ label: 'd', value: 4 });
+    assert.equal(first, 7);
+    assert.equal(second, 8);
+
+    other();
+    stop();
+    data.push({ label: 'e', value: 5 });
+    assert.equal(second, 8);
+    assert.deepEqual(Object.keys(data.listeners), []);
+});
+
+test('the same listener on two arrays is removed from each independently', () => {
+    let a = new ReactiveArray([]),
+        b = new ReactiveArray([]),
+        calls = 0,
+        listener = () => calls++,
+        stop = subscribe(a, listener);
+
+    subscribe(b, listener);
+    stop();
+    a.push(1);
+    b.push(1);
+    assert.equal(calls, 1);
+});

package/scripts/ticker.test.mjs

@@ -0,0 +1,126 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+
+let errors = [],
+    frameId = 0,
+    frames = new Map();
+
+Object.assign(globalThis, {
+    cancelAnimationFrame: (id) => frames.delete(id),
+    reportError: (error) => errors.push(error),
+    requestAnimationFrame: (callback) => {
+        frames.set(++frameId, callback);
+        return frameId;
+    }
+});
+
+let { ticker } = await import('../src/shared/ticker.ts');
+
+
+function frame(now) {
+    let callbacks = [...frames.values()];
+
+    frames.clear();
+    callbacks.forEach((callback) => callback(now));
+}
+
+
+test('every subscriber runs off one frame callback, handed the same timestamp', () => {
+    let heard = [],
+        stops = [1, 2, 3].map((n) => ticker((now) => heard.push([n, now])));
+
+    assert.equal(frames.size, 1);
+    frame(16);
+    assert.equal(frames.size, 1);
+    assert.deepEqual(heard, [[1, 16], [2, 16], [3, 16]]);
+
+    stops.forEach((stop) => stop());
+});
+
+test('the loop stops once nothing is subscribed, and starts again on the next subscribe', () => {
+    let stop = ticker(() => {});
+
+    assert.equal(frames.size, 1);
+    stop();
+    stop();
+    assert.equal(frames.size, 0);
+
+    stop = ticker(() => {});
+    assert.equal(frames.size, 1);
+    stop();
+});
+
+test('a subscriber unsubscribing itself stops the loop after its frame', () => {
+    let calls = 0,
+        stop = ticker(() => {
+            calls++;
+            stop();
+        });
+
+    frame(16);
+    frame(32);
+    assert.equal(calls, 1);
+    assert.equal(frames.size, 0);
+});
+
+test('one subscribed mid-frame starts on the next frame, one unsubscribed mid-frame is skipped', () => {
+    let heard = [],
+        late,
+        stopB,
+        stopA = ticker((now) => {
+            heard.push(['a', now]);
+            stopB();
+            late ??= ticker((t) => heard.push(['late', t]));
+        });
+
+    stopB = ticker((now) => heard.push(['b', now]));
+    frame(16);
+    frame(32);
+
+    assert.deepEqual(heard, [['a', 16], ['a', 32], ['late', 32]]);
+
+    stopA();
+    late();
+    assert.equal(frames.size, 0);
+});
+
+test('one subscriber throwing does not stop the others or the loop', () => {
+    let failure = new Error('tick failed'),
+        heard = [],
+        stops = [
+            ticker(() => {
+                throw failure;
+            }),
+            ticker((now) => heard.push(now))
+        ];
+
+    frame(16);
+    frame(32);
+
+    assert.deepEqual(heard, [16, 32]);
+    assert.deepEqual(errors, [failure, failure]);
+
+    stops.forEach((stop) => stop());
+    errors.length = 0;
+});
+
+test('marquees sharing a scroll tracker step its spring once per frame off the shared timestamp', async () => {
+    let { step } = await import('../src/components/marquee/velocity.ts'),
+        tracker = { factor: 0, smooth: 0, smoothRate: 0, stepped: 0, time: 0, velocity: 2000 },
+        steps = [],
+        stops = [0, 1].map(() => ticker((now) => {
+            let before = tracker.smoothRate;
+
+            tracker.time = now;
+            step(tracker, now, 1 / 60);
+            steps.push(tracker.smoothRate !== before);
+        }));
+
+    frame(16);
+    frame(32);
+
+    assert.deepEqual(steps, [true, false, true, false]);
+
+    stops.forEach((stop) => stop());
+});

package/scripts/transition.test.mjs

@@ -0,0 +1,83 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { trackTransition } from '../src/shared/transition.ts';
+
+
+function frames(t) {
+    let queue = new Map(), id = 0;
+
+    for (let [key, value] of Object.entries({
+        requestAnimationFrame: callback => { queue.set(++id, callback); return id; },
+        cancelAnimationFrame: frame => queue.delete(frame)
+    })) {
+        let original = Object.getOwnPropertyDescriptor(globalThis, key);
+
+        Object.defineProperty(globalThis, key, { configurable: true, writable: true, value });
+        t.after(() => {
+            if (original) Object.defineProperty(globalThis, key, original);
+            else delete globalThis[key];
+        });
+    }
+
+    return () => {
+        let callbacks = [...queue.values()];
+        queue.clear();
+        callbacks.forEach(callback => callback());
+    };
+}
+
+
+test('settles unchanged heights and reduced motion without needing transitionend', t => {
+    let flush = frames(t), changes = [], reads = 0,
+        element = { getAnimations: () => { reads++; return []; } },
+        motion = trackTransition('height', (running, target) => changes.push([running, target]));
+
+    motion.attributes.onconnect(element);
+    motion.settle();
+    motion.settle();
+    flush();
+    assert.equal(reads, 1);
+    assert.deepEqual(changes, [[false, element]]);
+    motion.attributes.ondisconnect();
+});
+
+test('keeps reversing transitions running and filters unrelated and descendant events', t => {
+    let flush = frames(t), changes = [], animations = [],
+        element = { getAnimations: () => animations },
+        motion = trackTransition('height', running => changes.push(running)),
+        event = { target: element, propertyName: 'height', pseudoElement: '' };
+
+    motion.attributes.onconnect(element);
+    flush();
+    motion.attributes.ontransitionrun({ ...event, target: {} });
+    motion.attributes.ontransitionrun({ ...event, propertyName: 'opacity' });
+    motion.attributes.ontransitionrun({ ...event, pseudoElement: '::before' });
+    assert.deepEqual(changes, [false]);
+
+    animations = [{ transitionProperty: 'height', playState: 'running' }];
+    motion.attributes.ontransitionrun(event);
+    motion.attributes.ontransitioncancel(event);
+    motion.attributes.ontransitionrun(event);
+    flush();
+    assert.equal(changes.at(-1), true);
+
+    animations = [
+        { transitionProperty: 'height', playState: 'finished' },
+        { transitionProperty: 'opacity', playState: 'running' }
+    ];
+    motion.attributes.ontransitionend(event);
+    flush();
+    assert.equal(changes.at(-1), false);
+    motion.attributes.ondisconnect();
+});
+
+test('disconnect cancels pending checks and clears the connected element', t => {
+    let flush = frames(t), changes = [],
+        element = { getAnimations() { throw new Error('Read disconnected element'); } },
+        motion = trackTransition('height', (running, target) => changes.push([running, target]));
+
+    motion.attributes.onconnect(element);
+    motion.attributes.ondisconnect();
+    flush();
+    assert.deepEqual(changes, [[false, undefined]]);
+});

package/scripts/viewport.test.mjs

@@ -0,0 +1,82 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import './resolve.mjs';
+
+
+// A 1000 x 800 window with a classic 15px scrollbar on each axis: the client box is what's left to place into.
+Object.assign(globalThis, {
+    document: { documentElement: { clientHeight: 785, clientWidth: 985 } },
+    getComputedStyle: (element) => ({
+        getPropertyValue: (name) => element.style?.[name] ?? '',
+        paddingTop: element.style?.paddingTop ?? '0px'
+    }),
+    innerHeight: 800,
+    innerWidth: 1000
+});
+
+let { fit, flip, viewport } = await import('../src/shared/viewport.ts'),
+    { default: place } = await import('../src/components/select/placement.ts');
+
+
+test('the viewport is the client box, leaving out the scrollbars', () => {
+    assert.deepEqual(viewport(), { height: 785, width: 985 });
+});
+
+test('fit keeps a box inside the margins, and the near margin wins when it fits neither', () => {
+    assert.equal(fit(100, 50, 985, 12), 100);
+    assert.equal(fit(-20, 50, 985, 12), 12);
+    // Against the scrollbar, not the window edge: 985 - 12 - 50.
+    assert.equal(fit(950, 50, 985, 12), 923);
+    assert.equal(fit(400, 2000, 985, 12), 12);
+});
+
+test('flip opens toward the far end unless that crosses its margin, never past the near margin', () => {
+    assert.equal(flip(100, 200, 985, 8), 100);
+    // 900 + 80 is past 985 - 8 though inside the 1000px window: it opens back from the point instead.
+    assert.equal(flip(900, 80, 985, 8), 820);
+    assert.equal(flip(50, 200, 240, 8), 8);
+});
+
+function select({ count = 20, left = 100, selected = 0, top = 100 } = {}) {
+    let trigger = {
+        getBoundingClientRect: () => ({ height: 32, left, top, width: 120 }),
+        offsetHeight: 32,
+        offsetLeft: 0,
+        offsetTop: 0,
+        offsetWidth: 120
+    };
+
+    return place({
+        label: { offsetLeft: 12 },
+        option: { offsetHeight: 32 },
+        panel: { style: {} },
+        scroller: { style: { paddingTop: '4px' } },
+        trigger,
+        value: { offsetLeft: 0 }
+    }, count, selected);
+}
+
+function style(result) {
+    return Object.fromEntries([...result.style.matchAll(/^\s*(left|top|width): ([-\d.]+)px/gm)].map(([, name, value]) => [name, Number(value)]));
+}
+
+test('select places the selected option over the trigger when it fits', () => {
+    let result = select({ selected: 0 });
+
+    assert.equal(result.scroll, 0);
+    assert.deepEqual(style(result), { left: -12, top: -4, width: 132 });
+});
+
+test('select stays clear of the bottom scrollbar, trading position for scroll', () => {
+    // Eight 32px rows and 4px padding make a 264px panel, which must end at 785 - 8, not the window's 800 - 8.
+    let result = select({ selected: 0, top: 600 }),
+        { top } = style(result);
+
+    assert.equal(600 + top + 264, 777);
+});
+
+test('select stays clear of the side scrollbar', () => {
+    let { left, width } = style(select({ left: 900 }));
+
+    assert.equal(900 + left + width, 985 - 8);
+});

package/scripts/visible.test.mjs

@@ -0,0 +1,186 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+
+// A native observer queues an initial entry for every target it starts observing, re-observing included.
+let observers = [];
+
+class FakeObserver {
+    constructor(callback, options) {
+        this.callback = callback;
+        this.connected = true;
+        this.options = options;
+        this.queue = [];
+        this.targets = new Set();
+        observers.push(this);
+    }
+    deliver(...entries) {
+        this.callback(entries.map(([target, isIntersecting]) => ({ isIntersecting, target })));
+    }
+    disconnect() {
+        this.connected = false;
+        this.targets.clear();
+    }
+    flush() {
+        let queue = this.queue;
+
+        this.queue = [];
+        this.deliver(...queue.filter(([target]) => this.targets.has(target)));
+    }
+    observe(target) {
+        this.targets.add(target);
+        this.queue.push([target, false]);
+    }
+    unobserve(target) {
+        this.targets.delete(target);
+    }
+}
+
+globalThis.IntersectionObserver = FakeObserver;
+
+let { observeIntersection, onceVisible } = await import('../src/shared/visible.ts');
+
+
+function live() {
+    return observers.filter((observer) => observer.connected);
+}
+
+function reset() {
+    observers.length = 0;
+}
+
+
+test('handlers with the same options share one observer and receive only their own entries', () => {
+    reset();
+
+    let a = {}, b = {}, c = {},
+        calls = [],
+        first = (entries) => calls.push(['first', entries.map((entry) => entry.target)]),
+        second = (entries) => calls.push(['second', entries.map((entry) => entry.target)]),
+        releases = [
+            observeIntersection(a, first, { rootMargin: '96px' }),
+            observeIntersection(b, first, { rootMargin: '96px' }),
+            observeIntersection(c, second, { rootMargin: '96px' })
+        ];
+
+    assert.equal(observers.length, 1);
+    assert.deepEqual(observers[0].options, { rootMargin: '96px' });
+
+    observers[0].queue.length = 0;
+    observers[0].deliver([a, true], [c, true], [b, false]);
+
+    assert.deepEqual(calls, [['first', [a, b]], ['second', [c]]]);
+
+    releases.forEach((release) => release());
+});
+
+test('distinct margins and thresholds get observers of their own', () => {
+    reset();
+
+    let element = {},
+        noop = () => {},
+        releases = [
+            observeIntersection(element, noop),
+            observeIntersection(element, noop, { threshold: 0.4 }),
+            observeIntersection(element, noop, { rootMargin: '400px 0px' }),
+            observeIntersection(element, noop, { rootMargin: '400px 0px' }),
+            observeIntersection(element, noop, { threshold: [0, 0.5] })
+        ];
+
+    assert.equal(live().length, 4);
+    releases.forEach((release) => release());
+    assert.equal(live().length, 0);
+});
+
+test('a newly observed element delivers its initial entry, even to a second handler on the same element', () => {
+    reset();
+
+    let element = {},
+        heard = [],
+        release = [
+            observeIntersection(element, (entries) => heard.push(['first', entries.length])),
+        ];
+
+    observers[0].flush();
+    release.push(observeIntersection(element, (entries) => heard.push(['second', entries.length])));
+    observers[0].flush();
+
+    // Both hear the re-observation, as two observers of their own would each have heard their first delivery.
+    assert.deepEqual(heard, [['first', 1], ['first', 1], ['second', 1]]);
+
+    release.forEach((r) => r());
+});
+
+test('the last element released disconnects the observer, and the next observe makes a fresh one', () => {
+    reset();
+
+    let a = {}, b = {},
+        noop = () => {},
+        releaseA = observeIntersection(a, noop),
+        releaseB = observeIntersection(b, noop);
+
+    releaseA();
+    releaseA();
+    assert.equal(live().length, 1);
+    assert.equal(observers[0].targets.has(a), false);
+    assert.equal(observers[0].targets.has(b), true);
+
+    releaseB();
+    assert.equal(live().length, 0);
+
+    let releaseC = observeIntersection(a, noop);
+
+    assert.equal(observers.length, 2);
+    assert.equal(live().length, 1);
+    releaseC();
+});
+
+test('an element released by an earlier handler in the same delivery is not reported', () => {
+    reset();
+
+    let a = {}, b = {},
+        heard = [],
+        releaseB,
+        releaseA = observeIntersection(a, () => {
+            heard.push('a');
+            releaseB();
+        });
+
+    releaseB = observeIntersection(b, () => heard.push('b'));
+    observers[0].deliver([a, true], [b, true]);
+
+    assert.deepEqual(heard, ['a']);
+    releaseA();
+});
+
+test('onceVisible shows once, on the first entry in view, and stops observing', () => {
+    reset();
+
+    let element = {},
+        shown = 0,
+        attributes = onceVisible(() => shown++, { threshold: 0.4 });
+
+    attributes.onconnect(element);
+    assert.deepEqual(observers[0].options, { threshold: 0.4 });
+
+    observers[0].flush();
+    assert.equal(shown, 0);
+
+    observers[0].deliver([element, true]);
+    assert.equal(shown, 1);
+    assert.equal(live().length, 0);
+
+    attributes.ondisconnect();
+    assert.equal(shown, 1);
+});
+
+test('onceVisible stops observing on disconnect', () => {
+    reset();
+
+    let attributes = onceVisible(() => {});
+
+    attributes.onconnect({});
+    assert.equal(live().length, 1);
+    attributes.ondisconnect();
+    assert.equal(live().length, 0);
+});

package/shared.scss

@@ -0,0 +1,2 @@
+// Dart sass doesn't support changing root directory for the package to 'src'
+@forward './src/shared/scss';