querysub 0.52.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/0-path-value-core/pathValueCore.ts

@@ -15,7 +15,7 @@ import { markArrayAsSplitable } from "socket-function/src/fixLargeNetworkCalls";
 import { registerDynamicResource, registerMapArrayResource, registerResource } from "../diagnostics/trackResources";
 import { binarySearchIndex, isNode, isNodeTrue, last, promiseObj, sort, timeInHour, timeInMinute, timeInSecond, QueueLimited } from "socket-function/src/misc";
 import { isNodeTrusted, isTrusted, isTrustedByNode } from "../-d-trust/NetworkTrust2";
-import { AuthorityPath, LOCAL_DOMAIN_PATH, pathValueAuthority2 } from "./NodePathAuthorities";
+import { AuthorityPath, LOCAL_DOMAIN, LOCAL_DOMAIN_PATH, pathValueAuthority2 } from "./NodePathAuthorities";
 import { pathValueSerializer } from "../-h-path-value-serialize/PathValueSerializer";
 import { isNoNetwork } from "../config";
 import { formatTime } from "socket-function/src/formatting/format";
@@ -1126,6 +1126,7 @@ class PathWatcher {
     }>());
     // If we don't limit the length, then this will memory leak. And if we only track
     //  the values in watchers, then rolling key syncs will be lost.
+    // DOES NOT track local values, as they are used internally, but we aren't waiting for them to be synced.
     private syncHistoryForHarvest = new QueueLimited<{ start: number; end: number; path: string; }>(1_000_000);
     private syncHistoryForDebug = new QueueLimited<{ start: number; end: number; path: string; }>(1_000_000);
 
