feat!: drop jQuery requirement (#962)

* feat!: drop jQuery requirement - this is a breaking change and will require a new major version from SlickGrid
ghiscoding · May 18, 2023 · 3da21da · 3da21da
1 parent b9b7a98
commit 3da21da
Show file tree

Hide file tree

Showing 69 changed files with 649 additions and 468 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -12,7 +12,6 @@
   "globals": {
     "Slick": true,
     "Slicker": true,
-    "jQuery": true,
     "$": true,
     "_": true
   },
@@ -122,7 +121,7 @@
     "no-console": "off",
     "no-debugger": "error",
     "no-duplicate-case": "error",
-    "no-duplicate-imports": "error",
+    "no-duplicate-imports": "off",
     "no-empty": 1,
     "no-eval": "error",
     "no-extra-bind": "error",

diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -25,17 +25,16 @@
     "@slickgrid-universal/vanilla-force-bundle": "workspace:~",
     "bulma": "^0.9.4",
     "dompurify": "^3.0.1",
+    "fetch-jsonp": "^1.2.3",
     "flatpickr": "^4.6.13",
-    "jquery": "^3.6.4",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^0.2.9",
+    "multiple-select-vanilla": "^0.3.1",
     "rxjs": "^7.8.0",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-dynamic-import-vars": "^2.0.3",
     "@types/fnando__sparkline": "^0.3.4",
-    "@types/jquery": "^3.5.16",
     "@types/moment": "^2.13.0",
     "@types/node": "^18.15.11",
     "@types/whatwg-fetch": "^0.0.33",

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts
@@ -15,6 +15,7 @@ import {
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import fetchJsonp from 'fetch-jsonp';
 // import { fetch } from 'whatwg-fetch';
 
 import { ExampleGridOptions } from './example-grid-options';
@@ -244,22 +245,15 @@ export default class Example4 {
           placeholder: '🔎︎ search city',
 
           // We can use the autocomplete through 3 ways "collection", "collectionAsync" or with your own autocomplete options
-          // use your own autocomplete options, instead of $.ajax, use HttpClient or FetchClient
-          // here we use $.ajax just because I'm not sure how to configure HttpClient with JSONP and CORS
+          // use your own autocomplete options, instead of fetchJsonp, use HttpClient or FetchClient
+          // here we use fetchJsonp just because I'm not sure how to configure HttpClient with JSONP and CORS
           editorOptions: {
             minLength: 3,
             fetch: (searchText, updateCallback) => {
-              $.ajax({
-                url: 'http://gd.geobytes.com/AutoCompleteCity',
-                dataType: 'jsonp',
-                data: {
-                  q: searchText
-                },
-                success: (data) => {
-                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of [''
-                  updateCallback(finalData);
-                }
-              });
+              fetchJsonp(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
+                .then((response) => response.json())
+                .then((json) => updateCallback(json))
+                .catch((ex) => console.log('invalid JSONP response', ex));
             },
           } as AutocompleterOption,
         },
@@ -282,22 +276,15 @@ export default class Example4 {
           // We can use the autocomplete through 3 ways "collection", "collectionAsync" or with your own autocomplete options
           // collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
 
-          // OR use your own autocomplete options, instead of $.ajax, use HttpClient or FetchClient
-          // here we use $.ajax just because I'm not sure how to configure HttpClient with JSONP and CORS
+          // OR use your own autocomplete options, instead of fetchJsonp, use HttpClient or FetchClient
+          // here we use fetchJsonp just because I'm not sure how to configure HttpClient with JSONP and CORS
           filterOptions: {
             minLength: 3,
             fetch: (searchText, updateCallback) => {
-              $.ajax({
-                url: 'http://gd.geobytes.com/AutoCompleteCity',
-                dataType: 'jsonp',
-                data: {
-                  q: searchText
-                },
-                success: (data) => {
-                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of ['']
-                  updateCallback(finalData);
-                }
-              });
+              fetchJsonp(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
+                .then((response) => response.json())
+                .then((json) => updateCallback(json))
+                .catch((ex) => console.log('invalid JSONP response', ex));
             },
           } as AutocompleterOption,
         }

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -345,30 +345,31 @@ export default class Example7 {
       </div>
     </div>`;
 
-    $(DOMPurify.sanitize(modalHtml)).appendTo('body');
+    const elm = document.createElement('div');
+    elm.innerHTML = DOMPurify.sanitize(modalHtml);
+    document.body.appendChild(elm.querySelector('div') as HTMLDivElement);
 
-    $('.btn-close').on('click', function () {
+    this._bindingEventService.bind(document.querySelectorAll('.modal-card-foot .btn-close'), 'click', () => {
       if (grid?.slickGrid?.getOptions().showHeaderRow) {
         grid?.showHeaderRow(true);
       }
       document.getElementById('modal-allFilter')?.remove();
     });
 
-    $('#btn-clear-all').on('click', function () {
+    this._bindingEventService.bind(document.querySelector('#btn-clear-all') as HTMLButtonElement, 'click', () => {
       document.getElementById('modal-allFilter')?.remove();
       grid?.filterService.clearFilters();
     });
 
     for (const columnFilter of grid?.columnDefinitions) {
       if (columnFilter.filterable) {
         const filterElm = `modal-allfilter-${columnFilter.id}`;
-        $('#modal-allFilter-table')
-          .append(
-            `<div class="row slick-headerrow-columns">
+        const innerHtml = document.querySelector('#modal-allFilter-table')!.innerHTML;
+        document.querySelector('#modal-allFilter-table')!.innerHTML = innerHtml +
+          `<div class="row slick-headerrow-columns">
               <div class="column">${columnFilter.name}</div>
               <div id="${filterElm}" class="column ui-state-default slick-headerrow-column"></div>
-            </div>`
-          );
+            </div>`;
         grid?.filterService.drawFilterTemplate(columnFilter, `#${filterElm}`);
       }
     }

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html
@@ -9,10 +9,6 @@ <h3 class="title is-3">
       <span class="mdi mdi-link-variant mdi-v-align-sub"></span> code
     </a>
   </div>
-  <h6 class="title is-6 italic">
-    The Autocomplete Editor (City of Origin) might throw some console errors because it uses "http://gd.geobytes.com/" request (which is not using https).
-    You can allow "Insecure content" in your browser for this website only to test the Autocomplete
-  </h6>
 </h3>
 
 <section class="columns is-desktop">

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example15.ts b/examples/vite-demo-vanilla-bundle/src/examples/example15.ts
@@ -66,6 +66,9 @@ export default class Example15 {
         id: 'name', name: 'Name', field: 'name', sortable: true,
         type: FieldType.string,
         filterable: true,
+        editor: {
+          model: Editors.text,
+        },
         filter: {
           model: Filters.compoundInput
         },

diff --git a/examples/vite-demo-vanilla-bundle/src/jQuery.ts b/examples/vite-demo-vanilla-bundle/src/jQuery.ts
diff --git a/examples/vite-demo-vanilla-bundle/src/main.ts b/examples/vite-demo-vanilla-bundle/src/main.ts
@@ -1,6 +1,3 @@
-import 'jquery';
-import './jQuery'; // define jQuery on the global window to make it available in Vite since @rollup/plugin-inject causes conflict with SASS variables prefixed with $var
-
 // import all CSS required by Slickgrid-Universal
 import 'flatpickr/dist/flatpickr.min.css';
 import './styles.scss';

diff --git a/examples/vite-demo-vanilla-bundle/tsconfig.json b/examples/vite-demo-vanilla-bundle/tsconfig.json
@@ -21,7 +21,6 @@
     "skipLibCheck": true,
     "strictPropertyInitialization": false,
     "types": [
-      "jquery",
       "node"
     ],
     "typeRoots": [

diff --git a/examples/vite-demo-vanilla-bundle/vite.config.ts b/examples/vite-demo-vanilla-bundle/vite.config.ts
@@ -12,9 +12,6 @@ export default defineConfig(() => {
       // outDir: mode === 'production' ? '../../docs' : 'dist',
       outDir: '../../docs',
     },
-    optimizeDeps: {
-      include: ['jquery'],
-    },
     preview: {
       port: 8888
     },

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
   },
   "comments": {
     "new-version": "To create a new version with Lerna-Lite, simply run the following script (1) 'roll-new-release'.",
-    "devDependencies": "The dev deps 'jQuery', 'slickgrid', 'sortablejs' and 'whatwg-fetch' are simply installed for Jest unit tests."
+    "devDependencies": "The dev deps 'slickgrid', 'sortablejs' and 'whatwg-fetch' are simply installed for Jest unit tests."
   },
   "engines": {
     "node": ">=14.17.0",
@@ -83,7 +83,6 @@
     "jest-cli": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-extended": "^3.2.4",
-    "jquery": "^3.6.4",
     "jsdom": "^21.1.1",
     "jsdom-global": "^3.0.2",
     "moment-mini": "^2.29.4",
@@ -92,7 +91,7 @@
     "rimraf": "^5.0.0",
     "rxjs": "^7.8.0",
     "servor": "^4.0.2",
-    "slickgrid": "^3.0.4",
+    "slickgrid": "^4.0.0-beta.0",
     "sortablejs": "^1.15.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -77,16 +77,14 @@
     "dequal": "^2.0.3",
     "dompurify": "^3.0.1",
     "flatpickr": "^4.6.13",
-    "jquery": "^3.6.4",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^0.2.9",
-    "slickgrid": "^3.0.4",
+    "multiple-select-vanilla": "^0.3.1",
+    "slickgrid": "^4.0.0-beta.0",
     "sortablejs": "^1.15.0",
     "un-flatten-tree": "^2.0.12"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.1",
-    "@types/jquery": "^3.5.16",
     "@types/sortablejs": "^1.15.1",
     "autoprefixer": "^10.4.14",
     "copyfiles": "^2.4.1",

diff --git a/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts b/packages/common/src/editors/__tests__/autocompleterEditor.spec.ts
@@ -765,7 +765,9 @@ describe('AutocompleterEditor', () => {
     it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
       const activeCellMock = { row: 0, cell: 0 };
       jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
       editor = new AutocompleterEditor(editorArguments);
       editor.setValue({ value: 'male', label: 'Male' }, true);
 
@@ -779,7 +781,9 @@ describe('AutocompleterEditor', () => {
     it('should call "show" and expect the DOM element to not be disabled when "onBeforeEditCell" is NOT returning false', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(undefined);
+      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue({
+        getReturnValue: () => undefined
+      });
 
       editor = new AutocompleterEditor(editorArguments);
       const disableSpy = jest.spyOn(editor, 'disable');
@@ -793,8 +797,12 @@ describe('AutocompleterEditor', () => {
     it('should call "show" and expect the DOM element to become disabled with empty value set in the form values when "onBeforeEditCell" returns false', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
 
       editor = new AutocompleterEditor(editorArguments);
       editor.loadValue(mockItemData);
@@ -815,8 +823,12 @@ describe('AutocompleterEditor', () => {
     it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false and also expect "onBeforeComposite" to not be called because the value is blank', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
       gridOptionMock.compositeEditorOptions = {
         excludeDisabledFieldFormValues: true
       };
@@ -837,7 +849,9 @@ describe('AutocompleterEditor', () => {
     it('should call "disable" method and expect the DOM element to become disabled and have an empty formValues be passed in the onCompositeEditorChange event', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
       gridOptionMock.compositeEditorOptions = {
         excludeDisabledFieldFormValues: true
       };
@@ -859,7 +873,9 @@ describe('AutocompleterEditor', () => {
     it('should call "reset" method and expect the DOM element to become blank & untouched and have an empty formValues be passed in the onCompositeEditorChange event', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
       gridOptionMock.compositeEditorOptions = {
         excludeDisabledFieldFormValues: true
       };
@@ -881,8 +897,12 @@ describe('AutocompleterEditor', () => {
     it('should expect "setValue" to have been called and also "onCompositeEditorChange" to have been triggered with the new value showing up in its "formValues" object', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(undefined);
-      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue({
+        getReturnValue: () => undefined
+      });
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+        getReturnValue: () => false
+      });
       gridOptionMock.autoCommitEdit = true;
       (mockColumn.internalColumnEditor as ColumnEditor).collection = ['male', 'female'];
       mockItemData = { id: 123, gender: 'female', isActive: true };
@@ -905,7 +925,9 @@ describe('AutocompleterEditor', () => {
       it('should create the editor and expect a different collection outputed when using the override', () => {
         const activeCellMock = { row: 0, cell: 0 };
         jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
-        const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+        const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue({
+          getReturnValue: () => false
+        });
         mockColumn.internalColumnEditor = {
           collection: ['Other', 'Male', 'Female'],
           collectionOverride: (inputCollection) => inputCollection.filter(item => item !== 'other')