@svgrid/grid 2.6.1 → 2.6.2

package/src/filter-operators.ts

@@ -1,157 +1,157 @@
-// Filter-operator catalogue + the pure helpers that pick which operators
-// apply to a column and how they're labelled. Fully static - no grid state -
-// so it lives outside the controller.
-import type { Column, RowData } from "./index";
-import type { FilterOperator, FilterOption } from "./SvGrid.types";
-
-export const filterOperatorOptions: Array<FilterOption> = [
-  { value: "contains", label: "Contains", iconName: "op-contains" },
-  { value: "notContains", label: "Not contains", iconName: "op-notContains" },
-  { value: "equals", label: "Equals", iconName: "op-equals" },
-  { value: "notEquals", label: "Not equals", iconName: "op-notEquals" },
-  { value: "startsWith", label: "Starts with", iconName: "op-startsWith" },
-  { value: "endsWith", label: "Ends with", iconName: "op-endsWith" },
-  { value: "regex", label: "Regex", iconName: "op-regex" },
-  { value: "in", label: "In", iconName: "op-in" },
-  { value: "notIn", label: "Not in", iconName: "op-notIn" },
-  { value: "greaterThan", label: "Greater than", iconName: "op-greaterThan" },
-  { value: "lessThan", label: "Less than", iconName: "op-lessThan" },
-  { value: "between", label: "Between", iconName: "op-between" },
-  { value: "isBlank", label: "Blank", iconName: "op-isBlank" },
-  { value: "isNotBlank", label: "Not blank", iconName: "op-isNotBlank" },
-];
-/** Operators whose predicate is a set-membership test over a token list.
- *  The filter row renders a multi-value chip input for these instead of a
- *  single text box. */
-export const SET_OPERATORS: ReadonlyArray<FilterOperator> = ["in", "notIn"];
-/** Operators that need no value input - they act on emptiness alone. */
-export const VALUELESS_OPERATORS: ReadonlyArray<FilterOperator> = [
-  "isBlank",
-  "isNotBlank",
-];
-/** Which operators make sense for each column editor type. */
-export const TEXT_OPERATORS: Array<FilterOperator> = [
-  "contains",
-  "notContains",
-  "equals",
-  "notEquals",
-  "startsWith",
-  "endsWith",
-  "regex",
-  "in",
-  "notIn",
-  "isBlank",
-  "isNotBlank",
-];
-export const NUMBER_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "notEquals",
-  "greaterThan",
-  "lessThan",
-  "between",
-  "in",
-  "notIn",
-  "isBlank",
-  "isNotBlank",
-];
-export const DATE_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "notEquals",
-  "lessThan",
-  "greaterThan",
-  "between",
-  "isBlank",
-  "isNotBlank",
-];
-export const CHECKBOX_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "isBlank",
-  "isNotBlank",
-];
-export const fallbackOperatorOption: FilterOption = {
-  value: "contains",
-  label: "Contains",
-  iconName: "op-contains",
-};
-
-export function operatorOption(value: FilterOperator): FilterOption {
-  return (
-    filterOperatorOptions.find((option) => option.value === value) ??
-    fallbackOperatorOption
-  );
-}
-
-/** Returns the operators that make sense for the given column's data type. */
-export function operatorsForColumn<TData extends RowData>(
-  column: Column<TData> | undefined,
-): Array<FilterOption> {
-  const editorType = column?.columnDef.editorType ?? "text";
-  const ids =
-    editorType === "number"
-      ? NUMBER_OPERATORS
-      : editorType === "date" || editorType === "datetime"
-        ? DATE_OPERATORS
-        : editorType === "checkbox"
-          ? CHECKBOX_OPERATORS
-          : TEXT_OPERATORS;
-  return ids
-    .map((id) => filterOperatorOptions.find((option) => option.value === id))
-    .filter((option): option is FilterOption => Boolean(option));
-}
-
-/** Default operator for a column (first one valid for its type). */
-export function defaultOperatorFor<TData extends RowData>(
-  column: Column<TData> | undefined,
-): FilterOperator {
-  return operatorsForColumn(column)[0]?.value ?? "contains";
-}
-
-/** Date columns get friendlier labels for "less / greater than". */
-export function operatorLabelFor<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return "Before";
-    if (option.value === "greaterThan") return "After";
-  }
-  return option.label;
-}
-
-/** GridMessages key for each operator's label (see grid-messages.ts). */
-const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
-  contains: "opContains",
-  notContains: "opNotContains",
-  equals: "opEquals",
-  notEquals: "opNotEquals",
-  startsWith: "opStartsWith",
-  endsWith: "opEndsWith",
-  regex: "opRegex",
-  in: "opIn",
-  notIn: "opNotIn",
-  greaterThan: "opGreaterThan",
-  lessThan: "opLessThan",
-  between: "opBetween",
-  isBlank: "opIsBlank",
-  isNotBlank: "opIsNotBlank",
-};
-
-/**
- * Localized operator label: honors date `Before`/`After` relabels, then the
- * `localeText` override for the operator, falling back to the English
- * `option.label`. `messages` is a loose string map to avoid a type cycle.
- */
-export function localizeOperatorLabel<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-  messages?: Record<string, string> | null,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return messages?.opBefore || "Before";
-    if (option.value === "greaterThan") return messages?.opAfter || "After";
-  }
-  const key = OPERATOR_MESSAGE_KEY[option.value];
-  return (key && messages?.[key]) || option.label;
-}
+// Filter-operator catalogue + the pure helpers that pick which operators
+// apply to a column and how they're labelled. Fully static - no grid state -
+// so it lives outside the controller.
+import type { Column, RowData } from "./index";
+import type { FilterOperator, FilterOption } from "./SvGrid.types";
+
+export const filterOperatorOptions: Array<FilterOption> = [
+  { value: "contains", label: "Contains", iconName: "op-contains" },
+  { value: "notContains", label: "Not contains", iconName: "op-notContains" },
+  { value: "equals", label: "Equals", iconName: "op-equals" },
+  { value: "notEquals", label: "Not equals", iconName: "op-notEquals" },
+  { value: "startsWith", label: "Starts with", iconName: "op-startsWith" },
+  { value: "endsWith", label: "Ends with", iconName: "op-endsWith" },
+  { value: "regex", label: "Regex", iconName: "op-regex" },
+  { value: "in", label: "In", iconName: "op-in" },
+  { value: "notIn", label: "Not in", iconName: "op-notIn" },
+  { value: "greaterThan", label: "Greater than", iconName: "op-greaterThan" },
+  { value: "lessThan", label: "Less than", iconName: "op-lessThan" },
+  { value: "between", label: "Between", iconName: "op-between" },
+  { value: "isBlank", label: "Blank", iconName: "op-isBlank" },
+  { value: "isNotBlank", label: "Not blank", iconName: "op-isNotBlank" },
+];
+/** Operators whose predicate is a set-membership test over a token list.
+ *  The filter row renders a multi-value chip input for these instead of a
+ *  single text box. */
+export const SET_OPERATORS: ReadonlyArray<FilterOperator> = ["in", "notIn"];
+/** Operators that need no value input - they act on emptiness alone. */
+export const VALUELESS_OPERATORS: ReadonlyArray<FilterOperator> = [
+  "isBlank",
+  "isNotBlank",
+];
+/** Which operators make sense for each column editor type. */
+export const TEXT_OPERATORS: Array<FilterOperator> = [
+  "contains",
+  "notContains",
+  "equals",
+  "notEquals",
+  "startsWith",
+  "endsWith",
+  "regex",
+  "in",
+  "notIn",
+  "isBlank",
+  "isNotBlank",
+];
+export const NUMBER_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "notEquals",
+  "greaterThan",
+  "lessThan",
+  "between",
+  "in",
+  "notIn",
+  "isBlank",
+  "isNotBlank",
+];
+export const DATE_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "notEquals",
+  "lessThan",
+  "greaterThan",
+  "between",
+  "isBlank",
+  "isNotBlank",
+];
+export const CHECKBOX_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "isBlank",
+  "isNotBlank",
+];
+export const fallbackOperatorOption: FilterOption = {
+  value: "contains",
+  label: "Contains",
+  iconName: "op-contains",
+};
+
+export function operatorOption(value: FilterOperator): FilterOption {
+  return (
+    filterOperatorOptions.find((option) => option.value === value) ??
+    fallbackOperatorOption
+  );
+}
+
+/** Returns the operators that make sense for the given column's data type. */
+export function operatorsForColumn<TData extends RowData>(
+  column: Column<TData> | undefined,
+): Array<FilterOption> {
+  const editorType = column?.columnDef.editorType ?? "text";
+  const ids =
+    editorType === "number"
+      ? NUMBER_OPERATORS
+      : editorType === "date" || editorType === "datetime"
+        ? DATE_OPERATORS
+        : editorType === "checkbox"
+          ? CHECKBOX_OPERATORS
+          : TEXT_OPERATORS;
+  return ids
+    .map((id) => filterOperatorOptions.find((option) => option.value === id))
+    .filter((option): option is FilterOption => Boolean(option));
+}
+
+/** Default operator for a column (first one valid for its type). */
+export function defaultOperatorFor<TData extends RowData>(
+  column: Column<TData> | undefined,
+): FilterOperator {
+  return operatorsForColumn(column)[0]?.value ?? "contains";
+}
+
+/** Date columns get friendlier labels for "less / greater than". */
+export function operatorLabelFor<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return "Before";
+    if (option.value === "greaterThan") return "After";
+  }
+  return option.label;
+}
+
+/** GridMessages key for each operator's label (see grid-messages.ts). */
+const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
+  contains: "opContains",
+  notContains: "opNotContains",
+  equals: "opEquals",
+  notEquals: "opNotEquals",
+  startsWith: "opStartsWith",
+  endsWith: "opEndsWith",
+  regex: "opRegex",
+  in: "opIn",
+  notIn: "opNotIn",
+  greaterThan: "opGreaterThan",
+  lessThan: "opLessThan",
+  between: "opBetween",
+  isBlank: "opIsBlank",
+  isNotBlank: "opIsNotBlank",
+};
+
+/**
+ * Localized operator label: honors date `Before`/`After` relabels, then the
+ * `localeText` override for the operator, falling back to the English
+ * `option.label`. `messages` is a loose string map to avoid a type cycle.
+ */
+export function localizeOperatorLabel<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+  messages?: Record<string, string> | null,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return messages?.opBefore || "Before";
+    if (option.value === "greaterThan") return messages?.opAfter || "After";
+  }
+  const key = OPERATOR_MESSAGE_KEY[option.value];
+  return (key && messages?.[key]) || option.label;
+}

