querysub 0.153.0 → 0.154.0

package/src/library-components/SimpleNotification.tsx

@@ -0,0 +1,133 @@
+import preact from "preact";
+import { css } from "../4-dom/css";
+import { Icon } from "./icons";
+import { qreact } from "../4-dom/qreact";
+import { closeCurrentNotification, createCloseCurrentNotification } from "./Notifications";
+import { nextId } from "socket-function/src/misc";
+import { Querysub } from "../4-querysub/Querysub";
+
+let nextSeqNum = 1;
+export class SimpleNotification extends qreact.Component<{
+    type: "info" | "warn" | "error" | "success";
+    title: string;
+    usesClickEvents?: boolean;
+    timeout?: number;
+    tooltip?: string;
+}> {
+    componentDidMount(): void {
+        let timeout = this.timeout();
+        if (timeout > 0) {
+            let closeNotification = createCloseCurrentNotification();
+            if (Querysub.isAllSynced()) {
+                setTimeout(() => closeNotification?.(), timeout);
+            }
+        }
+    }
+    timeout() {
+        return this.props.timeout ?? 10_000;
+    }
+    seqNum = nextSeqNum++;
+    render() {
+        let { type, title, children, usesClickEvents } = this.props;
+        let color = (
+            type === "info" && { h: 188, s: 52 }
+            || type === "warn" && { h: 50, s: 100 }
+            || type === "error" && { h: 3, s: 62 }
+            || type === "success" && { h: 155, s: 66 }
+            || { h: 0, s: 50 }
+        );
+        let animClassName = `SimpleNotification-${this.seqNum}`;
+        return (
+            <div
+                class={
+                    css.color("white").pad(2)
+                        .hsla(color.h, color.s, 50, 0.9)
+                        .bord(2, `hsl(${color.h}, ${color.s}%, 60%)`)
+                        .hbox(10)
+                        .maxWidth("40vw")
+                        .relative
+                        .overflowHidden
+                    + (!usesClickEvents ? css.button : "")
+                    + " " + animClassName
+                }
+                onClick={() => {
+                    void navigator.clipboard.writeText(title);
+                    if (!usesClickEvents) {
+                        closeCurrentNotification();
+                    }
+                }}
+                title={this.props.tooltip}
+            >
+                <div
+                    class={
+                        css
+                            .absolute.zIndex(-1).pos(0, 0).fillHeight
+                            .hsla(color.h, color.s, 50, 0.9)
+                        + " " + animClassName + "-bg"
+                    }
+                />
+                <div class={css.pad(2, 4).vbox(2).fillWidth}>
+                    <div class={css.ellipsis.fillWidth.fontWeight("bold")}>
+                        {title}
+                    </div>
+                    <div>
+                        {children}
+                    </div>
+                </div>
+                <div class={css.margin("auto")} />
+                <div class={css.flexShrink0.alignSelf("start").button} onClick={() => {
+                    if (usesClickEvents) {
+                        closeCurrentNotification();
+                    }
+                }}>
+                    {Icon.close({ size: 20, stroke: "white", fill: "hsl(0, 0%, 70%)" })}
+                </div>
+                <style>
+                    {`
+                        @keyframes ${animClassName}-anim {
+                            0% { transform: translateY(-100%); }
+                            100% { transform: translateY(0); }
+                        }
+                        .${animClassName} {
+                            animation: ${animClassName}-anim 0.3s;
+                        }
+
+                        @keyframes ${animClassName}-bg-anim {
+                            0% { width: 100% }
+                            100% { width: 0% }
+                        }
+                        .${animClassName}-bg {
+                            animation: ${animClassName}-bg-anim ${this.timeout()}ms linear;
+                        }
+                    `}
+                </style>
+            </div>
+        );
+    }
+}
+/*
+primary-50: hsla(188, 52%, 84%, 1);
+primary-300: hsla(188, 46%, 69%, 1);
+primary-500: hsla(188, 45%, 54%, 1);
+primary-700: hsla(192, 89%, 29%, 1);
+primary-900: hsla(192, 100%, 20%, 1);
+
+success-50: hsla(155, 66%, 86%, 1);
+success-300: hsla(155, 50%, 70%, 1);
+success-500: hsla(155, 45%, 54%, 1);
+success-700: hsla(155, 90%, 29%, 1);
+success-900: hsla(155, 100%, 20%, 1);
+
+warning-50: hsla(50, 100%, 88%, 1);
+warning-75: hsla(50, 100%, 83%, 1);
+warning-300: hsla(50, 79%, 76%, 1);
+warning-500: hsla(50, 81%, 67%, 1);
+warning-700: hsla(50, 100%, 61%, 1);
+warning-900: hsla(50, 100%, 43%, 1);
+
+error-50: hsla(3, 62%, 89%, 1);
+error-300: hsla(3, 100%, 83%, 1);
+error-500: hsla(3, 86%, 70%, 1);
+error-700: hsla(3, 91%, 64%, 1);
+error-900: hsla(3, 67%, 52%, 1);
+*/

