@humanspeak/svelte-headless-table 6.0.7 → 6.0.9

package/dist/bodyRows.js

@@ -235,19 +235,23 @@ export const getColumnedBodyRows = (rows, columnIdOrder) => {
     if (rows.length === 0 || columnIdOrder.length === 0)
         return rows;
     rows.forEach((row, rowIdx) => {
-        // Create a shallow copy of `row.cells` to reassign each `cell`'s `row`
-        // reference.
-        const cells = row.cells.map((cell) => {
+        // Build `cellForId` directly during the clone pass so we don't
+        // pay for an intermediate Map + Object.fromEntries detour
+        // (which is what the previous shape did — see plan-1A in
+        // .notes/performance-optimization-plan.md). The id-keyed object
+        // gives us O(1) lookups for `visibleCells` and is the same shape
+        // BodyRow.cellForId already expects.
+        const cellForId = {};
+        row.cells.forEach((cell) => {
             const clonedCell = cell.clone();
             clonedCell.row = columnedRows[rowIdx];
-            return clonedCell;
+            cellForId[clonedCell.id] = clonedCell;
         });
-        const cellById = new Map(cells.map((c) => [c.id, c]));
-        const visibleCells = columnIdOrder.map((cid) => cellById.get(cid)).filter(nonUndefined);
+        const visibleCells = columnIdOrder.map((cid) => cellForId[cid]).filter(nonUndefined);
         columnedRows[rowIdx].cells = visibleCells;
-        // Include hidden cells in `cellForId` to allow row transformations on
-        // hidden cells.
-        columnedRows[rowIdx].cellForId = Object.fromEntries(cellById);
+        // `cellForId` includes hidden cells so row transformations can
+        // still reach them.
+        columnedRows[rowIdx].cellForId = cellForId;
     });
     return columnedRows;
 };

package/dist/createViewModel.d.ts

@@ -60,10 +60,31 @@ export interface ViewModelDebug {
         injectedPageRows: number;
         headerRows: number;
     };
-    /** Reset all derivation call counters to 0 */
+    /**
+     * Per-derivation cumulative wall-clock in milliseconds, accumulated
+     * via `performance.now()` deltas inside each `derived(...)` body.
+     * Mirrors `derivationCalls` so the perf bench can attribute a
+     * scenario's render budget to a specific derivation rather than the
+     * aggregated `firstPaintMs`. Reset by `resetCounters()`.
+     */
+    derivationTimings: {
+        tableAttrs: number;
+        tableHeadAttrs: number;
+        tableBodyAttrs: number;
+        visibleColumns: number;
+        columnedRows: number;
+        rows: number;
+        injectedRows: number;
+        pageRows: number;
+        injectedPageRows: number;
+        headerRows: number;
+    };
+    /** Reset all derivation call counters and timings to 0 */
     resetCounters: () => void;
     /** Get total derivation calls since last reset */
     getTotalCalls: () => number;
+    /** Get total derivation wall-clock (ms) since last reset */
+    getTotalMs: () => number;
 }
 /**
  * The view model for a table, containing all reactive stores and state.

package/dist/createViewModel.js

@@ -30,6 +30,23 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         injectedPageRows: 0,
         headerRows: 0
     };
+    // Per-derivation cumulative ms, populated alongside derivationCalls.
+    // Each `derived(...)` body wraps its work in performance.now() pairs
+    // so the perf bench can attribute a scenario's render budget to a
+    // specific derivation. `rows` / `pageRows` stay at 0 — they're
+    // plugin-pipeline pass-throughs that don't run a body of their own.
+    const derivationTimings = {
+        tableAttrs: 0,
+        tableHeadAttrs: 0,
+        tableBodyAttrs: 0,
+        visibleColumns: 0,
+        columnedRows: 0,
+        rows: 0,
+        injectedRows: 0,
+        pageRows: 0,
+        injectedPageRows: 0,
+        headerRows: 0
+    };
     const $flatColumns = getFlatColumns(columns);
     const flatColumns = readable($flatColumns);
     const originalRows = derived([data, flatColumns], ([$data, $flatColumns]) => {
@@ -103,9 +120,11 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         tableAttrs = fn(tableAttrs);
     });
     const finalizedTableAttrs = derived(tableAttrs, ($tableAttrs) => {
+        const _t0 = performance.now();
         derivationCalls.tableAttrs++;
         const $finalizedAttrs = finalizeAttributes($tableAttrs);
         _tableAttrs.set($finalizedAttrs);
+        derivationTimings.tableAttrs += performance.now() - _t0;
         return $finalizedAttrs;
     });
     const deriveTableHeadAttrsFns = Object.values(pluginInstances)
@@ -116,9 +135,11 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         tableHeadAttrs = fn(tableHeadAttrs);
     });
     const finalizedTableHeadAttrs = derived(tableHeadAttrs, ($tableHeadAttrs) => {
+        const _t0 = performance.now();
         derivationCalls.tableHeadAttrs++;
         const $finalizedAttrs = finalizeAttributes($tableHeadAttrs);
         _tableHeadAttrs.set($finalizedAttrs);
+        derivationTimings.tableHeadAttrs += performance.now() - _t0;
         return $finalizedAttrs;
     });
     const deriveTableBodyAttrsFns = Object.values(pluginInstances)
@@ -131,9 +152,11 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         tableBodyAttrs = fn(tableBodyAttrs);
     });
     const finalizedTableBodyAttrs = derived(tableBodyAttrs, ($tableBodyAttrs) => {
+        const _t0 = performance.now();
         derivationCalls.tableBodyAttrs++;
         const $finalizedAttrs = finalizeAttributes($tableBodyAttrs);
         _tableBodyAttrs.set($finalizedAttrs);
+        derivationTimings.tableBodyAttrs += performance.now() - _t0;
         return $finalizedAttrs;
     });
     const deriveFlatColumnsFns = Object.values(pluginInstances)
@@ -146,13 +169,18 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         visibleColumns = fn(visibleColumns);
     });
     const injectedColumns = derived(visibleColumns, ($visibleColumns) => {
+        const _t0 = performance.now();
         derivationCalls.visibleColumns++;
         _visibleColumns.set($visibleColumns);
+        derivationTimings.visibleColumns += performance.now() - _t0;
         return $visibleColumns;
     });
     const columnedRows = derived([originalRows, injectedColumns], ([$originalRows, $injectedColumns]) => {
+        const _t0 = performance.now();
         derivationCalls.columnedRows++;
-        return getColumnedBodyRows($originalRows, $injectedColumns.map((c) => c.id));
+        const result = getColumnedBodyRows($originalRows, $injectedColumns.map((c) => c.id));
+        derivationTimings.columnedRows += performance.now() - _t0;
+        return result;
     });
     const deriveRowsFns = Object.values(pluginInstances)
         .map((pluginInstance) => pluginInstance.deriveRows)
@@ -163,23 +191,39 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
         rows = fn(rows);
     });
     const pluginEntries = Object.entries(pluginInstances);
+    const trHookEntries = [];
+    const tdHookEntries = [];
+    for (const [name, instance] of pluginEntries) {
+        const trHook = instance.hooks?.['tbody.tr'];
+        if (trHook !== undefined)
+            trHookEntries.push([name, trHook]);
+        const tdHook = instance.hooks?.['tbody.tr.td'];
+        if (tdHook !== undefined)
+            tdHookEntries.push([name, tdHook]);
+    }
+    // Hoisted out of the per-row loop so we don't allocate a fresh
+    // closure on every iteration. For rows-10k that's 10,000 fewer
+    // closure allocations per derivation pass.
+    const injectCellState = (cell) => cell.injectState(tableState);
     const injectedRows = derived(rows, ($rows) => {
+        const _t0 = performance.now();
         derivationCalls.injectedRows++;
         $rows.forEach((row) => {
             row.injectState(tableState);
-            row.cells.forEach((cell) => cell.injectState(tableState));
-            for (const [pluginName, pluginInstance] of pluginEntries) {
-                const trHook = pluginInstance.hooks?.['tbody.tr'];
-                if (trHook !== undefined) {
-                    row.applyHook(pluginName, trHook(row));
-                }
-                const tdHook = pluginInstance.hooks?.['tbody.tr.td'];
-                if (tdHook !== undefined) {
-                    row.cells.forEach((cell) => cell.applyHook(pluginName, tdHook(cell)));
-                }
+            row.cells.forEach(injectCellState);
+            for (const [pluginName, trHook] of trHookEntries) {
+                row.applyHook(pluginName, trHook(row));
+            }
+            if (tdHookEntries.length > 0) {
+                row.cells.forEach((cell) => {
+                    for (const [pluginName, tdHook] of tdHookEntries) {
+                        cell.applyHook(pluginName, tdHook(cell));
+                    }
+                });
             }
         });
         _rows.set($rows);
+        derivationTimings.injectedRows += performance.now() - _t0;
         return $rows;
     });
     const derivePageRowsFns = Object.values(pluginInstances)
@@ -194,11 +238,14 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
     // Page rows are a subset of the same object references already processed
     // by injectedRows — no need to re-inject state or re-apply hooks.
     const injectedPageRows = derived(pageRows, ($pageRows) => {
+        const _t0 = performance.now();
         derivationCalls.injectedPageRows++;
         _pageRows.set($pageRows);
+        derivationTimings.injectedPageRows += performance.now() - _t0;
         return $pageRows;
     });
     const headerRows = derived(injectedColumns, ($injectedColumns) => {
+        const _t0 = performance.now();
         derivationCalls.headerRows++;
         const $headerRows = getHeaderRows(columns, $injectedColumns.map((c) => c.id));
         $headerRows.forEach((row) => {
@@ -216,6 +263,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
             }
         });
         _headerRows.set($headerRows);
+        derivationTimings.headerRows += performance.now() - _t0;
         return $headerRows;
     });
     const _debug = {
@@ -230,13 +278,18 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
             pageRows: derivePageRowsFns.length + 1 // +1 for injected
         },
         derivationCalls,
+        derivationTimings,
         resetCounters: () => {
             Object.keys(derivationCalls).forEach((key) => {
                 derivationCalls[key] = 0;
+                derivationTimings[key] = 0;
             });
         },
         getTotalCalls: () => {
             return Object.values(derivationCalls).reduce((sum, count) => sum + count, 0);
+        },
+        getTotalMs: () => {
+            return Object.values(derivationTimings).reduce((sum, ms) => sum + ms, 0);
         }
     };
     return {

package/dist/headerRows.js

@@ -215,7 +215,9 @@ export const getMergedRow = (cells) => {
     }
     const mergedCells = [];
     let startIdx = 0;
-    let endIdx = 1;
+    // endIdx is initialized inside the merge branch (line ~293) before
+    // it's read; declared here only so the inner-while loop can see it.
+    let endIdx;
     while (startIdx < cells.length) {
         const cell = cells[startIdx].clone();
         if (!cell.isGroup()) {

package/dist/plugins/addSortBy.js

@@ -1,3 +1,4 @@
+import { MemoryCache } from '@humanspeak/memory-cache';
 import { derived, writable } from 'svelte/store';
 import { compare } from '../utils/compare.js';
 import { isShiftClick } from '../utils/event.js';
@@ -169,6 +170,16 @@ export const addSortBy = ({ initialSortKeys = [], disableMultiSort = false, isMu
         });
     };
     const pluginState = { sortKeys, preSortedRows };
+    // The `tbody.tr.td` hook output only depends on `cell.id` (the
+    // column ID — closed-over) and the reactive `sortKeys` store.
+    // Two body cells in the same column produce identical Readables,
+    // so we can share one Readable per column ID across every row.
+    // For rows-10k × 8 cols that collapses 80,000 Readable allocations
+    // per cold mount into 8. LRU eviction means we stay bounded even
+    // if column IDs churn over the view-model's lifetime.
+    const tdPropsCache = new MemoryCache({
+        maxSize: 256
+    });
     return {
         pluginState,
         deriveRows,
@@ -204,12 +215,16 @@ export const addSortBy = ({ initialSortKeys = [], disableMultiSort = false, isMu
                 return { props };
             },
             'tbody.tr.td': (cell) => {
-                const props = derived(sortKeys, ($sortKeys) => {
-                    const key = $sortKeys.find((k) => k.id === cell.id);
-                    return {
-                        order: key?.order
-                    };
-                });
+                let props = tdPropsCache.get(cell.id);
+                if (props === undefined) {
+                    props = derived(sortKeys, ($sortKeys) => {
+                        const key = $sortKeys.find((k) => k.id === cell.id);
+                        return {
+                            order: key?.order
+                        };
+                    });
+                    tdPropsCache.set(cell.id, props);
+                }
                 return { props };
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-headless-table",
-  "version": "6.0.7",
+  "version": "6.0.9",
   "description": "A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opinions.",
   "keywords": [
     "svelte",
@@ -69,15 +69,15 @@
     "@faker-js/faker": "^10.4.0",
     "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.60.1",
+    "@sveltejs/kit": "^2.61.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@types/eslint": "9.6.1",
     "@types/node": "^25.9.1",
-    "@typescript-eslint/eslint-plugin": "^8.59.4",
-    "@typescript-eslint/parser": "^8.59.4",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
     "@vitest/coverage-v8": "^4.1.7",
     "eslint": "^10.4.0",
     "eslint-config-prettier": "10.1.8",
@@ -97,7 +97,7 @@
     "tslib": "^2.8.1",
     "type-fest": "^5.6.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.4",
+    "typescript-eslint": "^8.60.0",
     "vite": "^8.0.14",
     "vitest": "^4.1.7"
   },
@@ -120,6 +120,7 @@
     "lint": "prettier --check . && eslint .",
     "lint:fix": "npm run format && eslint . --fix",
     "package": "svelte-kit sync && svelte-package && publint",
+    "perf:bench": "node scripts/perf-bench.mjs",
     "preview": "vite preview",
     "test": "vitest run --coverage",
     "test:all": "npm run test && npm run test:e2e",