querysub 0.2.0

package/src/4-dom/qreact.tsx

@@ -0,0 +1,2322 @@
+import type preact from "preact";
+import { isNode, sort } from "socket-function/src/misc";
+import { isDeploy } from "../3-path-functions/deployCheck";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { PermissionsCheck } from "../4-querysub/permissions";
+import { ClientWatcher, clientWatcher } from "../1-path-client/pathValueClientWatcher";
+import { LOCAL_DOMAIN } from "../0-path-value-core/PathController";
+import { rawSchema } from "../2-proxy/pathDatabaseProxyBase";
+import { SyncWatcher, atomic, atomicObjectWrite, atomicObjectWriteNoFreeze, doProxyOptions, doUnatomicWrites, proxyWatcher, registerSchemaPrefix, unregisterSchemaPrefix } from "../2-proxy/PathValueProxyWatcher";
+import { createPathValueProxy, getProxyPath, isValueProxy, isValueProxy2 } from "../2-proxy/pathValueProxy";
+import { measureBlock, measureCode, measureFnc } from "socket-function/src/profiling/measure";
+import { canHaveChildren } from "socket-function/src/types";
+import { errorify, logErrors } from "../errors";
+import { cache, lazy } from "socket-function/src/caching";
+import { getPathStr1, getPathIndexAssert } from "../path";
+import { blue, green, red, yellow } from "socket-function/src/formatting/logColors";
+import { heapTagObj } from "../diagnostics/heapTag";
+import { onHotReload } from "socket-function/hot/HotReloadController";
+import { isClient } from "../config2";
+import { formatPercent, formatTime } from "socket-function/src/formatting/format";
+import { lazyImport } from "socket-function/require/RequireController";
+import { Schema2Fncs } from "../2-proxy/schema2";
+
+lazyImport(() => import("../5-diagnostics/qreactDebug"));
+
+// TIMING:
+//  Worst case (trivial child Components), about                20X slower than preact (12.5X with disableMeasurements)
+//  Realistically (div, prop, image child Components), about    8X slower than preact (4.3X with disableMeasurements)
+//  In practice the page will probably start to lag from the large DOM/layout state
+//      before it lags due to the rendering speed.
+
+const idSymbol = Symbol("id");
+
+interface QComponent {
+    id: number;
+    parentComponentId?: number;
+
+    props: { [key: string]: unknown; };
+    state: { [key: string]: unknown; };
+    vNodeForRender: { value: VirtualDOM } | undefined;
+    vNodeForMount: VirtualDOM | undefined;
+    newPropSeqNum: number;
+
+    rootDOMNodes: DOMNode[] | undefined;
+
+    isParentSVG?: boolean;
+
+    inlineState: {
+        [id: number]: {
+            // NOTE: No props, as the child can't re-render independently,
+            //  so even if the props don't change / aren't accessed,
+            //  the child will still have to re-render.
+            state: { [key: string]: unknown; };
+        };
+    };
+};
+interface ErrorHandler {
+    (config: { error: any; debugName: string }): VirtualDOM;
+}
+type DOMNode = HTMLElement | SVGElement;
+
+const ALLOWED_TO_RENDER = () => { };
+type VirtualDOMElement = Omit<preact.VNode<{ [key: string]: unknown }>, "type"> & {
+    type: any;
+    sourceModuleId?: string;
+    callStack?: string;
+    /** XSS protector, which allows us to detect virtual dom which has been accidentally serialized */
+    allowedToRender?: typeof ALLOWED_TO_RENDER;
+};
+type VirtualDOMBase = (
+    VirtualDOMElement
+    | string | number | bigint | boolean | null | undefined
+);
+export type VirtualDOM = VirtualDOMBase | VirtualDOMBase[];
+
+type GetTFromAttributes<T> = T extends preact.JSX.HTMLAttributes<infer U> ? U : never;
+
+export namespace qreact {
+    export namespace JSX {
+        export type IntrinsicElements = {
+            [key in keyof preact.JSX.IntrinsicElements]: (
+                // NOTE: IntrinsicAttributes is not working, but... this works just as well.
+                preact.JSX.IntrinsicElements[key] & {
+                    /** Only called on mount of the element, and not on re-render, or update.
+                     *      - Should always be used in conjunction with a key, otherwise it might
+                     *          be called for an unrelated component, and then skipped on your component.
+                     */
+                    ref2?: (element: GetTFromAttributes<preact.JSX.IntrinsicElements[key]>) => void;
+                }
+            );
+        };
+        export type Element = preact.JSX.Element;
+    }
+}
+
+
+let schema = rawSchema<{
+    [LOCAL_DOMAIN]: {
+        qreact: {
+            components: {
+                [id: number]: QComponent;
+            };
+        };
+        hotreloadSeqNum: number;
+        unsyncedSeqNum: number;
+    };
+}>();
+
+export class Component<T = {}, S = {}> {
+    constructor(public props: T & {
+        children?: VirtualDOM | object;
+        key?: string | number;
+    }) { }
+    state = {} as S;
+    context = {};
+    setState(state: S) {
+        for (let key in state) {
+            (this as any).state[key] = state[key];
+        }
+    }
+    forceUpdate() { }
+    render(): preact.ComponentChild { return undefined; }
+
+    componentWillMount?(): void;
+    componentDidMount?(): void;
+    componentWillUnmount?(): void;
+}
+export interface QComponentStatic {
+    /** Compares props via JSON.stringify when updating them, skipping identical values.
+     *      - Results in fewer re-renders, but can be slower if the props are large.
+     */
+    jsonComparePropUpdates?: boolean;
+    /** Decomposes props into individual primitive values when writing (the default state of
+     *      most synced writes).
+     *      - Results in minimal re-renders, even skipping intermediate component re-renders
+     *          where possible, but is MUCH slower if the props are large.
+     *      - Makes passing exotics and functions more difficult, requiring pre-wrapping them an
+     *          object with atomicObjectWrite.
+     *  NOTE: Usually props can be shallow, because the props only change when the parent re-renders.
+     *      ALSO, it is vastly preferrably to simply pass synced values as props, which will then ===,
+     *      BUT, which will be able to trigger changed IF nested values are accessed.
+     */
+    deepProps?: boolean;
+}
+
+
+class ComponentJSONCompare<T = {}> extends Component<T> {
+    public static jsonComparePropUpdates = true;
+    public render(): preact.ComponentChild { return undefined; }
+}
+class ComponentDeepProps<T = {}> extends Component<T> {
+    public static deepProps = true;
+    public render(): preact.ComponentChild { return undefined; }
+}
+
+export class qreact {
+    public static Component = Component;
+    public static createElement = createElement;
+    public static Fragment = Fragment;
+
+    /** See QComponentStatic.jsonComparePropUpdates */
+    public static ComponentJSONCompare = ComponentJSONCompare;
+    /** See QComponentStatic.deepProps */
+    public static ComponentDeepProps = ComponentDeepProps;
+
+    public static context = getDebugContext;
+
+    public static mountToDOM = mountToDOM;
+    public static renderToDOM = mountToDOM;
+    public static render = mountToDOM;
+
+    // IMPORTANT! The currentTarget is wrapped so we can copy certain properties, as event callbacks
+    //  might be executed after the initial execution (in order to sync data from the server),
+    //  and the original event will have it's value changed by then. IF you absolutely need
+    //  the original target, call getCurrentTarget. OR, more likely, if you need to check
+    //  if .target === .currentTarget, call isTarget.
+    public static getCurrentTarget = getCurrentTarget;
+    public static isTarget = isTarget;
+
+    public static errorHandler: ErrorHandler;
+
+    public static debug = async () => {
+        const { enableDebugComponents } = await import("../5-diagnostics/qreactDebug");
+        enableDebugComponents();
+    };
+
+    public static getRenderingComponent = getRenderingComponent;
+    public static getAncestor = getAncestor;
+    public static getAncestorProps = getAncestorProps;
+    public static watchDispose = watchDispose;
+    public static watchUnmount = watchDispose;
+    public static onDispose = onDispose;
+    public static onUnmount = onDispose;
+    public static watchUnsyncedComponents = watchUnsyncedComponents;
+    public static rehydrateVirtualDOM = rehydrateVirtualDOM;
+    public static hasEventHandlers = hasEventHandlers;
+    public static getCurrentComponentId = getCurrentComponentId;
+
+    public static allComponents = new Set<ExternalRenderClass>();
+
+    public static DEBUG_TIME = 0;
+    public static INJECT_FILENAMES = false;
+    public static INJECT_LINE_NUMBERS = false;
+
+    public static JSX = null as any as {
+        IntrinsicElements: { [key: string]: { [key: string]: unknown } };
+    };
+}
+(globalThis as any).qreact = qreact;
+
+module.remapExports = (exports, callingModule) => {
+    let newExports = { ...exports } as any;
+
+    function createElement(...args: any[]) {
+        return (createElementBase as any)(callingModule, ...args);
+    }
+    newExports.qreact = new Proxy(newExports.qreact, {
+        get(target, prop) {
+            if (prop === "createElement") {
+                return createElement;
+            }
+            return target[prop];
+        },
+        set(target, prop, value) {
+            target[prop] = value;
+            return true;
+        }
+    });
+    return newExports;
+};
+
+
+const elementCtor = heapTagObj("JSXElement");
+function createElement(
+    type: preact.ComponentClass | string,
+    props?: { [key: string]: unknown },
+    ...children: preact.ComponentChild[]
+): preact.VNode<{ [key: string]: unknown }> {
+    return createElementBase(undefined, type, props, ...children);
+}
+
+function createElementBase(
+    callingModule: NodeJS.Module | undefined,
+    type: preact.ComponentClass | string,
+    props?: { [key: string]: unknown },
+    ...children: preact.ComponentChild[]
+): preact.VNode<{ [key: string]: unknown }> {
+    props = props || {};
+    if (children.length) {
+        props.children = children;
+    }
+    return elementCtor({
+        type,
+        props: props as any,
+        key: props?.["key"],
+        ref: props?.["ref"] as any,
+        sourceModuleId: callingModule?.id,
+        callStack: qreact.INJECT_LINE_NUMBERS ? new Error().stack : undefined,
+        allowedToRender: ALLOWED_TO_RENDER,
+        // NOTE: Compatibility with preact is too difficult, because it REQUIRES special minified names. However,
+        //  if you're using qreact, you really have to use qreact.render anyways, so this is fine...
+        // constructor: undefined,
+        // __: null,
+        // __b: 0,
+        // __c: null,
+        // __d: undefined,
+        // __e: null,
+        // __i: -1,
+        // __k: null,
+        // __u: 0,
+        // __v: 1
+    });
+}
+
+
+/** IMPORTANT! DO NOT call this on user controlled data, otherwise the user will be able to render
+ *      arbitrary data clientside, which lets them take over the side with large elements to trick
+ *      users to perform actions (such as clicking on a div they think is a "confirm" button, but which
+ *      is above a "delete your account" button).
+ */
+export function rehydrateVirtualDOM<T extends VirtualDOM>(vNode: T): T {
+    return temporaryUnsafeVirtualDOM(() => QRenderClass.diffVNodes({
+        next: vNode,
+        prev: undefined,
+        onNewNode(vNode, anchor, parent) {
+            if (isVNode(vNode)) {
+                vNode.allowedToRender = ALLOWED_TO_RENDER;
+            }
+            return undefined;
+        },
+        onRemovedNode(vNode) {
+
+        },
+        onUpdatedNode(prev, next, anchor, parent) {
+            return undefined;
+        },
+    }) as T);
+}
+
+export function Fragment(props: { children: preact.ComponentChild[] }) {
+    return props.children;
+}
+
+export const getSchemaPrefix = lazy(() => {
+    return getProxyPath(() => schema()[LOCAL_DOMAIN].qreact.components);
+});
+
+let seqNum = 0;
+function nextLocalId() {
+    return seqNum++;
+}
+
+/** All of the fields of QRenderClass which should be externally accessible. */
+export type ExternalRenderClass = {
+    data(): QComponent;
+    getParent(): ExternalRenderClass | undefined;
+    readonly renderWatcher: SyncWatcher;
+    readonly VNodeWatcher: SyncWatcher;
+    readonly mountDOMWatcher: SyncWatcher;
+    readonly debugName: string;
+    readonly instance: preact.Component<{ [key: string]: unknown }>;
+    getVSCodeLink(): string | undefined;
+    // TODO: We can add more types here as needed, exposing parts of QRenderClass which
+    //  are safe for external callers to access.
+};
+
+function getCurrentComponentId() {
+    return QRenderClass.renderingComponentId ?? QRenderClass.eventComponentId;
+}
+function getRenderingComponent() {
+    return QRenderClass.getInstanceAllowedUndefined(QRenderClass.renderingComponentId ?? -1) as ExternalRenderClass | undefined;
+}
+function getAncestorProps<Props>(
+    componentClass: { new(...args: any[]): { props: Props } },
+    component?: unknown
+): Props | undefined {
+    let id = (component as any)?.[idSymbol];
+    let ancestor = getAncestor(componentClass, id);
+    if (!ancestor) return undefined;
+    return ancestor.instance.props as Props;
+}
+function getAncestor(
+    componentClass: unknown,
+    componentId = getCurrentComponentId()
+): ExternalRenderClass | undefined {
+    let component = QRenderClass.getInstanceAllowedUndefined(componentId ?? -1);
+    while (component) {
+        if (component.instance.constructor === componentClass) return component;
+        component = component.getParent();
+    }
+    return undefined;
+}
+function onDispose(fnc: () => void) {
+    let component = getRenderingComponent();
+    if (!component) throw new Error(`Can watch dispose if not inside of a `);
+    watchDispose(component, fnc);
+}
+function watchDispose(renderClass: ExternalRenderClass, fnc: () => void) {
+    let watchers = disposeWatchers.get(renderClass);
+    if (!watchers) {
+        watchers = new Set();
+        disposeWatchers.set(renderClass, watchers);
+    }
+    watchers.add(fnc);
+}
+let disposeWatchers = new Map<ExternalRenderClass, Set<() => void>>();
+
+let mouseIsDown = false;
+if (!isNode()) {
+    document.addEventListener("mousedown", () => mouseIsDown = true);
+    document.addEventListener("mouseup", () => mouseIsDown = false);
+}
+
+
+let renderClasses = new Map<number, QRenderClass>();
+// NOTE: In theory this COULD BE our root Component, but... it makes compatibility easier
+//  if it is separate. It also keeps better isolation between user components and the framework
+//  (as it is weird for user component to inherit the framework code...).
+class QRenderClass {
+    public static renderingComponentId: number | undefined;
+    public static eventComponentId: number | undefined;
+
+    public id = nextLocalId();
+
+    public renderWatcher: SyncWatcher;
+    public VNodeWatcher: SyncWatcher;
+    public mountDOMWatcher: SyncWatcher;
+    public instance: preact.Component<{ [key: string]: unknown }>;
+    public debugName: string;
+
+    public domNodes = new Map<VirtualDOM, {
+        componentChildren: DOMNode[];
+    } | {
+        // NOTE: We have to use an array, because VirtualDOM could be a primitive, which can result
+        //  in multiple indistinguishable TextNodes (apart from by their index within their parent).
+        directChildren: DOMNode[];
+    }>();
+    public childComponents = new Map<VirtualDOM, number>();
+
+    public vNode: VirtualDOM | undefined;
+    public prevMountedVNode: VirtualDOM | undefined;
+    public internalRootDOMNodes: DOMNode[] | undefined;
+
+    public data() {
+        return schema()[LOCAL_DOMAIN].qreact.components[this.id];
+    }
+
+    constructor(public config: {
+        vNode: preact.VNode<{ [key: string]: unknown }> & { type: preact.ComponentClass };
+        props: { [key: string]: unknown };
+        rawProps: { [key: string]: unknown };
+        /* The root of all of the rendering */
+        masterRootDOMNode?: DOMNode;
+        id?: number;
+        // Should JUST be used for debugging, and for things such as context, getParent should be used
+        parentId?: number;
+    }) {
+        qreact.allComponents.add(this);
+        this.id = config.id ?? this.id;
+        renderClasses.set(this.id, this);
+
+        let vNode = config.vNode;
+        let self = this;
+        // Set up watchers for virtual watching AND dom mounting
+        let debugName = vNode.type.name + `|${this.id}|`;
+        const getDebugName = (type: string) => {
+            return vNode.type.name + `|${type}|${this.id}`;
+        };
+        const registerOwnTime = (type: string, startTime: number) => {
+            registerComponentStats(vNode.type.name + "." + type, Date.now() - startTime);
+        };
+        this.debugName = debugName;
+
+        let statics = vNode.type as QComponentStatic;
+        // NOTE: This used to exist in an `atomicWrites: true` runOnce, but... I don't think that is required anymore
+        let instance = new vNode.type(config.props) as preact.Component<{ [key: string]: unknown }>;
+        (instance as any)[idSymbol] = this.id;
+        if (isValueProxy(instance)) {
+            // This will probably result in an error later on. It is usually due to us failing to identify fragments.
+            console.warn(`Constructor returned a proxy, instead of a component.`);
+        }
+        instance.setState = (state) => {
+            for (let key in state) {
+                (instance as any).state[key] = (state as any)[key];
+            }
+        };
+        instance.forceUpdate = () => {
+            // Delay, as we aren't allowed to have nested trigger?
+            if (proxyWatcher.inWatcher()) {
+                Querysub.onCommitFinished(() => {
+                    this.renderWatcher?.explicitlyTrigger();
+                });
+            } else {
+                this.renderWatcher?.explicitlyTrigger();
+            }
+        };
+        this.instance = instance;
+
+        let initialState = {};
+        if (Schema2Fncs.getPaths(instance.state).length > 0) {
+            let statePath = getProxyPath(() => this.data().state);
+            let state = instance.state;
+            registerSchemaPrefix({ schema: state, prefixPathStr: statePath });
+            watchDispose(this, () => {
+                unregisterSchemaPrefix({ schema: state, prefixPathStr: statePath });
+            });
+        } else {
+            initialState = instance.state || {};
+        }
+
+
+        // Force state to be a getter/setter
+        Object.defineProperty(instance, "state", {
+            get() { return self.data().state; },
+            set(value) { self.data().state = value; },
+        });
+
+        proxyWatcher.runOnce({
+            debugName: getDebugName("setInitialState"),
+            atomicWrites: false,
+            noLocks: true,
+            watchFunction() {
+                // TODO: Why are we iterating instead of just setting it directly, with `state = initialState` ?
+                for (let [key, value] of Object.entries(initialState)) {
+                    (instance as any).state[key] = value;
+                }
+                self.data().parentComponentId = config.parentId;
+            },
+        });
+
+        self.instance.componentWillMount && logErrors(proxyWatcher.commitFunction({
+            debugName: getDebugName("componentWillMount"),
+            watchFunction() {
+                self.instance.componentWillMount?.();
+            },
+        }));
+
+        const runContextCallback = (code: (() => void) | undefined) => {
+            if (!code) return;
+            let prevEvent = QRenderClass.eventComponentId;
+            QRenderClass.eventComponentId = self.id;
+            try {
+                code();
+            } finally {
+                QRenderClass.eventComponentId = prevEvent;
+            }
+        };
+
+
+        let nextInlineId = 1;
+
+        let renderPrevVNode: VirtualDOM | undefined;
+        // Watch render. In it's own watcher so it can write with locks (because most code will only read/write from
+        //  local state, and therefore does not need locks).
+        const renderWatcher = this.renderWatcher = proxyWatcher.createWatcher({
+            debugName: getDebugName("render"),
+            canWrite: true,
+            watchFunction() {
+
+                // NOTE: We might want to consider waiting if we have a synchronous trigger. Synchronous
+                //  re-renders cause weird things with event bubbling, that is often unexpected (and
+                //  never intended). Ex, a parent node is re-used, so the event bubbles to what
+                //  was never the click target's real parent, which could be in a completely different
+                //  part of the screen.
+                // IMPORTANT! isCurrentLoopSynchronous doesn't work, because... our watch loop waits a microtick,
+                //      while event handling requires waiting to the end of the event loop (a tick, basically).
+                // TODO: So... we really need to explicitly handle events, adding a listener at the document so we
+                //      can wait for them to finish bubbling. AND, we need to handle stopPropagation (and preventDefault?)
+                //      so we know when to trigger them early.
+                //      - Fortunately, frame rendering is so slow, that is is easy to verify we don't break anything.
+                //          If we log the time in the event, and in the render, they should be a few millisecond apart.
+                //          If they are > 10ms apart (16ms, 32ms, etc), then we waited a frame, which is really bad
+                //          (it halves our framerate, or more).
+                //      - The archive viewer has mitigation code via drag.ts, which setTimeouts onDone
+                //          (as the onDone doesn't happen that often). If we comment that out, the chart will
+                //          navigate on bar click, which is a good way to verify any kind of fix works.
+                //      ACTUALLY! Even waiting for bubbling won't work. We need to wait for the onclick to happen,
+                //          which isn't even queued yet?
+                //          - We might need to explicitly handle onMouseUp / onClick?
+                // if (clientWatcher.isCurrentLoopSynchronous()) {
+                //     setImmediate(() => {
+                //         renderWatcher.explicitlyTrigger();
+                //     });
+                //     return;
+                // }
+
+                if (self.disposed || self.disposing) return;
+                let vNode: VirtualDOM;
+                try {
+                    let time = Date.now();
+                    QRenderClass.renderingComponentId = self.id;
+                    self.data().newPropSeqNum;
+                    schema()[LOCAL_DOMAIN].hotreloadSeqNum;
+                    if (typeof instance.render !== "function") {
+                        // The component might be a functional component, in which case we can just call it
+                        vNode = new config.vNode.type(config.props) as unknown as VirtualDOM;
+                    } else {
+                        vNode = instance.render() as VirtualDOM;
+                    }
+                    registerOwnTime("render", time);
+
+                    time = Date.now();
+
+                    vNode = QRenderClass.normalizeVNode({ vNode, array: true });
+
+                    registerOwnTime("parseVDom", time);
+
+                } catch (e: any) {
+                    // NOTE: Rethrowing the error WON'T let us have an "uncaught exception" (which is useful when
+                    //  debugging, as it makes automatically stepping in easier), because proxyWatcher has to
+                    //  catch it anyways!
+                    vNode = qreact.errorHandler({ error: e, debugName });
+                    vNode = QRenderClass.normalizeVNode({ vNode, array: true });
+                } finally {
+                    QRenderClass.renderingComponentId = undefined;
+                }
+
+                self.data().vNodeForRender = atomicObjectWriteNoFreeze({ value: vNode });
+                componentRendered(self);
+            }
+        });
+
+        // Update props, dispose, and create new component children
+        this.VNodeWatcher = proxyWatcher.createWatcher({
+            debugName: getDebugName("vNodeDiff"),
+            canWrite: true,
+            atomicWrites: true,
+            noLocks: true,
+            watchFunction() {
+                if (self.disposed || self.disposing) return;
+                let vNodeValue = atomic(self.data().vNodeForRender);
+                if (!vNodeValue) return;
+                let time = Date.now();
+                let vNode = vNodeValue?.value;
+
+                let prev = self.vNode;
+                self.data().vNodeForMount = vNode;
+
+                let prevChildComponents = self.childComponents;
+                let nextChildComponents = new Map() as typeof prevChildComponents;
+                let onSynced: (() => void)[] = [];
+
+                QRenderClass.diffVNodes({
+                    alreadyNormalized: true,
+                    prev: prev,
+                    next: vNode,
+                    onNewNode(vNode) {
+                        if (!isVNodeClass(vNode)) return undefined;
+
+                        let vNodeId = nextLocalId();
+                        let syncedData = QRenderClass.getData(vNodeId);
+                        let props: { [key: string]: unknown } = Object.create(null);
+                        let rawProps: { [key: string]: unknown } = Object.create(null);
+                        for (let [key, value] of Object.entries(vNode.props)) {
+                            rawProps[key] = value;
+                        }
+                        if (statics.deepProps) {
+                            // NOTE: By removing atomic we can leverage the proxy automatically decomposing
+                            //  the props to each individual primitive value.
+                            doProxyOptions({ atomicWrites: false }, () => {
+                                syncedData.props = vNode.props;
+                                props = syncedData.props;
+                            });
+                        } else {
+                            // Have each prop be a synced field, so conditional props work (accessing a prop not
+                            //  provided returns undefined). Atomic writes is on, so write objects
+                            //  aren't destructured (this allows passing functions, exotics, etc).
+                            for (let [key, value] of Object.entries(vNode.props)) {
+                                syncedData.props[key] = value;
+                                // We then need to use a getter in the props, so that it causes a synced read
+                                //      UNLESS that prop is not defined, then it is just undefined
+                                Object.defineProperty(props, key, {
+                                    configurable: true,
+                                    enumerable: true,
+                                    get() {
+                                        // Always access props, so we incur a watch
+                                        let value = syncedData.props[key];
+                                        // Return undefined, instead of a proxy
+                                        if (rawProps[key] === undefined) return undefined;
+                                        return value;
+                                    },
+                                });
+                            }
+                        }
+                        nextChildComponents.set(vNode, vNodeId);
+
+                        onSynced.push(() => new QRenderClass({
+                            vNode: vNode as any,
+                            props,
+                            rawProps,
+                            id: vNodeId,
+                            parentId: self.id
+                        }));
+                    },
+                    onRemovedNode(vNode) {
+                        if (!isVNodeClass(vNode)) return;
+                        const deadId = prevChildComponents.get(vNode);
+                        if (deadId !== undefined) {
+                            onSynced.push(() => {
+                                recursivelyMarkDisposing(deadId);
+                                function recursivelyMarkDisposing(id: number) {
+                                    let component = QRenderClass.getInstance(id);
+                                    if (!component) return;
+                                    if (component.disposing) return;
+                                    component.disposing = true;
+                                    for (let childId of component.childComponents.values()) {
+                                        recursivelyMarkDisposing(childId);
+                                    }
+                                }
+                                void Promise.resolve().finally(() => {
+                                    QRenderClass.getInstance(deadId).dispose();
+                                });
+                            });
+                        }
+                    },
+                    onUpdatedNode(prevVNode, nextVNode) {
+                        if (!isVNodeClass(prevVNode) || !isVNodeClass(nextVNode)) return undefined;
+                        const childComponent = prevChildComponents.get(prevVNode);
+                        if (!childComponent) {
+                            debugger;
+                            throw new Error(`Could not find component for vNode ${prevVNode}`);
+                        }
+                        nextChildComponents.set(nextVNode, childComponent);
+
+                        // Update props
+                        let prevProps = prevVNode.props;
+                        let nextProps = nextVNode.props;
+                        if ("data-break" in nextProps) {
+                            debugger;
+                        }
+                        if (statics.deepProps) {
+                            // NOTE: By removing atomic we can leverage the proxy automatically decomposing
+                            //  the props to each individual primitive value, and checking each individual
+                            //  primitive value for changes.
+                            doProxyOptions({ atomicWrites: false }, () => {
+                                QRenderClass.getData(childComponent).props = nextProps;
+                            });
+                        } else {
+                            let childInstance = QRenderClass.getInstance(childComponent);
+                            if (!childInstance) {
+                                console.warn(`Could not find child instance for component ${childComponent}, and so cannot update props`);
+                                return;
+                            }
+                            const props = childInstance.instance.props;
+                            const rawProps = childInstance.config.rawProps;
+                            let syncedData = QRenderClass.getData(childComponent);
+                            for (let key in nextProps) {
+                                let prev = prevProps[key];
+                                let next = nextProps[key];
+                                // NOTE: Object.is is required to handle NaN case
+                                if (Object.is(prev, next)) continue;
+                                let prevPath = isValueProxy2(prev);
+                                let nextPath = isValueProxy2(next);
+                                if (prevPath && nextPath && prevPath === nextPath) continue;
+                                if (statics.jsonComparePropUpdates) {
+                                    if (JSON.stringify(prev) === JSON.stringify(next)) continue;
+                                }
+                                // ONLY trigger non-synced side-effects if the component once we know the component is synced.
+                                //  The synced writes will be ignored if we aren't synced, but the non-synced writes will not,
+                                //  so we have to be very careful about them.
+                                onSynced.push(() => {
+                                    if (!(key in props)) {
+                                        // For a re-render, because if the prop was accessed, there was no
+                                        //  getter, so it the path won't have been watched.
+                                        childInstance.data().newPropSeqNum++;
+                                        Object.defineProperty(props, key, {
+                                            configurable: true,
+                                            enumerable: true,
+                                            get() {
+                                                // Always access props, so we incur a watch
+                                                let value = syncedData.props[key];
+                                                // Return undefined, instead of a proxy
+                                                if (rawProps[key] === undefined) return undefined;
+                                                return value;
+                                            },
+                                        });
+                                    }
+                                    rawProps[key] = next;
+                                });
+                                syncedData.props[key] = next;
+                            }
+                            for (let key in prevProps) {
+                                if (nextProps[key] !== undefined) continue;
+                                syncedData.props[key] = undefined;
+                                onSynced.push(() => {
+                                    delete props[key];
+                                });
+                            }
+
+                        }
+                    },
+                });
+
+                // NOTE: I'm not really sure how we can have unsynced accesses anymore, as we don't run with locks,
+                //  and we should only be accessing local state. But... I guess this doesn't hurt too much?
+                //  - We might need to eventually remove it for performance reasons though...
+                if (Querysub.allSynced()) {
+                    self.childComponents = nextChildComponents;
+                    self.vNode = vNode;
+                    for (let fnc of onSynced) fnc();
+                }
+
+                registerOwnTime("diffVDom", time);
+            },
+        });
+
+        // Apply vNode to DOM
+        let isFirstMount = true;
+        this.mountDOMWatcher = proxyWatcher.createWatcher({
+            debugName: getDebugName("updateDOM"),
+            canWrite: true,
+            atomicWrites: true,
+            noLocks: true,
+            // Delay DOM execution, so all VNodes can be created before we try to mount anything
+            orderGroup: 1,
+            // Run in reverse, so children have their dom nodes created first, and then the parents can inject them into their DOM.
+            order: -this.id,
+            onResultUpdated(result, writes, watcher) {
+                if (result && "error" in result) {
+                    console.error(`Error in ${watcher.debugName}`, result.error);
+                    setImmediate(() => { throw errorify(result.error); });
+                }
+            },
+            watchFunction() {
+                if (self.disposed || self.disposing) return;
+                let time = Date.now();
+                let next = atomic(self.data().vNodeForMount);
+                if (!next) {
+                    return;
+                }
+                let prev = atomic(self.prevMountedVNode);
+                self.prevMountedVNode = next;
+
+                let prevDOMNodes = self.domNodes;
+                let nextDOMNodes = new Map() as typeof prevDOMNodes;
+                self.domNodes = nextDOMNodes;
+
+                let nextRootDOMNodes: DOMNode[] = [];
+                function getComponentChildren(vNode: VirtualDOM) {
+                    let component = self.childComponents.get(vNode);
+                    if (!component) {
+                        console.warn(`Could not find childComponent for attempted component mount in ${debugName}`);
+                        return [];
+                    }
+                    return atomic(QRenderClass.getData(component).rootDOMNodes) ?? [];
+                }
+
+                let activeChain: DOMNode[] = [];
+                {
+                    let curActive = document.activeElement;
+                    while (curActive) {
+                        activeChain.push(curActive as DOMNode);
+                        curActive = curActive.parentElement;
+                    }
+                }
+                type Anchor = { parent: DOMNode } | { prev: DOMNode } | undefined;
+                function replaceNodes(anchor: Anchor, prevNodes: DOMNode[], nextNodes: DOMNode[]) {
+                    let mustPreserveFocus = false;
+                    // Moving elements around doesn't only break focus... it also breaks clicks! So... once the user clicks,
+                    //  stop replacing children, and use our non-invasive technique.
+                    if (mouseIsDown) {
+                        mustPreserveFocus = true;
+                    }
+                    if (!mustPreserveFocus) {
+                        let prevNodesSet = new Set(prevNodes);
+                        for (let nextNode of nextNodes) {
+                            if (prevNodesSet.has(nextNode) && activeChain.includes(nextNode)) {
+                                mustPreserveFocus = true;
+                                break;
+                            }
+                        }
+                        let changedNodes = new Set<DOMNode>();
+                        for (let nextNode of nextNodes) {
+                            if (!prevNodesSet.has(nextNode)) {
+                                changedNodes.add(nextNode);
+                            }
+                        }
+                        let nextNodesSet = new Set(nextNodes);
+                        for (let prevNode of prevNodes) {
+                            if (!nextNodesSet.has(prevNode)) {
+                                changedNodes.add(prevNode);
+                            }
+                        }
+                        // HACK: Due to issues with scroll positions being lost, just use the slow technique
+                        //  unless we have a lot of changes.
+                        if (changedNodes.size < 3000) {
+                            mustPreserveFocus = true;
+                        }
+                    }
+                    if (!mustPreserveFocus && anchor && "parent" in anchor && activeChain.includes(anchor.parent)) {
+                        mustPreserveFocus = true;
+                    }
+                    // Also if we are scrolled, preserved that
+                    if (!mustPreserveFocus && nextNodes.some(x => x.scrollTop > 0)) {
+                        mustPreserveFocus = true;
+                    }
+
+                    if (anchor && "parent" in anchor && !mustPreserveFocus) {
+                        let prevFocus = document.activeElement;
+                        anchor.parent.replaceChildren(...nextNodes);
+                        if (prevFocus !== document.activeElement) {
+                            console.error(`We broke focus by rendering, fix this`);
+                            debugger;
+                        }
+                    } else {
+                        // NOTE: It is A LOT slower to call remove and insert, but... it preserves focus,
+                        //  and is simple (and works with prev nodes, etc).
+                        // NOTE: In my testing documentFragments aren't that much faster. There probably is still a way
+                        //  to optimize this though...
+                        let nextNodesSet = new Set(nextNodes);
+                        for (let prevNode of prevNodes) {
+                            if (!nextNodesSet.has(prevNode)) {
+                                prevNode.remove();
+                            }
+                        }
+                        // NOTE: insertInAnchor is smart, and will noop if the insertion does nothing.
+                        for (let nextElem of nextNodes) {
+                            insertInAnchor(anchor, nextElem);
+                            anchor = { prev: nextElem };
+                        }
+                    }
+                }
+
+                function insertInAnchor(anchor: Anchor, node: DOMNode) {
+                    let prev = document.activeElement;
+                    if (!anchor) {
+                        nextRootDOMNodes.push(node);
+                        return;
+                    }
+                    if ("parent" in anchor) {
+                        if (anchor.parent.firstChild === node) return;
+                        anchor.parent.insertBefore(node, anchor.parent.firstChild || null);
+                        return;
+                    }
+                    if (nextRootDOMNodes[nextRootDOMNodes.length - 1] === anchor.prev) {
+                        nextRootDOMNodes.push(node);
+                        return;
+                    }
+                    if (anchor.prev.nextSibling === node) {
+                        return;
+                    }
+
+                    // BUT, if the node is in the sibling order, then
+                    //  just remove the nodes which are in the way, and insert the node.
+                    //  - This handles the case of previous nodes being removed, which is far more common
+                    //      than nodes being rearranged (which would be the only reason to node remove the
+                    //      intermediate nodes, such as if the first node became the last).
+                    if (node.parentElement === anchor.prev.parentElement) {
+                        // First, check if the node is there
+                        let cur = anchor.prev.nextSibling;
+                        while (cur && cur !== node) {
+                            let next = cur.nextSibling;
+                            cur = next;
+                        }
+                        // If it is, remove the intermediate, and then... we will be the next node!
+                        if (cur === node) {
+                            cur = anchor.prev.nextSibling;
+                            while (cur && cur !== node) {
+                                let next = cur.nextSibling;
+                                cur.remove();
+                                cur = next;
+                            }
+                            if (anchor.prev.nextSibling !== node) {
+                                // Impossible!? We just removed all the other siblings!
+                                debugger;
+                            }
+                            return;
+                        }
+                    }
+
+                    anchor.prev.after(node);
+                    if (prev !== document.activeElement) {
+                        debugger;
+                    }
+                }
+
+                let isParentSVG = !!atomic(self.data().isParentSVG);
+                function isSVG(node: DOMNode | undefined) {
+                    return isParentSVG || node?.namespaceURI === "http://www.w3.org/2000/svg";
+                }
+
+                function triggerRef(vNode: VirtualDOM, node: DOMNode) {
+                    if (!isVNode(vNode)) return;
+                    const ref = vNode.ref;
+                    if (typeof ref === "function") {
+                        // IMPORTANT! We have to detach the ref, otherwise it might access unsynced state, which will
+                        //  break our render function.
+                        void Promise.resolve().finally(() => {
+                            logErrors(proxyWatcher.commitFunction({
+                                canWrite: true,
+                                watchFunction() {
+                                    ref(node);
+                                },
+                            }));
+                        });
+                    }
+                }
+
+                // NOTE: This is a bit inefficient as it requires running twice, because the first run our child
+                //  components will have no rootDOMNodes. But... it's probably fine...
+                QRenderClass.diffVNodes({
+                    alreadyNormalized: true,
+                    next,
+                    prev,
+                    onNewNode(vNode, anchor, parent) {
+                        if (isVNodeClass(vNode)) {
+                            if (isSVG(parent)) {
+                                let component = self.childComponents.get(vNode);
+                                if (component) {
+                                    QRenderClass.getData(component).isParentSVG = true;
+                                }
+                            }
+
+                            let domNodes = getComponentChildren(vNode);
+                            nextDOMNodes.set(vNode, { componentChildren: domNodes });
+                            for (let node of domNodes) {
+                                insertInAnchor(anchor, node);
+                                anchor = { prev: node };
+                            }
+                            return domNodes[domNodes.length - 1];
+                        }
+
+                        let node = createDOMNode(vNode, isSVG(parent));
+                        if (isVNode(vNode)) {
+                            let ref2 = (vNode as any).ref2 || vNode.props.ref2;
+                            if (typeof ref2 === "function") {
+                                if (!vNode.key) {
+                                    console.warn(`Using ref2 without a key is not recommended. Due to node reuse it is possible for a node to be added with ref that reuses an existing node, which will prevent ref from every being called. Ref used in ${debugName}, with vNode ${vNode.type} and ref ${vNode.ref}. Full stack ${self.getDebugComponentStack().map(x => x.debugName).join(", ")}`);
+                                }
+                                // IMPORTANT! We have to detach the ref, otherwise it might access unsynced state, which will
+                                //  break our render function.
+                                void Promise.resolve().finally(() => {
+                                    logErrors(proxyWatcher.commitFunction({
+                                        canWrite: true,
+                                        watchFunction() {
+                                            ref2(node);
+                                        },
+                                    }));
+                                });
+                            }
+
+                            triggerRef(vNode, node);
+                        }
+
+                        let obj = nextDOMNodes.get(vNode);
+
+                        if (isVNode(vNode) && typeof vNode.type !== "function" && nextDOMNodes.has(vNode)) {
+                            // TODO: We should allow this, it happens a lot when passing components as props
+                            throw new Error(`VNode was reused. This is not supported. In ${debugName}, type ${vNode.type}`);
+                        }
+                        if (!obj) nextDOMNodes.set(vNode, obj = { directChildren: [] });
+                        if ("componentChildren" in obj) {
+                            debugger;
+                            throw new Error(`Internal error, component was matched with a non-component DOM node in ${debugName}`);
+                        }
+
+                        if (isVNode(vNode) && vNode.props["data-break"]) {
+                            debugger;
+                        }
+
+                        obj.directChildren.push(node);
+                        updateDOMNodeFields(node, vNode, undefined, self);
+                        insertInAnchor(anchor, node);
+                        return node;
+                    },
+                    onRemovedNode(vNode) {
+                        let domNodes = prevDOMNodes.get(vNode);
+                        if (!domNodes) return;
+
+                        if (isVNode(vNode) && vNode.props["data-break"]) {
+                            debugger;
+                        }
+
+                        // NOTE: We remove all the nodes, even if some are still used. This only impacts identical TextNodes,
+                        //  which is fine, as reusing them probably doesn't add much performance?
+                        prevDOMNodes.delete(vNode);
+                        let nodes = "componentChildren" in domNodes ? domNodes.componentChildren : domNodes.directChildren;
+                        for (let node of nodes) {
+                            // NOTE: Always remove, as we are removing all duplicates with the same vNode,
+                            //  which may have different parents, some of which may be removed, and some of which are kept.
+                            node.remove();
+                            /*
+                            // We SHOULDN'T have to remove event listeners, but maybe we will have to?
+                            let eventNode = node as DOMNode & { _eventHandlers?: { [key: string]: EventListener } };
+                            for (let key in eventNode._eventHandlers) {
+                                eventNode.removeEventListener(key, eventNode._eventHandlers[key]);
+                            }
+                            delete eventNode._eventHandlers;
+                            */
+                            if (isVNode(vNode)) {
+                                if (typeof vNode.ref === "function") {
+                                    vNode.ref(null);
+                                }
+                            }
+                        }
+                    },
+                    onUpdatedNode(prev, vNode, anchor, parent) {
+                        // TODO: It MIGHT be faster to remove TextNodes instead of reusing them? I'm not sure
+                        //      how the browser handles reused TextNodes, but we might be in the case where
+                        //      we completely rearrange them, which might cause performance issues?
+                        let prevNodeBase = prevDOMNodes.get(prev);
+
+                        // NOTE: Types don't change here (otherwise it would be a new and remove, not an update),
+                        //  so it is always the case that `prev.type === next.type`
+                        if (isVNode(prev) && isVNode(vNode)) {
+                            if (typeof prev.type === "function") {
+                                if (!prevNodeBase || !("componentChildren" in prevNodeBase)) {
+                                    throw new Error(`Internal error, component was matched with a non-component DOM node in ${debugName}`);
+                                }
+                                let prevNodes = prevNodeBase.componentChildren;
+                                let nextNodes = getComponentChildren(vNode);
+                                nextDOMNodes.set(vNode, { componentChildren: nextNodes });
+
+                                replaceNodes(anchor, prevNodes, nextNodes);
+
+                                return nextNodes[nextNodes.length - 1];
+                            } else {
+                                // Built-in ("div", "span", etc)
+                                if (!prevNodeBase || "componentChildren" in prevNodeBase) {
+                                    throw new Error(`Internal error, non-component DOM node was matched with a component node in ${debugName}`);
+                                }
+                                let prevNodes = prevNodeBase.directChildren;
+                                if (prevNodes.length !== 1) {
+                                    debugger;
+                                    throw new Error(`Internal error, non-primitive DOM node had more than one child in ${debugName}`);
+                                }
+                                if (prev.props["data-break"] || vNode.props["data-break"]) {
+                                    debugger;
+                                }
+                                nextDOMNodes.set(vNode, { directChildren: prevNodes });
+                                let domNode = prevNodes[0];
+
+                                // Call insert, in case the order's changed
+                                insertInAnchor(anchor, domNode);
+                                updateDOMNodeFields(domNode, vNode, prev, self);
+
+                                // Don't trigger ref into the dom node is updated
+                                triggerRef(vNode, domNode);
+
+                                return domNode;
+                            }
+                        } else {
+                            // Primitive
+                            if (prevNodeBase && "componentChildren" in prevNodeBase) {
+                                throw new Error(`Internal error, non-component DOM node was matched with a component node in ${debugName}`);
+                            }
+                            // Take the first node
+                            let prevNodes = prevNodeBase?.directChildren;
+                            let prevNode = prevNodes?.shift();
+                            let nextNodes = nextDOMNodes.get(vNode);
+                            if (!nextNodes) {
+                                nextDOMNodes.set(vNode, nextNodes = { directChildren: [] });
+                            }
+                            if ("componentChildren" in nextNodes) {
+                                throw new Error(`Internal error, next nodes is corrupted ${debugName}`);
+                            }
+                            if (!prevNode) {
+                                prevNode = createDOMNode(vNode, isSVG(parent));
+                            } else {
+                                updateDOMNodeFields(prevNode, String(vNode), prev, self);
+                            }
+                            nextNodes.directChildren.push(prevNode);
+
+                            insertInAnchor(anchor, prevNode);
+                            return prevNode;
+                        }
+                    },
+                });
+
+                // NOTE: We can't update the root dom nodes inline (such as by finding the previous value, and using that
+                //      as an anchor), because if we do it might mess up our parent when they try to update our dom nodes.
+                //      (And there shouldn't be too much of a delay between our mount and our parent re-running their mount)
+
+                // Update rootDOMNodes efficiently. If only fields change, we don't need to update them. They only need
+                //      to be updated if the instances change.
+                let prevRootDOMNodes = self.internalRootDOMNodes ?? [];
+                self.internalRootDOMNodes = nextRootDOMNodes;
+                function rootDOMNodesChanged() {
+                    if (prevRootDOMNodes.length !== nextRootDOMNodes.length) return true;
+                    for (let i = 0; i < prevRootDOMNodes.length; i++) {
+                        if (prevRootDOMNodes[i] !== nextRootDOMNodes[i]) return true;
+                    }
+                    return false;
+                }
+                if (rootDOMNodesChanged()) {
+                    for (let node of nextRootDOMNodes) {
+                        if ("setAttribute" in node && !node.hasAttribute("data-qreact-id")) {
+                            node.setAttribute("data-qreact-id", String(self.id));
+                            node.setAttribute("data-qreact-name", self.debugName);
+                        }
+                    }
+                    self.data().rootDOMNodes = nextRootDOMNodes;
+                }
+
+                if (config.masterRootDOMNode) {
+                    replaceNodes(
+                        { parent: config.masterRootDOMNode },
+                        Array.from(config.masterRootDOMNode.children) as DOMNode[],
+                        nextRootDOMNodes
+                    );
+                }
+
+                if (isFirstMount) {
+                    isFirstMount = false;
+                    if (self.instance.componentDidMount) {
+                        void Promise.resolve().finally(() => {
+                            logErrors(proxyWatcher.commitFunction({
+                                canWrite: true,
+                                watchFunction() {
+                                    QRenderClass.renderingComponentId = self.id;
+                                    try {
+                                        runContextCallback(() => self.instance?.componentDidMount?.());
+                                    } finally {
+                                        QRenderClass.renderingComponentId = undefined;
+                                    }
+                                },
+                            }));
+                        });
+                    }
+                }
+
+                if (Querysub.anyUnsynced()) {
+                    throw new Error(`DOM mounting shouldn't access ANY remote values. If it does, it requires rerunning DOM constructors, which is highly inefficient. Any callbacks should be detached with Promise.resolve().finally(...), etc.`);
+                }
+
+                registerOwnTime("mount", time);
+            }
+        });
+    }
+
+    private static componentIdDedupeBase = cache((name: string) => {
+        let index = 0;
+        return () => {
+            return name + "_" + index++;
+        };
+    });
+    private static componentIdDedupe = cache((fnc: preact.ComponentType) => {
+        return QRenderClass.componentIdDedupeBase(fnc.name)();
+    });
+
+
+    /*
+        - Converts all props.children to VirtualDOM[].
+        - Shallow copies everything as well.
+        - Shallow copies props.
+        - Flattens arrays
+        - If "config.array", converts the root to be VirtualDOM[]
+
+    
+        NOTE: Called inside of diffVNodes, which is already called by default, so this usually shouldn't be
+            called explicitly.
+    */
+    private static normalizeVNode(config: {
+        vNode: VirtualDOM;
+        array?: boolean;
+    }): VirtualDOM {
+        let result = normalizeNode(config.vNode);
+        if (config.array) {
+            return result as VirtualDOM;
+        }
+        return result[0];
+        function normalizeNode(node: VirtualDOM | VirtualDOM[] | undefined): VirtualDOM[] {
+            let flattened = fullyFlatArrays(node);
+            flattened = flattened.map(sub => {
+                if (!isVNode(sub)) return sub;
+                sub = { ...sub };
+                // Shallow copy props, as even though they might contain proxy or otherwise complex values,
+                //  props itself should just be a lookup.
+                sub.props = { ...sub.props };
+                if (typeof sub.type === "string") {
+                    let children = sub.props.children;
+                    if (!children) {
+                        sub.props.children = [];
+                    } else {
+                        sub.props.children = normalizeNode(children as any);
+                    }
+                }
+                return sub;
+            });
+            return flattened;
+
+            function fullyFlatArrays(value: VirtualDOM | VirtualDOM[] | VirtualDOM[][], output: VirtualDOM[] = []): VirtualDOM[] {
+                // If we don't detect proxies early we might end up creating watches on values we don't
+                //  really care about ("type", etc). So, replace them immediately with strings.
+                if (isValueProxy2(value)) return [String(node)];
+                if (value === undefined || value === null || value === false) {
+                    return output;
+                }
+                if (!canHaveChildren(value)) {
+                    output.push(value as any);
+                    return output;
+                }
+                if (isFragment(value)) {
+                    fullyFlatArrays((value as any).props.children as any, output);
+                    return output;
+                }
+                if (Array.isArray(value)) {
+                    for (let item of value) {
+                        fullyFlatArrays(item, output);
+                    }
+                    return output;
+                }
+                output.push(value);
+                return output;
+            }
+        }
+    }
+
+    // NOTE: We call diffVNodes twice every time a component changes. This is fine, diffing is just reading, which is
+    //  extremely fast. This also provides the potential for lazy/throttled DOM reconcilation (the slowest part of rendering),
+    //  which can make the UI feel considerably more responsive.
+    // NOTE: We don't optimize for cases where only a few nodes have changes, but most are ===. vNode reuse is
+    //      rare, and barely helps. Instead they should split their component into smaller components.
+    // NOTE: All nodes are either new, or updates. We allow updates if the types are the same (VNode.type OR if they
+    //      are primitives, always the same).
+    public static diffVNodes(config: {
+        alreadyNormalized?: boolean;
+        prev: VirtualDOM | undefined;
+        next: VirtualDOM;
+        onTransformNode?: (
+            prev: VirtualDOM,
+            next: VirtualDOM,
+        ) => VirtualDOM;
+        // NOTE: Anchor is the value returned from onNewNode/onUpdatedNode of the parent/prev node. If either returns
+        //      undefined we assume the anchor is unchanged, and keep the some one (parent or prev).
+        onNewNode: (
+            vNode: VirtualDOM,
+            anchor: { parent: DOMNode } | { prev: DOMNode } | undefined,
+            parent: DOMNode | undefined,
+        ) => DOMNode | undefined;
+        onRemovedNode: (vNode: VirtualDOM) => void;
+        // NOTE: onUpdatedNode might not mean the node is updated, it is just what we call if it isn't new or removed.
+        onUpdatedNode: (
+            prev: VirtualDOM,
+            next: VirtualDOM,
+            anchor: { parent: DOMNode } | { prev: DOMNode } | undefined,
+            parent: DOMNode | undefined
+        ) => DOMNode | undefined;
+    }): VirtualDOM {
+        let { prev, next, onNewNode, onRemovedNode, onUpdatedNode, onTransformNode } = config;
+
+        if (!config.alreadyNormalized) {
+            next = QRenderClass.normalizeVNode({ vNode: next, array: true });
+        }
+
+        iterate(next as VirtualDOM[], (prev ?? []) as VirtualDOM[], undefined);
+        return next;
+        function iterate(
+            next: VirtualDOM[],
+            prev: VirtualDOM[],
+            parent: DOMNode | undefined,
+        ) {
+            function getNodeKey(node: VirtualDOM) {
+                if (Array.isArray(node)) return 0;
+                if (isVNode(node)) {
+                    if (node.key) {
+                        return String(node.key);
+                    }
+                    // So... if you change the value of a select option, it changes the parent select.value. Which is...
+                    //      odd. We can easily fix this by just using the value as the key, which prevents us from ever
+                    //      changing the .value
+                    if (node.type === "option") {
+                        return String(node.props.value);
+                    }
+                    let type = node.type;
+                    if (typeof type === "function") {
+                        return QRenderClass.componentIdDedupe(type);
+                    }
+                    return type;
+                }
+                return typeof node;
+            }
+
+
+            let anchor: { parent: DOMNode } | { prev: DOMNode } | undefined = parent ? { parent } : undefined;
+
+            let sourceNodes = new Map<string | number, VirtualDOM[]>();
+            if (!Array.isArray(prev)) {
+                // IMPORTANT! prev was probably an error, look at `prev.props.children[0]` to see the actual error.
+                console.warn(`prev is not an array, this is unexpected`, prev);
+                debugger;
+                prev = [];
+            }
+            for (let node of prev) {
+                let key = getNodeKey(node);
+                let nodes = sourceNodes.get(key);
+                if (!nodes) sourceNodes.set(key, nodes = []);
+                nodes.push(node);
+            }
+            for (let i = 0; i < next.length; i++) {
+                let node = next[i];
+                let key = getNodeKey(node);
+                let match = sourceNodes.get(key)?.shift();
+
+                if (onTransformNode) {
+                    let inputNode = node;
+                    node = onTransformNode(match, node);
+                    if (node !== inputNode) {
+                        node = QRenderClass.normalizeVNode({ vNode: node });
+                        next[i] = node;
+                    }
+                }
+
+                let result: DOMNode | undefined;
+                // NOTE: At first components will return undefined, and everything will anchor to the same node.
+                //  But once components start having dom values, they will all stack up, and our order will make sense.
+                if (match === undefined) {
+                    result = onNewNode(node, anchor, parent);
+                    if (result !== undefined) anchor = { prev: result };
+                } else {
+                    result = onUpdatedNode(match, node, anchor, parent);
+                    if (result !== undefined) anchor = { prev: result };
+                }
+
+                if (isVNode(node)) {
+                    if (typeof node.type === "string") {
+                        let children = node.props.children;
+                        let matchChildren = (match && isVNode(match) && match.props.children) ?? [];
+                        iterate(children as VirtualDOM[], matchChildren as VirtualDOM[], result);
+                    }
+                }
+            }
+
+            for (let nodes of sourceNodes.values()) {
+                for (let node of nodes) {
+                    onRemovedNode(node);
+                    removeRecursively(node);
+                    function removeRecursively(node: VirtualDOM) {
+                        if (isVNode(node) && typeof node.type === "string") {
+                            let children = node.props.children as VirtualDOM[];
+                            for (let child of children) {
+                                onRemovedNode(child);
+                                removeRecursively(child);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    private disposing = false;
+    public disposed = false;
+    private dispose() {
+        if (this.disposed) return;
+        this.disposing = true;
+        this.disposed = true;
+
+        componentRendered(this);
+        qreact.allComponents.delete(this);
+
+        let disposers = disposeWatchers.get(this);
+        if (disposers) {
+            disposeWatchers.delete(this);
+            for (let disposer of disposers) {
+                try {
+                    disposer();
+                } catch (e: any) {
+                    console.error(`Error in dispose callback for ${this.debugName}, ${disposer.name}, ${e.stack}`);
+                }
+            }
+        }
+
+        let self = this;
+        let instance = self.instance;
+
+        instance.componentWillUnmount && logErrors(proxyWatcher.commitFunction({
+            debugName: `${this.debugName}.componentWillUnmount`,
+            watchFunction() {
+                instance.componentWillUnmount?.();
+            },
+        }));
+
+        // Recursively dispose all children
+        for (let child of this.childComponents.values()) {
+            QRenderClass.getInstance(child).dispose();
+        }
+
+        this.renderWatcher?.dispose();
+        this.VNodeWatcher.dispose();
+        this.mountDOMWatcher.dispose();
+        renderClasses.delete(this.id);
+
+        this.renderWatcher = undefined as any;
+        this.VNodeWatcher = undefined as any;
+        this.mountDOMWatcher = undefined as any;
+        this.instance = undefined as any;
+        this.domNodes = undefined as any;
+        this.childComponents = undefined as any;
+        this.vNode = undefined as any;
+        this.prevMountedVNode = undefined as any;
+        this.internalRootDOMNodes = undefined as any;
+
+        // Clean up all synced fields too
+        logErrors(proxyWatcher.commitFunction({
+            debugName: `${this.debugName}.dispose`,
+            watchFunction() {
+                let data = self.data();
+                for (let key in Object.keys(data)) {
+                    delete (data as any)[key];
+                }
+                delete schema()[LOCAL_DOMAIN].qreact.components[self.id];
+            },
+        }));
+    }
+
+    public static getInstance(id: number) {
+        let instance = renderClasses.get(id);
+        if (!instance) throw new Error(`Could not find component with id ${id}`);
+        return instance;
+    }
+    public static getData(id: number) {
+        return schema()[LOCAL_DOMAIN].qreact.components[id];
+    }
+    public static getInstanceAllowedUndefined(id: number) {
+        return renderClasses.get(id);
+    }
+    public static getInstanceFromDOM(element: HTMLElement) {
+        let id = "";
+        while (!id && element) {
+            id = element.getAttribute("data-qreact-id") || "";
+            element = element.parentElement as HTMLElement || undefined;
+        }
+        return __INTERNAL__QRenderClass.getInstanceAllowedUndefined(Number(id));
+    }
+    public getParent() {
+        let parentId = atomic(this.data().parentComponentId);
+        if (parentId === undefined) return undefined;
+        return QRenderClass.getInstance(parentId);
+    }
+
+    public getVSCodeLink(): string | undefined {
+        return getSourceVSCodeLink(this.internalRootDOMNodes?.[0]);
+
+    }
+
+    public getDebugComponentStack(): QRenderClass[] {
+        let stack: QRenderClass[] = [];
+        let cur: number | undefined = this.id;
+        while (cur !== undefined) {
+            let instance = QRenderClass.getInstanceAllowedUndefined(cur || -1);
+            if (!instance) break;
+            stack.push(instance);
+            cur = instance.config.parentId;
+        }
+        return stack;
+    }
+}
+
+export const __INTERNAL__QRenderClass = QRenderClass;
+
+let defaultErrorHandler: ErrorHandler = ({ error, debugName }) => {
+    if (Querysub.isAllSynced()) {
+        console.error(`Render error in ${debugName}`, error);
+        // Throw, so we get a good callstack
+        setImmediate(() => { throw error; });
+    }
+    return (
+        createElement("div", {
+            style: {
+                background: "#fdd",
+                color: `hsl(0, 0%, 7%)`,
+                whiteSpace: "pre-wrap",
+                padding: "5px 10px",
+            }
+        },
+            canHaveChildren(error) ? String(error.stack) : String(error)
+        )
+    );
+};
+qreact.errorHandler = defaultErrorHandler;
+
+export function isFragment(value: VirtualDOM): boolean {
+    if (!isVNode(value)) return false;
+    return (
+        value.type === qreact.Fragment
+        || (
+            typeof value.type === "function"
+            && value.type.constructor === Function
+            && (
+                value.type.toString() === "function d(n) { return n.children; }"
+                // function v(e){return e.children}
+                || /function .\(.\)\ ?{ ?return .\.children\ ?}/.test(value.type.toString())
+            )
+        )
+    );
+}
+
+let unsafeVirtualDOM = false;
+function temporaryUnsafeVirtualDOM<T>(fnc: () => T): T {
+    let prev = unsafeVirtualDOM;
+    unsafeVirtualDOM = true;
+    try {
+        return fnc();
+    } finally {
+        unsafeVirtualDOM = prev;
+    }
+}
+function isVNode(vNode: VirtualDOM): vNode is VirtualDOMElement {
+    if (
+        !isValueProxy2(vNode) && typeof vNode === "object" && vNode && "type" in vNode
+        || false
+    ) {
+        if (unsafeVirtualDOM) return true;
+        if (vNode.allowedToRender === ALLOWED_TO_RENDER) {
+            return true;
+        }
+        if (typeof vNode.type === "function") {
+            return true;
+        }
+        if (vNode.constructor === undefined) {
+            // preact.createElement isn't secure enough. It protects against JSON.stringify
+            //  XSS attacks, but... we don't use JSON.stringify, and we plan to preserve
+            //  the constructor, so it isn't a sufficient check for serialized values.
+            console.warn(`preact/React VNode detected. This is not supported. Use qreact.createElement instead.`, vNode);
+            return false;
+        }
+        console.warn(`Invalid vNode detected. If this node has been stored in the database (and you want to render it), use qreact.rehydrateVirtualDOM before rendering it. Otherwise, if a user stored an object in the database where a string/number was required but they stored an object, just ignore this warning. It means we successfully blocked an XSS attempt.`, vNode);
+        return false;
+    }
+    return false;
+
+}
+function isVNodeClass(vNode: VirtualDOM): vNode is preact.VNode<{ [key: string]: unknown }> {
+    return isVNode(vNode) && typeof vNode.type === "function";
+}
+
+// NOTE: We accept anything for vNode, otherwise we run into compatibility issues related to the type,
+//  and we want to be able to support at least any preact version.
+function mountToDOM(vNode: any, parent: DOMNode) {
+    class RootComponent extends qreact.Component {
+        public render() {
+            return vNode;
+        }
+    }
+    new QRenderClass({ vNode: createElement(RootComponent) as any, props: {}, rawProps: {}, masterRootDOMNode: parent });
+}
+
+
+function createDOMNode(vNode: VirtualDOM, isSVG: boolean): DOMNode {
+    if (isVNode(vNode)) {
+        if (typeof vNode.type !== "string") {
+            throw new Error(`Cannot create DOM node for component ${vNode.type?.name}`);
+        }
+        if (vNode.type === "svg" || isSVG) {
+            return document.createElementNS("http://www.w3.org/2000/svg", vNode.type);
+        }
+        return document.createElement(vNode.type);
+    }
+    return document.createTextNode(String(vNode)) as any;
+}
+
+type EventHandlerType = DOMNode & {
+    _eventHandlers?: {
+        [key: string]: {
+            underlyingCallback: Function;
+            ready: boolean;
+            wrappedCallback: EventListener;
+        }
+    }
+};
+
+// https://github.com/preactjs/preact/blob/main/src/constants.js#L15C1-L16C70
+export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+function updateDOMNodeFields(domNode: DOMNode, vNode: VirtualDOM, prevVNode: VirtualDOM, owner: QRenderClass): void {
+    if (vNode === prevVNode) return;
+
+    if (isVNode(vNode) && vNode.sourceModuleId) {
+        let sourceModule = require.cache[vNode.sourceModuleId];
+        if (sourceModule) {
+            if (qreact.INJECT_FILENAMES) {
+                domNode.setAttribute("data-qreact-filename", sourceModule.filename);
+            } else {
+                (domNode as any).sourceFileName = sourceModule.filename;
+            }
+        }
+    }
+    if (qreact.INJECT_LINE_NUMBERS && isVNode(vNode)) {
+        (domNode as any).callStack = vNode.callStack;
+        let sourceModule = vNode.sourceModuleId && require.cache[vNode.sourceModuleId];
+        if (sourceModule && sourceModule.source) {
+            (domNode as any).codeSource = sourceModule.source;
+        }
+    }
+
+    if (isVNode(vNode)) {
+        function updateField(key: string) {
+            if (key === "children") return;
+            if (key === "ref") return;
+            if (key === "ref2") return;
+            let value = isVNode(vNode) ? vNode.props[key] : undefined;
+            let prevValue = isVNode(prevVNode) ? prevVNode.props[key] : undefined;
+            if (
+                // NOTE: Object.is is required to handle NaN case
+                Object.is(value, prevValue)
+                // NOTE: Some values are SUPPOSED to be mutated outside of our framework, and so we always need
+                //  to update them in case they changed (ex, if the user set an invalid value and we want to revert
+                //  it back to the previous value, in which case `value === prevValue`, but domNode.value is different).
+                && !(
+                    key === "value"
+                    || key === "checked"
+                )
+
+            ) return;
+
+            if (key === "style") {
+                if (typeof value === "string") {
+                    // This clobbers previous style object writes
+                    domNode.style.cssText = value;
+                    return;
+                }
+                if (canHaveChildren(value)) {
+                    if (typeof prevValue === "string") {
+                        // We have to clobber cssText
+                        domNode.style.cssText = "";
+                    }
+                    for (let [key, v] of Object.entries(value as Record<string, string | number | undefined>)) {
+                        if (typeof v === "number" && !IS_NON_DIMENSIONAL.test(key)) {
+                            v = v + "px";
+                        }
+                        (domNode as any).style[key] = v ?? "";
+                    }
+                    if (canHaveChildren(prevValue)) {
+                        for (let key in prevValue) {
+                            if (!(key in value)) {
+                                (domNode as any).style[key] = "";
+                            }
+
+                        }
+                    }
+                }
+                if (!value) {
+                    domNode.style.cssText = "";
+                }
+                return;
+            }
+
+            if (key.startsWith("on")) {
+                let eventNode = domNode as EventHandlerType;
+                eventNode._eventHandlers = eventNode._eventHandlers || {};
+                let name = key.slice(2);
+                // Guess if we can toLowerCase it by checking if there is a corresponding "on" field (for the full name)
+                //  Sometimes we can't, ex "DOMContentLoaded"
+                if (key.toLowerCase() in domNode) {
+                    name = name.toLowerCase();
+                }
+                if (typeof value !== "function") {
+                    // Remove the callback entirely
+                    eventNode.removeEventListener(name, eventNode._eventHandlers[name].wrappedCallback);
+                    delete eventNode._eventHandlers[name];
+                } else {
+                    let prevHandler = "";
+                    if (!eventNode._eventHandlers[name]) {
+                        eventNode._eventHandlers[name] = {
+                            underlyingCallback: value,
+                            ready: false,
+                            wrappedCallback: wrapEventCallback(`${owner.debugName}.eventHandlers.${key}`, name,
+                                function (this: any, ...args: any[]) {
+                                    if (!eventNode._eventHandlers?.[name].ready && name === "click") {
+                                        // UPDATE: ONLY for clicks, otherwise we break blur handlers.
+                                        // IMPORTANT NOTE: IF you are inside of a click handler and add a handler to
+                                        //      the parent, the parent's handler will be triggered. An event might
+                                        //      trigger a re-render which reuses the parent node for something else,
+                                        //      causing an unrelated handler (which is for a div that is now positioned
+                                        //      in an entirely different UI location) to be triggerd.
+                                        //      - I observed this in chrome, with regular click handlers. BUT, even if the
+                                        //      all browsers paused immediate handlers for a bit... it is possible for us to add
+                                        //      a handler without "adding a handler", by setting the underlyingCallback.
+                                        //      So... we absolutely have to wait until the current handler has finished
+                                        //      before we start
+                                        return;
+                                    }
+                                    let prevEvent = QRenderClass.eventComponentId;
+                                    QRenderClass.eventComponentId = owner.id;
+                                    try {
+                                        eventNode._eventHandlers?.[name]?.underlyingCallback.apply(this, args as any);
+                                    } finally {
+                                        QRenderClass.eventComponentId = prevEvent;
+                                    }
+                                }
+                            ),
+                        };
+                        eventNode.addEventListener(name, eventNode._eventHandlers[name].wrappedCallback);
+                    } else {
+                        prevHandler = eventNode._eventHandlers[name].underlyingCallback.toString();
+                    }
+                    eventNode._eventHandlers[name].underlyingCallback = value;
+                    // ONLY if the handler looks like it changes (and we have to use .toString, as it is almost certainly
+                    //  a lambda, which will never ===), otherwise we run into issues related to call predictions... or something.
+                    if (prevHandler !== value.toString()) {
+                        eventNode._eventHandlers[name].ready = false;
+                        setTimeout(() => {
+                            let handler = eventNode._eventHandlers?.[name];
+                            if (handler) {
+                                handler.ready = true;
+                            }
+                        });
+                    }
+                }
+                return;
+            }
+
+            let isSVG = domNode.namespaceURI === "http://www.w3.org/2000/svg";
+            if (isSVG) {
+                if (key === "className") {
+                    key = "class";
+                }
+            } else {
+                // It's nice to allow "class" as a key name, as it is shorter than "className", and closer to HTML
+                if (key === "class") {
+                    key = "className";
+                }
+            }
+
+            // TODO: Maybe add the extra logic from preact here
+            //  - ALTHOUGH, attributes aren't hugely important anyways. We do pretty much everything with className and events...
+            //  - https://github.com/preactjs/preact/blob/main/src/diff/props.js#L77
+            if (key in domNode && !isSVG) {
+                let nodeTyped = domNode as any;
+                if (key === "title") {
+                    value = value ?? "";
+                }
+                if (key === "value" && domNode.tagName === "SELECT") {
+                    // HACK: We have to set select value later, because only values which are
+                    //  equal to child options are allowed.
+                    void Promise.resolve().finally(() => {
+                        nodeTyped[key] = value;
+                    });
+                } else {
+                    nodeTyped[key] = value;
+                }
+            } else {
+                if (value === undefined || value === false) {
+                    domNode.removeAttribute(key);
+                } else {
+                    domNode.setAttribute(key, String(value ?? ""));
+                }
+            }
+        }
+        // IMPORTANT! Remove first, so keys that map to the same value ("class" and "className" => "className"),
+        //  don't apply the removal of a "class" property to clobber a valid "className" value.
+        if (isVNode(prevVNode)) {
+            for (let key in prevVNode.props) {
+                if (key in vNode.props) continue;
+                updateField(key);
+            }
+        }
+        for (let key in vNode.props) {
+            updateField(key);
+        }
+    } else {
+        // NOTE: I'm not sure if updating textContent is better or worse than creating a new Text node?
+        // As in, should we use `prevNode.replaceWith(document.createTextNode(result))`?
+        (domNode as any as Text).textContent = String(vNode);
+    }
+}
+
+function hasEventHandlers(node: DOMNode, type: string): boolean {
+    let eventNode = node as EventHandlerType;
+    return eventNode._eventHandlers?.[type] !== undefined;
+}
+
+function wrapEventCallback(debugName: string, eventName: string, baseFunction: Function) {
+    return function wrappedCallback(this: any, ...args: any[]) {
+        let event = args[0];
+        if (event && typeof event === "object" && event instanceof Event && event.currentTarget) {
+            let currentTarget = event.currentTarget as HTMLInputElement;
+            let value = currentTarget.value ?? "";
+            let checked = currentTarget.checked ?? false;
+
+            let currentTargetTyped = currentTarget as any as { [key: string]: unknown };
+
+            let proxy = createPathValueProxy({
+                getCallback(pathStr) {
+                    if (pathStr === getPathStr1("value")) {
+                        return { value };
+                    }
+                    if (pathStr === getPathStr1("checked")) {
+                        return { value: checked };
+                    }
+                    if (pathStr === getPathStr1("valueAsNumber")) {
+                        console.warn(yellow("Avoid using valueAsNumber, which conflicts with InputLabel display rounding (showing 3.0000000000000001 as 3). Instead us `Number(value)` or `+value`."));
+                    }
+                    let targetValue = currentTargetTyped[getPathIndexAssert(pathStr, 0)];
+                    if (typeof targetValue === "function") {
+                        targetValue = targetValue.bind(currentTarget);
+                    }
+                    return { value: targetValue };
+                },
+                setCallback(pathStr, newValue) {
+                    let key = getPathIndexAssert(pathStr, 0);
+                    if (key === "value") {
+                        value = newValue as any;
+                    } else if (key === "checked") {
+                        checked = newValue as any;
+                    }
+                    currentTargetTyped[key] = newValue;
+                },
+                getSymbol(pathStr, symbol) {
+                    if (symbol === getProxyBase) {
+                        return { value: currentTargetTyped };
+                    }
+                    return { value: currentTargetTyped[symbol as any] };
+                },
+                getKeys(pathStr) {
+                    return Object.keys(currentTarget);
+                },
+            });
+            event = cloneEvent(event);
+            event.currentTarget = proxy;
+            args[0] = event;
+        }
+
+        let run = () => {
+            let result = baseFunction.apply(this, args);
+            if (eventName === "mousedown") {
+                blurFixOnMouseDownHack(event as MouseEvent);
+            }
+            return result;
+        };
+        if (proxyWatcher.inWatcher()) {
+            if (proxyWatcher.getTriggeredWatcher().options.noLocks) {
+                // A synchronous trigger that happens when we rearrange DOM. This triggers both
+                //  onBlur, and onChange. Because we are rearranging the DOM we shouldn't have any locks,
+                //  so we have to disconnect the event.
+                void Promise.resolve().finally(() => {
+                    wrappedCallback.apply(this, args);
+                });
+                return;
+            }
+            return run();
+        }
+
+        // TODO: Expose errors to the component in some way?
+        //  - Maybe via a global "componentError" callback, which is subscribed in their main.
+        logErrors(proxyWatcher.commitFunction({
+            debugName,
+            watchFunction: run,
+            synchronousInit: true,
+        }));
+    };
+}
+
+function cloneEvent<T extends Event>(event: T): T {
+    // Need to get every key, to preserve currentTarget correctly
+    let keys = new Set<(keyof Event)>();
+    let proto = event as any;
+    while (proto && proto !== Object.prototype) {
+        proto = Object.getPrototypeOf(proto);
+        for (let key of Object.getOwnPropertyNames(proto)) {
+            keys.add(key as any);
+        }
+    }
+    let cloned = {} as any;
+    for (let key of keys) {
+        let value = event[key];
+        if (typeof value === "function") {
+            cloned[key] = (...args: unknown[]) => (event[key] as any)(...args);
+        } else {
+            cloned[key] = event[key];
+        }
+    }
+    return cloned;
+}
+
+const getProxyBase = Symbol.for("getProxyBase");
+function getCurrentTarget<T extends EventTarget>(target: T): T {
+    return (target as any)[getProxyBase];
+};
+
+function isTarget(event: preact.JSX.TargetedEvent): boolean {
+    return event.target === getCurrentTarget(event.currentTarget);
+};
+
+function getDebugContextComponent() {
+    let componentId = getCurrentComponentId();
+    if (!componentId) return undefined;
+
+
+    let name = QRenderClass.getInstance(componentId).debugName;
+
+    let stack: string[] = [];
+    let curId: number | undefined = componentId;
+    while (curId) {
+        let instance = QRenderClass.getInstance(curId);
+        stack.push(instance.debugName);
+        curId = instance.config.parentId;
+    }
+    stack.reverse();
+    return { name, stack };
+}
+function getDebugContextEvent() {
+    let rawReason = Querysub.getTriggerReason();
+    return {
+        currentFunction: proxyWatcher.getTriggeredWatcher().debugName,
+        sources: Array.from(rawReason?.pathSources || []).map(x => x.source),
+        rawReason,
+    };
+}
+function getDebugContext() {
+    return { ...getDebugContextComponent(), ...getDebugContextEvent() };
+}
+
+/** The built in element.contains is bad and throws bad and pointless errors. This code is what it should be. */
+function contains(parent: HTMLElement, child: HTMLElement): boolean {
+    let cur = child as HTMLElement | null;
+    while (cur) {
+        if (cur === parent) return true;
+        cur = cur.parentElement;
+    }
+    return false;
+}
+
+/** Blur fix.
+ *      - By default, blur happens after a delay from mousedown. However, selection (such as dragging to select
+ *          elements) often happen on mousedown, which can trigger a re-render.
+ *          This results in a situation where an input might be re-used for a different component, BEFORE we blur. This causes
+ *          the wrong component to blur. To fix this, we force blur to happen early, by trying to guess if we are going to blur.
+ *          - It should still happen AFTER the mousedown, just directly after, so that we don't have a change
+ *              to re-render and change the blur target.
+ */
+function blurFixOnMouseDownHack(event: MouseEvent) {
+    let selected = document.activeElement;
+    if (selected === document.body || !selected) return;
+    if (!(selected instanceof HTMLElement)) return;
+    let clicked = event.currentTarget as HTMLElement | null;
+    if (!clicked) return;
+    if (selected === clicked) return;
+
+    let labelRoot = clicked.closest("label");
+    if (labelRoot) {
+        // If we clicked on a label, and the label is for the selected element, then focus won't change
+        if (labelRoot === selected || contains(labelRoot, selected)) {
+            return;
+        }
+    }
+
+    // If we clicked on a child of selected, then focus won't change
+    if (contains(selected, clicked)) return;
+
+    // Looks like we are going to blur, so blur now
+    if (selected instanceof HTMLElement && !selected.hasAttribute("data-no-early-blur")) {
+        console.info(`Simulating early blur to prevent unblurred inputs from existing after mousedown. You can use data-no-early-blur to opt-out of this feature`, selected);
+        selected.blur();
+    }
+}
+
+onHotReload(() => {
+    triggerRerenderAll();
+});
+export function triggerRerenderAll() {
+    Querysub.commit(() => {
+        schema()[LOCAL_DOMAIN].hotreloadSeqNum++;
+    });
+}
+
+// #region Go to source
+
+export function getSourceInfo(element: DOMNode | undefined) {
+    let sourceFileName = (element as any)?.sourceFileName;
+    let callStack = (element as any)?.callStack;
+    let codeSource = (element as any)?.codeSource;
+    if (!sourceFileName) return undefined;
+    let callerInfo = getCallerInfo({
+        sourceCode: codeSource,
+        callStack: callStack,
+    });
+    return {
+        sourceFileName: sourceFileName,
+        lineNumber: callerInfo?.lineNumber,
+        columnNumber: callerInfo?.columnNumber,
+    };
+}
+export function getSourceVSCodeLink(element: DOMNode | undefined) {
+    let sourceInfo = getSourceInfo(element);
+    if (!sourceInfo?.sourceFileName) return undefined;
+    /*
+        Claude.ai says there are more parameters we can use. As it was right about selection, these might work too.
+            selection: Specifies the line and column to focus on when opening the file. Format: "line,column".
+            readonly: When set to true, opens the file in read-only mode.
+            viewColumn: Determines which editor group to open the file in. Values can be 1, 2, or 3, corresponding to the left, center, and right groups respectively.
+            files: Allows opening multiple files at once. Provide a comma-separated list of file paths relative to the workspace root.
+            folder: Opens a specific folder in the workspace.
+            newWindow: When set to true, opens the file or folder in a new window instead of the current one.
+
+            Additional notes:
+
+            The diff scheme: VS Code also supports a vscode://file/file1/file2 URL format for opening the diff view between two files.
+            Command palette: You can trigger VS Code commands using vscode://file/{file}?command={commandId}.
+            Extensions: Some VS Code extensions may add support for additional URL parameters.
+    */
+    let path = `vscode://file/${sourceInfo.sourceFileName}`;
+    if (sourceInfo.lineNumber) {
+        path += `:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;
+        path += `?selection=${sourceInfo.lineNumber},${sourceInfo.columnNumber}`;
+    }
+    return path;
+}
+
+interface DecodedMapping {
+    generatedLine: number;
+    generatedColumn: number;
+    sourceIndex: number;
+    sourceLine: number;
+    sourceColumn: number;
+    nameIndex?: number;
+}
+
+function decodeVLQ(str: string): number[] {
+    const vlqMap = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+    const decoded: number[] = [];
+    let shift = 0;
+    let value = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        const integer = vlqMap.indexOf(str[i]);
+        value += (integer & 31) << shift;
+        if (integer & 32) {
+            shift += 5;
+        } else {
+            const shouldNegate = value & 1;
+            value >>>= 1;
+            decoded.push(shouldNegate ? -value : value);
+            shift = 0;
+            value = 0;
+        }
+    }
+
+    return decoded;
+}
+
+function decodeSourceMapString(mappings: string): DecodedMapping[] {
+    const lines = mappings.split(";");
+    const decodedMappings: DecodedMapping[] = [];
+    let generatedLine = 0;
+    let generatedColumn = 0;
+    let sourceIndex = 0;
+    let sourceLine = 0;
+    let sourceColumn = 0;
+    let nameIndex = 0;
+
+    for (const line of lines) {
+        generatedColumn = 0;
+        const segments = line.split(",");
+
+        for (const segment of segments) {
+            if (segment.length === 0) continue;
+
+            const decoded = decodeVLQ(segment);
+            generatedColumn += decoded[0];
+
+            const mapping: DecodedMapping = {
+                generatedLine,
+                generatedColumn,
+                sourceIndex,
+                sourceLine,
+                sourceColumn,
+            };
+
+            if (decoded.length > 1) {
+                sourceIndex += decoded[1];
+                sourceLine += decoded[2];
+                sourceColumn += decoded[3];
+                mapping.sourceIndex = sourceIndex;
+                mapping.sourceLine = sourceLine;
+                mapping.sourceColumn = sourceColumn;
+            }
+
+            if (decoded.length > 4) {
+                nameIndex += decoded[4];
+                mapping.nameIndex = nameIndex;
+            }
+
+            decodedMappings.push(mapping);
+        }
+
+        generatedLine++;
+    }
+
+    return decodedMappings;
+}
+
+
+function findMappedPosition(sourceMap: SourceMap, position: {
+    line: number;
+    column: number;
+}): {
+    line: number;
+    column: number;
+} | null {
+    const decodedMappings = decodeSourceMapString(sourceMap.mappings);
+    let indexAfter = decodedMappings.findIndex(
+        ({ generatedLine, generatedColumn }) =>
+            generatedLine > position.line || (generatedLine === position.line && generatedColumn >= position.column)
+    );
+    if (indexAfter === -1) {
+        indexAfter = decodedMappings.length;
+    }
+    const mapping = decodedMappings[indexAfter - 1];
+    if (!mapping) {
+        return null;
+    }
+    return {
+        line: mapping.sourceLine,
+        column: mapping.sourceColumn,
+    };
+}
+
+
+interface SourceMap {
+    version: number;
+    file?: string;
+    sourceRoot?: string;
+    sources: string[];
+    names: string[];
+    mappings: string;
+    sourcesContent?: string[];
+}
+function parseSourceMap(code: string): SourceMap | null {
+    const sourceMappingURL = "//# sourceMappingURL=data:application/json;base64,";
+    const index = code.lastIndexOf(sourceMappingURL);
+
+    if (index === -1) {
+        return null;
+    }
+    let endIndex = code.indexOf("\n", index);
+
+    const base64Start = index + sourceMappingURL.length;
+    const base64Data = code.slice(base64Start, endIndex).trim();
+
+    try {
+        const sourceMapData = Buffer.from(base64Data, "base64").toString("utf-8");
+        return JSON.parse(sourceMapData) as SourceMap;
+    } catch (error) {
+        console.error("Failed to decode or parse source map:", error);
+        return null;
+    }
+}
+
+function getCallerInfo(config: {
+    sourceCode?: string;
+    callStack?: string;
+}): {
+    columnNumber: number;
+    lineNumber: number;
+} | undefined {
+    let stack = config.callStack;
+    if (!stack) return undefined;
+    let lines = stack.split("\n");
+    let line = lines[3];
+    let match = line.match(/(?::(\d+):(\d+))(?!.*:\d+:\d+)/);
+    if (!match) return { columnNumber: 0, lineNumber: 0 };
+    // Apply the sourcemap, if it exists
+    let lineNumber = Number(match[1]);
+    let columnNumber = Number(match[2]);
+    if (!lineNumber || !columnNumber) return undefined;
+    let sourceCode = config.sourceCode;
+    let sourceMap = parseSourceMap(sourceCode || "");
+    if (sourceMap) {
+        let position = findMappedPosition(sourceMap, { line: lineNumber - 1, column: columnNumber - 1 });
+        if (position) {
+            lineNumber = position.line + 1;
+            columnNumber = position.column + 1;
+        }
+    }
+    return { columnNumber, lineNumber };
+}
+
+// #endregion
+
+
+// #region Unsynced
+
+let unsyncedComponents = new Set<QRenderClass>();
+let triggeringUnsynced = false;
+function triggerUnsyncedNow() {
+    if (triggeringUnsynced) return;
+    triggeringUnsynced = true;
+    setImmediate(() => {
+        triggeringUnsynced = false;
+        Querysub.commit(() => {
+            schema()[LOCAL_DOMAIN].unsyncedSeqNum++;
+        });
+    });
+}
+function watchUnsyncedComponents(): Set<ExternalRenderClass> {
+    schema()[LOCAL_DOMAIN].unsyncedSeqNum;
+    return unsyncedComponents;
+}
+function componentRendered(component: QRenderClass) {
+    if (component.disposed || Querysub.isAllSynced()) {
+        if (unsyncedComponents.has(component)) {
+            unsyncedComponents.delete(component);
+            triggerUnsyncedNow();
+        }
+    } else {
+        // NOTE: By only checking for has it means if the synced path count changes
+        //  we won't trigger. This is fine, presently the indicator only uses the count, and
+        //  we don't want to spend extra time triggering when we are clearly already lagging
+        //  (because we have unsynced components).
+        if (!unsyncedComponents.has(component)) {
+            unsyncedComponents.add(component);
+            triggerUnsyncedNow();
+        }
+    }
+}
+
+// #endregion
+
+
+// #region Stats
+let pendingStats = new Map<string, {
+    count: number;
+    sum: number;
+}>();
+function registerComponentStats(type: string, time: number) {
+    if (!qreact.DEBUG_TIME) return;
+    let entry = pendingStats.get(type);
+    if (!entry) {
+        pendingStats.set(type, entry = { count: 0, sum: 0 });
+    }
+    entry.count++;
+    entry.sum += time;
+}
+
+if (isClient()) {
+    setImmediate(() => {
+        let loopStart = 0;
+        clientWatcher.onLoopStart(() => {
+            if (!qreact.DEBUG_TIME) return;
+            loopStart = Date.now();
+        });
+        clientWatcher.onLoopEnd(info => {
+            if (!qreact.DEBUG_TIME) return;
+            let stats = Array.from(pendingStats.entries());
+            if (stats.length === 0) return;
+            sort(stats, x => -x[1].sum);
+
+            let totalTime = stats.reduce((total, [type, { sum }]) => total + sum, 0);
+
+            if (totalTime > qreact.DEBUG_TIME) {
+
+                let remaining = stats.splice(10, stats.length);
+                let textParts: string[] = [];
+                let loopTime = Date.now() - loopStart;
+                textParts.push(`Render in ${blue(formatTime(totalTime))} (${green(formatPercent(totalTime / loopTime))} of ${formatTime(loopTime)} loop time)`);
+                for (let stat of stats) {
+                    let [type, { count, sum }] = stat;
+                    textParts.push(`${type}(${count}) ${blue(formatTime(sum))} // ${green(formatPercent(sum / totalTime))}`);
+                }
+                let remainingSum = remaining.reduce((total, [type, { sum }]) => total + sum, 0);
+                textParts.push(`Remaining ${blue(formatTime(remainingSum))} // ${green(formatPercent(remainingSum / totalTime))}`);
+
+                console.log(textParts.join("   |   "));
+            }
+
+            pendingStats.clear();
+        });
+    });
+}
+
+// #endregion