package/src/library-components/TabbedUI.tsx

@@ -0,0 +1,39 @@
+import preact from "preact";
+import { qreact } from "../4-dom/qreact";
+import { css } from "../4-dom/css";
+import { ATag } from "../library-components/ATag";
+import { URLParam, createURLSync } from "../library-components/URLParam";
+
+const tabURL = createURLSync<string>("tab", "");
+
+export class TabbedUI extends qreact.Component<{
+    // Defaults Params.tab
+    tab?: URLParam;
+    /** The first tab is the default */
+    tabs: { value: string; title: preact.ComponentChild; contents: preact.ComponentChild; }[];
+}> {
+    render() {
+        let tabs = this.props.tabs;
+        let tabPointer = this.props.tab ?? tabURL;
+        let currentTab = tabs.find(t => t.value === tabPointer.value) ?? tabs[0];
+        return (
+            <div class={css.vbox(0)}>
+                <div class={css.hbox(0).fontSize(16)}>
+                    {tabs.map(tab => (
+                        <ATag
+                            values={[{ param: tabPointer, value: tab.value }]}
+                            class={css.flex.pad(10).bord(0, { h: 210, s: 0, l: 25 }).borderLeftWidth(1)
+                                + (tab.value === currentTab.value && css.hsl(210, 50, 40) || css.hsl(210, 0, 40))
+                            }
+                        >
+                            {tab.title}
+                        </ATag>
+                    ))}
+                </div>
+                <div class={css.bord(2, { h: 210, s: 0, l: 25 }).alignSelf("stretch").pad(10).vbox(10)}>
+                    {currentTab.contents}
+                </div>
+            </div>
+        );
+    }
+}

package/src/library-components/animateAnyElement.tsx

@@ -0,0 +1,65 @@
+import { delay } from "socket-function/src/batching";
+import { cacheJSONArgsEqual } from "socket-function/src/caching";
+import { isNode } from "typesafecss";
+
+/**
+    Animates the element as it moves, even if it is just part of a regular layout,
+        which works no matter where it moves. A unique id must be passed in, to
+        ensure the right position is animated. It is encouraged to use a key,
+        to ensure your element isn't reused with unrelated elements.
+        - Sets transition and transform on the element, and so is incompatible
+            with elements that use those.
+
+
+    For example:
+        <div key={key} ref={createRefAnimation(key)}>
+            Test
+        </div>
+
+ */
+export const createRefAnimation = cacheJSONArgsEqual((id: string, transitionTime = "200ms", transitionType = "ease-in-out") => {
+    let prevRect: DOMRect | undefined;
+    let prevScrollOffsetTop = 0;
+    let prevScrollOffsetLeft = 0;
+    return async (elem: HTMLElement | null) => {
+        if (!elem) return;
+        let newRect = elem.getBoundingClientRect();
+        // If we haven't even started the transition, skip
+        if (elem.style.transform) {
+            return;
+        }
+        // If we are still animating, skip. Stopping it causes issues, and it is smoother to just
+        //  let it finish.
+        if (elem.getAnimations().length > 0) {
+            return;
+        }
+        let curPrevRect = prevRect;
+        prevRect = newRect;
+
+        let newScrollOffsetObj = getScrollOffsetSum(elem);
+        let scrollChangeTop = newScrollOffsetObj.top - prevScrollOffsetTop;
+        prevScrollOffsetTop = newScrollOffsetObj.top;
+        let scrollChangeLeft = newScrollOffsetObj.left - prevScrollOffsetLeft;
+        prevScrollOffsetLeft = newScrollOffsetObj.left;
+
+        if (!curPrevRect?.width || !newRect.width || curPrevRect.left === newRect.left) {
+            return;
+        }
+        elem.style.transform = `translate(${curPrevRect.left - newRect.left - scrollChangeLeft}px, ${curPrevRect.top - newRect.top - scrollChangeTop}px)`;
+        elem.style.transition = `transform 0s ${transitionType}`;
+        await delay("paintLoop");
+        elem.style.transform = "";
+        elem.style.transition = `transform ${transitionTime} ${transitionType}`;
+    };
+}, 10000);
+
+function getScrollOffsetSum(elem: HTMLElement | null) {
+    let top = 0;
+    let left = 0;
+    while (elem) {
+        top += elem.scrollTop;
+        left += elem.scrollLeft;
+        elem = elem.parentElement;
+    }
+    return { top, left };
+}