@@ -1396,7 +1397,7 @@ class PathWatcher {
         for (let value of valuesChanged) {
             let path = value.path;
             let latestWatches = this.watchers.get(path);
-            if (config?.pathsAreSynced && latestWatches && !latestWatches.receivedTime) {
+            if (config?.pathsAreSynced && latestWatches && !latestWatches.receivedTime && !path.startsWith(LOCAL_DOMAIN_PATH)) {
                 latestWatches.receivedTime = time;
                 let obj = { start: latestWatches.requestedTime, end: time, path };
                 this.syncHistoryForHarvest.push(obj);

package/src/2-proxy/PathValueProxyWatcher.ts

@@ -516,8 +516,9 @@ export class PathValueProxyWatcher {
     public getCallback = (pathStr: string, syncParentKeys?: "parentKeys", readTransparent?: "readTransparent"): { value: unknown } | undefined => {
         if (PathValueProxyWatcher.BREAK_ON_READS.size > 0 && proxyWatcher.isAllSynced()) {
             if (isRecursiveMatch(PathValueProxyWatcher.BREAK_ON_READS, pathStr)) {
-                const unwatch = () => PathValueProxyWatcher.BREAK_ON_READS.delete(pathStr); unwatch;
+                const unwatch = () => removeMatches(PathValueProxyWatcher.BREAK_ON_READS, pathStr);
                 debugger;
+                unwatch;
             }
         }
         const watcher = this.runningWatcher;
@@ -591,14 +592,15 @@ export class PathValueProxyWatcher {
     private setCallback = (pathStr: string, value: unknown, inRecursion = false, allowSpecial = false): void => {
         if (PathValueProxyWatcher.BREAK_ON_WRITES.size > 0 && proxyWatcher.isAllSynced()) {
             if (isRecursiveMatch(PathValueProxyWatcher.BREAK_ON_WRITES, pathStr)) {
-                let unwatch = () => PathValueProxyWatcher.BREAK_ON_WRITES.delete(pathStr); unwatch;
+                let unwatch = () => removeMatches(PathValueProxyWatcher.BREAK_ON_WRITES, pathStr);
                 debugger;
+                unwatch;
             }
         }
 
         if (PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.size > 0 && proxyWatcher.isAllSynced()) {
             if (isRecursiveMatch(PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES, pathStr)) {
-                let unwatch = () => PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.delete(pathStr); unwatch;
+                let unwatch = () => removeMatches(PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES, pathStr);
                 PathValueProxyWatcher.BREAK_ON_CALL.add(
                     getPathStr2(getCurrentCall().ModuleId, getCurrentCall().FunctionId)
                 );
@@ -607,7 +609,7 @@ export class PathValueProxyWatcher {
 
         if (PathValueProxyWatcher.LOG_WRITES_INCLUDES.size > 0 && proxyWatcher.isAllSynced()) {
             if (isRecursiveMatch(PathValueProxyWatcher.LOG_WRITES_INCLUDES, pathStr)) {
-                let unwatch = () => PathValueProxyWatcher.LOG_WRITES_INCLUDES.delete(pathStr); unwatch;
+                let unwatch = () => removeMatches(PathValueProxyWatcher.LOG_WRITES_INCLUDES, pathStr);
                 console.log(`Write path "${pathStr}" = ${value}`);
             }
         }
@@ -1709,6 +1711,7 @@ export class PathValueProxyWatcher {
         }
         return watcher;
     }
+
     public isAllSynced() {
         return !this.getTriggeredWatcher().hasAnyUnsyncedAccesses();
     }
@@ -1720,6 +1723,41 @@ export class PathValueProxyWatcher {
         return this.runningWatcher;
     }
 
+    /** Watches everything we were watching last watch. Is essential for efficient watching code,
+     *      which needs access to a lot of state, but doesn't want to process the entire state
+     *      every time any value changes.
+     */
+    public reuseLastWatches() {
+        let watcher = this.getTriggeredWatcher();
+        for (let path of watcher.lastUnsyncedAccesses) {
+            if (!authorityStorage.isSynced(path)) {
+                watcher.pendingUnsyncedAccesses.add(path);
+            }
+        }
+        for (let path of watcher.lastUnsyncedParentAccesses) {
+            if (!authorityStorage.isParentSynced(path)) {
+                watcher.pendingUnsyncedParentAccesses.add(path);
+            }
+        }
+
+
+        function efficientSetMerge(set1: Set<string>, set2: Set<string>) {
+            let bigSet = set1.size > set2.size ? set1 : set2;
+            let smallSet = set1.size > set2.size ? set2 : set1;
+            for (let path of smallSet) {
+                bigSet.add(path);
+            }
+            return bigSet;
+        }
+
+        // NOTE: If we don't clone, then pathValueClientWatcher cannot detect changes, and we
+        //  end up staying watched on everything!
+        //  - We should really fix this though, as if we can avoid this clone, we can have really efficient
+        //      incremental watches.
+        watcher.pendingWatches.paths = efficientSetMerge(watcher.pendingWatches.paths, new Set(watcher.lastWatches.paths));
+        watcher.pendingWatches.parentPaths = efficientSetMerge(watcher.pendingWatches.parentPaths, new Set(watcher.lastWatches.parentPaths));
+    }
+
     /** NOTE: This explicitly causes the watcher to be unsynced until function
      *      can be evaluated without any pending promises. This makes this significantly
      *      more powerful than waiting on localState.

package/src/3-path-functions/PathFunctionRunner.ts

@@ -223,25 +223,9 @@ export class PathFunctionRunner {
                 //  so that it is automatically done at the start of our trigger.
                 const watcher = proxyWatcher.getTriggeredWatcher();
 
-                // Preserve previous watches explicitly (so we don't have to use the proxy, which would be slower)
-                {
-                    for (let path of watcher.lastUnsyncedAccesses) {
-                        if (!authorityStorage.isSynced(path)) {
-                            watcher.pendingUnsyncedAccesses.add(path);
-                        }
-                    }
-                    for (let path of watcher.lastUnsyncedParentAccesses) {
-                        if (!authorityStorage.isParentSynced(path)) {
-                            watcher.pendingUnsyncedParentAccesses.add(path);
-                        }
-                    }
-                    // NOTE: If we don't clone, then pathValueClientWatcher cannot detect changes, and we
-                    //  end up staying watched on everything!
-                    watcher.pendingWatches.paths = new Set(watcher.lastWatches.paths);
-                    watcher.pendingWatches.parentPaths = new Set(watcher.lastWatches.parentPaths);
-                }
-
-
+                // Preserve previous watches explicitly (so we just do a diff, instead of accessing every
+                //  value every time).
+                proxyWatcher.reuseLastWatches();
 
                 let data = () => functionSchema()[domainName].PathFunctionRunner;
 

package/src/4-dom/qreact.tsx

@@ -75,6 +75,10 @@ export type VirtualDOM = VirtualDOMBase | VirtualDOMBase[];
 type GetTFromAttributes<T> = T extends preact.JSX.HTMLAttributes<infer U> ? U : never;
 
 export namespace qreact {
+    export type VNode = preact.ComponentChildren;
+    export type ComponentChildren = preact.ComponentChildren;
+    export type VDom = preact.ComponentChildren;
+    export type Component = InstanceType<typeof Component>;
     export namespace JSX {
         export type IntrinsicElements = {
             [key in keyof preact.JSX.IntrinsicElements]: (
@@ -129,6 +133,7 @@ export interface QComponentStatic {
      *      - 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
@@ -196,6 +201,8 @@ export class qreact {
     public static hasEventHandlers = hasEventHandlers;
     public static getCurrentComponentId = getCurrentComponentId;
 
+    public static cancelRender = cancelRender;
+
     public static allComponents = new Set<ExternalRenderClass>();
 
     public static DEBUG_TIME = 0;
@@ -319,6 +326,8 @@ export type ExternalRenderClass = {
     readonly mountDOMWatcher: SyncWatcher;
     readonly debugName: string;
     readonly instance: preact.Component<{ [key: string]: unknown }>;
+    readonly childComponents: Map<VirtualDOM, number>;
+    getInstance(id: number): ExternalRenderClass | undefined;
     getVSCodeLink(): string | undefined;
     // TODO: We can add more types here as needed, exposing parts of QRenderClass which
     //  are safe for external callers to access.
@@ -377,6 +386,11 @@ if (!isNode()) {
     document.addEventListener("mouseup", () => mouseIsDown = false);
 }
 
+let cancelNextRender = false;
+function cancelRender() {
+    cancelNextRender = true;
+}
+
 
 let renderClasses = new Map<number, QRenderClass>();
 // NOTE: In theory this COULD BE our root Component, but... it makes compatibility easier
@@ -552,6 +566,7 @@ class QRenderClass {
 
                 if (self.disposed || self.disposing) return;
                 let vNode: VirtualDOM;
+                cancelNextRender = false;
                 try {
                     let time = Date.now();
                     QRenderClass.renderingComponentId = self.id;
@@ -565,6 +580,11 @@ class QRenderClass {
                     }
                     registerOwnTime("render", time);
 
+                    if (cancelNextRender) {
+                        // Simple by NOT writing to vNodeForRender, we cancel the render
+                        return;
+                    }
+
                     time = Date.now();
 
                     vNode = QRenderClass.normalizeVNode({ vNode, array: true });
@@ -579,6 +599,7 @@ class QRenderClass {
                     vNode = QRenderClass.normalizeVNode({ vNode, array: true });
                 } finally {
                     QRenderClass.renderingComponentId = undefined;
+                    cancelNextRender = true;
                 }
 
                 self.data().vNodeForRender = atomicObjectWriteNoFreeze({ value: vNode });
@@ -1475,6 +1496,11 @@ class QRenderClass {
         if (!instance) throw new Error(`Could not find component with id ${id}`);
         return instance;
     }
+    public 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];
     }
@@ -2055,7 +2081,7 @@ export function getSourceVSCodeLink(element: DOMNode | undefined) {
             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}`;
+    let path = `cursor://file/${sourceInfo.sourceFileName}`;
     if (sourceInfo.lineNumber) {
         path += `:${sourceInfo.lineNumber}:${sourceInfo.columnNumber}`;
         path += `?selection=${sourceInfo.lineNumber},${sourceInfo.columnNumber}`;

package/src/4-querysub/Querysub.ts

@@ -182,9 +182,11 @@ export class Querysub {
     public static debugWrites = (value: unknown) => proxyWatcher.debug_breakOnWrite(value);
     public static breakOnWrite = (value: unknown) => proxyWatcher.debug_breakOnWrite(value);
     public static logWrites = (value: unknown) => proxyWatcher.debug_logOnWrite(value);
+    public static reuseLastWatches = () => proxyWatcher.reuseLastWatches();
 
     public static watchUnsyncedComponents = () => qreact.watchUnsyncedComponents();
     public static watchAnyUnsyncedComponents = () => qreact.watchUnsyncedComponents().size > 0;
+    public static cancelRender = () => qreact.cancelRender();
 
     public static doAtomicWrites = <T>(callback: () => T): T => doAtomicWrites(callback);
 

package/src/5-diagnostics/Table.tsx

@@ -83,15 +83,18 @@ export class Table<RowT extends RowType> extends qreact.Component<TableType<RowT
                             if (
                                 canHaveChildren(innerContent) && "props" in innerContent
                                 && canHaveChildren(innerContent.props)
-                                && "children" in innerContent.props
-                                && (
-                                    Array.isArray(innerContent.props.children) && innerContent.props.children.length === 1
-                                    || !Array.isArray(innerContent.props.children)
-                                )
-                                // AND, it is a div or span (a tags shouldn't be unwrapped)
+                                // NOTE: I'm not sure why we were only elevating the children if we only had 1 child?
+                                //  Changing this will break things, but it should be better overall.
+                                // && "children" in innerContent.props
+                                // && (
+                                //     Array.isArray(innerContent.props.children) && innerContent.props.children.length === 1
+                                //     || !Array.isArray(innerContent.props.children)
+                                // )
+                                // AND, it is a div (a tags shouldn't be unwrapped)
                                 && (innerContent.type === "div")
                             ) {
-                                attributes.class += " " + innerContent.props.class;
+                                attributes.class += " " + (innerContent.props.class || "");
+                                attributes.class += " " + (innerContent.props.className || "");
                                 let baseOnClick = attributes.onClick;
                                 let props = innerContent.props;
                                 attributes.onClick = (e) => {

package/src/5-diagnostics/qreactDebug.tsx

@@ -20,6 +20,7 @@ import { isCallerDynamicModule, isDynamicModule } from "../3-path-functions/path
 
 // Map, so hot reloading doesn't break things
 let componentButtons = new Map<string, { title: string, callback: (component: ExternalRenderClass) => void }>();
+let componentUIs = new Map<string, (component: ExternalRenderClass) => qreact.ComponentChildren>();
 
 export function addComponentButton(config: {
     title: string;
@@ -32,6 +33,17 @@ export function addComponentButton(config: {
     componentButtons.set(config.title, config);
 }
 
+export function addComponentUI(config: {
+    key: string;
+    createUI: (component: ExternalRenderClass) => qreact.ComponentChildren;
+}) {
+    if (isCallerDynamicModule()) return;
+    if (!isHotReloading() && componentUIs.has(config.key)) {
+        throw new Error(`Component UI with key ${config.key} already exists`);
+    }
+    componentUIs.set(config.key, config.createUI);
+}
+
 export const enableDebugComponents = lazy(function enableDebugComponents() {
     console.log(magenta(`middleclick + shift on components to debug them`));
     // mousedown is more reliable than click, because the click will be aborted if they middle click
@@ -197,12 +209,13 @@ class WatchModal extends qreact.Component<{
                         <Button onClick={() => component.instance.forceUpdate()}>
                             Rerender
                         </Button>
-                        {componentButtons.size > 0 && Array.from(componentButtons.values()).map(({ title, callback }) => (
+                        {Array.from(componentButtons.values()).map(({ title, callback }) => (
                             <Button onClick={() => callback(component)}>
                                 {title}
                             </Button>
                         ))}
                     </div>
+                    {Array.from(componentUIs.values()).map((createUI) => createUI(component))}
 
 
                     <InputLabelURL hot label="Filter" url={pathFilter} />

package/src/library-components/ATag.tsx

@@ -23,6 +23,7 @@ export type ATagProps = (
          *      it results in a page load on click.
          */
         rawLink?: boolean;
+        lightMode?: boolean;
     }
 );
 
@@ -33,14 +34,16 @@ export class ATag extends qreact.Component<ATagProps> {
             return <div {...props as any}>{children}</div>;
         }
         let isCurrent = values?.every(value => value.param.value === value.value);
+        let lightness = props.lightMode ? 40 : 80;
         return (
             <a
                 tabIndex={0}
                 {...props}
                 className={
-                    (isCurrent ? css.color("hsl(110, 75%, 80%)") : css.color("hsl(210, 100%, 80%)"))
+                    (isCurrent ? css.color(`hsl(110, 75%, ${lightness}%)`) : css.color(`hsl(210, 100%, ${lightness}%)`))
                     + css.textDecoration("none")
-                        .textDecoration("underline", "hover").outline("3px solid hsl(204, 100%, 50%)", "focus")
+                        .textDecoration("underline", "hover")
+                        .outline("3px solid hsl(204, 100%, 50%)", "focus")
                     + (props.className ?? props.class)
 
                 }

package/src/library-components/ButtonSelector.tsx

@@ -31,6 +31,7 @@ export class ButtonSelector<T> extends qreact.Component<{
                             .border("1px solid hsl(0, 0%, 5%)").pad(4, 6)
                             .color("white")
                     }
+                    title={String(selectedValue)}
                 >
                     {title}
                 </div>}