package/src/filtering/excel-filters.ts

@@ -159,61 +159,89 @@ function scanInTokens(value: unknown): { tokens: string[]; trailing: string } {
   return { tokens, trailing: take() }
 }
 
-export function applyExcelFilter(
-  cellValue: unknown,
+/** A filter with its needle-side work already done. Call per row. */
+export type CompiledExcelFilter = (cellValue: unknown) => boolean
+
+/**
+ * Compile a filter once, then test many rows against it.
+ *
+ * Everything that depends only on the FILTER - folding the needle, splitting
+ * `in` tokens, building the regex, coercing range endpoints - happens here,
+ * so the per-row closure does the minimum. Filtering 100k rows used to redo
+ * all of it 100k times.
+ *
+ * `applyExcelFilter` is defined in terms of this, so there is exactly one
+ * copy of the operator semantics.
+ */
+export function compileExcelFilter(
   filter: ExcelFilter,
   options?: ExcelFilterOptions,
-) {
-  const text = String(cellValue ?? '')
-  const normalizedText = normalizeForFilter(text, options?.locale)
-  const normalizedValue = normalizeForFilter(String(filter.value ?? ''), options?.locale)
+): CompiledExcelFilter {
+  const locale = options?.locale
+  const fold = (v: unknown) => normalizeForFilter(String(v ?? ''), locale)
+  const needle = fold(filter.value)
+
   switch (filter.operator) {
     case 'contains':
-      return normalizedText.includes(normalizedValue)
+      return (cellValue) => fold(cellValue).includes(needle)
     case 'notContains':
       // An empty needle is no constraint (mirrors `contains` returning true),
       // so nothing is excluded until the user types something.
-      return normalizedValue === '' || !normalizedText.includes(normalizedValue)
+      if (needle === '') return () => true
+      return (cellValue) => !fold(cellValue).includes(needle)
     case 'equals':
-      return normalizedText === normalizedValue
+      return (cellValue) => fold(cellValue) === needle
     case 'notEquals':
-      return normalizedValue === '' || normalizedText !== normalizedValue
+      if (needle === '') return () => true
+      return (cellValue) => fold(cellValue) !== needle
     case 'startsWith':
-      return normalizedText.startsWith(normalizedValue)
+      return (cellValue) => fold(cellValue).startsWith(needle)
     case 'endsWith':
-      return normalizedText.endsWith(normalizedValue)
+      return (cellValue) => fold(cellValue).endsWith(needle)
     case 'regex': {
       // Case-insensitive by default (matches the accent/case-folded feel of
       // the other text operators). An invalid pattern matches nothing rather
       // than throwing, so a half-typed regex never crashes the row model.
+      // Note this tests the RAW text, not the folded text.
       const pattern = String(filter.value ?? '')
-      if (!pattern) return true
+      if (!pattern) return () => true
+      let re: RegExp
       try {
-        return new RegExp(pattern, 'i').test(text)
+        re = new RegExp(pattern, 'i')
       } catch {
-        return false
+        return () => false
       }
+      return (cellValue) => re.test(String(cellValue ?? ''))
     }
     case 'in':
     case 'notIn': {
       const tokens = splitInTokens(filter.value)
-      if (tokens.length === 0) return true
-      const hit = tokens.some(
-        (t) => normalizeForFilter(t, options?.locale) === normalizedText,
-      )
-      return filter.operator === 'in' ? hit : !hit
+      if (tokens.length === 0) return () => true
+      // A Set of pre-folded tokens turns the old per-row `tokens.some(...)`
+      // (which re-folded every token for every row) into one lookup.
+      const wanted = new Set(tokens.map((t) => normalizeForFilter(t, locale)))
+      if (filter.operator === 'in') return (cellValue) => wanted.has(fold(cellValue))
+      return (cellValue) => !wanted.has(fold(cellValue))
     }
     case 'greaterThan': {
-      const a = Number(cellValue)
       const b = Number(filter.value)
-      if (Number.isFinite(a) && Number.isFinite(b)) return a > b
-      return String(cellValue ?? '') > String(filter.value ?? '')
+      const bFinite = Number.isFinite(b)
+      const bText = String(filter.value ?? '')
+      return (cellValue) => {
+        const a = Number(cellValue)
+        if (bFinite && Number.isFinite(a)) return a > b
+        return String(cellValue ?? '') > bText
+      }
     }
     case 'lessThan': {
-      const a = Number(cellValue)
       const b = Number(filter.value)
-      if (Number.isFinite(a) && Number.isFinite(b)) return a < b
-      return String(cellValue ?? '') < String(filter.value ?? '')
+      const bFinite = Number.isFinite(b)
+      const bText = String(filter.value ?? '')
+      return (cellValue) => {
+        const a = Number(cellValue)
+        if (bFinite && Number.isFinite(a)) return a < b
+        return String(cellValue ?? '') < bText
+      }
     }
     case 'between': {
       // Two paths: numeric (coerce both endpoints with the historical
@@ -223,21 +251,30 @@ export function applyExcelFilter(
       // see the historical inclusive-range behaviour.
       const lo = filter.value   == null ? 0 : Number(filter.value)
       const hi = filter.valueTo == null ? 0 : Number(filter.valueTo)
-      const a  = Number(cellValue ?? 0)
-      if (Number.isFinite(a) && Number.isFinite(lo) && Number.isFinite(hi)) {
-        return a >= lo && a <= hi
-      }
+      const rangeFinite = Number.isFinite(lo) && Number.isFinite(hi)
       // Either endpoint is non-numeric (ISO date string, etc). Compare
       // lexicographically - YYYY-MM-DD orders chronologically so the
       // result matches user intent.
-      const s  = String(cellValue ?? '')
       const sl = String(filter.value ?? '')
       const sh = String(filter.valueTo ?? '')
-      return s >= sl && s <= sh
+      return (cellValue) => {
+        const a = Number(cellValue ?? 0)
+        if (rangeFinite && Number.isFinite(a)) return a >= lo && a <= hi
+        const s = String(cellValue ?? '')
+        return s >= sl && s <= sh
+      }
     }
     case 'isBlank':
-      return text.trim().length === 0
+      return (cellValue) => String(cellValue ?? '').trim().length === 0
     case 'isNotBlank':
-      return text.trim().length > 0
+      return (cellValue) => String(cellValue ?? '').trim().length > 0
   }
 }
+
+export function applyExcelFilter(
+  cellValue: unknown,
+  filter: ExcelFilter,
+  options?: ExcelFilterOptions,
+) {
+  return compileExcelFilter(filter, options)(cellValue)
+}

package/src/flex-render.ts

@@ -1,3 +1,3 @@
-/// <reference types="svelte" />
-
-export { default as FlexRender } from './FlexRender.svelte'
+/// <reference types="svelte" />
+
+export { default as FlexRender } from './FlexRender.svelte'