@ornery/ui-grid-vanilla 1.0.5 → 1.0.7

package/src/patch.ts

@@ -450,6 +450,22 @@ export function patchBodyRegion(
     bodyContainer.innerHTML = bodyContent;
   }
   el.lastItemsFingerprint = itemsFingerprint;
+  // Body just rebuilt — old per-row fingerprints reference cells that no
+  // longer exist in the DOM. Re-seed from the freshly-rendered rows so the
+  // next patch pass sees them as already-up-to-date.
+  el.lastRowStateFingerprints.clear();
+  for (let i = 0; i < itemsToRender.length; i++) {
+    const item = itemsToRender[i]!;
+    if (!isRowItem(item)) continue;
+    el.lastRowStateFingerprints.set(item.row.id, {
+      fingerprint: buildRowFingerprint(item.row, startIndex + i, snapshot.visibleColumns),
+      entity: item.row.entity,
+    });
+  }
+  el.lastEditingCellKey = el.controller?.getEditingCellKey() ?? null;
+  el.lastFocusedCellKey = el.focusedCell
+    ? `${el.focusedCell.rowId} ${el.focusedCell.columnName}`
+    : null;
 }
 
 /**
@@ -486,7 +502,6 @@ export function patchExistingRows(
   startIndex: number,
 ): void {
   const controller = el.controller!;
-  void controller;
   const columns = snapshot.visibleColumns;
 
   // Build O(1) lookup maps from a single pass over bodyContainer.children.
@@ -521,6 +536,18 @@ export function patchExistingRows(
     templateMarkupMap.set(col.name, getTemplateMarkup(el, `cell-${col.name}`));
   }
 
+  // Track which row IDs we visited so we can prune stale fingerprint entries
+  // (rows that scrolled out of the rendered window keep their last fingerprint
+  // around so when they scroll back in we still detect changes — but rows
+  // that are gone for good shouldn't grow the map indefinitely).
+  const visitedRowIds = new Set<string>();
+  const editingCellKey = controller.getEditingCellKey();
+  const focusedCellKey = el.focusedCell
+    ? `${el.focusedCell.rowId} ${el.focusedCell.columnName}`
+    : null;
+  const editingMoved = editingCellKey !== el.lastEditingCellKey;
+  const focusedMoved = focusedCellKey !== el.lastFocusedCellKey;
+
   let expandableIndex = 0;
   for (let i = 0; i < itemsToRender.length; i++) {
     const item = itemsToRender[i]!;
@@ -552,14 +579,104 @@ export function patchExistingRows(
     if (!isRowItem(item)) continue;
 
     const row = item.row;
+    visitedRowIds.add(row.id);
     const rowCells = cellEls.get(row.id);
     if (!rowCells) continue;
+
+    // Per-row visual fingerprint — captures every input that drives
+    // patchBodyCell's class / attrs / shell content. When this matches the
+    // previous render's fingerprint AND the focused/editing cell hasn't
+    // crossed in or out of this row, we can skip the per-cell patch entirely.
+    // This is the hot path for selection / focus / expand toggles, where
+    // most rows are visually unchanged but still walk the entire columns
+    // loop in the previous implementation.
+    const rowFingerprint = buildRowFingerprint(row, displayIndex, columns);
+    const lastEntry = el.lastRowStateFingerprints.get(row.id);
+    const editingTouchesRow =
+      (editingCellKey !== null && editingCellKey.startsWith(`${row.id} `)) ||
+      (el.lastEditingCellKey !== null && el.lastEditingCellKey.startsWith(`${row.id} `));
+    const focusedTouchesRow =
+      (focusedCellKey !== null && focusedCellKey.startsWith(`${row.id} `)) ||
+      (el.lastFocusedCellKey !== null && el.lastFocusedCellKey.startsWith(`${row.id} `));
+
+    // Skip when row identity (entity reference), visual fingerprint, and
+    // the focused/editing cell positions are all unchanged. The entity
+    // reference guard catches data-array swaps that produce a fresh row
+    // instance with potentially new field values.
+    const canSkip =
+      lastEntry !== undefined &&
+      lastEntry.fingerprint === rowFingerprint &&
+      lastEntry.entity === row.entity &&
+      !(editingMoved && editingTouchesRow) &&
+      !(focusedMoved && focusedTouchesRow);
+
+    if (canSkip) {
+      // Even though we're skipping the per-cell DOM patch, the row's
+      // framework-rendered slots must persist past the upcoming `flush()`.
+      // `flush()` diffs `pendingCellSlots` against `lastCellSlots`; without
+      // carrying the row's slots forward, every unchanged row in a structural
+      // patch pass would emit a spurious `cellSlotsChanged removed` event,
+      // tearing down framework wrappers' projected views (Angular embedded
+      // views, React portals) that already match the DOM.
+      el.frameworkSlots.carryRowCells(row.id);
+      continue;
+    }
+
+    el.lastRowStateFingerprints.set(row.id, { fingerprint: rowFingerprint, entity: row.entity });
+
     for (const column of columns) {
       const target = rowCells.get(column.name);
       if (!target) continue;
       patchBodyCell(el, target, row, column, displayIndex, templateMarkupMap);
     }
   }
+
+  // Prune fingerprint entries for rows that are no longer in the rendered
+  // window. The map otherwise grows without bound across scroll passes.
+  if (el.lastRowStateFingerprints.size > visitedRowIds.size) {
+    for (const id of el.lastRowStateFingerprints.keys()) {
+      if (!visitedRowIds.has(id)) el.lastRowStateFingerprints.delete(id);
+    }
+  }
+
+  el.lastEditingCellKey = editingCellKey;
+  el.lastFocusedCellKey = focusedCellKey;
+}
+
+/**
+ * Per-row fingerprint of every input patchBodyCell reads off the row.
+ * Stable across renders when nothing visual has changed; flips when
+ * selection, focus, expand, dirty/saving/error, tree-expand, indent, or
+ * the entity reference moves. Used as the skip key in patchExistingRows.
+ *
+ * Also samples per-column validation state — `validate.runValidators`
+ * mutates fields directly on the row entity (`$$invalid<col>`), so we
+ * read those keys here to detect validity flips even though the entity
+ * reference is unchanged.
+ */
+function buildRowFingerprint(
+  row: GridRow,
+  displayIndex: number,
+  visibleColumns: readonly GridColumnDef[],
+): string {
+  // Bit-packing flags into a single number keeps the fingerprint short.
+  let flags = 0;
+  if (row.isSelected) flags |= 1;
+  if (row.isFocused) flags |= 2;
+  if (row.expanded) flags |= 4;
+  if (row.isDirty) flags |= 8;
+  if (row.isSaving) flags |= 16;
+  if (row.isError) flags |= 32;
+  if (row.visible) flags |= 64;
+  // Per-column validity bitmap. The validate module flags cells via
+  // `$$invalid<col>` keys on the entity; without sampling them here a
+  // selection-only refresh would skip cells whose validity just flipped.
+  let invalidBits = '';
+  const entity = row.entity as Record<string, unknown>;
+  for (const col of visibleColumns) {
+    invalidBits += entity[`$$invalid${col.name}`] ? '1' : '0';
+  }
+  return `${displayIndex}|${flags}|${row.treeLevel}|${row.height}|${row.expandedRowHeight}|${invalidBits}`;
 }
 
 /** Patch a group-row element's data-attrs. */

