sliftutils 0.1.1

package/web/Table.tsx

@@ -0,0 +1,188 @@
+import preact from "preact";
+import { css } from "typesafecss";
+import { formatValue, JSXFormatter, toSpaceCase } from "./GenericFormat";
+import { observer } from "./observer";
+import { canHaveChildren } from "socket-function/src/types";
+import { showFullscreenModal } from "./FullscreenModal";
+
+// Null means the column is removed
+export type ColumnType<T = unknown, Row extends RowType = RowType> = undefined | null | {
+    center?: boolean;
+    // Defaults to column name
+    title?: preact.ComponentChild;
+    formatter?: JSXFormatter<T, Row>;
+};
+export type RowType = {
+    [columnName: string]: unknown;
+};
+export type ColumnsType = { [columnName: string]: ColumnType };
+export type TableType<RowT extends RowType = RowType> = {
+    columns: { [columnName in keyof RowT]?: ColumnType<RowT[columnName], RowT> };
+    rows: RowT[];
+};
+
+@observer
+export class Table<RowT extends RowType> extends preact.Component<TableType<RowT> & {
+    class?: string;
+    cellClass?: string;
+    initialLimit?: number;
+
+    // Line and character limits before we cut off the inner content
+    lineLimit?: number;
+    characterLimit?: number;
+
+    excludeEmptyColumns?: boolean;
+}> {
+    state = {
+        limit: this.props.initialLimit || 100,
+    };
+    render() {
+        let { columns, rows, excludeEmptyColumns } = this.props;
+
+        let cellClass = " " + String(this.props.cellClass || "") + " ";
+        let allRows = rows;
+        rows = rows.slice(0, this.state.limit);
+
+        const lineLimit = this.props.lineLimit ?? 3;
+        const characterLimit = this.props.characterLimit ?? 300;
+
+        if (excludeEmptyColumns) {
+            columns = { ...columns };
+            for (let column of Object.keys(columns)) {
+                if (!rows.some(row => row[column] !== undefined && row[column] !== null)) {
+                    delete columns[column];
+                }
+            }
+        }
+
+        return (
+            <table className={css.borderCollapse("collapse") + this.props.class}>
+                <tr className={css.position("sticky").top(0).hsla(0, 0, 50, 0.95)}>
+                    <th className={css.whiteSpace("nowrap")}>⧉ {allRows.length}</th>
+                    {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]: [string, ColumnType]) =>
+                        <th className={css.pad2(8, 4) + cellClass}>{column?.title || toSpaceCase(columnName)}</th>
+                    )}
+                </tr>
+                {rows.map((row, index) => (
+                    <tr
+                        className={(index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")}
+                    >
+                        <td className={css.center}>{index + 1}</td>
+                        {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]: [string, ColumnType]) => {
+                            let value = row[columnName];
+                            let formatter = column?.formatter || "guess";
+                            let result = formatValue(value, formatter, { row, columnName });
+                            let renderedObj = renderTrimmed({
+                                content: result,
+                                lineLimit,
+                                characterLimit,
+                            });
+                            let attributes = { ...renderedObj.outerAttributes };
+                            attributes.class = attributes.class || "";
+                            attributes.class += " " + css.whiteSpace("pre-wrap").pad2(8, 4);
+                            if (column?.center) attributes.class += " " + css.verticalAlign("middle").textAlign("center");
+                            attributes.class += cellClass;
+                            // If the inner content looks like a VNode, take it's attributes and unwrap it,
+                            //  so it can fill the entire cell.
+                            let innerContent = renderedObj.innerContent;
+                            if (
+                                canHaveChildren(innerContent) && "props" in innerContent
+                                && canHaveChildren(innerContent.props)
+                                && "children" in innerContent.props
+                                && (
+                                    Array.isArray(innerContent.props.children) && innerContent.props.children.length === 1
+                                    || !Array.isArray(innerContent.props.children)
+                                )
+                                // AND, it is a div or span (a tags shouldn't be unwrapped)
+                                && (innerContent.type === "div")
+                            ) {
+                                attributes.class += " " + innerContent.props.class;
+                                let baseOnClick = attributes.onClick;
+                                let props = innerContent.props;
+                                attributes.onClick = (e) => {
+                                    if (baseOnClick) baseOnClick(e);
+                                    (props as any).onClick?.(e);
+                                };
+                                for (let key in props) {
+                                    if (key === "class") continue;
+                                    if (key === "onClick") continue;
+                                    (attributes as any)[key] = props[key];
+                                }
+                                innerContent = props.children as any;
+                            }
+                            return <td {...attributes}>
+                                {innerContent}
+                            </td>;
+                        })}
+                    </tr>
+                ))}
+                {allRows.length > rows.length && <tr>
+                    <td
+                        colSpan={1 + Object.keys(columns).length}
+                        className={css.pad2(8).textAlign("center")}
+                    >
+                        <button onClick={() => this.state.limit += 100}>
+                            {/* TODO: Load more as soon as they get close to the end.
+                                - It doesn't really matter, as there is little reason for them to scroll far
+                                    (they should just filter/search instead).
+                            */}
+                            Load more
+                        </button>
+                    </td>
+                </tr>}
+            </table>
+        );
+    }
+}
+
+function renderTrimmed(config: {
+    content: preact.ComponentChild;
+    lineLimit: number;
+    characterLimit: number;
+}): {
+    outerAttributes: preact.JSX.HTMLAttributes<HTMLTableCellElement>;
+    innerContent: preact.ComponentChild;
+} {
+    let { content, lineLimit, characterLimit } = config;
+    if (typeof content !== "string" && typeof content !== "number") {
+        return {
+            outerAttributes: {},
+            innerContent: content as any,
+        };
+    }
+    let trimmed = false;
+    let contentStr = String(content);
+    if (contentStr.length > characterLimit) {
+        contentStr = contentStr.slice(0, characterLimit - 3) + "...";
+        trimmed = true;
+    }
+    let lines = contentStr.split("\n");
+    if (lines.length > lineLimit) {
+        lines = lines.slice(0, lineLimit);
+        lines[lines.length - 1] += "...";
+        contentStr = lines.join("\n");
+        trimmed = true;
+    }
+
+    if (!trimmed) {
+        return {
+            outerAttributes: {},
+            innerContent: contentStr,
+        };
+    }
+
+
+    return {
+        outerAttributes: {
+            class: css.opacity(0.5, "hover").button,
+            onClick: () => {
+                showFullscreenModal(
+                    <div className={css.whiteSpace("pre-wrap")}>
+                        {content}
+                    </div>
+                );
+            }
+        },
+        innerContent: contentStr
+    };
+}

