DOM ENGINEV0.10.0FIZLET
Start

SLOT V0.10.0

fizlet/slot

Mount a Fizlet scene into an astro-base-engine slot, <figure class="ae-slot" data-slot-target="<page>#<slot>" role="img" aria-label="…">. - Lazy: nothing loads or runs until the slot comes near the viewport, and then only once the main thread is idle (or idle ms have passed), so the page's own work goes first. - Safe first tap: a tap on the slot before the scene is up loads it at once and is handed to the scene as plain numbers (first), never as a stale PointerEvent whose pointer is gone. - Reduced motion: the slot keeps its placeholder and fallback; the scene never loads. If the setting turns on while a scene runs, the scene goes and the fallback comes back. - Accessible: role="img" + aria-label stay unless the scene says it renders real accessible content (accessible: true); until then the stage is aria-hidden. - Contained: the scene gets its own stage inside the slot (contain: strict). Every change the slot makes goes through a Ledger, so destroy() gives the page back exactly.

APISource ↗
fizlet/slot · GZIP1,767 B1.7 KB of a 2.0 KB budget

Measured on this build: minified and gzipped with everything it imports, the way npm run size checks the budget in CI.

MODULES · hosted on this site
import { findSlot, slot } from "https://coded-dot-design.github.io/fizlet/dist/slot.js";
NPM · COMING SOON
npm install fizlet   # not published yet
import { findSlot, slot } from "fizlet/slot";

API

Every export, with its doc comment, read from the published type declarations of v0.10.0.

SlotScene interface

export interface SlotScene {
    /** Remove the scene (its engine's destroy() restores what it changed). */
    destroy(): void;
    /** True when the scene renders real accessible content: the slot drops role="img". */
    accessible?: boolean;
}

SlotTap interface

A tap on the slot before the scene was up: where (px from the slot's top left) and when.

export interface SlotTap {
    x: number;
    y: number;
    /** `performance.now()` when the finger went down. */
    at: number;
}

SlotMount type

Build the scene inside stage (sized to the slot). slot is the figure, read-only. first is the tap that started the load, if one did: act on it as an intent (aim, fire), not as an event.

export type SlotMount = (stage: HTMLElement, slot: HTMLElement, first: SlotTap | null) => SlotScene;

SlotOptions interface

export interface SlotOptions {
    /** How close to the viewport the slot must come before the scene loads (default "200px"). */
    margin?: string;
    /** Longest wait (ms) for an idle main thread once the slot is near (default 1000; 0: no wait). */
    idle?: number;
}

findSlot const

The slot figure for "<page>#<slot>" (or null).

export declare const findSlot: (target: string, doc?: Document) => HTMLElement | null;

slot function

export declare function slot(target: string | HTMLElement, load: () => Promise<SlotMount> | SlotMount, opts?: SlotOptions): {
    /** The slot figure, or null when no slot matches the target. */
    el: HTMLElement | null;
    readonly mounted: boolean;
    /** Remove the scene, the stage and every listener; the slot is back as the engine drew it. */
    destroy(): void;
};