@davidsouther/jiffies 1.0.0-beta.1 → 2.0.0

package/lib/esm/components/virtual_scroll.d.ts

@@ -0,0 +1,40 @@
+export interface VirtualScrollSettings {
+    minIndex: number;
+    maxIndex: number;
+    startIndex: number;
+    itemHeight: number;
+    count: number;
+    tolerance: number;
+}
+export interface VirtualScrollDataAdapter<T> {
+    (offset: number, limit: number): Iterable<T>;
+}
+export declare function arrayAdapter<T>(data: T[]): VirtualScrollDataAdapter<T>;
+export interface VirtualScrollProps<T, U extends HTMLElement> {
+    settings: Partial<VirtualScrollSettings>;
+    get: VirtualScrollDataAdapter<T>;
+    row: (t: T) => U;
+}
+export declare function fillVirtualScrollSettings(settings: Partial<VirtualScrollSettings>): VirtualScrollSettings;
+export declare function initialState<T>(settings: VirtualScrollSettings): VirtualScrollState<T>;
+export declare function getData<T>(minIndex: number, maxIndex: number, offset: number, limit: number, get: VirtualScrollDataAdapter<T>): T[];
+export declare function doScroll<T>(scrollTop: number, state: VirtualScrollState<T>, get: VirtualScrollDataAdapter<T>): {
+    scrollTop: number;
+    topPaddingHeight: number;
+    bottomPaddingHeight: number;
+    data: T[];
+};
+interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
+    settings: VirtualScrollSettings;
+    scrollTop: number;
+    bufferedItems: number;
+    totalHeight: number;
+    viewportHeight: number;
+    topPaddingHeight: number;
+    bottomPaddingHeight: number;
+    toleranceHeight: number;
+    data: T[];
+    rows: U[];
+}
+export declare const VirtualScroll: import("../dom/fc.js").FCComponentCtor<VirtualScrollProps<any, HTMLElement>, VirtualScrollState<any, HTMLElement>>;
+export default VirtualScroll;

package/{build → lib/esm}/components/virtual_scroll.js