package/web/URLParam.ts

@@ -0,0 +1,84 @@
+import { isNode } from "typesafecss";
+import { observable } from "mobx";
+
+let allParams: URLParamStr[] = [];
+
+let updated: URLParamStr[] = [];
+
+export class URLParamStr {
+    private state = observable({
+        seqNum: 0
+    });
+    public lastSetValue = "";
+    constructor(public readonly urlKey: string) {
+        allParams.push(this);
+    }
+    public forceUpdate() {
+        this.state.seqNum++;
+    }
+
+    public get() {
+        this.state.seqNum;
+        return new URLSearchParams(window.location.search).get(this.urlKey) || "";
+    }
+    public set(value: string) {
+        if (value === this.get()) return;
+        this.lastSetValue = value;
+        batchUrlUpdate(() => {
+            updated.push(this);
+        });
+        this.state.seqNum++;
+    }
+
+    public get value() {
+        return this.get();
+    }
+    public set value(value: string) {
+        this.set(value);
+    }
+}
+
+let inBatchUpdate = false;
+export function batchUrlUpdate<T>(code: () => T): T {
+    if (inBatchUpdate) return code();
+    inBatchUpdate = true;
+    try {
+        return code();
+    } finally {
+        inBatchUpdate = false;
+
+        let prevUpdated = updated;
+        updated = [];
+        let searchParams = new URLSearchParams(window.location.search);
+        for (let obj of prevUpdated) {
+            searchParams.set(obj.urlKey, obj.lastSetValue);
+        }
+        let newURL = "?" + searchParams.toString();
+        if (window.location.hash) {
+            newURL += window.location.hash;
+        }
+        window.history.pushState({}, "", newURL);
+    }
+}
+
+export function createLink(params: [URLParamStr, string][]) {
+    let searchParams = new URLSearchParams(window.location.search);
+    for (let [param, value] of params) {
+        searchParams.set(param.urlKey, value);
+    }
+    let newURL = "?" + searchParams.toString();
+    if (window.location.hash) {
+        newURL += window.location.hash;
+    }
+    return newURL;
+}
+
+if (!isNode()) {
+    // Watch for url push states
+    window.addEventListener("popstate", () => {
+        // Force all to update, in case their param changed
+        for (let param of allParams) {
+            param.forceUpdate();
+        }
+    });
+}

package/web/asyncObservable.ts

