querysub 0.2.0

package/src/library-components/LazyComponent.tsx

@@ -0,0 +1,62 @@
+import debugbreak from "debugbreak";
+import { cache, lazy } from "socket-function/src/caching";
+import { isNode, sort } from "socket-function/src/misc";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { qreact } from "../4-dom/qreact";
+
+let nextSeqNum = 0;
+let schema = Querysub.createLocalSchema<{
+    loaded: { [seqNum: number]: true };
+}>("LazyComponent");
+
+/** const NodeViewer = createLazyComponent(() => import("./NodeViewer"))("NodeViewer"); */
+export function createLazyComponent<Module>(
+    getImport: () => Promise<Module>
+): {
+    <ExportName extends keyof Module>(exportName: ExportName): Module[ExportName];
+} {
+    return (exportName) => {
+        if (isNode()) {
+            // Import it, asynchronously, so it isn't preloaded, but it is available for clientside imports.
+            void Promise.resolve().then(() => getImport());
+            // TOOD: We will need to support this serverside eventually.
+            return class extends qreact.Component {
+                render(): preact.ComponentChild {
+                    throw new Error(`createLazyComponent is not supported serverside presently.`);
+                }
+            };
+        }
+
+        let seqNum = nextSeqNum++;
+
+        const loadModuleExports = lazy(() => {
+            let loadedModuleExports: any | undefined;
+            getImport().then((exports) => {
+                loadedModuleExports = exports;
+                Querysub.commit(() => {
+                    schema().loaded[seqNum] = true;
+                });
+            }, err => {
+                console.error(`Error loading module`, getImport, err);
+            });
+            return () => {
+                return loadedModuleExports;
+            };
+        });
+
+        return class extends qreact.Component {
+            render() {
+                let loadedModuleExports = loadModuleExports()();
+                if (!loadedModuleExports) {
+                    schema().loaded[seqNum];
+                    return undefined;
+                }
+                let Component = loadedModuleExports[exportName];
+                if (!Component) {
+                    return <div>Component not found in module {getImport.toString()}, component {exportName}</div>;
+                }
+                return <Component {...this.props} />;
+            }
+        } as any;
+    };
+}

package/src/library-components/MeasureHeightCSS.tsx

@@ -0,0 +1,48 @@
+import { css } from "typesafecss";
+import { qreact } from "../4-dom/qreact";
+
+export class MeasureHeightCSS extends qreact.Component<{
+    threshold?: number;
+}> {
+    render() {
+        let threshold = this.props.threshold ?? 100;
+        const renderCutoff = (pixels: number) => {
+            return <div
+                className={
+                    css.absolute.right0
+                        .hsl(0, 0, 30)
+                        .color("white")
+                        .top(`calc(min(0px, (100% - ${pixels}px) * 1000))`)
+                        .offsety("-2px")
+                        .minHeight(8)
+                        .width((pixels - threshold) * 0.25)
+                    + " MeasureHeightCSS"
+                }
+            >
+                {/* {pixels}px */}
+            </div>;
+        };
+        let keyPoints: number[] = [];
+        for (let point = threshold * 1.5; point < 500; point *= 1.5) {
+            keyPoints.push(point);
+        }
+        for (let point = 500; point < 10000; point *= 2) {
+            keyPoints.push(point);
+        }
+        return (
+            <>
+                {keyPoints.map(point => renderCutoff(point))}
+                {/* NOTE: We want to hide easily, and we can't trigger on OUR OWN hover, because
+                    then we would stop being hovered (and if we just used opacity we would invisible
+                    block clicks which is terrible. So... this works alright. */}
+                <style>
+                    {`
+                    *:hover > .MeasureHeightCSS {
+                        display: none;
+                    }
+                `}
+                </style>
+            </>
+        );
+    }
+}

package/src/library-components/MeasuredDiv.tsx