@@ -5,7 +5,7 @@ export function arrayAdapter(data) {
     return (offset, limit) => data.slice(offset, offset + limit);
 }
 export function fillVirtualScrollSettings(settings) {
-    const { minIndex = 0, maxIndex = 1, startIndex = 0, itemHeight = 20, count = maxIndex - minIndex + 1, tolerance = count, } = settings;
+    const { minIndex = 0, maxIndex = Number.MAX_SAFE_INTEGER, startIndex = 0, itemHeight = 20, count = maxIndex - minIndex + 1, tolerance = count, } = settings;
     return { minIndex, maxIndex, startIndex, itemHeight, count, tolerance };
 }
 export function initialState(settings) {
@@ -76,11 +76,11 @@ export const VirtualScroll = FC("virtual-scroll", (element, props) => {
         state.topPaddingHeight = newState.topPaddingHeight;
         state.bottomPaddingHeight = newState.bottomPaddingHeight;
         state.data = newState.data;
-        element[State].rows = state.data.map(props.row);
+        state.rows = state.data.map(props.row);
         viewportElement.update(div({
             class: "VirtualScroll__topPadding",
             style: { height: `${state.topPaddingHeight}px` },
-        }), ...(element[State].rows ?? []).map((row, i) => div({
+        }), ...(state.rows ?? []).map((row, i) => div({
             class: `VirtualScroll__item_${i}`,
             style: { height: `${settings.itemHeight}px` },
         }, row)), div({

package/{build → lib/esm}/components/virtual_scroll.test.js

@@ -10,12 +10,11 @@ describe("VirtualScroll", () => {
             get: arrayAdapter(data),
             row: (i) => div(`${i}`),
         };
-        // @ts-ignore TODO(TFC)
         const scroll = VirtualScroll(props);
-        expect(scroll[State].bufferedItems).toBe(9);
-        expect(scroll[State].data).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8]);
+        expect(scroll[State]?.bufferedItems).toBe(9);
+        expect(scroll[State]?.data).toEqual([0, 1, 2, 3, 4]);
         //expect(scroll.state.topPaddingHeight).toBe(0);
-        expect(scroll[State].viewportHeight).toBe(60);
+        expect(scroll[State]?.viewportHeight).toBe(60);
         //expect(scroll.state.totalHeight).toBe(200);
     });
 });

package/lib/esm/context.d.ts

@@ -0,0 +1,15 @@
+import { Err, Result } from "./result.js";
+export declare const Enter: unique symbol;
+export declare const Exit: unique symbol;
+export interface Context {
+    [Enter]: () => void;
+    [Exit]: () => void;
+}
+export interface Operation<T, E extends Error, C extends Context> {
+    (c: C): T | Result<T, E>;
+}
+export interface AsyncOperation<T, E extends Error, C extends Context> {
+    (c: C): Promise<T | Result<T, E>>;
+}
+export declare function using<T, E extends Error, C extends Context>(context: C | (() => C) | Operation<T, E, C>, operation?: Operation<T, E, C>, normalizeError?: (e: Error | unknown | any) => Err<E>): Result<T, E>;
+export declare function asyncUsing<T, E extends Error, C extends Context>(context: C | (() => Promise<C>), operation: AsyncOperation<T, E, C>, normalizeError?: (e: Error | unknown | any) => Err<E>): Promise<Result<T, E>>;

package/{build → lib/esm}/context.js

@@ -2,8 +2,8 @@ import { Ok, Err, isResult } from "./result.js";
 export const Enter = Symbol("Context Enter");
 export const Exit = Symbol("Context Exit");
 export function using(context, operation, normalizeError = (e) => Err(e)) {
-    if (typeof context == "function") {
-        if (context.length == 1) {
+    if (typeof context === "function") {
+        if (context.length === 1) {
             operation = context;
             context = {};
         }
@@ -26,7 +26,7 @@ export function using(context, operation, normalizeError = (e) => Err(e)) {
     return result;
 }
 export async function asyncUsing(context, operation, normalizeError = (e) => Err(e)) {
-    context = typeof context == "function" ? await context() : context;
+    context = typeof context === "function" ? await context() : context;
     let result;
     try {
         context[Enter]();

package/lib/esm/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce(fn: (...args: any[]) => any, ms?: number): (...args: Parameters<typeof fn>) => ReturnType<typeof fn>;

package/lib/esm/diff.d.ts

@@ -0,0 +1,15 @@
+export declare const DiffA: unique symbol;
+export declare const DiffB: unique symbol;
+export declare type DiffIndex = string | number;
+export declare type DiffPrimitive = string | number | boolean | null | undefined;
+interface DiffEntry {
+    key: DiffIndex;
+    left: DiffPrimitive;
+    right: DiffPrimitive;
+}
+interface DiffList {
+    key: DiffIndex;
+    children: (DiffEntry | DiffList)[];
+}
+export declare function diff<T>(a: Partial<T>, b: Partial<T>): (DiffEntry | DiffList)[];
+export {};

package/lib/esm/diff.js

@@ -0,0 +1,54 @@
+import { range } from "./range.js";
+import { isSome, None, Some } from "./result.js";
+export const DiffA = Symbol("A");
+export const DiffB = Symbol("B");
+function doDiff(va, vb, k) {
+    if (Array.isArray(va)) {
+        // @ts-ignore
+        return diffArray(va, vb, k);
+    }
+    if (typeof va === "object") {
+        const d = diffObject(va, vb, k);
+        if (d.children.length === 0) {
+            return None();
+        }
+        else {
+            return Some(d);
+        }
+    }
+    if (Object.is(va, vb)) {
+        return None();
+    }
+    else {
+        // @ts-ignore
+        return { key: k, left: va, right: vb };
+    }
+}
+function diffArray(a, b, key) {
+    const indexes = Math.max(a.length, b.length);
+    const children = range(0, indexes)
+        .map((i) => doDiff(a[i], b[i], i))
+        .filter(isSome);
+    return children.length > 0 ? { key, children } : None();
+}
+function diffObject(a, b, key = "") {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    const children = [...keys]
+        // @ts-ignore
+        .map((k) => doDiff(a[k], b[k], k))
+        .filter(isSome);
+    return {
+        key,
+        children,
+    };
+}
+export function diff(a, b) {
+    if (typeof a != "object" && !Object.is(a, b)) {
+        // @ts-ignore
+        return [{ key: "", left: a, right: b }];
+    }
+    return (Array.isArray(a)
+        ? // @ts-ignore
+            diffArray(a, b, "") ?? { children: [] }
+        : diffObject(a, b, "")).children;
+}

package/lib/esm/diff.test.js

@@ -0,0 +1,39 @@
+import { diff } from "./diff.js";
+import { describe, it } from "./scope/describe.js";
+import { expect } from "./scope/expect.js";
+describe("diff", () => {
+    it("diffs primitives", () => {
+        const diffed = diff(1, 2);
+        expect(diffed).toEqual([{ key: "", left: 1, right: 2 }]);
+    });
+    it("diffs objects", () => {
+        const diffed = diff({ a: 1, b: 2 }, { a: 2, b: 2 });
+        expect(diffed).toEqual([{ key: "a", left: 1, right: 2 }]);
+    });
+    it("diffs nested objects", () => {
+        const diffed = diff({ a: { c: 1 }, b: 2 }, { a: { c: 2 }, b: 2 });
+        expect(diffed).toEqual([
+            { key: "a", children: [{ key: "c", left: 1, right: 2 }] },
+        ]);
+    });
+    it("diffs missing sides", () => {
+        const diffed = diff({ a: 1 }, { b: 2 });
+        expect(diffed).toEqual([
+            { key: "a", left: 1, right: undefined },
+            { key: "b", left: undefined, right: 2 },
+        ]);
+    });
+    it("diffs arrays", () => {
+        const diffed = diff([1, 2, 3], [1, 4, 3]);
+        expect(diffed).toEqual([{ key: 1, left: 2, right: 4 }]);
+    });
+    it("diffs objects in an array", () => {
+        const diffed = diff([{ a: { b: 1 } }, { a: { b: 2 } }, { a: { b: 3 } }], [{ a: { b: 1 } }, { a: { b: 4 } }, { a: { b: 3 } }]);
+        expect(diffed).toEqual([
+            {
+                key: 1,
+                children: [{ key: "a", children: [{ key: "b", left: 2, right: 4 }] }],
+            },
+        ]);
+    });
+});

package/lib/esm/display.d.ts

@@ -0,0 +1,5 @@
+export declare type Display = string | {
+    toString(): string;
+};
+export declare const isDisplay: (a: unknown) => a is Display;
+export declare const display: (a: unknown | Display) => string;

package/lib/esm/display.js

@@ -0,0 +1,11 @@
+export const isDisplay = (/** @type unknown */ a) => typeof a.toString === "function" ||
+    typeof a === "string";
+export const display = (a) => {
+    if (isDisplay(a)) {
+        const str = a.toString();
+        if (str === "[object Object]")
+            return JSON.stringify(a);
+        return str;
+    }
+    return JSON.stringify(a);
+};

package/lib/esm/dom/css/border.d.ts

@@ -0,0 +1,11 @@
+import { Properties } from "../types/css.js";
+import { Side, Size } from "./constants.js";
+export declare function rounded(size?: Size, side?: Side): Properties<0 | (string & {}), string & {}>;
+export declare function border({ side, style, radius, width, color, }: {
+    side?: Side;
+    style?: "solid" | "dotted" | "dashed" | "double" | "none";
+    radius?: Size;
+    width?: 0 | 1 | 2 | 4 | 8;
+    color?: string;
+}): {};
+export declare function inset(width: 0 | 1 | 2 | 4 | 8, color1?: string, color2?: string): {};

package/lib/esm/dom/css/constants.d.ts

@@ -0,0 +1,31 @@
+export declare const Sizes: {
+    none: string;
+    sm: string;
+    "": string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+};
+export declare const Sides: {
+    "": string;
+    t: string;
+    r: string;
+    l: string;
+    b: string;
+    tl: string;
+    tr: string;
+    bl: string;
+    br: string;
+};
+export declare const Widths: {
+    "1/4": string;
+    "1/2": string;
+    "3/4": string;
+    full: string;
+};
+export declare type Size = keyof typeof Sizes;
+export declare type Side = keyof typeof Sides;
+export declare type Width = keyof typeof Widths;

package/lib/esm/dom/css/core.d.ts

@@ -0,0 +1,5 @@
+import { Side, Size, Sizes } from "./constants.js";
+export declare function isSide(v: string): v is Side;
+export declare function isSize(v: string): v is Size;
+export declare function getSize(size: keyof typeof Sizes): string;
+export declare function getSide(side: Side): string[];

package/lib/esm/dom/css/fstyle.d.ts

@@ -0,0 +1,5 @@
+import { Properties } from "../types/css.js";
+export declare type FStyle = Properties | {
+    [k: string]: FStyle;
+};
+export declare function compileFStyle(fstyle: FStyle, prefix?: string): string;

package/lib/esm/dom/css/sizing.d.ts

@@ -0,0 +1,5 @@
+import { Width } from "./constants.js";
+export declare function width(amount: Width, block?: "inline"): {
+    width: string;
+    display?: string | undefined;
+};

package/lib/esm/dom/dom.d.ts

@@ -0,0 +1,27 @@
+import { Properties } from "./types/css.js";
+declare const Events: unique symbol;
+export declare const CLEAR: unique symbol;
+export declare type EventHandler = EventListenerOrEventListenerObject;
+export declare type DenormChildren = Node | string | typeof CLEAR;
+export declare type DOMElement = Element & DocumentAndElementEventHandlers & ElementCSSInlineStyle;
+export declare type DomAttrs = {
+    class: string | string[];
+    style: Partial<Properties> | string;
+    role: "button" | "list" | "listbox";
+    events: Partial<{
+        [K in keyof HTMLElementEventMap]: EventHandler | null;
+    }>;
+};
+export declare type Attrs<E extends Omit<Element, "update">, S = {}> = Partial<Omit<E, "style"> & S & DomAttrs>;
+export declare type DenormAttrs<E extends Omit<Element, "update">, S = {}> = Attrs<E, S> | DenormChildren;
+declare global {
+    interface Element {
+        [Events]: Map<string, EventHandler>;
+        update(attrs?: DenormAttrs<Element>, ...children: DenormChildren[]): this;
+    }
+}
+export declare type DOMUpdates<E extends Element = Element> = [DenormAttrs<E>, ...DenormChildren[]] | DenormChildren[];
+export declare function normalizeArguments<E extends Element>(attrs?: DenormAttrs<E>, children?: DenormChildren[], defaultAttrs?: Attrs<E>): [Attrs<E>, DenormChildren[]];
+export declare function up<E extends Element>(element: Omit<E, "update">, attrs?: DenormAttrs<E>, ...children: DenormChildren[]): E;
+export declare function update(element: Omit<Element, "update">, attrs: Attrs<Element>, children: DenormChildren[]): Element;
+export {};

package/{build → lib/esm}/dom/dom.js

@@ -4,10 +4,10 @@ function isAttrs(attrs) {
     if (!attrs) {
         return false;
     }
-    if (typeof attrs === "string") {
-        return false;
+    if (typeof attrs === "object") {
+        return !attrs.nodeType;
     }
-    return !attrs.nodeType;
+    return false;
 }
 export function normalizeArguments(attrs, children = [], defaultAttrs = {}) {
     let attributes;
@@ -30,11 +30,13 @@ export function update(element, attrs, children) {
     const $events = (element[Events] ??= new Map());
     const { style = {}, events = {}, ...rest } = attrs;
     Object.entries(events).forEach(([k, v]) => {
-        if (v === null && $events.has(k)) {
-            const listener = $events.get(k);
-            element.removeEventListener(k, listener);
+        if (v === null) {
+            if ($events.has(k)) {
+                const listener = $events.get(k);
+                element.removeEventListener(k, listener);
+            }
         }
-        else if (!$events.has(k)) {
+        else if (v !== undefined) {
             element.addEventListener(k, v);
             $events.set(k, v);
         }
@@ -52,42 +54,50 @@ export function update(element, attrs, children) {
         }
     }
     Object.entries(rest).forEach(([k, v]) => {
-        if (k === "class" && typeof v === "string") {
-            v.split(/\s+/m)
+        if (k === "class") {
+            v = Array.isArray(v)
+                ? v
+                : (typeof v === "string" ? v : `${v}`).split(/\s+/m);
+            v
                 .filter((s) => s !== "")
-                .forEach((c) => element.classList.add(c));
+                .forEach((c) => {
+                if (c.startsWith("!")) {
+                    element.classList.remove(c.substring(1));
+                }
+                else {
+                    element.classList.add(c);
+                }
+            });
+            return;
         }
-        let useAttributes = k.startsWith("aria-") ||
+        const useNamespace = element.namespaceURI &&
             element.namespaceURI != "http://www.w3.org/1999/xhtml";
-        if (useAttributes) {
-            switch (v) {
-                case false:
-                    element.removeAttributeNS(element.namespaceURI, k);
-                    break;
-                case true:
-                    element.setAttributeNS(element.namespaceURI, k, k);
-                    break;
-                default:
-                    if (v === "") {
-                        element.removeAttributeNS(element.namespaceURI, k);
-                    }
-                    else {
-                        element.setAttributeNS(element.namespaceURI, k, v);
-                    }
+        const remove = !v;
+        if (useNamespace) {
+            if (remove) {
+                element.removeAttributeNS(element.namespaceURI, k);
+            }
+            else if (v === true) {
+                element.setAttributeNS(element.namespaceURI, k, k);
+            }
+            else {
+                element.setAttributeNS(element.namespaceURI, k, v);
             }
         }
         else {
-            // @ts-ignore Object.entries is unable to statically look into args
-            element[k] = v;
+            if (remove) {
+                element.removeAttribute(k);
+            }
+            else if (v === true) {
+                element.setAttribute(k, k);
+            }
+            else {
+                element.setAttribute(k, v);
+            }
         }
     });
     if (children?.length > 0) {
-        if (children[0] === CLEAR) {
-            element.replaceChildren();
-        }
-        else {
-            element.replaceChildren(...children);
-        }
+        element.replaceChildren(...(children[0] === CLEAR ? [] : children));
     }
     element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
     return element;

package/lib/esm/dom/fc.d.ts

@@ -0,0 +1,14 @@
+import { DenormChildren, DomAttrs } from "./dom.js";
+export declare type Attrs<S> = S & Partial<DomAttrs>;
+export declare const State: unique symbol;
+export interface FCComponent<P extends object, S extends object> extends Element {
+    [State]?: Partial<S>;
+    update(attrs?: Partial<Attrs<P> & DomAttrs> | DenormChildren, ...children: DenormChildren[]): this;
+}
+export interface RenderFn<P extends object, S extends object> {
+    (el: FCComponent<P, S>, attrs: Attrs<P>, children: DenormChildren[]): Element | Element[];
+}
+export interface FCComponentCtor<P extends object, S extends object> {
+    (attrs?: Attrs<P> | DenormChildren, ...children: DenormChildren[]): FCComponent<P, S>;
+}
+export declare function FC<P extends object, S extends object = {}>(name: string, component: RenderFn<P, S>): FCComponentCtor<P, S>;

package/{build → lib/esm}/dom/fc.js

@@ -18,11 +18,11 @@ export function FC(name, component) {
             }
             this.#attrs = { ...this.#attrs, ...attrs };
             // Apply updates from the attrs to the dom node itself
-            // @ts-ignore
             update(this, this.#attrs, []);
             // Re-run the component function using new element, attrs, and children.
             const replace = [component(this, this.#attrs, this.#children)];
             this.replaceChildren(...replace.flat());
+            return this;
         }
     }
     customElements.define(name, FCImpl);

package/lib/esm/dom/fc.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/dom/form/form.app.d.ts

@@ -0,0 +1 @@
+export declare const App: () => HTMLElement;

package/lib/esm/dom/form/form.d.ts

@@ -0,0 +1,26 @@
+import { DenormChildren } from "../dom.js";
+import { label } from "../html.js";
+import { FormAttributes, InputAttributes, LabelAttributes, OptionAttributes, SelectAttributes } from "../types/html";
+export declare const Form: (attrs: FormAttributes, ...children: DenormChildren[]) => HTMLFormElement;
+export declare const Input: (attrs: InputAttributes, ...children: DenormChildren[]) => HTMLLabelElement;
+export declare const Select: (attrs: {
+    options: string[] | {};
+    selected?: string;
+} & SelectAttributes & LabelAttributes) => HTMLLabelElement;
+export declare const Button: () => void;
+declare const prepareOptions: (attrs: string[] | Record<string, string | {
+    label: string;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+}>, selected?: string) => Parameters<typeof Option>[0][];
+export declare const Option: (attrs: OptionAttributes) => HTMLOptionElement;
+export declare const Dropdown: (attrs: SelectAttributes | {
+    selected?: string;
+}, ...options: Parameters<typeof prepareOptions>[0][]) => HTMLLabelElement;
+export declare const Radios: () => void;
+export declare const Checks: () => void;
+export declare const Switches: () => void;
+export declare const Radio: (attrs: Omit<InputAttributes, "type">) => HTMLLabelElement;
+export declare const Checkbox: (attrs: Omit<InputAttributes, "type">) => HTMLLabelElement;
+export declare const Switch: () => HTMLLabelElement;
+export {};

package/{build → lib/esm}/dom/form/form.js

@@ -10,13 +10,22 @@ export const Form = (attrs, ...children) => {
     return form(attrs, ...children);
 };
 export const Input = (attrs, ...children) => label(input(attrs), ...children);
-export const Select = ({ options }) => label(select(...prepareOptions(options).map(Option)));
+export const Select = (attrs) => label({ style: attrs.style ?? {} }, select({ events: attrs.events ?? {} }, ...prepareOptions(attrs.options, attrs.selected).map(Option)));
 export const Button = () => { };
-const prepareOptions = (attrs) => Array.isArray(attrs)
-    ? attrs.map((value) => ({ value, label: value }))
-    : Object.entries(attrs).map(([value, label]) => typeof label === "string" ? { value, label } : { value, ...label });
+const prepareOptions = (attrs, selected) => Array.isArray(attrs)
+    ? attrs.map((value) => ({
+        value,
+        label: value,
+        selected: selected == value,
+    }))
+    : Object.entries(attrs).map(([value, label]) => typeof label === "string"
+        ? { value, label, selected: selected === value }
+        : { value, ...label });
 export const Option = (attrs) => option(attrs);
-export const Dropdown = (attrs) => { };
+export const Dropdown = (attrs, ...options) => Select({
+    ...attrs,
+    options: typeof options[0] == "string" ? options : options[0],
+});
 export const Radios = () => { };
 export const Checks = () => { };
 export const Switches = () => { };

package/lib/esm/dom/form/form.test.js

@@ -0,0 +1 @@
+"use strict";