fix(common): make SlickDataView filtering CSP-safe by default

demos/vanilla/src/examples/example03.ts

@@ -346,9 +346,6 @@ export default class Example03 {
       autoResize: {
         container: '.demo-container',
       },
-      dataView: {
-        useCSPSafeFilter: true,
-      },
       enableFormattedDataCache: false, // enable it when you have a large dataset (e.g. we'll enable it when loading over 10K)
       headerMenu: {
         hideFreezeColumnsCommand: false,

docs/developer-guides/csp-compliance.md

@@ -14,8 +14,6 @@ this.gridOptions = {
 
 > **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
 
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
 ```typescript
 import DOMPurify from 'dompurify';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -36,24 +34,9 @@ with this code in place, we can use the following CSP meta tag (which is what we
 ```
 
 #### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-import DOMPurify from 'dompurify';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-
-// DOM Purify is already configured in Slickgrid-Universal with the configuration shown below
-this.gridOptions = {
-  // you could also optionally use the sanitizerOptions instead
-  // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-  dataView: {
-    useCSPSafeFilter: true
-  },
-}
-this.sgb = new Slicker.GridBundle(gridContainerElm, this.columns, this.gridOptions, this.dataset);
-```
+DataView filtering is CSP-safe by default and does not use runtime code generation. No DataView option is required. The deprecated `inlineFilters` and `useCSPSafeFilter` options remain accepted for backward compatibility but are ignored.
 
 ### Custom Formatter using native HTML
 We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.
 
-You can take a look at the original SlickGrid library with this new [Filtered DataView with HTML Formatter - CSP Header (Content Security Policy)](https://6pac.github.io/SlickGrid/examples/example4-model-html-formatters.html) example which uses this new approach. There was no new Example created in Slickgrid-Universal specifically for this but the approach is the same.
+You can take a look at the original SlickGrid library with this new [Filtered DataView with HTML Formatter - CSP Header (Content Security Policy)](https://6pac.github.io/SlickGrid/examples/example4-model-html-formatters.html) example which uses this new approach. There was no new Example created in Slickgrid-Universal specifically for this but the approach is the same.

frameworks/angular-slickgrid/docs/developer-guides/csp-compliance.md

@@ -14,8 +14,6 @@ this.gridOptions = {
 
 > **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
 
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
 ```typescript
 import DOMPurify from 'dompurify';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -35,28 +33,7 @@ with this code in place, we can use the following CSP meta tag (which is what we
 ```
 
 #### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-import DOMPurify from 'dompurify';
-import { GridOption } from 'angular-slickgrid';
-
-export class Example1 {
-  gridOptions: GridOption;
-
-  prepareGrid() {
-    // ...
-
-    this.gridOptions = {
-      // you could also optionally use the sanitizerOptions instead
-      // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-      dataView: {
-        useCSPSafeFilter: true
-      },
-    }
-  }
-}
-```
+DataView filtering is CSP-safe by default and does not use runtime code generation. No DataView option is required. The deprecated `inlineFilters` and `useCSPSafeFilter` options remain accepted for backward compatibility but are ignored.
 
 ### Custom Formatter using native HTML
 We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.

frameworks/aurelia-slickgrid/docs/developer-guides/csp-compliance.md

@@ -14,8 +14,6 @@ this.gridOptions = {
 
 > **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
 
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
 ```typescript
 import DOMPurify from 'dompurify';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -35,28 +33,7 @@ with this code in place, we can use the following CSP meta tag (which is what we
 ```
 
 #### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-import DOMPurify from 'dompurify';
-import { GridOption } from 'aurelia-slickgrid';
-
-export class Example1 {
-  gridOptions: GridOption;
-
-  prepareGrid() {
-    // ...
-
-    this.gridOptions = {
-      // you could also optionally use the sanitizerOptions instead
-      // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-      dataView: {
-        useCSPSafeFilter: true
-      },
-    }
-  }
-}
-```
+DataView filtering is CSP-safe by default and does not use runtime code generation. No DataView option is required. The deprecated `inlineFilters` and `useCSPSafeFilter` options remain accepted for backward compatibility but are ignored.
 
 ### Custom Formatter using native HTML
 We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.

frameworks/slickgrid-react/docs/developer-guides/csp-compliance.md

@@ -14,8 +14,6 @@ const gridOptions = {
 
 > **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
 
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
 ```typescript
 import DOMPurify from 'dompurify';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -34,37 +32,7 @@ with this code in place, we can use the following CSP meta tag (which is what we
 ```
 
 #### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-import DOMPurify from 'dompurify';
-import { GridOption } from 'slickgrid-react';
-
-const Example: React.FC = () => {
-  const [dataset, setDataset] = useState<any[]>([]);
-  const [columns, setColumns] = useState<Column[]>([]);
-  const [options, setOptions] = useState<GridOption | undefined>(undefined);
-  const reactGridRef = useRef<SlickgridReactInstance | null>(null);
-
-useEffect(() => defineGrid(), []);
-
-  function reactGridReady(reactGrid: SlickgridReactInstance) {
-    reactGridRef.current = reactGrid;
-  }
-
-  function defineGrid() {
-    // ...
-
-    setOptions({
-      // you could also optionally use the sanitizerOptions instead
-      // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-      dataView: {
-        useCSPSafeFilter: true
-      },
-    });
-  }
-}
-```
+DataView filtering is CSP-safe by default and does not use runtime code generation. No DataView option is required. The deprecated `inlineFilters` and `useCSPSafeFilter` options remain accepted for backward compatibility but are ignored.
 
 ### Custom Formatter using native HTML
 We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.

frameworks/slickgrid-vue/docs/developer-guides/csp-compliance.md

@@ -14,8 +14,6 @@ this.gridOptions = {
 
 > **Note** If you're wondering about the `ADD_ATTR: ['level']`, well the "level" is a custom attribute used by SlickGrid Grouping/Draggable Grouping to track the grouping level depth and it must be kept.
 
-> **Note** the DataView is not CSP safe by default, it is opt-in via the `useCSPSafeFilter` option.
-
 ```typescript
 import DOMPurify from 'dompurify';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -37,35 +35,7 @@ with this code in place, we can use the following CSP meta tag (which is what we
 ```
 
 #### DataView
-Since we use the DataView, you will also need to enable a new `useCSPSafeFilter` flag to be CSP safe as the name suggest. This option is opt-in because it has a slight performance impact when enabling this option (it shouldn't be noticeable unless you use a very large dataset).
-
-```typescript
-<script setup lang="ts">
-import DOMPurify from 'dompurify';
-import { Column, Filters, Formatters, GridOption, SlickgridVue, SortDirection } from 'slickgrid-vue';
-import { onBeforeMount, type Ref } from 'vue';
-
-const gridOptions = ref<GridOption>();
-const columns: Ref<Column[]> = ref([]);
-const dataset = ref<any[]>([]);
-
-onBeforeMount(() => {
-  defineGrid();
-});
-
-function defineGrid() {
-  // ...
-
-  gridOptions.value = {
-    // you could also optionally use the sanitizerOptions instead
-    // sanitizerOptions: { RETURN_TRUSTED_TYPE: true }
-    dataView: {
-      useCSPSafeFilter: true
-    },
-  }
-}
-</script>
-```
+DataView filtering is CSP-safe by default and does not use runtime code generation. No DataView option is required. The deprecated `inlineFilters` and `useCSPSafeFilter` options remain accepted for backward compatibility but are ignored.
 
 ### Custom Formatter using native HTML
 We now also allow passing native HTML Element as a Custom Formatter instead of HTML string in order to avoid the use of `innerHTML` and stay CSP safe. We also have a new grid option named `enableHtmlRendering`, which is enabled by default and is allowing the use of `innerHTML` in the library (by Formatters and others), however when disabled it will totally restrict the use of `innerHTML` which will help to stay CSP safe.

package.json

@@ -32,6 +32,7 @@
     "build:universal": "tsc --build ./tsconfig.packages.json && pnpm sass:bundle",
     "build:frameworks": "pnpm -r --stream --filter=\"./{demos,frameworks,frameworks-plugins}/**\" run build",
     "build:watch": "tsc --build ./tsconfig.packages.json --watch",
+    "bench:data-view": "vitest bench --config ./test/vitest.benchmark.config.mts --run ./test/benchmarks/slickDataView.bench.ts",
     "angular:watch": "pnpm -r --parallel run angular:dev",
     "aurelia:watch": "pnpm -r --parallel run aurelia:dev",
     "react:watch": "pnpm -r --parallel run react:dev",
@@ -148,4 +149,4 @@
     "type": "ko_fi",
     "url": "https://ko-fi.com/ghiscoding"
   }
-}
+}

packages/common/src/core/__tests__/slickDataView.spec.ts

@@ -1734,7 +1734,7 @@ describe('SlickDatView core file', () => {
       expect(refreshSpy).toHaveBeenCalled();
     });
 
-    it('should be able to set a filter with CSP Safe approach and expect items to be filtered', () => {
+    it('should keep the deprecated CSP-safe option backward compatible', () => {
       const items = [
         { id: 1, name: 'Bob', age: 33 },
         { id: 4, name: 'John', age: 20 },
@@ -1755,6 +1755,52 @@ describe('SlickDatView core file', () => {
       ]);
     });
 
+    it('should always use CSP-safe filtering when deprecated inline filter options are enabled', () => {
+      const minimumId = 2;
+      const items = [
+        { id: 1, name: 'Bob', age: 33 },
+        { id: 4, name: 'John', age: 20 },
+        { id: 3, name: 'Jane', age: 24 },
+      ];
+      const filter = (item: any) => item.id >= minimumId;
+      const functionSpy = vi.spyOn(globalThis, 'Function');
+
+      dv = new SlickDataView({ inlineFilters: true, useCSPSafeFilter: false });
+      dv.setItems(items);
+      dv.setFilter(filter);
+
+      expect(functionSpy).not.toHaveBeenCalled();
+      expect(dv.getFilter()).toBe(filter);
+      expect(dv.getFilteredItems()).toEqual([
+        { id: 4, name: 'John', age: 20 },
+        { id: 3, name: 'Jane', age: 24 },
+      ]);
+
+      functionSpy.mockRestore();
+    });
+
+    it('should cache successful filters when the filter is expanding', () => {
+      const items = [
+        { id: 1, name: 'Bob', age: 33 },
+        { id: 4, name: 'John', age: 20 },
+        { id: 3, name: 'Jane', age: 24 },
+      ];
+      const filter = vi.fn((item: any) => item.id >= 2);
+
+      dv.setItems(items);
+      dv.setRefreshHints({ isFilterExpanding: true });
+      dv.setFilter(filter);
+
+      expect(filter).toHaveBeenCalledTimes(3);
+
+      dv.setRefreshHints({ isFilterExpanding: true });
+      dv.refresh();
+
+      expect(filter).toHaveBeenCalledTimes(4);
+      expect(filter).toHaveBeenLastCalledWith(items[0], undefined);
+      expect(dv.getFilteredItems()).toEqual([items[1], items[2]]);
+    });
+
     it('should be able to set a filter and extra filter arguments and expect items to be filtered', () => {
       const searchString = 'Ob'; // we'll provide "searchString" as filter args
       function myFilter(item: any, args: any) {
@@ -1782,7 +1828,7 @@ describe('SlickDatView core file', () => {
       ]);
     });
 
-    it('should be able to set a filter as CSP Safe and extra filter arguments and expect items to be filtered', () => {
+    it('should keep deprecated inline and CSP-safe options backward compatible with filter arguments', () => {
       const searchString = 'Ob'; // we'll provide "searchString" as filter args
       const myFilter = (item: any, args: any) => item.name.toLowerCase().includes(args.searchString?.toLowerCase());
       const items = [