@davidsouther/jiffies 1.1.0 → 2.0.0

package/lib/cjs/debounce.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debounce = void 0;
+function debounce(fn, ms = 32) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => (clearTimeout(timer), fn(...args)), ms);
+    };
+}
+exports.debounce = debounce;

package/lib/cjs/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/cjs/diff.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.diff = exports.DiffB = exports.DiffA = void 0;
+const range_js_1 = require("./range.js");
+const result_js_1 = require("./result.js");
+exports.DiffA = Symbol("A");
+exports.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 (0, result_js_1.None)();
+        }
+        else {
+            return (0, result_js_1.Some)(d);
+        }
+    }
+    if (Object.is(va, vb)) {
+        return (0, result_js_1.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 = (0, range_js_1.range)(0, indexes)
+        .map((i) => doDiff(a[i], b[i], i))
+        .filter(result_js_1.isSome);
+    return children.length > 0 ? { key, children } : (0, result_js_1.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(result_js_1.isSome);
+    return {
+        key,
+        children,
+    };
+}
+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;
+}
+exports.diff = diff;

package/{build/components/test.d.ts → lib/cjs/diff.test.d.ts}

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

package/lib/cjs/diff.test.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const diff_js_1 = require("./diff.js");
+const describe_js_1 = require("./scope/describe.js");
+const expect_js_1 = require("./scope/expect.js");
+(0, describe_js_1.describe)("diff", () => {
+    (0, describe_js_1.it)("diffs primitives", () => {
+        const diffed = (0, diff_js_1.diff)(1, 2);
+        (0, expect_js_1.expect)(diffed).toEqual([{ key: "", left: 1, right: 2 }]);
+    });
+    (0, describe_js_1.it)("diffs objects", () => {
+        const diffed = (0, diff_js_1.diff)({ a: 1, b: 2 }, { a: 2, b: 2 });
+        (0, expect_js_1.expect)(diffed).toEqual([{ key: "a", left: 1, right: 2 }]);
+    });
+    (0, describe_js_1.it)("diffs nested objects", () => {
+        const diffed = (0, diff_js_1.diff)({ a: { c: 1 }, b: 2 }, { a: { c: 2 }, b: 2 });
+        (0, expect_js_1.expect)(diffed).toEqual([
+            { key: "a", children: [{ key: "c", left: 1, right: 2 }] },
+        ]);
+    });
+    (0, describe_js_1.it)("diffs missing sides", () => {
+        const diffed = (0, diff_js_1.diff)({ a: 1 }, { b: 2 });
+        (0, expect_js_1.expect)(diffed).toEqual([
+            { key: "a", left: 1, right: undefined },
+            { key: "b", left: undefined, right: 2 },
+        ]);
+    });
+    (0, describe_js_1.it)("diffs arrays", () => {
+        const diffed = (0, diff_js_1.diff)([1, 2, 3], [1, 4, 3]);
+        (0, expect_js_1.expect)(diffed).toEqual([{ key: 1, left: 2, right: 4 }]);
+    });
+    (0, describe_js_1.it)("diffs objects in an array", () => {
+        const diffed = (0, diff_js_1.diff)([{ a: { b: 1 } }, { a: { b: 2 } }, { a: { b: 3 } }], [{ a: { b: 1 } }, { a: { b: 4 } }, { a: { b: 3 } }]);
+        (0, expect_js_1.expect)(diffed).toEqual([
+            {
+                key: 1,
+                children: [{ key: "a", children: [{ key: "b", left: 2, right: 4 }] }],
+            },
+        ]);
+    });
+});

package/{build → lib/cjs}/display.d.ts

@@ -1,5 +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;
+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/cjs/display.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.display = exports.isDisplay = void 0;
+const isDisplay = (/** @type unknown */ a) => typeof a.toString === "function" ||
+    typeof a === "string";
+exports.isDisplay = isDisplay;
+const display = (a) => {
+    if ((0, exports.isDisplay)(a)) {
+        const str = a.toString();
+        if (str === "[object Object]")
+            return JSON.stringify(a);
+        return str;
+    }
+    return JSON.stringify(a);
+};
+exports.display = display;

package/{build → lib/cjs}/dom/css/border.d.ts

@@ -1,11 +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): {};
+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/cjs/dom/css/border.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inset = exports.border = exports.rounded = void 0;
+const core_js_1 = require("./core.js");
+function rounded(size = "", side = "") {
+    if ((0, core_js_1.isSide)(size)) {
+        side = size;
+        size = "";
+    }
+    const sized = (0, core_js_1.getSize)(size);
+    return (0, core_js_1.getSide)(side).reduce((prev, curr) => {
+        if (curr === "") {
+            prev.borderRadius = sized;
+        }
+        else {
+            // @ts-ignore
+            prev[`border${curr}Radius`] = sized;
+        }
+        return prev;
+    }, {});
+}
+exports.rounded = rounded;
+function border({ side = "", style = "solid", radius = "", width = 1, color = "black", }) {
+    return {};
+}
+exports.border = border;
+function inset(width, color1 = "gray", color2 = "lightgray") {
+    return {
+        ...border({ side: "tl", width, color: color1, radius: "none" }),
+        ...border({ side: "br", width, color: color2, radius: "none" }),
+    };
+}
+exports.inset = inset;

