@davidsouther/jiffies 2.2.4 → 2.3.0

package/lib/esm/components/virtual_scroll.js

@@ -1,94 +0,0 @@
-import { debounce } from "../debounce.js";
-import { FC, State } from "../dom/fc.js";
-import { div } from "../dom/html.js";
-export function arrayAdapter(data) {
-    return (offset, limit) => data.slice(offset, offset + limit);
-}
-export function fillVirtualScrollSettings(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) {
-    // From Denis Hilt, https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
-    const { minIndex, maxIndex, startIndex, itemHeight, count, tolerance } = settings;
-    const bufferedItems = count + 2 * tolerance;
-    const itemsAbove = Math.max(0, startIndex - tolerance - minIndex);
-    const viewportHeight = count * itemHeight;
-    const totalHeight = (maxIndex - minIndex + 1) * itemHeight;
-    const toleranceHeight = tolerance * itemHeight;
-    const bufferHeight = viewportHeight + 2 * toleranceHeight;
-    const topPaddingHeight = itemsAbove * itemHeight;
-    const bottomPaddingHeight = totalHeight - (topPaddingHeight + bufferHeight);
-    return {
-        scrollTop: 0,
-        settings,
-        viewportHeight,
-        totalHeight,
-        toleranceHeight,
-        bufferedItems,
-        topPaddingHeight,
-        bottomPaddingHeight,
-        data: [],
-        rows: [],
-    };
-}
-export function getData(minIndex, maxIndex, offset, limit, get) {
-    const start = Math.max(0, minIndex, offset);
-    const end = Math.min(maxIndex, offset + limit - 1);
-    const data = get(start, end - start);
-    return [...data];
-}
-export function doScroll(scrollTop, state, get) {
-    const { totalHeight, toleranceHeight, bufferedItems, settings: { itemHeight, minIndex, maxIndex }, } = state;
-    const index = minIndex + Math.floor((scrollTop - toleranceHeight) / itemHeight);
-    const data = getData(minIndex, maxIndex, index, bufferedItems, get);
-    const topPaddingHeight = Math.max((index - minIndex) * itemHeight, 0);
-    const bottomPaddingHeight = Math.max(totalHeight - (topPaddingHeight + data.length * itemHeight), 0);
-    return { scrollTop, topPaddingHeight, bottomPaddingHeight, data };
-}
-// export interface VirtualScroll<T, U extends HTMLElement> {
-//   state: VirtualScrollState<T>;
-//   rows: UHTMLElement<U>[];
-// }
-export const VirtualScroll = FC("virtual-scroll", (element, props) => {
-    const settings = fillVirtualScrollSettings(props.settings);
-    const state = (element[State] = {
-        ...initialState(settings),
-        ...element[State],
-    });
-    const scrollTo = ({ target } = { target: state }) => {
-        const scrollTop = target?.scrollTop ?? state.topPaddingHeight;
-        const updatedSate = {
-            ...state,
-            ...doScroll(scrollTop, state, props.get),
-        };
-        setState(updatedSate);
-    };
-    const viewportElement = div({
-        style: { height: `${state.viewportHeight}px`, overflowY: "scroll" },
-        events: { scroll: debounce(scrollTo, 0) },
-    });
-    setTimeout(() => {
-        viewportElement.scroll({ top: state.scrollTop });
-    });
-    const setState = (newState) => {
-        state.scrollTop = newState.scrollTop;
-        state.topPaddingHeight = newState.topPaddingHeight;
-        state.bottomPaddingHeight = newState.bottomPaddingHeight;
-        state.data = newState.data;
-        state.rows = state.data.map(props.row);
-        viewportElement.update(div({
-            class: "VirtualScroll__topPadding",
-            style: { height: `${state.topPaddingHeight}px` },
-        }), ...(state.rows ?? []).map((row, i) => div({
-            class: `VirtualScroll__item_${i}`,
-            style: { height: `${settings.itemHeight}px` },
-        }, row)), div({
-            class: "VirtualScroll__bottomPadding",
-            style: { height: `${state.bottomPaddingHeight}px` },
-        }));
-    };
-    scrollTo();
-    return viewportElement;
-});
-export default VirtualScroll;

package/lib/esm/components/virtual_scroll.test.js

@@ -1,20 +0,0 @@
-import { State } from "../dom/fc.js";
-import { div } from "../dom/html.js";
-import { describe, it, expect } from "../scope/index.js";
-import VirtualScroll, { arrayAdapter, } from "./virtual_scroll.js";
-describe("VirtualScroll", () => {
-    it("tracks scroll position", () => {
-        const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-        const props = {
-            settings: { count: 3, startIndex: 2 },
-            get: arrayAdapter(data),
-            row: (i) => div(`${i}`),
-        };
-        const scroll = VirtualScroll(props);
-        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.totalHeight).toBe(200);
-    });
-});

package/lib/esm/context.js