@@ -0,0 +1,47 @@
+import preact from "preact"; import { qreact } from "../../src/4-dom/qreact";
+import { Querysub } from "../../src/4-querysub/Querysub";
+import { throttleFunction } from "socket-function/src/misc";
+
+
+export class MeasuredDiv extends qreact.Component<preact.JSX.HTMLAttributes<HTMLDivElement> & {
+    onNewSize: (width: number, height: number, elem: HTMLElement) => void;
+    overrideType?: string;
+}> {
+    holder: HTMLElement | null = null;
+    observer = new ResizeObserver(
+        throttleFunction(200,
+            (val) => {
+                for (let t of val) {
+                    if (t.target === this.holder) {
+                        Querysub.localCommit(() => {
+                            this.props.onNewSize(t.contentRect.width, t.contentRect.height, t.target as HTMLElement);
+                        });
+                    }
+                }
+            }
+        )
+    );
+    componentWillUnmount() {
+        this.observer.disconnect();
+    }
+    render() {
+        let baseRef = this.props.ref as any;
+        return qreact.createElement(this.props.overrideType ?? "div", {
+            key: "MeasuredDiv",
+            ...this.props,
+            ref: (e: HTMLElement) => {
+                baseRef?.(e);
+                if (this.holder === e) {
+                    return;
+                }
+                if (this.holder) {
+                    this.observer.unobserve(this.holder);
+                }
+                this.holder = e;
+                if (e) {
+                    this.observer.observe(e);
+                }
+            }
+        } as any);
+    }
+}

package/src/library-components/ShowMore.tsx

