fix(binding): remove unnecessary sanitizer in BindingService (#947)

* fix(binding): remove unnecessary sanitizer in BindingService
- we used DOM Purify in the BindingService to sanitize variable binding values but it's most probably not need and it was found to be a problem in Salesforce because DOM Purify doesn't work on that environment, so let's simplify the binding

* chore: keep Vite bundle for salesforce zip file

packages/binding/package.json

@@ -53,9 +53,6 @@
     "> 1%",
     "not dead"
   ],
-  "dependencies": {
-    "dompurify": "^3.0.1"
-  },
   "devDependencies": {
     "@types/dompurify": "^3.0.1",
     "cross-env": "^7.0.3",

packages/binding/src/binding.helper.ts

@@ -15,8 +15,6 @@ export class BindingHelper {
     return this._observers;
   }
 
-  constructor() { }
-
   dispose() {
     let observer = this._observers.pop();
     while (observer) {

packages/binding/src/binding.service.ts

@@ -1,7 +1,3 @@
-/* eslint-disable no-bitwise */
-import * as DOMPurify_ from 'dompurify';
-const DOMPurify = ((DOMPurify_ as any)?.['default'] ?? DOMPurify_); // patch for rollup
-
 import { Binding, BoundedEventWithListener, ElementBinding, ElementBindingWithListener } from './interfaces';
 
 /**
@@ -22,9 +18,9 @@ export class BindingService {
     this._property = binding.property || '';
     this._elementBindings = [];
     if (binding.property && binding.variable && (binding.variable.hasOwnProperty(binding.property) || binding.property in binding.variable)) {
-      this._value = typeof binding.variable[binding.property] === 'string' ? this.sanitizeText(binding.variable[binding.property]) : binding.variable[binding.property];
+      this._value = binding.variable[binding.property];
     } else {
-      this._value = typeof binding.variable === 'string' ? this.sanitizeText(binding.variable) : binding.variable;
+      this._value = binding.variable;
     }
 
     if (typeof binding.variable === 'object') {
@@ -58,11 +54,11 @@ export class BindingService {
   }
 
   valueSetter<T extends Element = Element>(val: any) {
-    this._value = typeof val === 'string' ? this.sanitizeText(val) : val;
+    this._value = val;
     if (Array.isArray(this._elementBindings)) {
       for (const binding of this._elementBindings) {
         if (binding?.element && binding?.attribute) {
-          (binding.element as T)[binding.attribute as keyof T] = typeof val === 'string' ? this.sanitizeText(val) : val;
+          (binding.element as T)[binding.attribute as keyof T] = val;
         }
       }
     }
@@ -139,13 +135,14 @@ export class BindingService {
         this._boundedEventWithListeners.push({ element, eventName, listener, uid: this.generateUuidV4() });
       }
       this._elementBindings.push(binding);
-      element[attribute as keyof T] = typeof this._value === 'string' ? this.sanitizeText(this._value) : this._value;
+      element[attribute as keyof T] = this._value;
     }
   }
 
   /** Generate a UUID version 4 RFC compliant */
   protected generateUuidV4() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      /* eslint-disable no-bitwise */
       const r = Math.random() * 16 | 0;
       const v = c === 'x' ? r : (r & 0x3 | 0x8);
       return v.toString(16);
@@ -155,8 +152,4 @@ export class BindingService {
   protected hasData(value: any): boolean {
     return value !== undefined && value !== null && value !== '';
   }
-
-  protected sanitizeText(dirtyText: string): string {
-    return (DOMPurify?.sanitize) ? DOMPurify.sanitize(dirtyText, {}) : dirtyText;
-  }
 }

packages/pagination-component/src/slick-pagination.component.ts

@@ -34,7 +34,6 @@ export class SlickPaginationComponent {
   constructor(protected readonly paginationService: PaginationService, protected readonly pubSubService: PubSubService, protected readonly sharedService: SharedService, protected readonly translaterService?: TranslaterService) {
     this._bindingHelper = new BindingHelper();
     this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `;
-
     this.currentPagination = this.paginationService.getFullPagination();
     this._enableTranslate = this.gridOptions?.enableTranslate ?? false;
 
@@ -202,7 +201,7 @@ export class SlickPaginationComponent {
     this._bindingHelper.bindEventHandler('.icon-seek-end', 'click', this.changeToLastPage.bind(this) as EventListener);
     this._bindingHelper.bindEventHandler('.icon-seek-next', 'click', this.changeToNextPage.bind(this) as EventListener);
     this._bindingHelper.bindEventHandler('.icon-seek-prev', 'click', this.changeToPreviousPage.bind(this) as EventListener);
-    this._bindingHelper.bindEventHandler('select.items-per-page', 'change', (event: & { target: any }) => this.itemsPerPage = +(event?.target?.value ?? 0));
+    this._bindingHelper.bindEventHandler('select.items-per-page', 'change', (event: & { target: any; }) => this.itemsPerPage = +(event?.target?.value ?? 0));
   }
 
   changeToFirstPage(event: MouseEvent) {
@@ -267,7 +266,7 @@ export class SlickPaginationComponent {
     return paginationElm;
   }
 
-  protected createPageNavigation(navAriaLabel: string, liElements: Array<{ liClass: string, aClass: string, ariaLabel: string }>) {
+  protected createPageNavigation(navAriaLabel: string, liElements: Array<{ liClass: string, aClass: string, ariaLabel: string; }>) {
     const navElm = createDomElement('nav', { ariaLabel: navAriaLabel });
     const ulElm = createDomElement('ul', { className: 'pagination' });
 

packages/vanilla-force-bundle/package.json

@@ -36,15 +36,15 @@
     "bundle:commonjs": "tsc --project tsconfig.bundle.json --outDir dist/commonjs --module commonjs",
     "bundle:esm": "tsc --project tsconfig.bundle.json --outDir dist/esm --module esnext --target es2018",
     "bundle:types": "tsc --emitDeclarationOnly --declarationMap --outDir dist/types",
-    "bundle:web": "esbuild src/index.ts --bundle --minify --format=iife --sourcemap --sources-content=false --target=es2018 --main-fields=module,main --global-name=Slicker --outfile=dist/bundle/slickgrid-vanilla-bundle.js",
-    "bundle:web:esbuild": "node esbuild.mjs",
+    "bundle:esbuild": "node esbuild.mjs",
     "bundle:vite": "vite build",
     "prebundle:zip": "pnpm run delete:zip",
     "bundle:zip": "pnpm run zip:dist",
     "delete:zip": "rimraf dist-grid-bundle-zip",
     "zip:dist": "node compress.mjs --output-filename=slickgrid-vanilla-bundle --output-folder=\"dist-grid-bundle-zip/\"",
     "test": "echo testing slickgrid-universal vanilla-force-bundle code"
   },
+  "note": "there are 2 bundler available vite & esbuild, but we really only use Vite only but we keep esbuild for reference",
   "license": "MIT",
   "author": "Ghislain B.",
   "homepage": "https://github.com/ghiscoding/slickgrid-universal",

packages/vanilla-force-bundle/vite.config.ts

@@ -1,10 +1,6 @@
 import path from 'node:path';
-// import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 
-// const filename = fileURLToPath(import.meta.url);
-// const dirname = path.dirname(filename);
-
 export default defineConfig({
   build: {
     emptyOutDir: false, // we only use Vite for the "bundle" folder, we need to keep CJS/ESM untouched