@@ -0,0 +1,40 @@
+import { observable } from "mobx";
+
+export function asyncCache<Args, T>(getValue: (args: Args) => Promise<T>): {
+    (args: Args): T | undefined;
+} {
+    let cache = new Map<string, {
+        result: {
+            value?: T;
+            error?: Error;
+        };
+    }>();
+    return (args: Args) => {
+        let key = JSON.stringify(args);
+        let result = cache.get(key);
+        if (result) {
+            let r = result.result;
+            if (r.error) throw r.error;
+            return r.value;
+        }
+        result = {
+            result: observable({
+                value: undefined,
+                error: undefined,
+            }),
+        };
+        cache.set(key, result);
+
+        void (async () => {
+            try {
+                let value = await getValue(args);
+                result.result.value = value;
+            } catch (error) {
+                result.result.error = error as Error;
+            }
+        })();
+        // Access the observable so we're watching it
+        result.result.error;
+        return result.result.value;
+    };
+}

package/web/colors.tsx

@@ -0,0 +1,14 @@
+import { css } from "typesafecss";
+
+export const redButton = css.hsl(0, 75, 50).bord(1, "hsl(0, 75%, 75%)").background("hsl(0, 75%, 75%)", "hover");
+export const yellowButton = css.hsl(50, 90, 50).bord(1, "hsl(40, 75%, 75%)").color("hsl(0, 0%, 16%)!important").background("hsl(40, 75%, 75%)", "hover");
+export const greenButton = css.hsl(110, 65, 45).bord(1, { h: 110, s: 65, l: 75 }).background("hsl(110, 65%, 90%)", "hover");
+
+export const errorMessage = css.hsl(0, 75, 50).color("white")
+    .padding("4px 6px", "soft")
+    .whiteSpace("pre-wrap").display("inline-block", "soft")
+    ;
+export const warnMessage = css.hsl(50, 75, 50).color("hsl(0, 0%, 7%)", "important", "soft")
+    .padding("4px 6px", "soft")
+    .whiteSpace("pre-wrap").display("inline-block", "soft")
+    ;

package/web/mobxTyped.ts

@@ -0,0 +1,29 @@
+import * as mobx from "mobx";
+import { batchFunction } from "socket-function/src/batching";
+export function configureMobxNextFrameScheduler() {
+    // NOTE: This makes a big difference if we do await calls in a loop which mutates observable state. BUT... we should probably just do those await calls before the loop?
+    let batchReactionScheduler = batchFunction({
+        delay: 16,
+        name: "reactionScheduler",
+    }, (callbacks: (() => void)[]) => {
+        //console.log(`Triggering ${callbacks.length} reactions`);
+        for (let callback of callbacks) {
+            callback();
+        }
+        lastRenderTime = Date.now();
+    });
+
+    let lastRenderTime = 0;
+    mobx.configure({
+        enforceActions: "never",
+        reactionScheduler(callback) {
+            let now = performance.now();
+            if (now - lastRenderTime < 16) {
+                void batchReactionScheduler(callback);
+            } else {
+                callback();
+                lastRenderTime = now;
+            }
+        }
+    });
+}

package/web/modal.tsx

@@ -0,0 +1,18 @@
+import preact from "preact";
+
+export function showModal(config: {
+    contents: preact.ComponentChildren;
+}): {
+    close: () => void;
+} {
+    let root = document.createElement("div");
+    document.body.appendChild(root);
+    preact.render(config.contents, root);
+
+    return {
+        close() {
+            preact.render(undefined, root);
+            document.body.removeChild(root);
+        }
+    };
+}

package/web/observer.tsx

@@ -0,0 +1,35 @@
+import * as preact from "preact";
+import { observable, Reaction } from "mobx";
+
+let globalConstructOrder = 1;
+export function observer<
+    T extends {
+        new(...args: any[]): {
+            render(): preact.ComponentChild;
+            forceUpdate(callback?: () => void): void;
+            componentWillUnmount?(): void;
+        }
+    }
+>(
+    Constructor: T
+) {
+    let name = Constructor.name;
+    return class extends Constructor {
+        // @ts-ignore
+        static get name() { return Constructor.name; }
+        reaction = new Reaction(`render.${name}.${globalConstructOrder++}`, () => {
+            super.forceUpdate();
+        });
+        componentWillUnmount() {
+            this.reaction.dispose();
+            super.componentWillUnmount?.();
+        }
+        render(...args: any[]) {
+            let output: preact.ComponentChild;
+            this.reaction.track(() => {
+                output = (super.render as any)(...args);
+            });
+            return output;
+        }
+    };
+}