querysub 0.175.0 → 0.177.0

package/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference path="./node_modules/socket-function/index.d.ts" />
+
+export { };
+
+declare global {
+    interface SerializedModule {
+        originalSource?: string;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.175.0",
+  "version": "0.177.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -24,7 +24,7 @@
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
     "preact": "^10.11.3",
-    "socket-function": "^0.122.0",
+    "socket-function": "^0.124.0",
     "terser": "^5.31.0",
     "typesafecss": "^0.15.0",
     "yaml": "^2.5.0",

package/src/4-dom/qreact.tsx

@@ -96,6 +96,9 @@ export namespace qreact {
         export type Element = preact.JSX.Element;
         export type HTMLAttributes<T extends EventTarget = EventTarget> = preact.JSX.HTMLAttributes<T>;
     }
+    export namespace JSXInternal {
+        export type TargetedInputEvent<T extends EventTarget = EventTarget> = preact.JSX.TargetedInputEvent<T>;
+    }
 }
 
 
@@ -911,7 +914,7 @@ class QRenderClass {
                 }
 
                 function insertInAnchor(anchor: Anchor, node: DOMNode) {
-                    let prev = document.activeElement;
+                    //let prevFocused = document.activeElement;
                     if (!anchor) {
                         nextRootDOMNodes.push(node);
                         return;
@@ -958,9 +961,9 @@ class QRenderClass {
                     }
 
                     anchor.prev.after(node);
-                    if (prev !== document.activeElement) {
-                        debugger;
-                    }
+                    // if (prevFocused !== document.activeElement) {
+                    //     debugger;
+                    // }
                 }
 
                 let isParentSVG = !!atomic(self.data().isParentSVG);
@@ -1859,9 +1862,11 @@ function updateDOMNodeFields(domNode: DOMNode, vNode: VirtualDOM, prevVNode: Vir
             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))`?
+        // NOTE: By setting textContent we don't create a new Text node. This helps
+        //  contentEditable usages distinguish between our internal nodes, and ones
+        //  generated by contentEditable.
         (domNode as any as Text).textContent = String(vNode);
+        //domNode.replaceWith(document.createTextNode(String(vNode)));
     }
 }
 

package/src/4-querysub/Querysub.ts

@@ -10,7 +10,7 @@ import { isNode, isNodeTrue, timeInMinute } from "socket-function/src/misc";
 
 import { SocketFunction } from "socket-function/SocketFunction";
 import { isHotReloading, watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadController";
-import { RequireController, SerializedModule, setRequireBootRequire } from "socket-function/require/RequireController";
+import { RequireController, setRequireBootRequire } from "socket-function/require/RequireController";
 import { cache, cacheLimited, lazy } from "socket-function/src/caching";
 import { getOwnMachineId, getThreadKeyCert, verifyMachineIdForPublicKey } from "../-a-auth/certs";
 import { getSNICerts, publishMachineARecords } from "../-e-certs/EdgeCertController";
@@ -390,8 +390,9 @@ export class Querysub {
 
     public static afterAllRendersFinished(callback: () => void) {
         // onCommitFinished prevents duplicates, as well as only running when we are actually done
-        Querysub.onCommitFinished(() => {
-            void clientWatcher.waitForTriggerFinished()?.finally(callback);
+        Querysub.onCommitFinished(async () => {
+            await clientWatcher.waitForTriggerFinished();
+            callback();
         });
     }
 
@@ -599,6 +600,21 @@ export class Querysub {
 
         await this.addSourceMapCheck(config);
 
+        const fs = await import("fs");
+
+        RequireController.addMapGetModules(async (result, args) => {
+            await Promise.all(Object.values(result.modules).map(async (mod) => {
+                if (!mod.allowclient) return;
+                if (mod.serveronly) return;
+                // NOTE: This is used for extractType... which is very useful. And... giving the source
+                //  isn't that big of a deal anyways...
+                try {
+                    mod.originalSource = await fs.promises.readFile(mod.filename, "utf8");
+                } catch { }
+            }));
+            return result;
+        });
+
         SocketFunction.expose(RequireController);
         setRequireBootRequire(config.rootPath);
 

package/src/library-components/Button.tsx

@@ -69,106 +69,109 @@ type Watcher = {
 let registeredWatches = new Set<Watcher>();
 
 if (!isNode()) {
-    let insideAnims = new Set<Watcher>();
-    let keyUpListener = new Set<() => void>();
     document.addEventListener("keyup", e => {
         for (let listener of keyUpListener) {
             listener();
         }
     });
     document.addEventListener("keydown", e => {
-        let isAmbientEvent = (
-            e.target === document.body
-            // Some elements are commonly selected, but shouldn't handling key events
-            || (e.target as HTMLElement).tagName === "BUTTON"
-            || (e.target as HTMLElement).tagName === "A"
-            || (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "checkbox"
-            //|| (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "number" && Number.isNaN(+e.key) && !e.key.includes("Arrow")
-            //|| ["INPUT", "TEXTAREA"].includes((e.target as HTMLElement).tagName)
-        );
-        if (e.key === "Escape") {
-            (document.activeElement as any)?.blur();
-        }
-        let keyFull = e.code;
-        if (keyFull.startsWith("Key")) {
-            keyFull = keyFull.slice("Key".length);
-        }
-        if (e.metaKey) keyFull = "meta+" + keyFull;
-        if (e.altKey) keyFull = "alt+" + keyFull;
-        if (e.shiftKey) keyFull = "shift+" + keyFull;
-        if (e.ctrlKey || e.metaKey) keyFull = "ctrl+" + keyFull;
-        if (!isAmbientEvent) {
-            trigger("global+" + keyFull);
-        } else {
-            trigger("global+" + keyFull);
-            trigger(keyFull);
-        }
+        triggerKeyDown(e, false);
+    });
+}
+let insideAnims = new Set<Watcher>();
+let keyUpListener = new Set<() => void>();
+export function triggerKeyDown(e: KeyboardEvent, forceAmbient = true) {
+    let isAmbientEvent = (
+        e.target === document.body
+        // Some elements are commonly selected, but shouldn't handling key events
+        || (e.target as HTMLElement).tagName === "BUTTON"
+        || (e.target as HTMLElement).tagName === "A"
+        || (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "checkbox"
+        //|| (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "number" && Number.isNaN(+e.key) && !e.key.includes("Arrow")
+        //|| ["INPUT", "TEXTAREA"].includes((e.target as HTMLElement).tagName)
+    ) || forceAmbient;
+    if (e.key === "Escape") {
+        (document.activeElement as any)?.blur();
+    }
+    let keyFull = e.code;
+    if (keyFull.startsWith("Key")) {
+        keyFull = keyFull.slice("Key".length);
+    }
+    if (e.metaKey) keyFull = "meta+" + keyFull;
+    if (e.altKey) keyFull = "alt+" + keyFull;
+    if (e.shiftKey) keyFull = "shift+" + keyFull;
+    if (e.ctrlKey || e.metaKey) keyFull = "ctrl+" + keyFull;
+    if (!isAmbientEvent) {
+        trigger("global+" + keyFull);
+    } else {
+        trigger("global+" + keyFull);
+        trigger(keyFull);
+    }
 
-        function trigger(keyFull: string) {
-            keyFull = keyFull.toLowerCase();
-            let listeners = Array.from(registeredWatches).map(x => {
-                let props = Querysub.localRead(() => ({ ...x.props }), { allowProxyResults: true });
-                let match = props.hotkeys?.find(x => {
-                    let hotkey = x.toLowerCase();
-                    if (hotkey.endsWith("+toggle")) {
-                        hotkey = hotkey.slice(0, -"+toggle".length);
-                    }
-                    return hotkey === keyFull;
-                }) || "";
-                let hotkeyPriority = match && (
-                    props.hotkeyPriority
-                    ?? Querysub.localRead(() => qreact.getAncestorProps(ButtonHotkeyRegion, x)?.hotkeyPriority, { allowProxyResults: true })
-                    ?? Number.MIN_SAFE_INTEGER
-                ) || Number.MIN_SAFE_INTEGER;
-                return { match, listener: x, props, hotkeyPriority };
-            }).filter(x => x.match);
-            if (!listeners.length) return;
-            console.log(`Triggering hotkey ${JSON.stringify(keyFull)} for ${listeners.length} listeners`);
-            e.preventDefault();
-            e.stopPropagation();
-            let maxPriority = Array.from(listeners).reduce((a, b) => Math.max(a, b.hotkeyPriority), Number.MIN_SAFE_INTEGER);
-            listeners = listeners.filter(x => x.hotkeyPriority === maxPriority);
-            if (listeners.length === 0) return;
-            listeners = listeners.filter((x, index) => x.props.callEvenIfRedundant || index === listeners.length - 1);
-            for (let { match, listener, props } of listeners) {
-                if (insideAnims.has(listener)) continue;
-                listener.element?.click();
-                if (!keyFull.includes("global+")) {
-                    listener.element?.focus();
+    function trigger(keyFull: string) {
+        keyFull = keyFull.toLowerCase();
+        let listeners = Array.from(registeredWatches).map(x => {
+            let props = Querysub.localRead(() => ({ ...x.props }), { allowProxyResults: true });
+            let match = props.hotkeys?.find(x => {
+                let hotkey = x.toLowerCase();
+                if (hotkey.endsWith("+toggle")) {
+                    hotkey = hotkey.slice(0, -"+toggle".length);
                 }
-                if (match.includes("+toggle")) {
-                    function onKeyUp() {
-                        keyUpListener.delete(onKeyUp);
-                        listener.element?.click();
-                    }
-                    keyUpListener.add(onKeyUp);
+                return hotkey === keyFull;
+            }) || "";
+            let hotkeyPriority = match && (
+                props.hotkeyPriority
+                ?? Querysub.localRead(() => qreact.getAncestorProps(ButtonHotkeyRegion, x)?.hotkeyPriority, { allowProxyResults: true })
+                ?? Number.MIN_SAFE_INTEGER
+            ) || Number.MIN_SAFE_INTEGER;
+            return { match, listener: x, props, hotkeyPriority };
+        }).filter(x => x.match);
+        if (!listeners.length) return;
+        console.log(`Triggering hotkey ${JSON.stringify(keyFull)} for ${listeners.length} listeners`);
+        e.preventDefault();
+        e.stopPropagation();
+        let maxPriority = Array.from(listeners).reduce((a, b) => Math.max(a, b.hotkeyPriority), Number.MIN_SAFE_INTEGER);
+        listeners = listeners.filter(x => x.hotkeyPriority === maxPriority);
+        if (listeners.length === 0) return;
+        listeners = listeners.filter((x, index) => x.props.callEvenIfRedundant || index === listeners.length - 1);
+        for (let { match, listener, props } of listeners) {
+            if (insideAnims.has(listener)) continue;
+            listener.element?.click();
+            if (!keyFull.includes("global+")) {
+                listener.element?.focus();
+            }
+            if (match.includes("+toggle")) {
+                function onKeyUp() {
+                    keyUpListener.delete(onKeyUp);
+                    listener.element?.click();
                 }
-                if (Querysub.localRead(() => props.immediateRepeat)) {
-                    insideAnims.add(listener);
-                    let dead = false;
-                    function onKeyUp() {
-                        keyUpListener.delete(onKeyUp);
-                        insideAnims.delete(listener);
-                        dead = true;
-                    }
-                    keyUpListener.add(onKeyUp);
-                    let prevFrame = Date.now();
-                    function onFrame() {
-                        if (dead) {
-                            animationDuration = 0;
-                            return;
-                        }
-                        let now = Date.now();
-                        animationDuration = now - prevFrame;
-                        prevFrame = now;
-                        listener.element?.click();
-                        requestAnimationFrame(onFrame);
+                keyUpListener.add(onKeyUp);
+            }
+            if (Querysub.localRead(() => props.immediateRepeat)) {
+                insideAnims.add(listener);
+                let dead = false;
+                function onKeyUp() {
+                    keyUpListener.delete(onKeyUp);
+                    insideAnims.delete(listener);
+                    dead = true;
+                }
+                keyUpListener.add(onKeyUp);
+                let prevFrame = Date.now();
+                function onFrame() {
+                    if (dead) {
+                        animationDuration = 0;
+                        return;
                     }
+                    let now = Date.now();
+                    animationDuration = now - prevFrame;
+                    prevFrame = now;
+                    listener.element?.click();
                     requestAnimationFrame(onFrame);
                 }
+                requestAnimationFrame(onFrame);
             }
         }
-    });
+    }
 }
 
 let animationDuration = 0;

package/src/library-components/URLParam.ts

@@ -244,6 +244,9 @@ export function parseSearchString(search: string): { [key: string]: unknown } {
     let parts = search.split("&");
     let output: { [key: string]: string | undefined } = Object.create(null);
     for (let part of parts) {
+        if (part.endsWith("=")) {
+            part = part.slice(0, -1);
+        }
         let equalIndex = part.indexOf("=");
         if (equalIndex === -1) {
             output[decodeURIComponent(part)] = undefined;

package/src/niceStringify.ts

@@ -0,0 +1,83 @@
+// true => ""
+// "" => JSON.stringify("")
+
+export const niceStringifyTrue = "";
+// Starting/ending with a JSON character means anything string that looks like this
+//  will be encoded like: `"{Nan`, and it is impossible for an object to serialize to look like this.
+export const niceStringifyNan = `{NaN}`;
+export const niceStringifyUndefined = `{Undefined}`;
+
+
+// BUG: This is actually broken for hex strings. Hex strings may sometimes be entirely numbers,
+//  which means they will randomly change type.
+function looksLikeJSON(str: string) {
+    return (
+        str === "null"
+        || str === "true"
+        || str === "false"
+        || str[0] === `"` && str[str.length - 1] === `"`
+        || str[0] === `[` && str[str.length - 1] === `]`
+        || str[0] === `{` && str[str.length - 1] === `}`
+        || (48 <= str.charCodeAt(0) && str.charCodeAt(0) <= 57)
+        || str.length > 1 && str[0] === "-" && (48 <= str.charCodeAt(1) && str.charCodeAt(1) <= 57)
+        || str === niceStringifyTrue
+        || str === niceStringifyUndefined
+    );
+}
+
+export function niceStringify(value: unknown): string {
+    if (value === undefined) {
+        return niceStringifyUndefined;
+    }
+    if (value === true) return niceStringifyTrue;
+    if (Number.isNaN(value)) return niceStringifyNan;
+
+    // Any strings that don't look like JSON, don't need to encoded as JSON, and can instead
+    //  just be stored as strings.
+    if (typeof value === "string" && !looksLikeJSON(value)) {
+        return value;
+    }
+
+
+    let str = JSON.stringify(value);
+    if (typeof value !== "object") {
+        let testParse = niceParse(str);
+        if (testParse !== value) {
+            console.log(`niceStringify did not reverse correctly. Should have received ${JSON.stringify(value)}, did received ${JSON.stringify(testParse)}`);
+            debugger;
+        }
+    }
+
+    return str;
+}
+
+export function niceParse(str: string | undefined, noSpecialTrue = false): unknown {
+    if (str === undefined) {
+        return undefined;
+    }
+    if (str === niceStringifyTrue && !noSpecialTrue) return true;
+    if (str === niceStringifyNan) return Number.NaN;
+    if (str === niceStringifyUndefined) return undefined;
+    if (str === "") return str;
+
+    if (looksLikeJSON(str)) {
+        try {
+            return JSON.parse(str);
+        } catch { }
+    }
+    return str;
+}
+
+/*
+
+function setFromUrlValue(key: string, valueJSON: string) {
+    if(isMaybeJSON(valueJSON)) {
+        try {
+            values[key] = JSON.parse(valueJSON);
+            return;
+        } catch { }
+    }
+    // Always set it, if it isn't JSON, just assume it is raw text.
+    values[key] = valueJSON;
+}
+*/