@davidsouther/jiffies 1.0.0-beta.1 → 2.0.0

package/lib/cjs/assert.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkExhaustive = exports.assertString = exports.assertExists = exports.assert = void 0;
+/**
+ * Throw an error when a condition is not met.
+ */
+function assert(condition, message = "Assertion failed") {
+    if (!condition) {
+        throw new Error(message instanceof Function ? message() : message);
+    }
+}
+exports.assert = assert;
+/**
+ * Given a value, return it if it is not null nor undefined. Otherwise throw an
+ * error.
+ *
+ * @template T
+ * @returns {NonNullable<T>}
+ */
+function assertExists(t, message = "Assertion failed: value does not exist") {
+    assert(t != null, message);
+    return t;
+}
+exports.assertExists = assertExists;
+/**
+ * @param {*} n
+ * @returns string
+ */
+function assertString(n, message = () => `Assertion failed: ${n} is not a string`) {
+    assert(typeof n === "string", message);
+    return n;
+}
+exports.assertString = assertString;
+/**
+ * Compile time assertion that no value will used at this point in control flow.
+ */
+function checkExhaustive(value, message = `Unexpected value ${value}`) {
+    throw new Error(message instanceof Function ? message() : message);
+}
+exports.checkExhaustive = checkExhaustive;

package/lib/cjs/case.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dashCase = void 0;
+function dashCase(identifier) {
+    return identifier
+        .replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
+        .replace(/ ([A-Z])/g, (_, b) => `-${b.toLowerCase()}`);
+}
+exports.dashCase = dashCase;

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