package/src/row-edit.test.ts

@@ -105,7 +105,7 @@ describe('vanilla grid row-edit', () => {
     const options = baseOptions();
     await mountGrid(options);
     const api = getApi(options);
-    const handler = vi.fn<[Record<string, unknown>], void>();
+    const handler = vi.fn<(row: Record<string, unknown>) => void>();
     api.rowEdit.on.saveRow(handler);
     const row = options.data[0]! as unknown as Record<string, unknown>;
     api.edit.raise.afterCellEdit(row, options.columnDefs[0]!, 'Alpha!', 'Alpha');

package/src/ui-grid-standalone.element.ts

@@ -111,6 +111,12 @@ export type VanillaUiGridElement = HTMLElement & {
    * remains completely smooth while data ticks in the background.
    */
   setData(rows: GridRecord[]): void;
+  /**
+   * Declare which slots the grid should emit as `<slot>` placeholders for a
+   * framework wrapper to project into. See `FrameworkSlotBridge` for the
+   * full contract.
+   */
+  setFrameworkRenderedSlots(config: FrameworkRenderedSlotsConfig): void;
 };
 
 type VanillaGridOptions = GridOptions & {
@@ -170,6 +176,15 @@ export class UiGridStandaloneElement extends HTMLElement {
   /** @internal */ lastItemsFingerprint: string | null = null;
   /** @internal */ lastVirtualOffset = 0;
   /** @internal */ lastTotalVirtualHeight = 0;
+  /**
+   * @internal Per-row visual-state fingerprint from the previous patch pass.
+   * The patch path uses this to skip cells whose row state hasn't changed
+   * (selection, expand, dirty/saving/error flags) when the structure
+   * fingerprint matches. Cleared on full re-render.
+   */
+  lastRowStateFingerprints = new Map<string, { fingerprint: string; entity: unknown }>();
+  /** @internal */ lastEditingCellKey: string | null = null;
+  /** @internal */ lastFocusedCellKey: string | null = null;
 
   /**
    * @internal Framework-rendered slot bridge. See `./framework-slots.ts`.
@@ -220,7 +235,11 @@ export class UiGridStandaloneElement extends HTMLElement {
     if (this.frameworkSlots.configure(config)) {
       // The set of slot placeholders changed — force a structural re-render
       // so framework-rendered slots transition to `<slot>` nodes (or the
-      // reverse, when a slot is revoked).
+      // reverse, when a slot is revoked). Also bust the per-row patch
+      // fingerprint cache, because the cell-shell content depends on
+      // hasCell() / hasHeader() / etc. — values not captured by the
+      // row-level fingerprint.
+      this.lastRowStateFingerprints.clear();
       this.render();
     }
   }
@@ -692,11 +711,58 @@ export class UiGridStandaloneElement extends HTMLElement {
       cancelAnimationFrame(this.scrollFrame);
       this.scrollFrame = null;
     }
+    this.controller?.setBenchmarkHandler(null);
     // Emit `removed` events for every framework-rendered slot so wrappers
     // can destroy their views.
     this.frameworkSlots.flushRemovals();
   }
 
+  private benchmarkRender(iterations?: number) {
+    const controller = this.controller;
+    const snapshot = this.snapshot;
+    if (!controller || !snapshot) {
+      return Promise.resolve({
+        iterations: 0,
+        totalMs: 0,
+        averageMs: 0,
+        visibleRows: 0,
+        renderedItems: 0,
+      });
+    }
+
+    const now = () => (typeof performance === 'undefined' ? Date.now() : performance.now());
+    const nextFrame = () =>
+      new Promise<void>((resolve) => {
+        if (typeof requestAnimationFrame === 'undefined') {
+          setTimeout(resolve, 0);
+          return;
+        }
+        requestAnimationFrame(() => resolve());
+      });
+    const loops = Math.max(1, iterations ?? controller.getOptions().benchmark?.iterations ?? 25);
+    return (async () => {
+      const started = now();
+
+      for (let index = 0; index < loops; index += 1) {
+        this.render();
+        await nextFrame();
+      }
+
+      const currentSnapshot = this.snapshot ?? snapshot;
+      const totalMs = now() - started;
+      const result = {
+        iterations: loops,
+        totalMs,
+        averageMs: totalMs / loops,
+        visibleRows: currentSnapshot.pipeline.visibleRows.length,
+        renderedItems: currentSnapshot.pipeline.displayItems.length,
+      };
+
+      controller.gridApi.core.raise.benchmarkComplete(result);
+      return result;
+    })();
+  }
+
   /** @internal */
   ensureShadowRoot(): ShadowRoot {
     if (!this.shadowRoot) {
@@ -709,6 +775,7 @@ export class UiGridStandaloneElement extends HTMLElement {
   /** @internal */
   ensureController(options: VanillaGridOptions): void {
     if (this.controller) {
+      this.controller.setBenchmarkHandler((iterations) => this.benchmarkRender(iterations));
       if (this.clientWidth > 0) {
         this.controller.setViewportWidth(this.clientWidth);
       }
@@ -717,6 +784,7 @@ export class UiGridStandaloneElement extends HTMLElement {
     }
 
     this.controller = createVanillaGridController(options);
+    this.controller.setBenchmarkHandler((iterations) => this.benchmarkRender(iterations));
     if (this.clientWidth > 0) {
       this.controller.setViewportWidth(this.clientWidth);
     }
@@ -919,6 +987,9 @@ export class UiGridStandaloneElement extends HTMLElement {
     if (!snapshot) {
       this.lastStructureKey = null;
       this.lastItemsFingerprint = null;
+      this.lastRowStateFingerprints.clear();
+      this.lastEditingCellKey = null;
+      this.lastFocusedCellKey = null;
       emptyTemplate({ message: 'No grid options provided.' }).connect(root);
       return;
     }
@@ -1223,6 +1294,13 @@ export class UiGridStandaloneElement extends HTMLElement {
     this.lastItemsFingerprint = this.fingerprintItems(plan.itemsToRender);
     this.lastVirtualOffset = plan.virtualOffset;
     this.lastTotalVirtualHeight = plan.totalVirtualHeight;
+    // The row-state cache is keyed against the patched DOM. A full remount
+    // wipes it; the next patch pass will repopulate as it walks rows.
+    this.lastRowStateFingerprints.clear();
+    this.lastEditingCellKey = this.controller?.getEditingCellKey() ?? null;
+    this.lastFocusedCellKey = this.focusedCell
+      ? `${this.focusedCell.rowId} ${this.focusedCell.columnName}`
+      : null;
   }
 
   private renderPatch(

package/tsup.config.ts

@@ -1,10 +1,25 @@
 import { defineConfig } from 'tsup';
 import { scssInlineEsbuild } from './scss-plugin';
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm', 'cjs'],
-  dts: true,
-  tsconfig: './tsconfig.json',
-  esbuildPlugins: [scssInlineEsbuild()],
-});
+export default defineConfig([
+  {
+    entry: ['src/index.ts'],
+    format: ['esm', 'cjs'],
+    dts: true,
+    tsconfig: './tsconfig.json',
+    esbuildPlugins: [scssInlineEsbuild()],
+  },
+  {
+    entry: { 'ui-grid-element': 'src/browser.ts' },
+    format: ['esm'],
+    dts: false,
+    splitting: false,
+    platform: 'browser',
+    target: 'es2022',
+    outDir: 'dist/browser',
+    outExtension: () => ({ js: '.js' }),
+    tsconfig: './tsconfig.json',
+    noExternal: ['@ornery/ui-grid-core'],
+    esbuildPlugins: [scssInlineEsbuild()],
+  },
+]);

package/vitest.config.ts

@@ -0,0 +1,30 @@
+import path from 'path';
+import { defineConfig } from 'vitest/config';
+import { scssInlinePlugin } from './scss-plugin';
+
+export default defineConfig({
+  plugins: [scssInlinePlugin()],
+  resolve: {
+    alias: {
+      '@ornery/ui-grid-core': path.resolve(__dirname, '../ui-grid-core/src/index.ts'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        loadPaths: [path.resolve(__dirname, 'node_modules')],
+      },
+    },
+  },
+  test: {
+    dir: path.resolve(__dirname, 'src'),
+    environment: 'happy-dom',
+    coverage: {
+      provider: 'v8',
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.test.ts', 'src/**/*.spec.ts', 'src/test-setup.ts'],
+      reporter: ['text', 'lcov', 'html'],
+      reportsDirectory: './coverage',
+    },
+  },
+});