package/{build → lib/cjs}/dom/css/constants.d.ts

@@ -1,31 +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;
+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/cjs/dom/css/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widths = exports.Sides = exports.Sizes = void 0;
+exports.Sizes = {
+    none: "0px",
+    sm: "0.125rem",
+    "": "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+exports.Sides = {
+    "": "",
+    t: "Top",
+    r: "Right",
+    l: "Left",
+    b: "Bottom",
+    tl: "TopLeft",
+    tr: "TopRight",
+    bl: "BottomLeft",
+    br: "BottomRight",
+};
+exports.Widths = {
+    "1/4": "25%",
+    "1/2": "50%",
+    "3/4": "75%",
+    full: "100%",
+};

package/{build → lib/cjs}/dom/css/core.d.ts

@@ -1,5 +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[];
+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/cjs/dom/css/core.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSide = exports.getSize = exports.isSize = exports.isSide = void 0;
+const constants_js_1 = require("./constants.js");
+function isSide(v) {
+    return constants_js_1.Sides[v] !== undefined;
+}
+exports.isSide = isSide;
+function isSize(v) {
+    return constants_js_1.Sizes[v] !== undefined;
+}
+exports.isSize = isSize;
+function getSize(size) {
+    return constants_js_1.Sizes[size];
+}
+exports.getSize = getSize;
+function getSide(side) {
+    switch (side) {
+        case "t":
+            return [...getSide("tl"), ...getSide("tr")];
+        case "r":
+            return [...getSide("tr"), ...getSide("br")];
+        case "b":
+            return [...getSide("br"), ...getSide("bl")];
+        case "l":
+            return [...getSide("tl"), ...getSide("bl")];
+        default:
+            return [constants_js_1.Sides[side]];
+    }
+}
+exports.getSide = getSide;

package/{build → lib/cjs}/dom/css/fstyle.d.ts

@@ -1,5 +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;
+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/cjs/dom/css/fstyle.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileFStyle = void 0;
+const case_js_1 = require("../../case.js");
+function compileFStyle(fstyle, prefix = "") {
+    const properties = [];
+    const rules = [];
+    for (const [key, value] of Object.entries(fstyle)) {
+        if (typeof value == "string") {
+            properties.push({ key, value });
+        }
+        else {
+            rules.push({ key, value });
+        }
+    }
+    let rule = "";
+    if (properties.length > 0) {
+        rule += `${prefix} {\n`;
+        for (const { key, value } of properties) {
+            rule += `  ${(0, case_js_1.dashCase)(key)}: ${value};\n`;
+        }
+        rule += "}\n\n";
+    }
+    for (const { key, value } of rules) {
+        if (key.startsWith("@media")) {
+            rule += `${key} {\n`;
+            rule += compileFStyle(value, "  ");
+            rule += `}\n\n`;
+        }
+        else {
+            rule += compileFStyle(value, `${prefix} ${key}`);
+        }
+    }
+    return rule;
+}
+exports.compileFStyle = compileFStyle;

