@humanspeak/svelte-headless-table 6.0.6 → 6.0.8

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)
@@ -164,6 +192,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
     });
     const pluginEntries = Object.entries(pluginInstances);
     const injectedRows = derived(rows, ($rows) => {
+        const _t0 = performance.now();
         derivationCalls.injectedRows++;
         $rows.forEach((row) => {
             row.injectState(tableState);
@@ -180,6 +209,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
             }
         });
         _rows.set($rows);
+        derivationTimings.injectedRows += performance.now() - _t0;
         return $rows;
     });
     const derivePageRowsFns = Object.values(pluginInstances)
@@ -194,11 +224,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 +249,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
             }
         });
         _headerRows.set($headerRows);
+        derivationTimings.headerRows += performance.now() - _t0;
         return $headerRows;
     });
     const _debug = {
@@ -230,13 +264,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-headless-table",
-  "version": "6.0.6",
+  "version": "6.0.8",
   "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",
@@ -58,57 +58,58 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@humanspeak/memory-cache": "^1.0.5",
+    "@humanspeak/memory-cache": "^1.0.6",
     "@humanspeak/svelte-keyed": "^5.0.1",
     "@humanspeak/svelte-render": "^5.1.1",
     "@humanspeak/svelte-subscribe": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
+    "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@faker-js/faker": "^10.3.0",
-    "@playwright/test": "^1.58.2",
+    "@faker-js/faker": "^10.4.0",
+    "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@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.3.3",
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.2",
+    "@types/node": "^25.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.4",
+    "@typescript-eslint/parser": "^8.59.4",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-svelte": "3.15.0",
+    "eslint-plugin-svelte": "3.17.1",
     "eslint-plugin-unused-imports": "4.4.1",
-    "globals": "^17.4.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.2.0",
-    "prettier-plugin-svelte": "^3.5.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.18",
-    "svelte": "^5.53.7",
-    "svelte-check": "^4.4.4",
+    "prettier-plugin-svelte": "^4.0.1",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
     "tslib": "^2.8.1",
-    "type-fest": "^5.4.4",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "type-fest": "^5.6.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.4",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "svelte": "^5.30.0"
   },
   "volta": {
-    "node": "24.14.0"
+    "node": "24.15.0"
   },
   "scripts": {
     "build": "vite build && npm run package",
+    "cf-typegen": "pnpm --filter docs cf-typegen",
     "changeset": "npx @changesets/cli",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -119,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",