@@ -1,43 +0,0 @@
-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) {
-            operation = context;
-            context = {};
-        }
-        else {
-            context = context();
-        }
-    }
-    let result;
-    try {
-        context[Enter]();
-        const op = operation(context);
-        result = isResult(op) ? op : Ok(op);
-    }
-    catch (e) {
-        result = normalizeError(e);
-    }
-    finally {
-        context[Exit]();
-    }
-    return result;
-}
-export async function asyncUsing(context, operation, normalizeError = (e) => Err(e)) {
-    context = typeof context === "function" ? await context() : context;
-    let result;
-    try {
-        context[Enter]();
-        const op = await operation(context);
-        result = isResult(op) ? op : Ok(op);
-    }
-    catch (e) {
-        result = normalizeError(e);
-    }
-    finally {
-        context[Exit]();
-    }
-    return result;
-}

package/lib/esm/context.test.js

@@ -1,46 +0,0 @@
-import { Enter, Exit, using } from "./context.js";
-import { Err, isErr, isOk, Ok, unwrap } from "./result.js";
-import { describe, it } from "./scope/describe.js";
-import { expect } from "./scope/expect.js";
-describe("Context", () => {
-    it("performs an operation using a context", () => {
-        const context = TestContext();
-        const result = using(context, () => Ok(5));
-        expect(unwrap(result)).toBe(5);
-        expect(context.initialized).toBe(true);
-        expect(context.completed).toBe(true);
-    });
-    it("reports the result of a thrown error", () => {
-        const context = TestContext();
-        const result = using(context, () => {
-            throw new Error("Failed");
-        });
-        expect(isErr(result)).toBe(true);
-        expect(Err(result)).toMatchObject({
-            message: "Failed",
-        });
-    });
-    it("passes the context to the operation", () => {
-        const op = using(TestContext, ({ initialized, completed }) => ({
-            initialized,
-            completed,
-        }));
-        expect(isOk(op)).toBe(true);
-        const { completed, initialized } = unwrap(op);
-        expect(initialized).toBe(true);
-        expect(completed).toBe(false);
-    });
-});
-function TestContext() {
-    const context = {
-        [Enter]: () => {
-            context.initialized = true;
-        },
-        [Exit]: () => {
-            context.completed = true;
-        },
-        initialized: false,
-        completed: false,
-    };
-    return context;
-}

package/lib/esm/debounce.js

@@ -1,8 +0,0 @@
-export function debounce(fn, ms = 32) {
-    let timer;
-    return (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => (clearTimeout(timer), fn(...args)), ms);
-        return timer;
-    };
-}

package/lib/esm/diff.js

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

@@ -1,39 +0,0 @@
-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.js

@@ -1,11 +0,0 @@
-export const isDisplay = (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.js

@@ -1,27 +0,0 @@
-import { isSide, getSize, getSide } from "./core.js";
-export function rounded(size = "", side = "") {
-    if (isSide(size)) {
-        side = size;
-        size = "";
-    }
-    const sized = getSize(size);
-    return getSide(side).reduce((prev, curr) => {
-        if (curr === "") {
-            prev.borderRadius = sized;
-        }
-        else {
-            // @ts-ignore
-            prev[`border${curr}Radius`] = sized;
-        }
-        return prev;
-    }, {});
-}
-export function border({ side = "", style = "solid", radius = "", width = 1, color = "black", }) {
-    return {};
-}
-export function inset(width, color1 = "gray", color2 = "lightgray") {
-    return {
-        ...border({ side: "tl", width, color: color1, radius: "none" }),
-        ...border({ side: "br", width, color: color2, radius: "none" }),
-    };
-}

package/lib/esm/dom/css/constants.js

@@ -1,28 +0,0 @@
-export const Sizes = {
-    none: "0px",
-    sm: "0.125rem",
-    "": "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    xl: "0.75rem",
-    "2xl": "1rem",
-    "3xl": "1.5rem",
-    full: "9999px",
-};
-export const Sides = {
-    "": "",
-    t: "Top",
-    r: "Right",
-    l: "Left",
-    b: "Bottom",
-    tl: "TopLeft",
-    tr: "TopRight",
-    bl: "BottomLeft",
-    br: "BottomRight",
-};
-export const Widths = {
-    "1/4": "25%",
-    "1/2": "50%",
-    "3/4": "75%",
-    full: "100%",
-};

package/lib/esm/dom/css/core.js

@@ -1,24 +0,0 @@
-import { Sides, Sizes } from "./constants.js";
-export function isSide(v) {
-    return Sides[v] !== undefined;
-}
-export function isSize(v) {
-    return Sizes[v] !== undefined;
-}
-export function getSize(size) {
-    return Sizes[size];
-}
-export 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 [Sides[side]];
-    }
-}

package/lib/esm/dom/css/fstyle.js

