querysub 0.433.0 → 0.436.0

package/src/4-dom/qreactTest.tsx

@@ -1,411 +1,411 @@
-import { disableMeasurements, measureBlock, measureCode } from "socket-function/src/profiling/measure";
-disableMeasurements();
-
-import preact from "preact";
-import { isNode, list } from "socket-function/src/misc";
-import { ClientWatcher, clientWatcher } from "../1-path-client/pathValueClientWatcher";
-import { isDeploy } from "../4-deploy/deployCheck";
-import { logErrors } from "../errors";
-import { watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadController";
-import { qreact } from "./qreact";
-import { Querysub } from "../4-querysub/QuerysubController";
-import { PermissionsCheck } from "../4-querysub/permissions";
-import { delay } from "socket-function/src/batching";
-import { formatTime } from "socket-function/src/formatting/format";
-import { getPathFromStr } from "../path";
-import { css } from "./css";
-import { isSuperUserPERMISSIONS } from "../user-implementation/userData";
-import { authorityLookup } from "../0-path-value-core/AuthorityLookup";
-
-
-
-async function main() {
-    if (!isNode()) return;
-    if (isDeploy()) return;
-    if (module.hotreload) return;
-    const edgePort = 15060;
-    PermissionsCheck.DEBUG = true;
-    ClientWatcher.DEBUG_READS = true;
-    ClientWatcher.DEBUG_WRITES = true;
-    //debugCoreMode();
-
-    //SocketFunction.silent = false;
-    Error.stackTraceLimit = 20;
-
-    await Querysub.hostServer({
-        trustedDomains: ["querysub.com"],
-        port: edgePort,
-        rootPath: __dirname + "/../../",
-        clientsideEntryPoint: "./src/4-dom/qreactTest.tsx",
-        hotReload: true,
-    });
-}
-
-class Nested extends qreact.Component<{
-    value: unknown;
-}> {
-    render() {
-        return (
-            <>
-                value = {this.props.value}, {this.props.value}
-                <div>
-                    {String(this.props.value)}
-                </div>
-            </>
-        );
-    }
-}
-
-class DynamicComponent extends qreact.Component<{
-    propValue: unknown;
-}> {
-    state = {
-        value: "state",
-        noRoot: false,
-        children: {} as {
-            [num: number | string]: {
-                value: string;
-            }
-        },
-        nextChild: 0,
-    };
-    render() {
-        let base = <>
-            <div>Prop value {this.props.propValue}</div>
-            <div>State value <input value={this.state.value} onChange={e => this.state.value = e.currentTarget.value} /> = {this.state.value}</div>
-            <div>
-                No div root <input type="checkbox" checked={this.state.noRoot} onChange={e => this.state.noRoot = e.currentTarget.checked} />
-            </div>
-            <div>
-                <div>Children</div>
-                <button onClick={() => {
-                    let nextChild = this.state.nextChild++;
-                    this.state.children[nextChild] = { value: "prop" + nextChild, };
-                }}>
-                    Add child
-                </button>
-                {Object.entries(this.state.children).map(([key, obj]) =>
-                    <div class={css.marginLeft(10).hsla(200, 75, 75, 0.2)}>
-                        <button onClick={() => delete this.state.children[key]}>Remove child</button>
-                        <div>
-                            Child prop: <input value={obj.value} onChange={e => obj.value = e.currentTarget.value} />
-                        </div>
-                        <DynamicComponent propValue={obj.value} />
-                    </div>
-                )}
-            </div>
-        </>;
-        if (!this.state.noRoot) {
-            base = <div class={css.pad(10).hsla(160, 75, 75, 0.5)}>{base}</div>;
-        }
-        return base;
-    }
-}
-
-class ValueRender extends qreact.Component<{
-    x: { value: number };
-}> {
-    render() {
-        return (
-            <div>
-                x = {this.props.x.value}
-                <button onClick={() => this.props.x.value++}>Test</button>
-                <input type="number" value={this.props.x.value} onInput={e => this.props.x.value = e.currentTarget.valueAsNumber} />
-            </div>
-        );
-    }
-}
-
-class Intermediate extends qreact.Component<{
-    x: { value: number };
-}> {
-    render() {
-        return (
-            <ValueRender x={this.props.x} />
-        );
-    }
-}
-
-class CircleComponent extends qreact.Component {
-    render() {
-        return (
-            <circle cx={200} cy={50} r={50} fill="red" />
-        );
-    }
-}
-
-class Test extends qreact.Component {
-    state = {
-        valueValue: { value: 0 },
-    };
-    render() {
-        return (
-            <div>
-                <button onClick={() => this.state.valueValue.value++}>Increment</button>
-                <div>Value = {this.state.valueValue.value}</div>
-                <Intermediate x={{ value: this.state.valueValue.value }} />
-
-                <svg>
-                    <circle cx={100} cy={100} r={50} fill="red" />
-                    <CircleComponent />
-                </svg>
-            </div>
-        );
-    }
-}
-
-class Benchmark1 extends qreact.Component<{
-    count: number;
-}> {
-    render() {
-        return (
-            <div>
-                {list(this.props.count).map(i => <div>{i}</div>)}
-            </div>
-        );
-    }
-}
-class Benchmark2 extends qreact.Component<{
-    count: number;
-}> {
-    render() {
-        return (
-            list(this.props.count).map(i => <div>{i}</div>)
-        );
-    }
-}
-
-
-class SmallNested extends qreact.Component<{
-    obj: { value: number };
-}> {
-    render() {
-        return (
-            <div />
-        );
-    }
-}
-class Benchmark3 extends qreact.Component<{
-    count: number;
-}> {
-    render() {
-        return (
-            list(this.props.count).map(i => <SmallNested obj={{ value: i }} />)
-        );
-    }
-}
-
-class SmallNested2 extends qreact.Component<{
-    obj: { value: number };
-}> {
-    render() {
-        return (
-            <div class={css.flex.gap(10).wrap} onClick={() => this.props.obj.value++}>
-                {this.props.obj.value}
-                <img src="/widgets/HTML5Video/video-thumbnail.jpg" />
-            </div>
-        );
-    }
-}
-class Benchmark3p5 extends qreact.Component<{
-    count: number;
-}> {
-    render() {
-        return (
-            list(this.props.count).map(i => <SmallNested2 obj={{ value: i }} />)
-        );
-    }
-}
-
-class Benchmark4 extends qreact.Component<{
-    count: number;
-}> {
-    render() {
-        return (
-            <div class={css.flex.wrap}>
-                {list(this.props.count).map(i =>
-                    <img src="/widgets/HTML5Video/video-thumbnail.jpg" />
-                )}
-            </div>
-        );
-    }
-}
-
-
-
-async function browserMain() {
-    if (isNode()) return;
-    watchFilesAndTriggerHotReloading();
-
-    // NOTE: Annoying, but qreact can't emulate the special minified keys preact uses
-    qreact.createElement = preact.createElement as any;
-    qreact.Fragment = preact.Fragment as any;
-
-
-    //ClientWatcher.DEBUG_READS = true;
-    //ClientWatcher.DEBUG_READS_EXPANDED = true;
-    //ClientWatcher.DEBUG_WRITES = true;
-    //ClientWatcher.DEBUG_WRITES_EXPANDED = true;
-    //Querysub.DEBUG_CALLS = true;
-    //PathValueProxyWatcher.TRACE = true;
-    //ClientWatcher.DEBUG_TRIGGERS = "light";
-    //ClientWatcher.DEBUG_TRIGGERS = "heavy";
-    //qreact.debug();
-
-    //preact.render(<Test />, document.getElementById("main")!);
-    //qreact.render(<DynamicComponent propValue={1} />, document.getElementById("main")!);
-    //qreact.render(<SyncedTest propValue={1} />, document.getElementById("main")!);
-
-    //*
-    await new Promise(resolve => setTimeout(resolve, 0));
-    await authorityLookup.startSyncing();
-
-    let benchmarkComponents = [
-        // ONLY run with devtools closed AND disableMeasurements (at the top of the file)! Otherwise the timings will be wrong.
-        // qreact is 3X slower
-        () => <Benchmark1 count={10000} />,
-        // qreact is 3X slower
-        () => <Benchmark2 count={10000} />,
-        // qreact is 30X slower
-        () => <Benchmark3 count={1000} />,
-        // qreact is 10X slower
-        () => <Benchmark3p5 count={1000} />,
-        // qreact is 1.5X slower
-        () => <Benchmark4 count={1000} />,
-    ];
-
-    await measureCode(async function renderTest() {
-        const main = document.getElementById("main")!;
-        async function reset() {
-            main.replaceChildren();
-            await delay(0);
-        }
-
-        for (let componentFactory of benchmarkComponents) {
-            let component = componentFactory();
-            let name = (component.type as any).name;
-
-            await reset();
-            let time = Date.now();
-            preact.render(component, main);
-            time = Date.now() - time;
-            preact.render(<div />, main);
-            console.log(`preact|${name} took ${formatTime(time)}`);
-
-            await reset();
-            time = Date.now();
-            await measureBlock(async () => {
-                qreact.render(component, main);
-                await clientWatcher.waitForTriggerFinished();
-                qreact.render(<div />, main);
-                await clientWatcher.waitForTriggerFinished();
-            }, "qreact|" + name);
-            time = Date.now() - time;
-            console.log(`qreact|${name} took ${formatTime(time)}`);
-
-            qreact.render(<div>done</div>, main);
-        }
-    }, { minTimeToLog: 0, thresholdInTable: 0 });
-    //*/
-}
-
-logErrors(main());
-logErrors(browserMain());
-
-
-let { data, functions } = Querysub.createSchema<{
-    values: {
-        [key: string]: string;
-    };
-}>()({
-    domainName: "querysub.com",
-    functions: {
-        setValue(key: string, value: string) {
-            data().values[key] = value;
-        }
-    },
-    module,
-    moduleId: "qreactTest",
-    functionMetadata: {},
-    permissions: {
-        PERMISSIONS: isSuperUserPERMISSIONS
-    }
-});
-
-class SyncTest extends qreact.Component {
-    render() {
-        return (
-            <div>
-                <div>Regular <input value={data().values["a"]} onChange={e => functions.setValue("a", e.currentTarget.value)} /></div>
-                <div>Hot <input value={data().values["b"]} onInput={e => functions.setValue("b", e.currentTarget.value)} /></div>
-                <div>
-                    Trigger sources {Array.from(Querysub.getTriggerReason()?.pathSources || []).map(x =>
-                        <div>
-                            {getPathFromStr(x.path).join(".")}
-                            {x.source && <div class={css.marginLeft(10)}>{x.source}</div>}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-/*
-async function browserMain2() {
-    if (isNode()) return;
-
-    watchFilesAndTriggerHotReloading();
-
-    Querysub.DEBUG_CALLS = true;
-    ClientWatcher.DEBUG_TRIGGERS = "heavy";
-    qreact.debug();
-
-    qreact.render(preact.createElement(SyncTest, {}), document.getElementById("main")!);
-}
-
-async function main2() {
-    if (!isNode()) return;
-    if (isDeploy()) return;
-    if (module.hotreload) return;
-    const edgePort = 15060;
-    PermissionsCheck.DEBUG = true;
-    ClientWatcher.DEBUG_READS = true;
-    ClientWatcher.DEBUG_WRITES = true;
-
-    //SocketFunction.silent = false;
-    Error.stackTraceLimit = 20;
-
-    await Querysub.hostServer({
-        trustedDomains: ["querysub.com"],
-        port: edgePort,
-        rootPath: __dirname + "/../../",
-        clientsideEntryPoint: "./src/4-dom/qreactTest.tsx",
-        hotReload: true,
-    });
-}
-
-module.hotreload = isNode() && process.argv[1].includes("PathFunctionRunnerMain.ts");
-module.noserverhotreload = false;
-
-logErrors(main2());
-logErrors(browserMain2());
-*/
-
-
-// async function main3() {
-//     let test = await proxyWatcher.dryRun({
-//         canWrite: true,
-//         watchFunction() {
-//             schema()["querysub.com"].rejectTest.value = 2;
-//         },
-//     });
-//     let buffer = await pathValueSerializer.serialize(test!);
-//     let test2 = await pathValueSerializer.deserialize(buffer);
-//     debugger;
-// }
-
-// main3().catch(e => console.error(e)).finally(() => process.exit());
-
-
+import { disableMeasurements, measureBlock, measureCode } from "socket-function/src/profiling/measure";
+disableMeasurements();
+
+import preact from "preact";
+import { isNode, list } from "socket-function/src/misc";
+import { ClientWatcher, clientWatcher } from "../1-path-client/pathValueClientWatcher";
+import { isDeploy } from "../4-deploy/deployCheck";
+import { logErrors } from "../errors";
+import { watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadController";
+import { qreact } from "./qreact";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { PermissionsCheck } from "../4-querysub/permissions";
+import { delay } from "socket-function/src/batching";
+import { formatTime } from "socket-function/src/formatting/format";
+import { getPathFromStr } from "../path";
+import { css } from "./css";
+import { isSuperUserPERMISSIONS } from "../user-implementation/userData";
+import { authorityLookup } from "../0-path-value-core/AuthorityLookup";
+
+
+
+async function main() {
+    if (!isNode()) return;
+    if (isDeploy()) return;
+    if (module.hotreload) return;
+    const edgePort = 15060;
+    PermissionsCheck.DEBUG = true;
+    ClientWatcher.DEBUG_READS = true;
+    ClientWatcher.DEBUG_WRITES = true;
+    //debugCoreMode();
+
+    //SocketFunction.silent = false;
+    Error.stackTraceLimit = 20;
+
+    await Querysub.hostServer({
+        trustedDomains: ["querysub.com"],
+        port: edgePort,
+        rootPath: __dirname + "/../../",
+        clientsideEntryPoint: "./src/4-dom/qreactTest.tsx",
+        hotReload: true,
+    });
+}
+
+class Nested extends qreact.Component<{
+    value: unknown;
+}> {
+    render() {
+        return (
+            <>
+                value = {this.props.value}, {this.props.value}
+                <div>
+                    {String(this.props.value)}
+                </div>
+            </>
+        );
+    }
+}
+
+class DynamicComponent extends qreact.Component<{
+    propValue: unknown;
+}> {
+    state = {
+        value: "state",
+        noRoot: false,
+        children: {} as {
+            [num: number | string]: {
+                value: string;
+            }
+        },
+        nextChild: 0,
+    };
+    render() {
+        let base = <>
+            <div>Prop value {this.props.propValue}</div>
+            <div>State value <input value={this.state.value} onChange={e => this.state.value = e.currentTarget.value} /> = {this.state.value}</div>
+            <div>
+                No div root <input type="checkbox" checked={this.state.noRoot} onChange={e => this.state.noRoot = e.currentTarget.checked} />
+            </div>
+            <div>
+                <div>Children</div>
+                <button onClick={() => {
+                    let nextChild = this.state.nextChild++;
+                    this.state.children[nextChild] = { value: "prop" + nextChild, };
+                }}>
+                    Add child
+                </button>
+                {Object.entries(this.state.children).map(([key, obj]) =>
+                    <div class={css.marginLeft(10).hsla(200, 75, 75, 0.2)}>
+                        <button onClick={() => delete this.state.children[key]}>Remove child</button>
+                        <div>
+                            Child prop: <input value={obj.value} onChange={e => obj.value = e.currentTarget.value} />
+                        </div>
+                        <DynamicComponent propValue={obj.value} />
+                    </div>
+                )}
+            </div>
+        </>;
+        if (!this.state.noRoot) {
+            base = <div class={css.pad(10).hsla(160, 75, 75, 0.5)}>{base}</div>;
+        }
+        return base;
+    }
+}
+
+class ValueRender extends qreact.Component<{
+    x: { value: number };
+}> {
+    render() {
+        return (
+            <div>
+                x = {this.props.x.value}
+                <button onClick={() => this.props.x.value++}>Test</button>
+                <input type="number" value={this.props.x.value} onInput={e => this.props.x.value = e.currentTarget.valueAsNumber} />
+            </div>
+        );
+    }
+}
+
+class Intermediate extends qreact.Component<{
+    x: { value: number };
+}> {
+    render() {
+        return (
+            <ValueRender x={this.props.x} />
+        );
+    }
+}
+
+class CircleComponent extends qreact.Component {
+    render() {
+        return (
+            <circle cx={200} cy={50} r={50} fill="red" />
+        );
+    }
+}
+
+class Test extends qreact.Component {
+    state = {
+        valueValue: { value: 0 },
+    };
+    render() {
+        return (
+            <div>
+                <button onClick={() => this.state.valueValue.value++}>Increment</button>
+                <div>Value = {this.state.valueValue.value}</div>
+                <Intermediate x={{ value: this.state.valueValue.value }} />
+
+                <svg>
+                    <circle cx={100} cy={100} r={50} fill="red" />
+                    <CircleComponent />
+                </svg>
+            </div>
+        );
+    }
+}
+
+class Benchmark1 extends qreact.Component<{
+    count: number;
+}> {
+    render() {
+        return (
+            <div>
+                {list(this.props.count).map(i => <div>{i}</div>)}
+            </div>
+        );
+    }
+}
+class Benchmark2 extends qreact.Component<{
+    count: number;
+}> {
+    render() {
+        return (
+            list(this.props.count).map(i => <div>{i}</div>)
+        );
+    }
+}
+
+
+class SmallNested extends qreact.Component<{
+    obj: { value: number };
+}> {
+    render() {
+        return (
+            <div />
+        );
+    }
+}
+class Benchmark3 extends qreact.Component<{
+    count: number;
+}> {
+    render() {
+        return (
+            list(this.props.count).map(i => <SmallNested obj={{ value: i }} />)
+        );
+    }
+}
+
+class SmallNested2 extends qreact.Component<{
+    obj: { value: number };
+}> {
+    render() {
+        return (
+            <div class={css.flex.gap(10).wrap} onClick={() => this.props.obj.value++}>
+                {this.props.obj.value}
+                <img src="/widgets/HTML5Video/video-thumbnail.jpg" />
+            </div>
+        );
+    }
+}
+class Benchmark3p5 extends qreact.Component<{
+    count: number;
+}> {
+    render() {
+        return (
+            list(this.props.count).map(i => <SmallNested2 obj={{ value: i }} />)
+        );
+    }
+}
+
+class Benchmark4 extends qreact.Component<{
+    count: number;
+}> {
+    render() {
+        return (
+            <div class={css.flex.wrap}>
+                {list(this.props.count).map(i =>
+                    <img src="/widgets/HTML5Video/video-thumbnail.jpg" />
+                )}
+            </div>
+        );
+    }
+}
+
+
+
+async function browserMain() {
+    if (isNode()) return;
+    watchFilesAndTriggerHotReloading();
+
+    // NOTE: Annoying, but qreact can't emulate the special minified keys preact uses
+    qreact.createElement = preact.createElement as any;
+    qreact.Fragment = preact.Fragment as any;
+
+
+    //ClientWatcher.DEBUG_READS = true;
+    //ClientWatcher.DEBUG_READS_EXPANDED = true;
+    //ClientWatcher.DEBUG_WRITES = true;
+    //ClientWatcher.DEBUG_WRITES_EXPANDED = true;
+    //Querysub.DEBUG_CALLS = true;
+    //PathValueProxyWatcher.TRACE = true;
+    //ClientWatcher.DEBUG_TRIGGERS = "light";
+    //ClientWatcher.DEBUG_TRIGGERS = "heavy";
+    //qreact.debug();
+
+    //preact.render(<Test />, document.getElementById("main")!);
+    //qreact.render(<DynamicComponent propValue={1} />, document.getElementById("main")!);
+    //qreact.render(<SyncedTest propValue={1} />, document.getElementById("main")!);
+
+    //*
+    await new Promise(resolve => setTimeout(resolve, 0));
+    await authorityLookup.startSyncing();
+
+    let benchmarkComponents = [
+        // ONLY run with devtools closed AND disableMeasurements (at the top of the file)! Otherwise the timings will be wrong.
+        // qreact is 3X slower
+        () => <Benchmark1 count={10000} />,
+        // qreact is 3X slower
+        () => <Benchmark2 count={10000} />,
+        // qreact is 30X slower
+        () => <Benchmark3 count={1000} />,
+        // qreact is 10X slower
+        () => <Benchmark3p5 count={1000} />,
+        // qreact is 1.5X slower
+        () => <Benchmark4 count={1000} />,
+    ];
+
+    await measureCode(async function renderTest() {
+        const main = document.getElementById("main")!;
+        async function reset() {
+            main.replaceChildren();
+            await delay(0);
+        }
+
+        for (let componentFactory of benchmarkComponents) {
+            let component = componentFactory();
+            let name = (component.type as any).name;
+
+            await reset();
+            let time = Date.now();
+            preact.render(component, main);
+            time = Date.now() - time;
+            preact.render(<div />, main);
+            console.log(`preact|${name} took ${formatTime(time)}`);
+
+            await reset();
+            time = Date.now();
+            await measureBlock(async () => {
+                qreact.render(component, main);
+                await clientWatcher.waitForTriggerFinished();
+                qreact.render(<div />, main);
+                await clientWatcher.waitForTriggerFinished();
+            }, "qreact|" + name);
+            time = Date.now() - time;
+            console.log(`qreact|${name} took ${formatTime(time)}`);
+
+            qreact.render(<div>done</div>, main);
+        }
+    }, { minTimeToLog: 0, thresholdInTable: 0 });
+    //*/
+}
+
+logErrors(main());
+logErrors(browserMain());
+
+
+let { data, functions } = Querysub.createSchema<{
+    values: {
+        [key: string]: string;
+    };
+}>()({
+    domainName: "querysub.com",
+    functions: {
+        setValue(key: string, value: string) {
+            data().values[key] = value;
+        }
+    },
+    module,
+    moduleId: "qreactTest",
+    functionMetadata: {},
+    permissions: {
+        PERMISSIONS: isSuperUserPERMISSIONS
+    }
+});
+
+class SyncTest extends qreact.Component {
+    render() {
+        return (
+            <div>
+                <div>Regular <input value={data().values["a"]} onChange={e => functions.setValue("a", e.currentTarget.value)} /></div>
+                <div>Hot <input value={data().values["b"]} onInput={e => functions.setValue("b", e.currentTarget.value)} /></div>
+                <div>
+                    Trigger sources {Array.from(Querysub.getTriggerReason()?.pathSources || []).map(x =>
+                        <div>
+                            {getPathFromStr(x.path).join(".")}
+                            {x.source && <div class={css.marginLeft(10)}>{x.source}</div>}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+/*
+async function browserMain2() {
+    if (isNode()) return;
+
+    watchFilesAndTriggerHotReloading();
+
+    Querysub.DEBUG_CALLS = true;
+    ClientWatcher.DEBUG_TRIGGERS = "heavy";
+    qreact.debug();
+
+    qreact.render(preact.createElement(SyncTest, {}), document.getElementById("main")!);
+}
+
+async function main2() {
+    if (!isNode()) return;
+    if (isDeploy()) return;
+    if (module.hotreload) return;
+    const edgePort = 15060;
+    PermissionsCheck.DEBUG = true;
+    ClientWatcher.DEBUG_READS = true;
+    ClientWatcher.DEBUG_WRITES = true;
+
+    //SocketFunction.silent = false;
+    Error.stackTraceLimit = 20;
+
+    await Querysub.hostServer({
+        trustedDomains: ["querysub.com"],
+        port: edgePort,
+        rootPath: __dirname + "/../../",
+        clientsideEntryPoint: "./src/4-dom/qreactTest.tsx",
+        hotReload: true,
+    });
+}
+
+module.hotreload = isNode() && process.argv[1].includes("PathFunctionRunnerMain.ts");
+module.noserverhotreload = false;
+
+logErrors(main2());
+logErrors(browserMain2());
+*/
+
+
+// async function main3() {
+//     let test = await proxyWatcher.dryRun({
+//         canWrite: true,
+//         watchFunction() {
+//             schema()["querysub.com"].rejectTest.value = 2;
+//         },
+//     });
+//     let buffer = await pathValueSerializer.serialize(test!);
+//     let test2 = await pathValueSerializer.deserialize(buffer);
+//     debugger;
+// }
+
+// main3().catch(e => console.error(e)).finally(() => process.exit());
+
+
 // yarn test typenode ./src/4-dom/qreactTest.tsx