@davidsouther/jiffies 1.0.0 → 1.1.0

package/build/components/virtual_scroll.js

@@ -1,94 +1,94 @@
-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 = 1, 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;
-        element[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({
-            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;
+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 = 1, 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/build/components/virtual_scroll.test.d.ts

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

package/build/components/virtual_scroll.test.js

@@ -1,21 +1,21 @@
-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}`),
-        };
-        // @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.topPaddingHeight).toBe(0);
-        expect(scroll[State].viewportHeight).toBe(60);
-        //expect(scroll.state.totalHeight).toBe(200);
-    });
-});
+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}`),
+        };
+        // @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.topPaddingHeight).toBe(0);
+        expect(scroll[State]?.viewportHeight).toBe(60);
+        //expect(scroll.state.totalHeight).toBe(200);
+    });
+});

package/build/context.d.ts

@@ -1,15 +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>>;
+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/context.js

@@ -1,43 +1,43 @@
-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;
-}
+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/build/context.test.d.ts

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

package/build/context.test.js

@@ -1,46 +1,46 @@
-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;
-}
+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/build/debounce.d.ts

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

package/build/debounce.js

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

package/build/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/build/display.js

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

@@ -1,27 +1,27 @@
-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" }),
-    };
-}
+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/build/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;