@svgrid/grid 2.1.21 → 2.1.23

package/src/scheduler-view.svelte.ts

@@ -0,0 +1,33 @@
+/**
+ * scheduler-view registry - the injection seam for the calendar / scheduler
+ * *view of the grid*. Setting the `scheduler` prop on `<SvGrid>` switches the
+ * table for a calendar, but the renderer itself ships in `@svgrid/enterprise`
+ * (a paid feature). This tiny reactive holder lets enterprise register that
+ * renderer at import time; the grid looks it up and mounts it, or shows an
+ * upsell placeholder when it is absent. Mirrors the `editor-registry` pattern.
+ *
+ * ```ts
+ * // in @svgrid/enterprise, at module load:
+ * import { registerSchedulerView } from '@svgrid/grid'
+ * import SvGridScheduler from './SvGridScheduler.svelte'
+ * registerSchedulerView(SvGridScheduler)
+ * ```
+ */
+import type { Component } from 'svelte'
+
+let renderer = $state<Component<any> | null>(null)
+
+/** Register the component that renders `scheduler` mode. Enterprise calls this. */
+export function registerSchedulerView(component: Component<any>): void {
+  renderer = component
+}
+
+/** The registered scheduler renderer, or null when enterprise is not installed. */
+export function getSchedulerView(): Component<any> | null {
+  return renderer
+}
+
+/** Whether a scheduler renderer has been registered. */
+export function hasSchedulerView(): boolean {
+  return renderer != null
+}

package/src/spreadsheet.ts