@@ -0,0 +1,51 @@
+import { css } from "typesafecss";
+import { qreact } from "../4-dom/qreact";
+import { list, nextId } from "socket-function/src/misc";
+import { Button } from "./Button";
+
+module.hotreload = true;
+module.hotreload = true;
+
+export class ShowMore extends qreact.Component<{
+    className?: string;
+    maxHeight: number;
+    /** When expanding, makes the click area the full size. */
+    fullClickArea?: boolean;
+    onExpand?: (expanded: boolean) => void;
+}> {
+    state = {
+        showMore: false,
+    };
+    render() {
+        const { maxHeight } = this.props;
+        let showMore = this.state.showMore;
+        return (
+            <div className={
+                css.relative
+                + (!showMore && css.maxHeight(maxHeight).overflowHidden)
+                + this.props.className
+            }>
+                {this.props.children}
+                <div
+                    className={
+                        css.fillWidth.pointer.hbox0
+                            .alignItems("end").justifyContent("end")
+                            .left(0)
+                            .bottom(`calc((100% - ${maxHeight}px) * 10000)`)
+                        + (!showMore && css.absolute)
+                        + (this.props.fullClickArea && css.fillHeight)
+                        + " trigger-hover "
+                    }
+                    onClick={() => {
+                        this.state.showMore = !showMore;
+                        this.props.onExpand?.(this.state.showMore);
+                    }}
+                >
+                    <Button className={css.hsl(270, 50, 50).background("hsl(270, 50%, 70%)", "hover").zIndex(1)}>
+                        {showMore ? "Show Less" : "Show More"}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+}

package/src/library-components/SyncedController.ts

@@ -0,0 +1,171 @@
+import { atomic, atomicObjectWrite, atomicObjectWriteNoFreeze, doAtomicWrites, proxyWatcher } from "../../src/2-proxy/PathValueProxyWatcher";
+import { Querysub } from "../../src/4-querysub/Querysub";
+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";
+
+// IMPORTANT! See cacheAsyncSynced if you just want to run promise functions
+
+let controllerIds = new Set<string>();
+
+module.hotreload = false;
+onHotReload(() => {
+    Querysub.commitLocal(() => {
+        let root = syncedData();
+        for (let id of controllerIds) {
+            for (let nodeId in root[id]) {
+                for (let fnc in root[id][nodeId]) {
+                    for (let argsHash in root[id][nodeId][fnc]) {
+                        delete root[id][nodeId][fnc][argsHash].promise;
+                        delete root[id][nodeId][fnc][argsHash].result;
+                    }
+                    delete root[id][nodeId][fnc];
+                }
+                delete root[id][nodeId];
+            }
+        }
+    });
+});
+
+let syncedData = Querysub.createLocalSchema<{
+    [controllerId: string]: {
+        [nodeId: string]: {
+            [fnc: string]: {
+                [argsHash: string]: {
+                    promise: Promise<unknown> | undefined;
+                    result?: { result: unknown } | { error: Error };
+                }
+            }
+        }
+    }
+}>("SyncedController");
+
+type RemapFunction<T> = T extends (...args: infer Args) => Promise<infer Return>
+    ? {
+        (...args: Args): Return | undefined;
+        reset(...args: Args): void;
+        resetAll(): void;
+    }
+    : T;
+export function getSyncedController<T extends SocketRegistered>(controller: T): {
+    (nodeId: string): {
+        [fnc in keyof T["nodes"][""]]: RemapFunction<T["nodes"][""][fnc]>;
+    } & {
+        resetAll(): void;
+    };
+    resetAll(): void;
+} {
+    let id = nextId();
+    controllerIds.add(id);
+    let result = cache((nodeId: string) => {
+        SocketFunction.onNextDisconnect(nodeId, () => {
+            Querysub.commitLocal(() => {
+                let nodeObj = syncedData()[id][nodeId];
+                for (let fnc in nodeObj) {
+                    for (let argsHash in nodeObj[fnc]) {
+                        delete nodeObj[fnc][argsHash].promise;
+                        delete nodeObj[fnc][argsHash].result;
+                    }
+                    delete nodeObj[fnc];
+                }
+                delete syncedData()[id][nodeId];
+            });
+        });
+        return new Proxy({}, {
+            get: (target, fncNameUntyped) => {
+                if (typeof fncNameUntyped !== "string") return undefined;
+                if (fncNameUntyped === "resetAll") {
+                    return () => {
+                        return Querysub.commitLocal(() => {
+                            for (let fnc in syncedData()[id][nodeId]) {
+                                for (let argsHash in syncedData()[id][nodeId][fnc]) {
+                                    delete syncedData()[id][nodeId][fnc][argsHash].promise;
+                                    delete syncedData()[id][nodeId][fnc][argsHash].result;
+                                }
+                                delete syncedData()[id][nodeId][fnc];
+                            }
+                            delete syncedData()[id][nodeId];
+                        });
+                    };
+                }
+                let fncName = fncNameUntyped;
+                function call(...args: any[]) {
+                    return Querysub.commitLocal(() => {
+                        let argsHash = JSON.stringify(args);
+                        let obj = syncedData()[id][nodeId][fncName][argsHash];
+
+                        let promise = atomic(obj.promise);
+                        if (!promise) {
+                            //console.log("calling", fncName, args);
+                            promise = controller.nodes[nodeId][fncName](...args) as Promise<unknown>;
+                            doAtomicWrites(() => {
+                                obj.promise = promise;
+                            });
+                            promise.then(
+                                result => {
+                                    //console.log("result", result);
+                                    Querysub.commitLocal(() => {
+                                        obj.result = atomicObjectWriteNoFreeze({ result });
+                                    });
+                                },
+                                error => {
+                                    //console.log("error", error);
+                                    Querysub.commitLocal(() => {
+                                        obj.result = atomicObjectWriteNoFreeze({ error });
+                                    });
+                                }
+                            );
+                        }
+
+                        let result = atomic(obj.result);
+                        if (result) {
+                            if ("error" in result) {
+                                throw result.error;
+                            } else {
+                                return result.result;
+                            }
+                        }
+                        return undefined;
+                    });
+                }
+                call.reset = (...args: any[]) => {
+                    return Querysub.commitLocal(() => {
+                        let argsHash = JSON.stringify(args);
+                        let obj = syncedData()[id][nodeId][fncName][argsHash];
+                        delete obj.promise;
+                        delete obj.result;
+                    });
+                };
+                call.resetAll = () => {
+                    return Querysub.commitLocal(() => {
+                        for (let argsHash in syncedData()[id][nodeId][fncName]) {
+                            delete syncedData()[id][nodeId][fncName][argsHash].promise;
+                            delete syncedData()[id][nodeId][fncName][argsHash].result;
+                        }
+                        delete syncedData()[id][nodeId][fncName];
+                    });
+                };
+
+                return call;
+            },
+        });
+    }) as any;
+    result.resetAll = () => {
+        return Querysub.commitLocal(() => {
+            for (let nodeId in syncedData()[id]) {
+                for (let fnc in syncedData()[id][nodeId]) {
+                    for (let argsHash in syncedData()[id][nodeId][fnc]) {
+                        delete syncedData()[id][nodeId][fnc][argsHash].promise;
+                        delete syncedData()[id][nodeId][fnc][argsHash].result;
+                    }
+                    delete syncedData()[id][nodeId][fnc];
+                }
+                delete syncedData()[id][nodeId];
+            }
+        });
+    };
+    return result;
+}