sliftutils 0.1.1

package/web/InputPicker.tsx

@@ -0,0 +1,158 @@
+import preact from "preact";
+import { observable } from "mobx";
+import { observer } from "./observer";
+import { sort } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { Input } from "./Input";
+import { greenButton, yellowButton } from "./colors";
+
+export type InputOption<T> = {
+    value: T;
+    // Defaults to String(value)
+    label?: preact.ComponentChild;
+    // Defaults to typeof label === "string" ? label : String(value)
+    matchText?: string;
+};
+export type FullInputOption<T> = {
+    value: T;
+    label: preact.ComponentChild;
+    matchText: string;
+};
+
+@observer
+export class InputPickerURL extends preact.Component<{
+    label?: preact.ComponentChild;
+    options: (string | InputOption<string>)[];
+    allowNonOptions?: boolean;
+    value: { value: string };
+}> {
+    render() {
+        let { value, options, ...remaining } = this.props;
+        let values = new Set(value.value.split("|").filter(x => x));
+        return <InputPicker
+            {...remaining}
+            picked={Array.from(values)}
+            addPicked={v => {
+                values.add(v);
+                value.value = Array.from(values).join("|");
+            }}
+            removePicked={v => {
+                values.delete(v);
+                value.value = Array.from(values).join("|");
+            }}
+            options={options.map(x => typeof x === "string" ? { value: x } : x)}
+        />;
+    }
+}
+
+@observer
+export class InputPicker<T> extends preact.Component<{
+    label?: preact.ComponentChild;
+    picked: T[];
+    options: InputOption<T>[];
+    addPicked: (value: T) => void;
+    removePicked: (value: T) => void;
+    allowNonOptions?: boolean;
+}> {
+    synced = observable({
+        pendingText: "",
+        focused: false,
+    });
+    render() {
+        // Input, and beside it the picked values
+        let resolvedOptions = this.props.options.map(option => {
+            let value = option.value;
+            let label = option.label ?? String(value);
+            let matchText = option.matchText ?? (typeof label === "string" ? label : String(value));
+            return { value, label, matchText };
+        });
+        let optionLookup = new Map(resolvedOptions.map((option) => [option.value, option]));
+        let pickedOptions = this.props.picked.map(x => optionLookup.get(x) || { value: x, label: String(x), matchText: String(x) });
+        let pendingMatches: FullInputOption<T>[] = [];
+        let pendingTextFull = this.synced.pendingText;
+        let pendingText = pendingTextFull.trim().toLowerCase();
+        if (pendingText) {
+            pendingMatches = resolvedOptions.filter(option => option.matchText.toLowerCase().includes(pendingText));
+            sort(pendingMatches, x =>
+                x.matchText.startsWith(pendingTextFull) && -10
+                || x.matchText.startsWith(pendingText) && -9
+                || x.matchText.toLowerCase().startsWith(pendingTextFull) && -8
+                || x.matchText.toLowerCase().startsWith(pendingText) && -7
+                || x.matchText.length
+            );
+        } else if (this.synced.focused) {
+            pendingMatches = resolvedOptions;
+        }
+        let extra = pendingMatches.length;
+        pendingMatches = pendingMatches.slice(0, 10);
+        extra -= pendingMatches.length;
+        return (
+            <div className={css.hbox(10).alignItems("start")}>
+                {this.props.label}
+                <Input
+                    value={this.synced.pendingText}
+                    hot
+                    forceInputValueUpdatesWhenFocused
+                    onChangeValue={(x) => this.synced.pendingText = x}
+                    onFocus={() => this.synced.focused = true}
+                    onBlur={() => {
+                        this.synced.focused = false;
+                        this.synced.pendingText = "";
+                    }}
+                    onKeyDown={e => {
+                        // On tab, add first in pendingMatches
+                        if (e.key === "Tab") {
+                            e.preventDefault();
+                            if (pendingMatches.length > 0) {
+                                this.props.addPicked(pendingMatches[0].value);
+                                this.synced.pendingText = "";
+                            } else if (this.props.allowNonOptions) {
+                                this.props.addPicked(this.synced.pendingText as T);
+                                this.synced.pendingText = "";
+                            }
+                        } else if (e.key === "Enter" && this.props.allowNonOptions) {
+                            // HACK: I don't even know, this is just terrible. But it is used to fix some UI where we needed a way to inject text
+                            this.props.addPicked(this.synced.pendingText as T);
+                            this.synced.pendingText = "";
+                        }
+                    }}
+                />
+                {pendingMatches.length > 0 && (
+                    <div className={css.hbox(4).wrap}>
+                        {pendingMatches.map((option) => (
+                            <button
+                                key={`add-${option.matchText}`}
+                                className={css.hbox(5).button + greenButton}
+                                // On mouse down, so we can add picked BEFORE we blur (otherwise
+                                //  this button disappears before it can be clicked)
+                                onMouseDown={() => {
+                                    this.props.addPicked(option.value);
+                                }}
+                            >
+                                + {option.label}
+                            </button>
+                        ))}
+                        {extra > 0 && (
+                            <button className={css.hbox(5).button} disabled>
+                                + {extra} more...
+                            </button>
+                        )}
+                    </div>
+                )}
+                <div className={css.hbox(4).wrap}>
+                    {pickedOptions.map((option) => (
+                        <button
+                            key={`remove-${option.matchText}`}
+                            className={css.hbox(5).button + yellowButton}
+                            onMouseDown={() => {
+                                this.props.removePicked(option.value);
+                            }}
+                        >
+                            - {option.label}
+                        </button>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}

package/web/LocalStorageParam.ts

@@ -0,0 +1,56 @@
+import { isNode } from "typesafecss";
+import { observable } from "mobx";
+
+let allParams: LocalStorageParamStr[] = [];
+
+export class LocalStorageParamStr {
+    private state = observable({
+        seqNum: 0
+    });
+    public lastSetValue = "";
+    constructor(public readonly storageKey: string, private defaultValue: string = "") {
+        allParams.push(this);
+    }
+    public forceUpdate() {
+        this.state.seqNum++;
+    }
+
+    public get() {
+        this.state.seqNum;
+        if (isNode()) return "";
+        return localStorage.getItem(this.storageKey) || "";
+    }
+    public set(value: string) {
+        let prev = this.get();
+        this.lastSetValue = value;
+        if (!isNode()) {
+            if (value === "") {
+                localStorage.removeItem(this.storageKey);
+            } else {
+                localStorage.setItem(this.storageKey, value);
+            }
+        }
+        let after = this.get();
+        if (prev !== after) {
+            this.state.seqNum++;
+        }
+    }
+
+    public get value() {
+        return this.get() || this.defaultValue;
+    }
+    public set value(value: string) {
+        this.set(value);
+    }
+}
+
+if (!isNode()) {
+    // Watch for storage events from other tabs/windows
+    window.addEventListener("storage", (e) => {
+        for (let param of allParams) {
+            if (e.key === param.storageKey) {
+                param.forceUpdate();
+            }
+        }
+    });
+}

package/web/SyncedController.ts

@@ -0,0 +1,405 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { SocketRegistered } from "socket-function/SocketFunctionTypes";
+import { onHotReload } from "socket-function/hot/HotReloadController";
+import { cache } from "socket-function/src/caching";
+import { nextId } from "socket-function/src/misc";
+import { MaybePromise } from "socket-function/src/types";
+import { observable } from "mobx";
+import { formatTime } from "socket-function/src/formatting/format";
+import { isNode } from "typesafecss";
+import { delay } from "socket-function/src/batching";
+
+module.hotreload = false;
+
+let syncedData: {
+    [controllerId: string]: {
+        [nodeId: string]: {
+            [fnc: string]: {
+                [argsHash: string]: {
+                    promise: Promise<unknown> | undefined;
+                    result?: { result: unknown } | { error: Error };
+                    invalidated?: boolean;
+                    setCacheSeqNumber: number;
+                } | undefined;
+            } | undefined;
+        } | undefined;
+    } | undefined;
+} = {};
+let syncedDataSeqNum = observable({
+    value: 0
+});
+
+function commit<T>(code: () => T) {
+    let result = code();
+    syncedDataSeqNum.value++;
+    return result;
+}
+function read<T>(code: () => T) {
+    syncedDataSeqNum.value;
+    return code();
+}
+
+type RemapFunction<T> = T extends (...args: infer Args) => Promise<infer Return>
+    ? {
+        (...args: Args): Return | undefined;
+        promise(...args: Args): Promise<Return>;
+        refresh(...args: Args): void;
+        refreshAll(): void;
+        reset(...args: Args): void;
+        resetAll(): void;
+        isLoading(...args: Args): boolean;
+        setCache(cache: {
+            args: Args;
+            result: Return;
+        }): void;
+    }
+    : T;
+
+// key =>
+const writeWatchers = new Map<string, {
+    controllerId: string;
+    fncName: string;
+}[]>();
+
+export function getSyncedController<T extends SocketRegistered>(
+    controller: T,
+    config?: {
+        /** When a controller call for a write finishes, we refresh all readers.
+         *      - Invalidation is global, across all controllers.
+         */
+        reads?: { [key in keyof T["nodes"][""]]?: string[]; };
+        writes?: { [key in keyof T["nodes"][""]]?: string[]; };
+    }
+): {
+    (nodeId: string): {
+        [fnc in keyof T["nodes"][""]]: RemapFunction<T["nodes"][""][fnc]>;
+    } & {
+        resetAll(): void;
+        refreshAll(): void;
+        anyPending(): boolean;
+    };
+    resetAll(): void;
+    refreshAll(): void;
+    anyPending(): boolean;
+    rerenderAll(): void;
+} {
+    if (isNode()) {
+        let result = cache((nodeId: string) => {
+            let proxy = new Proxy({}, {
+                get: (target, fncNameUntyped) => {
+                    if (typeof fncNameUntyped !== "string") return undefined;
+                    if (fncNameUntyped === "resetAll" || fncNameUntyped === "refreshAll" || fncNameUntyped === "isAnyLoading") {
+                        return notAllowedOnServer;
+                    }
+                    let fncName = fncNameUntyped;
+                    function call(...args: any[]) {
+                        notAllowedOnServer();
+                    }
+                    call.promise = (...args: any[]) => {
+                        return controller.nodes[nodeId][fncName](...args);
+                    };
+                    call.reset = (...args: any[]) => {
+                        notAllowedOnServer();
+                    };
+                    call.resetAll = () => {
+                        notAllowedOnServer();
+                    };
+                    call.refresh = (...args: any[]) => {
+                        notAllowedOnServer();
+                    };
+                    call.refreshAll = () => {
+                        notAllowedOnServer();
+                    };
+                    call.isAnyLoading = () => {
+                        notAllowedOnServer();
+                    };
+                    call.setCache = (config: { args: any[], result: any }) => {
+                        notAllowedOnServer();
+                    };
+                    return call;
+                }
+            }) as any;
+            return proxy;
+        }) as any;
+        function notAllowedOnServer() {
+            throw new Error(`Syncing with getSyncedController is not allowed on the server. You can call promise, but not the synced functions.`);
+        }
+        result.resetAll = () => {
+            notAllowedOnServer();
+        };
+        result.refreshAll = () => {
+            notAllowedOnServer();
+        };
+        result.isAnyLoading = () => {
+            notAllowedOnServer();
+        };
+        return result;
+    }
+    let controllerId = nextId();
+
+    for (let [fncName, keys] of Object.entries(config?.reads ?? {})) {
+        for (let key of keys || []) {
+            let watcherList = writeWatchers.get(key);
+            if (!watcherList) {
+                watcherList = [];
+                writeWatchers.set(key, watcherList);
+            }
+            watcherList.push({ controllerId, fncName });
+        }
+    }
+
+    let result = cache((nodeId: string) => {
+        SocketFunction.onNextDisconnect(nodeId, () => {
+            commit(() => {
+                delete syncedData[controllerId]?.[nodeId];
+            });
+        });
+        return new Proxy({}, {
+            get: (target, fncNameUntyped) => {
+                if (typeof fncNameUntyped !== "string") return undefined;
+                if (fncNameUntyped === "resetAll") {
+                    return () => {
+                        return commit(() => {
+                            delete syncedData[controllerId]?.[nodeId];
+                        });
+                    };
+                }
+                if (fncNameUntyped === "refreshAll") {
+                    return () => {
+                        return commit(() => {
+                            let nodeObj = syncedData[controllerId]?.[nodeId];
+                            if (!nodeObj) return;
+                            for (let fncObj of Object.values(nodeObj)) {
+                                for (let argsHash in fncObj) {
+                                    let obj = fncObj[argsHash];
+                                    if (!obj) continue;
+                                    obj.invalidated = true;
+                                }
+                            }
+                        });
+                    };
+                }
+                if (fncNameUntyped === "anyPending") {
+                    return () => {
+                        return read(() => {
+                            let nodeObj = syncedData[controllerId]?.[nodeId];
+                            if (!nodeObj) return false;
+                            for (let fncObj of Object.values(nodeObj)) {
+                                for (let argsHash in fncObj) {
+                                    let obj = fncObj[argsHash];
+                                    if (!obj) continue;
+                                    if (obj.promise) return true;
+                                }
+                            }
+                            return false;
+                        });
+                    };
+                }
+                let fncName = fncNameUntyped;
+                function getObj(...args: any[]) {
+                    let argsHash = JSON.stringify(args);
+                    let controllerObj = syncedData[controllerId];
+                    if (!controllerObj) {
+                        controllerObj = syncedData[controllerId] = {};
+                    }
+                    let nodeObj = controllerObj[nodeId];
+                    if (!nodeObj) {
+                        nodeObj = controllerObj[nodeId] = {};
+                    }
+                    let fncObj = nodeObj[fncName];
+                    if (!fncObj) {
+                        fncObj = nodeObj[fncName] = {};
+                    }
+                    let obj = fncObj[argsHash];
+                    if (!obj) {
+                        obj = fncObj[argsHash] = {
+                            promise: undefined,
+                            result: undefined,
+                            setCacheSeqNumber: 0,
+                        };
+                    }
+                    return obj;
+                }
+                function call(...args: any[]) {
+                    return read(() => {
+                        let obj = getObj(...args);
+
+                        if (!obj.promise && (!obj.result || obj.invalidated)) {
+                            obj.invalidated = false;
+                            let time = Date.now();
+                            let finished = false;
+                            function logFinished() {
+                                finished = true;
+                                let duration = Date.now() - time;
+                                if (duration > 500) {
+                                    console.warn(`Slow call ${fncName} took ${formatTime(duration)}`);
+                                }
+                            }
+                            let promise = controller.nodes[nodeId][fncName](...args) as Promise<unknown>;
+                            obj.promise = promise;
+                            function invalidateReaders() {
+                                let root = syncedData;
+                                for (let writesTo of config?.writes?.[fncName] || []) {
+                                    for (let watcher of writeWatchers.get(writesTo) || []) {
+                                        for (let nodeObj of Object.values(root[watcher.controllerId] ?? {})) {
+                                            for (let fncObj of Object.values(nodeObj || {})) {
+                                                for (let obj of Object.values(fncObj || {})) {
+                                                    if (!obj) continue;
+                                                    obj.invalidated = true;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            let setCacheSeqNumber = obj.setCacheSeqNumber;
+                            // Run a loop warning every 10 seconds that the call is still pending until it's finished. 
+                            void (async () => {
+                                while (true) {
+                                    await delay(10000);
+                                    if (finished) break;
+                                    console.warn(`Slow call, running for ${formatTime(Date.now() - time)}: ${fncName}`);
+                                }
+                            })();
+                            promise.then(
+                                result => {
+                                    invalidateReaders();
+                                    logFinished();
+                                    commit(() => {
+                                        obj.promise = undefined;
+                                        if (obj.setCacheSeqNumber === setCacheSeqNumber) {
+                                            obj.result = { result };
+                                        }
+                                    });
+                                },
+                                error => {
+                                    invalidateReaders();
+                                    logFinished();
+                                    commit(() => {
+                                        obj.promise = undefined;
+                                        if (obj.setCacheSeqNumber === setCacheSeqNumber) {
+                                            obj.result = { error };
+                                        }
+                                    });
+                                }
+                            );
+                        }
+
+                        let result = obj.result;
+                        if (result) {
+                            if ("error" in result) {
+                                throw result.error;
+                            } else {
+                                return result.result;
+                            }
+                        }
+                        return undefined;
+                    });
+                }
+                call.promise = (...args: any[]) => {
+                    let obj = getObj(...args);
+                    // Reset promise, to force it to not use the cache, as promise functions should never be cached. This might result in the results being set out of order, but... generally functions called with promise and accessed inside a watcher, so this should be fine.
+                    obj.promise = undefined;
+                    obj.invalidated = true;
+                    call(...args);
+                    if (!obj.promise) {
+                        debugger;
+                        throw new Error("Promise is undefined after calling function?");
+                    }
+                    // Reset typeguards, as typescript doesn't think call will change obj.promise
+                    obj = obj as any;
+                    let promise = obj.promise;
+                    void promise?.finally(() => {
+                        // Don't cache it, we never want to cache pure promise calls.
+                        if (promise === obj.promise) {
+                            obj.promise = undefined;
+                        }
+                    });
+                    return obj.promise;
+                };
+                call.reset = (...args: any[]) => {
+                    return commit(() => {
+                        let argsHash = JSON.stringify(args);
+                        let obj = syncedData[controllerId]?.[nodeId]?.[fncName]?.[argsHash];
+                        if (!obj) return;
+                        delete obj.promise;
+                        delete obj.result;
+                    });
+                };
+                call.resetAll = () => {
+                    return commit(() => {
+                        delete syncedData[controllerId]?.[nodeId]?.[fncName];
+                    });
+                };
+                call.refresh = (...args: any[]) => {
+                    return commit(() => {
+                        let argsHash = JSON.stringify(args);
+                        let obj = syncedData[controllerId]?.[nodeId]?.[fncName]?.[argsHash];
+                        if (!obj) return;
+                        obj.invalidated = true;
+                    });
+                };
+                call.refreshAll = () => {
+                    return commit(() => {
+                        delete syncedData[controllerId]?.[nodeId]?.[fncName];
+                    });
+                };
+                call.isLoading = (...args: any[]) => {
+                    return read(() => {
+                        let argsHash = JSON.stringify(args);
+                        let obj = syncedData[controllerId]?.[nodeId]?.[fncName]?.[argsHash];
+                        return !!obj?.promise;
+                    });
+                };
+                call.setCache = (cache: {
+                    args: any[];
+                    result: unknown;
+                }) => {
+                    return commit(() => {
+                        let obj = getObj(...cache.args);
+                        obj.result = { result: cache.result };
+                        obj.promise = undefined;
+                        obj.setCacheSeqNumber++;
+                    });
+                };
+                return call;
+            },
+        });
+    }) as any;
+    result.resetAll = () => {
+        return commit(() => {
+            delete syncedData[controllerId];
+        });
+    };
+    result.refreshAll = () => {
+        return commit(() => {
+            for (let node of Object.values(syncedData[controllerId] ?? {})) {
+                for (let fncObj of Object.values(node || {})) {
+                    for (let obj of Object.values(fncObj || {})) {
+                        if (!obj) continue;
+                        obj.invalidated = true;
+                    }
+                }
+            }
+        });
+    };
+    result.anyPending = () => {
+        return read(() => {
+            if (!syncedData[controllerId]) return false;
+            for (let node of Object.values(syncedData[controllerId] ?? {})) {
+                for (let fncObj of Object.values(node || {})) {
+                    for (let obj of Object.values(fncObj || {})) {
+                        if (!obj) continue;
+                        if (obj.promise) return true;
+                    }
+                }
+            }
+            return false;
+        });
+    };
+    result.rerenderAll = () => {
+        return commit(() => {
+        });
+    };
+    return result;
+}

package/web/SyncedLoadingIndicator.tsx

@@ -0,0 +1,37 @@
+import { observer } from "./observer";
+import * as preact from "preact";
+import { css } from "typesafecss";
+
+@observer
+export class SyncedLoadingIndicator extends preact.Component<{
+    controller: { anyPending: () => boolean };
+}> {
+    render() {
+        let { controller } = this.props;
+        let pending = controller.anyPending();
+        if (!pending) return null;
+
+        return <div className={css.hbox(8).pad2(12).hsl(220, 50, 20).bord2(220, 50, 40, 1).borderRadius(6)}>
+            <style>
+                {`
+                @keyframes syncSpin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
+                .sync-spinner {
+                    animation: syncSpin 1s linear infinite;
+                }
+                @keyframes syncPulse {
+                    0%, 100% { opacity: 0.6; }
+                    50% { opacity: 1; }
+                }
+                .sync-pulse {
+                    animation: syncPulse 1.5s ease-in-out infinite;
+                }
+                `}
+            </style>
+            <div className={css.size(16, 16).bord2(220, 60, 70, 2).borderRadius(50).borderTopColor("transparent") + " sync-spinner"}></div>
+            <div className={css.colorhsl(220, 60, 80).fontSize(14) + " sync-pulse"}>Syncing...</div>
+        </div>;
+    }
+}