package/src/library-components/errorNotifications.tsx

@@ -0,0 +1,81 @@
+import { isNode } from "socket-function/src/misc";
+import { showNotification } from "./Notifications";
+import { SimpleNotification } from "./SimpleNotification";
+import { qreact } from "../4-dom/qreact";
+import { Querysub } from "../4-querysub/Querysub";
+import { css } from "../4-dom/css";
+
+function onUncaught(...args: unknown[]) {
+    let error = args[4] as Error;
+    if (!error) {
+        error = (args[0] as any).reason || { message: args[0] };
+    }
+    // Ignore ResizeObserver errors, they are spurious
+    //  - https://github.com/vercel/next.js/discussions/51551
+    if (error.message.startsWith("ResizeObserver loop")) return;
+
+    onMessage({
+        type: "error",
+        message: error.message,
+        stack: error.stack || error.message,
+    });
+};
+
+if (!isNode()) {
+    window.onerror = window.onunhandledrejection = onUncaught;
+    function shimLog(type: "warn" | "error") {
+        let base = console[type];
+        console[type] = function (message: string, ...args: unknown[]) {
+            onMessage({ type, message, stack: message + "\n" + args.join("\n") });
+            base.call(console, message, ...args);
+        };
+    }
+
+    shimLog("error");
+    // NOTE: We MIGHT turn warning back on, if we can add some kind of dev switch.
+    //  But for normal users... warnings are useless, and caused by all sorts of things
+    //  which are completely fine and require no action.
+    //shimLog("warn");
+}
+
+let lastUserWantsInfo = false;
+export function enableErrorNotifications() {
+    lastUserWantsInfo = true;
+}
+
+function onMessage(config: {
+    type: "error" | "warn";
+    message: string;
+    stack: string;
+}) {
+    if (!lastUserWantsInfo && config.type !== "error") return;
+
+    let title = stripConsoleRenderedColors(config.message).split("\n")[0];
+    if (title.startsWith("Error: ")) {
+        title = title.slice("Error: ".length);
+    }
+    showNotification({
+        pos: "topRight",
+        id: title,
+        notification: <SimpleNotification
+            type={config.type}
+            title={title}
+            tooltip={config.stack}
+        >
+            {/* NOTE: I've stopping showing this info. It's annoying, as they can just look in the console
+                (as most of these come from console.error anyways). */}
+            {/* {lastUserWantsInfo && <div class={config.stack.trim().includes("\n") && css.whiteSpace("pre-wrap") || ""}>
+                {stripConsoleRenderedColors(config.stack)}
+            </div>} */}
+        </SimpleNotification>
+    });
+}
+
+// \033[XXXm
+// \033[31;42m
+// \033[38;5;206m 
+// \033[38;2;<r>;<g>;<b>m 
+
+function stripConsoleRenderedColors(text: string) {
+    return String(text).replaceAll(/\033\[\d+(;\d+)*m/g, "");
+}

package/src/library-components/placeholder.ts

@@ -0,0 +1,18 @@
+import { cacheArgsEqual } from "socket-function/src/caching";
+
+export const getPlaceholder = cacheArgsEqual((width, height) => {
+    let canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    let ctx = canvas.getContext("2d")!;
+    ctx.fillStyle = "hsl(0, 0%, 80%)";
+    ctx.fillRect(0, 0, width, height);
+    // Draw width x height in the middle of the canvas
+    ctx.fillStyle = "hsl(0, 0%, 60%)";
+    // Bold
+    ctx.font = "bold 40px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(`${width} x ${height}`, width / 2, height / 2);
+    return canvas.toDataURL();
+}, 10);

package/src/misc/format2.ts

@@ -0,0 +1,48 @@
+export function parseNice(text: string): unknown {
+    if (text === "undefined") return undefined;
+    try {
+        return JSON.parse(text);
+    } catch { }
+    return text;
+}
+export function stringifyNice(value: unknown): string {
+    if (value === undefined) return "undefined";
+    if (value === "") return JSON.stringify("");
+    let testStringParse = parseNice(String(value));
+    if (testStringParse === value) {
+        return String(value);
+    }
+    return JSON.stringify(value);
+}
+
+export function niceNumberStringify(valueIn: number) {
+    if (Math.abs(valueIn) < 0.0000000001) {
+        return "0";
+    }
+    let value = valueIn.toString();
+    // TODO: Do this MUCH better...
+    if (value.slice(0, -1).endsWith("00000000000")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("0")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        return value;
+    }
+    if (value.slice(0, -1).endsWith("9999999999")) {
+        value = value.slice(0, -1);
+        while (value.endsWith("9")) {
+            value = value.slice(0, -1);
+        }
+        if (value.endsWith(".")) {
+            value = value.slice(0, -1);
+        }
+        // NOTE: Interestingly enough... because we remove all trailing 9s, it means if the last number is not 9,
+        //  so... we can do this hack to round up
+        value = value.slice(0, -1) + (parseInt(value.slice(-1)) + 1);
+        return value;
+    }
+    return value;
+}

package/src/misc.ts

@@ -16,4 +16,37 @@ export function isEmpty(obj: unknown): boolean {
 
 export function isDefined<T>(value: T | undefined | null): value is T {
     return value !== undefined && value !== null;
+}
+
+export function ObjectAssign<T extends { [key: string]: unknown }>(obj: T, values: Partial<T>) {
+    return Object.assign(obj, values);
+}
+
+export function ellipsis(text: string, max: number) {
+    if (text.length <= max) return text;
+    return text.slice(0, max - 3) + "...";
+}
+export function ellipsisMiddle(text: string, max: number) {
+    if (text.length <= max) return text;
+    let half = Math.floor((max - 3) / 2);
+    return text.slice(0, half) + "..." + text.slice(-half);
+}
+export function ellipsisStart(text: string, max: number) {
+    if (text.length <= max) return text;
+    return "..." + text.slice(-max + 3);
+}
+
+export function joinVNodes(vNodes: preact.ComponentChild[], delimitter: preact.ComponentChild) {
+    let output: preact.ComponentChild[] = [];
+    for (let i = 0; i < vNodes.length; i++) {
+        if (i !== 0) {
+            output.push(delimitter);
+        }
+        output.push(vNodes[i]);
+    }
+    return output;
+}
+
+export function clamp(value: number, min: number, max: number) {
+    return Math.max(min, Math.min(max, value));
 }

package/src/misc2.ts

@@ -0,0 +1,5 @@
+import { atomic } from "./2-proxy/PathValueProxyWatcher";
+
+export function isStrSimilar(a: string | undefined, b: string | undefined) {
+    return atomic(a)?.toLowerCase().trim().replaceAll(" ", "") === atomic(b)?.toLowerCase().trim().replaceAll(" ", "");
+}

package/src/server.ts

@@ -24,10 +24,11 @@ import { formatTime } from "socket-function/src/formatting/format";
 import "./4-querysub/Querysub";
 import { getOwnThreadId } from "./-f-node-discovery/NodeDiscovery";
 import { getOurAuthorities } from "./config2";
-import { isPublic } from "./config";
+import { devDebugbreak, isPublic } from "./config";
 
 let yargObj = isNodeTrue() && yargs(process.argv)
     .option("authority", { type: "string", desc: `Defines the base paths we are an authority on (the domain is prepended to them). Either a file path to a JSON(AuthorityPath[]), or a base64 representation of the JSON(AuthorityPath[]).` })
+    .option("verbose", { type: "boolean", desc: "Log all writes and reads" })
     .argv || {}
     ;
 

package/src/storage/diskCache.ts

@@ -0,0 +1,227 @@
+import { asBuffer } from "../buffers";
+import { assert, assertValue, logErrors } from "../errors";
+import { batchFunction } from "socket-function/src/batching";
+import { lazy } from "socket-function/src/caching";
+import { formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { isNode } from "socket-function/src/misc";
+import { measureBlock, measureWrap } from "socket-function/src/profiling/measure";
+
+
+
+let persist = lazy(() => {
+    if (!isNode()) {
+        logErrors(navigator.storage?.persist());
+    }
+});
+
+let existingDiskCaches = new Set<string>();
+/** Faster at reading then DiskBackedLookup (up to 3X, depending on the case), BUT...
+ *      synchronously blocks for up to 30ms per write, and gives errors on large transactions/writes.
+ */
+export function diskCache(
+    config: {
+        uniqueName: string;
+        /** Default = 64MB */
+        inMemoryLimit?: number;
+    }
+): {
+    get(key: string[]): Promise<(Buffer | undefined)[]>;
+    getSingle(key: string): Promise<Buffer | undefined>;
+    set(key: string, value: Buffer): void;
+} {
+    let { uniqueName } = config;
+    const inMemoryLimit = config.inMemoryLimit ?? 64 * 1024 * 1024;
+
+    if (existingDiskCaches.has(uniqueName)) {
+        throw new Error(`Duplicate diskCache ${uniqueName}`);
+    }
+    existingDiskCaches.add(uniqueName);
+    uniqueName = "diskCache3_" + uniqueName;
+
+    if (isNode() || !navigator.storage) {
+        return {
+            async get(keys: string[]) {
+                return keys.map(x => undefined);
+            },
+            async getSingle() {
+                return undefined;
+            },
+            set() { }
+        };
+    }
+
+    const objectStoreName = "buffers";
+    let getDB = lazy((async () => {
+        let db = indexedDB.open(uniqueName, 1);
+        db.addEventListener("upgradeneeded", () => {
+            db.result.createObjectStore(objectStoreName, {});
+        });
+        await new Promise(resolve => db.addEventListener("success", resolve));
+        return db.result;
+    }));
+    async function getTransaction() {
+        let database = await getDB();
+        return database.transaction(objectStoreName, "readwrite").objectStore(objectStoreName);
+    }
+
+    let totalBufferCacheSize = 0;
+    let bufferCache = new Map<string, Buffer>();
+
+    // TODO: Batch this better, as each request is taking ~10ms on my laptop (even if only 0B is loaded).
+    async function getBufferCachedBase(bufferIds: string[]): Promise<(Buffer | undefined | "retry")[]> {
+        let transaction = await getTransaction();
+
+        let time = Date.now();
+
+        let bufferPromises: Map<string, Promise<Buffer | undefined | "retry">> = new Map();
+        for (let bufferId of new Set(bufferIds)) {
+            let memoryCache = bufferCache.get(bufferId);
+            if (memoryCache) {
+                bufferPromises.set(bufferId, Promise.resolve(memoryCache));
+            } else {
+                let result = transaction.get(bufferId);
+                let dataPromise = new Promise<Buffer | undefined | "retry">((resolve, reject) => {
+                    result.addEventListener("success", () => {
+                        let data = result.result;
+                        if (!data) {
+                            resolve(undefined);
+                        } else {
+                            resolve(asBuffer(data));
+                        }
+                    });
+                    result.addEventListener("error", e => {
+                        let message = (e as any).target.error.message;
+                        if (message.includes("The transaction was aborted")) {
+                            resolve("retry");
+                        } else {
+                            console.log(`IndexedDB error, skipping file ${bufferId}`, message, e);
+                            resolve(undefined);
+                        }
+                    });
+                });
+                bufferPromises.set(bufferId, dataPromise);
+                logErrors(dataPromise.then(data => {
+                    if (data === "retry") return;
+                    if (!data) return;
+                    let prev = bufferCache.get(bufferId);
+                    if (prev) {
+                        totalBufferCacheSize -= prev.byteLength;
+                    }
+                    bufferCache.set(bufferId, data);
+                    totalBufferCacheSize += data.byteLength;
+                    while (totalBufferCacheSize > inMemoryLimit) {
+                        let first = bufferCache.keys().next().value;
+                        let firstBuffer = bufferCache.get(first);
+                        if (!firstBuffer) {
+                            throw new Error(`Expected buffer to exist for ${first}`);
+                        }
+                        bufferCache.delete(first);
+                        totalBufferCacheSize -= firstBuffer.byteLength;
+                    }
+                }));
+            }
+        }
+
+
+        return await Promise.all(bufferIds.map(x => bufferPromises.get(x)));
+    }
+    const batchGetBuffer = batchFunction<{
+        bufferId: string;
+        callback: (result: Buffer | undefined) => void;
+    }>({ delay: 50 }, async function getDiskCacheBuffersInner(values) {
+        // Break buffers into separate transactions, as apparently large transactions can fail
+        //  (or certain files can get into a bad state, making the entire transaction fail).
+        const BATCH_SIZE = 1000;
+        let maxRetries = 100;
+        while (maxRetries-- > 0 && values.length > 0) {
+            let retry: { bufferId: string; callback: (result: Buffer | undefined) => void }[] = [];
+            for (let i = 0; i < values.length; i += BATCH_SIZE) {
+                let results = await getBufferCachedBase(values.map(x => x.bufferId).slice(i, i + BATCH_SIZE));
+                for (let j = 0; j < results.length; j++) {
+                    let result = results[j];
+                    if (result === "retry") {
+                        retry.push(values[i + j]);
+                    } else {
+                        values[i + j].callback(result);
+                    }
+                }
+            }
+            values = retry;
+            if (values.length > 0) {
+                console.log(`Retrying ${values.length} buffers`);
+            }
+        }
+
+        for (let { bufferId, callback } of values) {
+            callback(undefined);
+        }
+
+    });
+
+    const getDiskCacheBuffersOuter = measureWrap(async function getBufferCached(bufferIds: string[]): Promise<(Buffer | undefined)[]> {
+        let time = Date.now();
+        console.log(`Reading ${bufferIds.length} buffers from disk cache`);
+        let promises = bufferIds.map(x => new Promise<Buffer | undefined>((r, e) =>
+            batchGetBuffer({ bufferId: x, callback: r })
+        ));
+        let results = await Promise.all(promises);
+        time = Date.now() - time;
+        let size = results.map(x => x?.byteLength ?? 0).reduce((a, b) => a + b, 0);
+        let count = results.filter(x => x).length;
+        console.log(`Read from disk cache ${formatNumber(count)} /// ${formatNumber(size)}B in ${formatTime(time)}`);
+        return results;
+    });
+
+    function addBufferToCache(bufferId: string, buffer: Buffer) {
+        persist();
+        bufferCache.set(bufferId, buffer);
+        logErrors(batchedAddBufferToCache({ bufferId, buffer }));
+    }
+    const batchedAddBufferToCache = batchFunction<{
+        bufferId: string;
+        buffer: Buffer
+    }>(
+        { delay: 1000 },
+        async values => {
+            let promises: Promise<unknown>[] = [];
+            // De-duplicate buffers
+            {
+                let finalBuffer = new Map<string, Buffer>();
+                for (let { buffer, bufferId } of values) {
+                    finalBuffer.set(bufferId, buffer);
+                }
+                values = Array.from(finalBuffer).map(([bufferId, buffer]) => ({ bufferId, buffer }));
+            }
+            const BATCH_SIZE = 100;
+            for (let i = 0; i < values.length; i += BATCH_SIZE) {
+                let batch = values.slice(i, i + BATCH_SIZE);
+                let time = Date.now();
+                await measureBlock(async function batchedAddBufferToCache() {
+                    for (let { bufferId, buffer } of batch) {
+
+                        let transaction = await getTransaction();
+                        let result = transaction.put(buffer, bufferId);
+                        // NOTE: Wait for it to complete, so our timing can be more accurate.
+                        promises.push(new Promise((resolve, reject) => {
+                            result.addEventListener("success", resolve);
+                            result.addEventListener("error", reject);
+                        }));
+                    }
+                });
+                let total = batch.map(x => x.buffer.byteLength).reduce((a, b) => a + b, 0);
+                console.log(`Wrote ${formatNumber(total)} to disk cache in ${formatTime(Date.now() - time)}`);
+            }
+            debugger;
+            await Promise.all(promises);
+        }
+    );
+
+    return {
+        get: getDiskCacheBuffersOuter,
+        async getSingle(bufferId: string) {
+            let result = await getDiskCacheBuffersOuter([bufferId]);
+            return result[0];
+        },
+        set: addBufferToCache,
+    };
+}