@@ -265,6 +265,18 @@ function apply(root: HTMLElement, opts: SpreadsheetActionOptions): void {
 export function spreadsheetLayout(node: HTMLElement, opts: SpreadsheetActionOptions) {
   let current = opts
   let frame = 0
+  const OBSERVE_OPTIONS: MutationObserverInit = {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: [
+      'data-svgrid-row', 'data-col-id', 'style',
+      // Watch selection-range attrs so we can transfer them from
+      // hidden covered cells to merge origins.
+      'data-range-top', 'data-range-bottom', 'data-range-left',
+      'data-range-right', 'data-selected-range',
+    ],
+  }
   // The MutationObserver fires for EVERY DOM change inside the grid -
   // batch them into one rAF so a big virtualization scroll doesn't run
   // apply() dozens of times in a tick.
@@ -272,22 +284,18 @@ export function spreadsheetLayout(node: HTMLElement, opts: SpreadsheetActionOpti
     if (frame) return
     frame = requestAnimationFrame(() => {
       frame = 0
+      // Stop observing while apply() mutates the DOM itself (it writes cell
+      // `style.display`/`position` and appends overlay children). Otherwise
+      // those writes re-trigger this observer and loop at 60fps on merged
+      // cells (#50). A full apply() recomputes from the live DOM, so discarding
+      // the queued records here loses nothing.
+      observer.disconnect()
       apply(node, current)
+      observer.observe(node, OBSERVE_OPTIONS)
     })
   }
   const observer = new MutationObserver(schedule)
-  observer.observe(node, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: [
-      'data-svgrid-row', 'data-col-id', 'style',
-      // Watch selection-range attrs so we can transfer them from
-      // hidden covered cells to merge origins.
-      'data-range-top', 'data-range-bottom', 'data-range-left',
-      'data-range-right', 'data-selected-range',
-    ],
-  })
+  observer.observe(node, OBSERVE_OPTIONS)
   // First-paint pass: schedule the same way so we don't run before the
   // grid's initial render landed.
   schedule()

package/src/svgrid.effect-driven-filter.svelte.test.ts

@@ -0,0 +1,116 @@
+/**
+ * Regression: driving the imperative filter API from a reactive `$effect`.
+ *
+ * The filter mutators (`setFilter` / `clearFilter` / `setFacetFilter` /
+ * `clearAllFilters`) do a read-modify-write on the grid's filter state
+ * (e.g. `{ ...filterMenuValues, [id]: ... }`). If those internal reads are
+ * captured as dependencies of a caller's `$effect`, the subsequent write
+ * re-dirties the effect and it loops forever (Svelte throws
+ * `effect_update_depth_exceeded`). This bit demo 141, whose "top performers
+ * only" toggle drove `api.setFilter` from an `$effect` and hung the grid for
+ * ~7s before crashing.
+ *
+ * The fix wraps those mutators in `untrack`, so this pattern must now settle
+ * to a stable filtered row set in a bounded number of flushes.
+ */
+
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; team: string; salary: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+
+const sampleRows: Row[] = [
+  { id: 1, name: 'Ada Lovelace', team: 'Research', salary: 142_000 },
+  { id: 2, name: 'Grace Hopper', team: 'Compilers', salary: 158_000 },
+  { id: 3, name: 'Alan Turing', team: 'Research', salary: 138_000 },
+  { id: 4, name: 'Margaret Hamilton', team: 'Apollo', salary: 165_000 },
+  { id: 5, name: 'Linus Torvalds', team: 'Kernel', salary: 175_000 },
+]
+
+const sampleColumns: ColumnDef<typeof features, Row>[] = [
+  { field: 'name', header: 'Name', width: 200 },
+  { field: 'team', header: 'Team', width: 160 },
+  { field: 'salary', header: 'Salary', width: 140 },
+]
+
+function mountGrid(): { api: SvGridApi<typeof features, Row>; destroy: () => void } {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let capturedApi: SvGridApi<typeof features, Row> | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: sampleRows,
+      columns: sampleColumns,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+      },
+      rowHeight: 36,
+      containerHeight: 480,
+      virtualization: false,
+      onApiReady(api: SvGridApi<typeof features, Row>) {
+        capturedApi = api
+      },
+    } as any,
+  })
+  flushSync()
+  if (!capturedApi) throw new Error('onApiReady never fired')
+  return { api: capturedApi, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('imperative filter API driven from a reactive $effect', () => {
+  it('setFilter/clearFilter inside an $effect settle without an update loop', () => {
+    const { api, destroy } = mountGrid()
+    // Independent root so we own the effect lifecycle and can flush it.
+    let topOnly = $state(false)
+    let runs = 0
+    const stop = $effect.root(() => {
+      $effect(() => {
+        runs += 1
+        // Reads happen inside the mutators; the guard against looping is that
+        // those reads are untracked, so this effect must NOT re-run per write.
+        if (topOnly) api.setFilter('salary', { operator: 'greaterThan', value: '150000' })
+        else api.clearFilter('salary')
+      })
+    })
+    try {
+      flushSync()
+      // Turning the filter on must narrow the set and NOT blow the update depth.
+      topOnly = true
+      // If the mutator's reads leaked, this flush would throw
+      // effect_update_depth_exceeded.
+      expect(() => flushSync()).not.toThrow()
+
+      const displayed = api.getDisplayedRows()
+      expect(displayed.map((r) => (r as Row).id).sort()).toEqual([2, 4, 5])
+
+      // The effect ran a bounded number of times: once on mount + once for the
+      // toggle. A leaked dependency would push this into the hundreds.
+      expect(runs).toBeLessThanOrEqual(3)
+
+      // Toggling back off clears cleanly too.
+      topOnly = false
+      expect(() => flushSync()).not.toThrow()
+      expect(api.getDisplayedRows().length).toBe(sampleRows.length)
+    } finally {
+      stop()
+      destroy()
+    }
+  })
+})

package/src/ui-app.types.ts

@@ -72,6 +72,9 @@ export type TourStep = {
   target?: string | HTMLElement
   title?: string
   content: string
+  /** Optional illustration shown as a banner above the title. A URL / data-URI
+   *  (rendered as an `<img>`) or inline SVG/HTML markup (author-controlled). */
+  image?: string
 }
 
 /** One entry in a timeline. */

package/src/virtual.test.ts

@@ -48,10 +48,12 @@ describe('SvListBox virtual', () => {
       const rendered = target.querySelectorAll('.sv-listbox__opt').length
       expect(rendered).toBeGreaterThan(0)
       expect(rendered).toBeLessThan(60) // nowhere near 5000
-      // A fixed-height sizer keeps the scrollbar honest.
-      const sizer = target.querySelector<HTMLElement>('.sv-listbox__sizer')!
-      expect(sizer).not.toBeNull()
-      expect(sizer.style.height).toBe(`${5000 * 32}px`)
+      // Top + bottom spacers + the windowed rows reserve the full scroll height,
+      // keeping the scrollbar honest without positioning rows out of flow.
+      const spacers = target.querySelectorAll<HTMLElement>('.sv-listbox__spacer')
+      expect(spacers.length).toBe(2)
+      const spacerPx = [...spacers].reduce((sum, s) => sum + parseFloat(s.style.height || '0'), 0)
+      expect(spacerPx + rendered * 32).toBe(5000 * 32)
     } finally { unmount(app); target.remove() }
   })