querysub 0.2.0

package/src/4-dom/qreactTest.tsx

@@ -0,0 +1,417 @@
+import { disableMeasurements, measureBlock, measureCode, measureFnc } from "socket-function/src/profiling/measure";
+disableMeasurements();
+
+import preact from "preact";
+import { isNode, list, timeInHour } from "socket-function/src/misc";
+import { ClientWatcher, clientWatcher } from "../1-path-client/pathValueClientWatcher";
+import { isDeploy } from "../3-path-functions/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 { PathValueProxyWatcher, proxyWatcher } from "../2-proxy/PathValueProxyWatcher";
+import { setFlag } from "socket-function/require/compileFlags";
+import { rawSchema } from "../2-proxy/pathDatabaseProxyBase";
+import { LOCAL_DOMAIN } from "../0-path-value-core/PathController";
+import { batchFunction, delay } from "socket-function/src/batching";
+import { formatTime } from "socket-function/src/formatting/format";
+import { pathValueAuthority2 } from "../0-path-value-core/NodePathAuthorities";
+import { schema } from "../3-path-functions/tests/rejectTest";
+import { pathValueSerializer } from "../-h-path-value-serialize/PathValueSerializer";
+import { getPathFromStr } from "../path";
+import { PromiseObj } from "../promise";
+import { css } from "./css";
+
+
+
+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 pathValueAuthority2.waitUntilRoutingIsReady();
+
+    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: () => true
+    }
+});
+
+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