npm - @jsenv/navi - Versions diffs - 0.29.12 → 0.29.14 - Mend

@jsenv/navi 0.29.12 → 0.29.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/jsenv_navi.js CHANGED Viewed

@@ -12042,6 +12042,13 @@ const mergeActionParams = (currentParams, newParams) => {
   if (currentParams === NO_PARAMS) {
     return newParams;
   }
+  if (newParams === undefined) {
+    // Every control binds its action to its UI state signal; a control that carries
+    // no value (a button) has an undefined one. It contributes no params, which must
+    // not be confused with "the params are undefined" — the params bound by
+    // bindParams stay in place.
+    return currentParams;
+  }
   return mergeTwoJsValues(currentParams, newParams);
 };
@@ -37767,7 +37774,16 @@ const FIXED_BAR_SPACE_CSS = /* css */ `
 // they overlap: the room to give back is the largest of them, not their sum,
 // and one leaving must leave the others' room in place.
 const sizeMapByArea = new Map();
+// What is currently on <html> for each area (absent = the variable is not set).
+// Writing the value that is already there would invalidate layout for nothing,
+// and several bars sharing an edge means most calls compute the same largest
+// size again — the ones for the smaller bars, and the second half of a page
+// transition.
+const writtenValueByArea = new Map();
+// A size that must land before the next paint: a render changed the bar, so
+// the room it takes is given back in that same commit and the content is never
+// painted under it.
 /**
  * @param {"top"|"bottom"|"left"|"right"} area
  * @param {Element} barElement - Which bar this size belongs to.
@@ -37775,6 +37791,65 @@ const sizeMapByArea = new Map();
  *   content.
  */
 const setFixedBarSpace = (area, barElement, size) => {
+  dropPendingSize(area, barElement);
+  storeSize(area, barElement, size);
+  writeSpace(area);
+};
+// A size nothing asked for, coming from a ResizeObserver. Writing the variable
+// resizes an ANCESTOR of the bars — the scroll container takes its padding
+// from it — and mutating layout from inside a resize callback is what makes
+// the browser report "ResizeObserver loop completed with undelivered
+// notifications". So the write waits for the frame that resize produced.
+// Queued here rather than deferred by each bar on its own, so the bars sharing
+// an edge resolve to a single write instead of one per bar.
+/**
+ * @param {"top"|"bottom"|"left"|"right"} area
+ * @param {Element} barElement - Which bar this size belongs to.
+ * @param {number} size - In px.
+ */
+const requestFixedBarSpace = (area, barElement, size) => {
+  let pendingSizeMap = pendingSizeMapByArea.get(area);
+  if (!pendingSizeMap) {
+    pendingSizeMap = new Map();
+    pendingSizeMapByArea.set(area, pendingSizeMap);
+  }
+  pendingSizeMap.set(barElement, size);
+  if (flushFrame !== null) {
+    return;
+  }
+  flushFrame = requestAnimationFrame(flushPendingSizes);
+};
+const pendingSizeMapByArea = new Map();
+let flushFrame = null;
+const flushPendingSizes = () => {
+  flushFrame = null;
+  for (const [area, pendingSizeMap] of pendingSizeMapByArea) {
+    for (const [barElement, size] of pendingSizeMap) {
+      storeSize(area, barElement, size);
+    }
+    writeSpace(area);
+  }
+  pendingSizeMapByArea.clear();
+};
+// What the bar itself just said wins over what its observer had queued about
+// it: a bar unmounting gives its room back, and a size queued for it before
+// that must not put it back.
+const dropPendingSize = (area, barElement) => {
+  const pendingSizeMap = pendingSizeMapByArea.get(area);
+  if (!pendingSizeMap) {
+    return;
+  }
+  pendingSizeMap.delete(barElement);
+  if (pendingSizeMap.size === 0) {
+    pendingSizeMapByArea.delete(area);
+  }
+};
+const storeSize = (area, barElement, size) => {
   let sizeMap = sizeMapByArea.get(area);
   if (!sizeMap) {
     sizeMap = new Map();
@@ -37785,7 +37860,10 @@ const setFixedBarSpace = (area, barElement, size) => {
   } else {
     sizeMap.set(barElement, size);
   }
+};
+const writeSpace = (area) => {
+  const sizeMap = sizeMapByArea.get(area);
   let largestSize = 0;
   for (const barSize of sizeMap.values()) {
     if (barSize > largestSize) {
@@ -37795,10 +37873,18 @@ const setFixedBarSpace = (area, barElement, size) => {
   const property = `--navi-fixed-bar-space-${area}`;
   const { style } = document.documentElement;
   if (sizeMap.size === 0) {
-    style.removeProperty(property);
-  } else {
-    style.setProperty(property, `${largestSize}px`);
+    if (writtenValueByArea.has(area)) {
+      writtenValueByArea.delete(area);
+      style.removeProperty(property);
+    }
+    return;
+  }
+  const value = `${largestSize}px`;
+  if (writtenValueByArea.get(area) === value) {
+    return;
   }
+  writtenValueByArea.set(area, value);
+  style.setProperty(property, value);
 };
 installImportMetaCssBuild(import.meta);/**
@@ -37974,27 +38060,40 @@ const FixedBar = ({
   // rebuilt as a calc() expression, so a size coming from anywhere — a prop, a
   // theme variable, the content itself — is reserved just the same, and each
   // `env()` inset stays the browser's business alone.
-  // And measured again whenever it changes: a ResizeObserver on the bar covers
-  // in one go a size prop that changes, content arriving or leaving, a font
-  // loading late, a rotation moving the notch.
   const vertical = area === "left" || area === "right";
   const {
     ref
   } = props;
+  const measureSpace = barElement => {
+    const {
+      width,
+      height
+    } = barElement.getBoundingClientRect();
+    return vertical ? width : height;
+  };
+  // Anything a render can change — a size prop, the children, a theme variable
+  // — is measured in that same commit, before paint: no frame where the
+  // content sits under the bar, and nothing written from inside an observer.
+  useLayoutEffect(() => {
+    const barElement = ref.current;
+    if (!barElement) {
+      return;
+    }
+    setFixedBarSpace(area, barElement, measureSpace(barElement));
+  });
+  // What no render caused: a font loading late, content arriving from outside,
+  // a rotation moving the notch. Measuring here is safe; the write is what has
+  // to wait, and fixed_bar_space.js is the one that holds it back.
   useLayoutEffect(() => {
     const barElement = ref.current;
     if (!barElement) {
       return undefined;
     }
-    const publishSize = () => {
-      const {
-        width,
-        height
-      } = barElement.getBoundingClientRect();
-      setFixedBarSpace(area, barElement, vertical ? width : height);
-    };
-    publishSize();
-    const resizeObserver = new ResizeObserver(publishSize);
+    const resizeObserver = new ResizeObserver(() => {
+      requestFixedBarSpace(area, barElement, measureSpace(barElement));
+    });
     resizeObserver.observe(barElement);
     return () => {
       resizeObserver.disconnect();