@@ -1,32 +0,0 @@
-import { dashCase } from "../../case.js";
-export 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 += `  ${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;
-}

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

@@ -1,10 +0,0 @@
-import { Widths } from "./constants.js";
-export function width(amount, block) {
-    if (amount === undefined && Widths[block] !== undefined) {
-        amount = block;
-    }
-    return {
-        ...(block === "inline" ? { display: "inline-block" } : {}),
-        width: Widths[amount] ?? "0",
-    };
-}

package/lib/esm/dom/dom.js

@@ -1,104 +0,0 @@
-const Events = Symbol("events");
-export const CLEAR = Symbol("Clear children");
-function isAttrs(attrs) {
-    if (!attrs) {
-        return false;
-    }
-    if (typeof attrs === "object") {
-        return !attrs.nodeType;
-    }
-    return false;
-}
-export 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()];
-}
-export function up(element, attrs, ...children) {
-    return update(element, ...normalizeArguments(attrs, children));
-}
-export 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] === CLEAR ? [] : children));
-    }
-    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
-    return element;
-}

package/lib/esm/dom/fc.js

@@ -1,35 +0,0 @@
-import { CLEAR, normalizeArguments, update, } from "./dom.js";
-export const State = Symbol();
-export function FC(name, component) {
-    class FCImpl extends HTMLElement {
-        constructor() {
-            super();
-        }
-        [State] = {};
-        #attrs = {};
-        #children = [];
-        update(attrs, ...children) {
-            [attrs, children] = normalizeArguments(attrs, children);
-            if (children[0] === CLEAR) {
-                this.#children = [];
-            }
-            else if (children.length > 0) {
-                this.#children = children;
-            }
-            this.#attrs = { ...this.#attrs, ...attrs };
-            // Apply updates from the attrs to the dom node itself
-            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);
-    const ctor = (attrs, ...children) => {
-        const element = document.createElement(name);
-        element.update(attrs, ...children);
-        return element;
-    };
-    return ctor;
-}

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

@@ -1,21 +0,0 @@
-import { describe, it, expect } from "../scope/index.js";
-import { button, div, form, input, label, small } from "./html.js";
-import { FC } from "./fc.js";
-describe("FC", () => {
-    it("creates FCs", () => {
-        const Input = FC("fc-input", (el, attrs, children) => label(attrs.placeholder ?? attrs.name, input(attrs), ...children));
-        const f = form({ action: "#", method: "POST" }, div({ class: "grid" }, Input({
-            name: "firstName",
-            placeholder: "First Name",
-            required: true,
-        }), Input({
-            name: "lastName",
-            placeholder: "Last Name",
-            required: true,
-        })), Input({ name: "email", type: "email", placeholder: "E-Mail" }, small("We'll never share your information.")), button({ type: "submit" }, "Submit"));
-        // document.body.appendChild(f);
-        expect(f.children.length).toBe(3);
-        expect(f.querySelectorAll("input[required]").length).toBe(2);
-        expect(f.querySelectorAll('input[name="firstName"]').length).toBe(1);
-    });
-});

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

@@ -1,23 +0,0 @@
-import { article, button, div, main, small } from "../html.js";
-import { Form, Input } from "./form.js";
-export const App = () => main({ class: "container" }, article(Form({
-    events: {
-        submit(event) {
-            console.log("Should see fields for firstname, lastname, email, etc");
-            console.log(event);
-        },
-    },
-}, div({ class: "grid" }, Input({ id: "firstname", placeholder: "First name" }), Input({ id: "lastname", placeholder: "Last name" })), Input({
-    id: "email",
-    type: "email",
-    placeholder: "Email address",
-    required: true,
-}, small("We will never share your email with anyone.")), button({ type: "submit" }, "Submit"), div({ class: "grid" }, Input({ id: "valid", placeholder: "Valid", "aria-invalid": "false" }), Input({
-    id: "invalid",
-    placeholder: "Invalid",
-    "aria-invalid": "true",
-}), Input({ id: "disabled", placeholder: "Disabled", disabled: true }), Input({ id: "readonly", value: "Readonly", readOnly: true }))
-// Dropdown({id: 'fruit', label: "Fruit", placeholder: "Select a fruit...", options: ['Banana', 'Watermelon', 'Apple', 'Orange', 'Mango']}),
-// Radios({legend: 'Size', options: {small: 'Small', medium: 'Medium', large: 'Large', extralarge: "Extra Large"}, checked: 'small'}),
-// Checkboxes({options: {terms: 'I agree to the Terms and Conditions', termsSharing: {label: 'I agree to share my information with partners', disabled: true, checked: true}}),
-)));

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

@@ -1,34 +0,0 @@
-import { form, input, label, option, select } from "../html.js";
-export const Form = (attrs, ...children) => {
-    if (attrs.events?.submit) {
-        const submit = attrs.events.submit;
-        attrs.events.submit = (event) => {
-            event.preventDefault();
-            submit(event);
-        };
-    }
-    return form(attrs, ...children);
-};
-export const Input = (attrs, ...children) => label(input(attrs), ...children);
-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, 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, ...options) => Select({
-    ...attrs,
-    options: typeof options[0] == "string" ? options : options[0],
-});
-export const Radios = () => { };
-export const Checks = () => { };
-export const Switches = () => { };
-export const Radio = (attrs) => Input({ type: "radio" });
-export const Checkbox = (attrs) => Input({ type: "checkbox" });
-export const Switch = () => Checkbox({ role: "switch" });

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

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