querysub 0.702.0 → 0.704.0

package/package.json

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

package/src/4-dom/qreact.tsx

@@ -760,11 +760,11 @@ class QRenderClass {
                             if (equalJSON) {
                                 // ALSO, we need to make sure the change WAS only because of props...
                                 let changes = renderWatcher.triggeredByChanges;
-                                let propsPath = isValueProxy2(props)!;
+                                let propsPath = getProxyPath(() => self.data().props);
                                 let onlyPropsChanges = (
-                                    Array.from(changes?.newParentsSynced || []).every(p => p.startsWith(propsPath))
+                                    !Array.from(changes?.newParentsSynced || []).some(p => p !== propsPath)
                                     && !changes?.extraReasons?.length
-                                    && Array.from(changes?.paths || []).every(p => p.startsWith(propsPath))
+                                    && !Array.from(changes?.paths || []).some(p => p !== propsPath)
                                 );
                                 if (onlyPropsChanges) {
                                     proxyWatcher.reuseLastWatches();
@@ -856,7 +856,8 @@ class QRenderClass {
                         for (let [key, value] of Object.entries(vNode.props)) {
                             rawProps[key] = value;
                         }
-                        if (statics.deepProps) {
+                        let childStatics = vNode.type as QComponentStatic;
+                        if (childStatics.deepProps) {
                             // NOTE: By removing atomic we can leverage the proxy automatically decomposing
                             //  the props to each individual primitive value.
                             doProxyOptions({ atomicWrites: false }, () => {
@@ -864,6 +865,10 @@ class QRenderClass {
                                 props = syncedData.props;
                             });
                         } else {
+                            let atomicProps = childStatics.atomicSetProps || childStatics.jsonComparePropUpdates;
+                            if (atomicProps) {
+                                syncedData.props = vNode.props;
+                            }
                             // 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).
@@ -873,7 +878,9 @@ class QRenderClass {
                                 if (key === "className") {
                                     value = String(value);
                                 }
-                                syncedData.props[key] = value;
+                                if (!atomicProps) {
+                                    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, {

package/src/library-components/UsageBar.tsx

@@ -3,8 +3,8 @@ import { css } from "typesafecss";
 import { formatNumber } from "socket-function/src/formatting/format";
 
 const FLASH_CLASS_NAME = "UsageBar-flash";
-const SUB_BAR_HEIGHT_PERCENT = 35;
-const SUB_BAR_ALPHA = 0.3;
+const SUB_BAR_HUE = 210;
+const SUB_BAR_ALPHA = 0.35;
 
 export const MEMORY_WARNING_THRESHOLD = 0.7;
 export const MEMORY_ERROR_THRESHOLD = 0.85;
@@ -56,11 +56,10 @@ export class UsageBar extends qreact.Component<{
                 + (isError && (" " + FLASH_CLASS_NAME) || "")
             } />
             {subValue !== undefined && <div className={
-                css.absolute.pos(0, `${100 - SUB_BAR_HEIGHT_PERCENT}%`).size(`${Math.min(subFraction, 1) * 100}%`, `${SUB_BAR_HEIGHT_PERCENT}%`).hsla(0, 0, 0, SUB_BAR_ALPHA)
+                css.absolute.pos(0, 0).size(`${Math.min(subFraction, 1) * 100}%`, "100%").hsla(SUB_BAR_HUE, 80, 55, SUB_BAR_ALPHA)
             } />}
-            <div className={css.relative}>
-                {label} ({formatNumber(value)}{suffix} / {formatNumber(max)}{suffix})
-                {subValue !== undefined && <span className={css.opacity(0.75)}>, {subLabel || "sub"} {formatNumber(subValue)}{suffix}</span>}
+            <div className={css.relative} title={subValue !== undefined ? `${subLabel || "sub"} / used / total` : "used / total"}>
+                {label} ({subValue !== undefined && <span className={css.opacity(0.75)}>{formatNumber(subValue)}{suffix} / </span>}{formatNumber(value)}{suffix} / {formatNumber(max)}{suffix})
             </div>
             {isError && <style>{`
                 @keyframes ${FLASH_CLASS_NAME}-anim {