@@ -1,4 +1,4 @@
-declare const ButtonBar: import("../dom/fc.js").FCComponentCtor<{
+declare const ButtonBar: import("../dom/fc").FCComponentCtor<{
     value: T;
     values: T[];
     events: {

package/lib/cjs/components/button_bar.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const display_1 = require("../display");
+const fc_1 = require("../dom/fc");
+const html_1 = require("../dom/html");
+let buttonBarId = 1;
+let nextId = () => buttonBarId++;
+const ButtonBar = (0, fc_1.FC)("button-bar", (el, { value, values, events }) => {
+    const name = `button-bar-${nextId()}`;
+    return (0, html_1.fieldset)({ class: "input-group" }, ...values
+        .map((option) => {
+        const opt = `${option}`.replace(/\s+/g, "_").toLowerCase();
+        const id = `${name}-${opt}`;
+        return [
+            (0, html_1.label)({ role: "button", htmlFor: id }, (0, html_1.input)({
+                type: "radio",
+                id,
+                name,
+                value: option,
+                checked: option === value,
+                events: {
+                    change: () => events.onSelect(option),
+                },
+            }), (0, display_1.display)(option)),
+        ];
+    })
+        .flat());
+});
+exports.default = ButtonBar;

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

@@ -2,7 +2,7 @@ export interface InlineEditState {
     mode: number;
     value: string;
 }
-export declare const InlineEdit: import("../dom/fc.js").FCComponentCtor<{
+export declare const InlineEdit: import("../dom/fc").FCComponentCtor<{
     mode?: number | undefined;
     value: string;
     events: {

package/lib/cjs/components/inline_edit.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEdit = void 0;
+const sizing_1 = require("../dom/css/sizing");
+const fc_1 = require("../dom/fc");
+const html_1 = require("../dom/html");
+const Mode = { VIEW: 0, EDIT: 1 };
+exports.InlineEdit = (0, fc_1.FC)("inline-edit", (el, { mode = Mode.VIEW, value, events }) => {
+    const state = (el[fc_1.State] ??= { mode, value });
+    const render = () => {
+        switch (state.mode) {
+            case Mode.EDIT:
+                return edit();
+            case Mode.VIEW:
+                return view();
+            default:
+                return (0, html_1.span)();
+        }
+    };
+    const view = () => (0, html_1.span)({
+        style: { cursor: "text", ...(0, sizing_1.width)("full", "inline") },
+        events: {
+            click: () => {
+                state.mode = Mode.EDIT;
+                el.update(render());
+            },
+        },
+    }, state.value ?? "");
+    const edit = () => {
+        const edit = (0, html_1.span)({ style: { display: "block", position: "relative" } }, (0, html_1.input)({
+            style: {
+                zIndex: "10",
+                position: "absolute",
+                left: "0",
+                marginTop: "-0.375rem",
+            },
+            events: {
+                blur: ({ target }) => events.change(target?.value ?? ""),
+            },
+            type: "text",
+            value: state.value,
+        }), "\u00a0" // Hack to get the span to take up space
+        );
+        setTimeout(() => {
+            edit.dispatchEvent(new Event("focus"));
+        });
+        return edit;
+    };
+    return render();
+});
+exports.default = exports.InlineEdit;

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

@@ -1,7 +1,6 @@
-import { DOMElement, Updatable } from "../dom/dom.js";
-import { Logger } from "../log.js";
+import { Logger } from "../log";
 export interface HTMLLogger extends Logger {
-    root: Updatable<DOMElement>;
+    root: Element;
 }
 export declare function isHTMLLogger(logger: Logger): logger is HTMLLogger;
 export declare function makeHTMLLogger(name: string): HTMLLogger;

package/lib/cjs/components/logger.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHTMLLogger = exports.isHTMLLogger = void 0;
+const display_1 = require("../display");
+const html_1 = require("../dom/html");
+const log_1 = require("../log");
+function isHTMLLogger(logger) {
+    return logger.root != undefined;
+}
+exports.isHTMLLogger = isHTMLLogger;
+function makeHTMLLogger(name) {
+    let log;
+    const root = (0, html_1.div)((0, html_1.div)((0, html_1.span)(name)), (log = (0, html_1.ul)()));
+    const logger = { level: log_1.LEVEL.INFO, root };
+    function append(message) {
+        log.appendChild((0, html_1.li)((0, html_1.pre)((0, html_1.code)(message))));
+    }
+    const logAt = (level) => (message) => level >= (logger.level ?? log_1.LEVEL.ERROR)
+        ? append((0, display_1.display)(message))
+        : undefined;
+    logger.debug = logAt(log_1.LEVEL.VERBOSE);
+    logger.info = logAt(log_1.LEVEL.INFO);
+    logger.warn = logAt(log_1.LEVEL.WARN);
+    logger.error = logAt(log_1.LEVEL.ERROR);
+    return logger;
+}
+exports.makeHTMLLogger = makeHTMLLogger;

package/lib/cjs/components/select.d.ts

@@ -0,0 +1,10 @@
+import { EventHandler } from "../dom/dom";
+export declare const Select: import("../dom/fc").FCComponentCtor<{
+    name: string;
+    value: string;
+    events: {
+        change: EventHandler;
+    };
+    disabled: boolean;
+    options: [string, string][];
+}, {}>;

package/lib/cjs/components/select.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const fc_1 = require("../dom/fc");
+const html_1 = require("../dom/html");
+exports.Select = (0, fc_1.FC)("jiffies-select", (el, { name, events: { change }, disabled, value, options }) => (0, html_1.select)({ name, events: { change }, disabled }, ...options.map(([v, name]) => (0, html_1.option)({ value: v, selected: value === v }, `${name}`))));

package/lib/cjs/components/test.d.ts

@@ -0,0 +1 @@
+export function loadTests(): Promise<void>;

package/lib/cjs/components/test.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTests = void 0;
+async function loadTests() {
+    await Promise.resolve().then(() => require("./virtual_scroll.test.js"));
+}
+exports.loadTests = loadTests;

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

@@ -1,4 +1,3 @@
-import { UHTMLElement } from "../dom/html.js";
 export interface VirtualScrollSettings {
     minIndex: number;
     maxIndex: number;
@@ -14,7 +13,7 @@ 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) => UHTMLElement<U>;
+    row: (t: T) => U;
 }
 export declare function fillVirtualScrollSettings(settings: Partial<VirtualScrollSettings>): VirtualScrollSettings;
 export declare function initialState<T>(settings: VirtualScrollSettings): VirtualScrollState<T>;
@@ -35,7 +34,7 @@ interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
     bottomPaddingHeight: number;
     toleranceHeight: number;
     data: T[];
-    rows: UHTMLElement<U>[];
+    rows: U[];
 }
-export declare const VirtualScroll: import("../dom/fc.js").FCComponentCtor<VirtualScrollProps<unknown, HTMLElement>, VirtualScrollState<unknown, HTMLElement>>;
+export declare const VirtualScroll: import("../dom/fc.js").FCComponentCtor<VirtualScrollProps<any, HTMLElement>, VirtualScrollState<any, HTMLElement>>;
 export default VirtualScroll;

package/lib/cjs/components/virtual_scroll.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScroll = exports.doScroll = exports.getData = exports.initialState = exports.fillVirtualScrollSettings = exports.arrayAdapter = void 0;
+const debounce_js_1 = require("../debounce.js");
+const fc_js_1 = require("../dom/fc.js");
+const html_js_1 = require("../dom/html.js");
+function arrayAdapter(data) {
+    return (offset, limit) => data.slice(offset, offset + limit);
+}
+exports.arrayAdapter = arrayAdapter;
+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 };
+}
+exports.fillVirtualScrollSettings = fillVirtualScrollSettings;
+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: [],
+    };
+}
+exports.initialState = initialState;
+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];
+}
+exports.getData = getData;
+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 };
+}
+exports.doScroll = doScroll;
+// export interface VirtualScroll<T, U extends HTMLElement> {
+//   state: VirtualScrollState<T>;
+//   rows: UHTMLElement<U>[];
+// }
+exports.VirtualScroll = (0, fc_js_1.FC)("virtual-scroll", (element, props) => {
+    const settings = fillVirtualScrollSettings(props.settings);
+    const state = (element[fc_js_1.State] = {
+        ...initialState(settings),
+        ...element[fc_js_1.State],
+    });
+    const scrollTo = ({ target } = { target: state }) => {
+        const scrollTop = target?.scrollTop ?? state.topPaddingHeight;
+        const updatedSate = {
+            ...state,
+            ...doScroll(scrollTop, state, props.get),
+        };
+        setState(updatedSate);
+    };
+    const viewportElement = (0, html_js_1.div)({
+        style: { height: `${state.viewportHeight}px`, overflowY: "scroll" },
+        events: { scroll: (0, debounce_js_1.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((0, html_js_1.div)({
+            class: "VirtualScroll__topPadding",
+            style: { height: `${state.topPaddingHeight}px` },
+        }), ...(state.rows ?? []).map((row, i) => (0, html_js_1.div)({
+            class: `VirtualScroll__item_${i}`,
+            style: { height: `${settings.itemHeight}px` },
+        }, row)), (0, html_js_1.div)({
+            class: "VirtualScroll__bottomPadding",
+            style: { height: `${state.bottomPaddingHeight}px` },
+        }));
+    };
+    scrollTo();
+    return viewportElement;
+});
+exports.default = exports.VirtualScroll;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fc_js_1 = require("../dom/fc.js");
+const html_js_1 = require("../dom/html.js");
+const index_js_1 = require("../scope/index.js");
+const virtual_scroll_js_1 = require("./virtual_scroll.js");
+(0, index_js_1.describe)("VirtualScroll", () => {
+    (0, index_js_1.it)("tracks scroll position", () => {
+        const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+        const props = {
+            settings: { count: 3, startIndex: 2 },
+            get: (0, virtual_scroll_js_1.arrayAdapter)(data),
+            row: (i) => (0, html_js_1.div)(`${i}`),
+        };
+        const scroll = (0, virtual_scroll_js_1.default)(props);
+        (0, index_js_1.expect)(scroll[fc_js_1.State]?.bufferedItems).toBe(9);
+        (0, index_js_1.expect)(scroll[fc_js_1.State]?.data).toEqual([0, 1, 2, 3, 4]);
+        //expect(scroll.state.topPaddingHeight).toBe(0);
+        (0, index_js_1.expect)(scroll[fc_js_1.State]?.viewportHeight).toBe(60);
+        //expect(scroll.state.totalHeight).toBe(200);
+    });
+});

package/lib/cjs/context.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asyncUsing = exports.using = exports.Exit = exports.Enter = void 0;
+const result_js_1 = require("./result.js");
+exports.Enter = Symbol("Context Enter");
+exports.Exit = Symbol("Context Exit");
+function using(context, operation, normalizeError = (e) => (0, result_js_1.Err)(e)) {
+    if (typeof context === "function") {
+        if (context.length === 1) {
+            operation = context;
+            context = {};
+        }
+        else {
+            context = context();
+        }
+    }
+    let result;
+    try {
+        context[exports.Enter]();
+        const op = operation(context);
+        result = (0, result_js_1.isResult)(op) ? op : (0, result_js_1.Ok)(op);
+    }
+    catch (e) {
+        result = normalizeError(e);
+    }
+    finally {
+        context[exports.Exit]();
+    }
+    return result;
+}
+exports.using = using;
+async function asyncUsing(context, operation, normalizeError = (e) => (0, result_js_1.Err)(e)) {
+    context = typeof context === "function" ? await context() : context;
+    let result;
+    try {
+        context[exports.Enter]();
+        const op = await operation(context);
+        result = (0, result_js_1.isResult)(op) ? op : (0, result_js_1.Ok)(op);
+    }
+    catch (e) {
+        result = normalizeError(e);
+    }
+    finally {
+        context[exports.Exit]();
+    }
+    return result;
+}
+exports.asyncUsing = asyncUsing;

package/lib/cjs/context.test.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const context_js_1 = require("./context.js");
+const result_js_1 = require("./result.js");
+const describe_js_1 = require("./scope/describe.js");
+const expect_js_1 = require("./scope/expect.js");
+(0, describe_js_1.describe)("Context", () => {
+    (0, describe_js_1.it)("performs an operation using a context", () => {
+        const context = TestContext();
+        const result = (0, context_js_1.using)(context, () => (0, result_js_1.Ok)(5));
+        (0, expect_js_1.expect)((0, result_js_1.unwrap)(result)).toBe(5);
+        (0, expect_js_1.expect)(context.initialized).toBe(true);
+        (0, expect_js_1.expect)(context.completed).toBe(true);
+    });
+    (0, describe_js_1.it)("reports the result of a thrown error", () => {
+        const context = TestContext();
+        const result = (0, context_js_1.using)(context, () => {
+            throw new Error("Failed");
+        });
+        (0, expect_js_1.expect)((0, result_js_1.isErr)(result)).toBe(true);
+        (0, expect_js_1.expect)((0, result_js_1.Err)(result)).toMatchObject({
+            message: "Failed",
+        });
+    });
+    (0, describe_js_1.it)("passes the context to the operation", () => {
+        const op = (0, context_js_1.using)(TestContext, ({ initialized, completed }) => ({
+            initialized,
+            completed,
+        }));
+        (0, expect_js_1.expect)((0, result_js_1.isOk)(op)).toBe(true);
+        const { completed, initialized } = (0, result_js_1.unwrap)(op);
+        (0, expect_js_1.expect)(initialized).toBe(true);
+        (0, expect_js_1.expect)(completed).toBe(false);
+    });
+});
+function TestContext() {
+    const context = {
+        [context_js_1.Enter]: () => {
+            context.initialized = true;
+        },
+        [context_js_1.Exit]: () => {
+            context.completed = true;
+        },
+        initialized: false,
+        completed: false,
+    };
+    return context;
+}

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/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/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;