package/{build → lib/cjs}/dom/css/sizing.d.ts

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

package/lib/cjs/dom/css/sizing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.width = void 0;
+const constants_js_1 = require("./constants.js");
+function width(amount, block) {
+    if (amount === undefined && constants_js_1.Widths[block] !== undefined) {
+        amount = block;
+    }
+    return {
+        ...(block === "inline" ? { display: "inline-block" } : {}),
+        width: constants_js_1.Widths[amount] ?? "0",
+    };
+}
+exports.width = width;

package/{build → lib/cjs}/dom/dom.d.ts

@@ -1,26 +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;
-    style: Partial<Properties> | string;
-    role: "button" | "list";
-    events: Partial<{
-        [K in keyof HTMLElementEventMap]: EventHandler;
-    }>;
-};
-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 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 {};
+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/lib/cjs/dom/dom.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.update = exports.up = exports.normalizeArguments = exports.CLEAR = void 0;
+const Events = Symbol("events");
+exports.CLEAR = Symbol("Clear children");
+function isAttrs(attrs) {
+    if (!attrs) {
+        return false;
+    }
+    if (typeof attrs === "object") {
+        return !attrs.nodeType;
+    }
+    return false;
+}
+function normalizeArguments(attrs, children = [], defaultAttrs = {}) {
+    let attributes;
+    if (isAttrs(attrs)) {
+        attributes = attrs;
+    }
+    else {
+        if (attrs !== undefined) {
+            children.unshift(attrs);
+        }
+        attributes = defaultAttrs;
+    }
+    return [attributes, children.flat()];
+}
+exports.normalizeArguments = normalizeArguments;
+function up(element, attrs, ...children) {
+    return update(element, ...normalizeArguments(attrs, children));
+}
+exports.up = up;
+function update(element, attrs, children) {
+    // Track events, to remove later
+    const $events = (element[Events] ??= new Map());
+    const { style = {}, events = {}, ...rest } = attrs;
+    Object.entries(events).forEach(([k, v]) => {
+        if (v === null) {
+            if ($events.has(k)) {
+                const listener = $events.get(k);
+                element.removeEventListener(k, listener);
+            }
+        }
+        else if (v !== undefined) {
+            element.addEventListener(k, v);
+            $events.set(k, v);
+        }
+    });
+    const _style = element.style;
+    if (_style) {
+        if (typeof style === "string") {
+            _style.cssText = style;
+        }
+        else {
+            Object.entries(style).forEach(([k, v]) => {
+                // @ts-ignore Object.entries is unable to statically look into args
+                _style[k] = v;
+            });
+        }
+    }
+    Object.entries(rest).forEach(([k, v]) => {
+        if (k === "class") {
+            v = Array.isArray(v)
+                ? v
+                : (typeof v === "string" ? v : `${v}`).split(/\s+/m);
+            v
+                .filter((s) => s !== "")
+                .forEach((c) => {
+                if (c.startsWith("!")) {
+                    element.classList.remove(c.substring(1));
+                }
+                else {
+                    element.classList.add(c);
+                }
+            });
+            return;
+        }
+        const useNamespace = element.namespaceURI &&
+            element.namespaceURI != "http://www.w3.org/1999/xhtml";
+        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 {
+            if (remove) {
+                element.removeAttribute(k);
+            }
+            else if (v === true) {
+                element.setAttribute(k, k);
+            }
+            else {
+                element.setAttribute(k, v);
+            }
+        }
+    });
+    if (children?.length > 0) {
+        element.replaceChildren(...(children[0] === exports.CLEAR ? [] : children));
+    }
+    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
+    return element;
+}
+exports.update = update;

package/{build → lib/cjs}/dom/fc.d.ts

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