@homebound/beam 2.109.0 → 2.110.0

package/dist/components/Table/GridTable.js

@@ -42,6 +42,7 @@ const useSortState_1 = require("./useSortState");
 const visitor_1 = require("./visitor");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
+const useRenderCount_1 = require("../../hooks/useRenderCount");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const _1 = require(".");
 exports.ASC = "ASC";
@@ -109,6 +110,11 @@ function GridTable(props) {
             },
         };
     }
+    // We track render count at the table level, which seems odd (we should be able to track this
+    // internally within each GridRow using a useRef), but we have suspicions that react-virtuoso
+    // (or us) is resetting component state more than necessary, so we track render counts from
+    // here instead.
+    const { getCount } = (0, useRenderCount_1.useRenderCount)();
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
@@ -140,6 +146,7 @@ function GridTable(props) {
                 openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                 columnSizes,
                 level,
+                getCount,
                 ...sortProps,
             }), `${row.kind}-${row.id}`));
         }
@@ -445,7 +452,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 }
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, ...others } = props;
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -471,7 +478,7 @@ function GridRow(props) {
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style),
     };
     let currentColspan = 1;
-    const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, { children: columns.map((column, columnIndex) => {
+    const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
             var _a, _b;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.

package/dist/hooks/useRenderCount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A hook to add `data-render=${count}` to an element.
+ *
+ * This will output even in production mode, which in theory is not necessary
+ * and we could/should avoid, but it should also be np.
+ *
+ * The intent is to leave it "always on" for dev & tests, so that engineers
+ * and test suites can very easily grab "what was the render count of that?"
+ * w/o bringing in one-off modes/tools.
+ *
+ * (One-off modes/tools are more appropriate for truly adhoc performance
+ * but the intent is to use this in GridTable where "what's the render count?"
+ * will be a common question.)
+ */
+export declare function useRenderCount(): {
+    getCount: (id: string) => object;
+};

package/dist/hooks/useRenderCount.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderCount = void 0;
+const react_1 = require("react");
+/**
+ * A hook to add `data-render=${count}` to an element.
+ *
+ * This will output even in production mode, which in theory is not necessary
+ * and we could/should avoid, but it should also be np.
+ *
+ * The intent is to leave it "always on" for dev & tests, so that engineers
+ * and test suites can very easily grab "what was the render count of that?"
+ * w/o bringing in one-off modes/tools.
+ *
+ * (One-off modes/tools are more appropriate for truly adhoc performance
+ * but the intent is to use this in GridTable where "what's the render count?"
+ * will be a common question.)
+ */
+function useRenderCount() {
+    const ref = (0, react_1.useRef)(new Map());
+    const getCount = (0, react_1.useCallback)((id) => {
+        const count = ref.current.get(id) || 1;
+        ref.current.set(id, count + 1);
+        return { "data-render": count };
+    }, []);
+    return { getCount };
+}
+exports.useRenderCount = useRenderCount;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.109.0",
+  "version": "2.110.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",