feat!: drop jQuery requirement & use multiple-select-vanilla dependen…

…cy (#976) * feat(common)!: migrate to multiple-select-vanilla (#919) * feat(common)!: migrate to multiple-select-vanilla - switch from `multiple-select-modified` to [multiple-select-vanilla](https://github.com/ghiscoding/multiple-select-vanilla) which no longer requires jQuery - might release as a breaking change version since there is a very small change for the CSS import of the new lib, the MultipleSelectOption also no longer exist in Slickgrid-Universal but is instead in the new lib
ghiscoding · May 29, 2023 · 4e3e1d3 · 4e3e1d3
1 parent 965d4ea
commit 4e3e1d3
Show file tree

Hide file tree

Showing 139 changed files with 1,509 additions and 1,410 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -12,7 +12,6 @@
   "globals": {
     "Slick": true,
     "Slicker": true,
-    "jQuery": true,
     "$": true,
     "_": true
   },

diff --git a/.github/renovate.json5 b/.github/renovate.json5
@@ -14,15 +14,15 @@
     // allow Node14/npm8 until its EOL June 2023
     {
       packageNames: ['node'],
-      allowedVersions: '14.17.0',
+      allowedVersions: '16.15.0',
     },
     {
       packageNames: ['npm'],
-      allowedVersions: '6.14.13',
+      allowedVersions: '8.5.0',
     },
     {
       packageNames: ['rxjs'],
-      allowedVersions: '7.5.0',
+      allowedVersions: '7.8.1',
     }
   ],
   schedule: ['on friday and tuesday'],

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -8,11 +8,11 @@
       "type": "msedge",
       "request": "launch",
       "name": "Vite - Edge Debugger",
-      "url": "http://localhost:8888",
-      "resolveSourceMapLocations": [
-        "${workspaceFolder}/",
-        "!/node_modules/**"
-      ]
+      "url": "http://localhost:8888"
+      // "resolveSourceMapLocations": [
+      //   "${workspaceFolder}/",
+      //   "!/node_modules/**"
+      // ]
     },
     {
       "type": "node",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-beta.0](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.4...v3.0.0-beta.0) (2023-05-20)
+
+### ⚠ BREAKING CHANGES
+
+* drop jQuery requirement (#962)
+* **common:** migrate to multiple-select-vanilla (#919)
+
+### Features
+
+* **common:** migrate to multiple-select-vanilla ([#919](https://github.com/ghiscoding/slickgrid-universal/issues/919)) ([bc74207](https://github.com/ghiscoding/slickgrid-universal/commit/bc74207e9b2ec46209e87b126e1fcff596c162af)) - by @ghiscoding
+* drop jQuery requirement ([#962](https://github.com/ghiscoding/slickgrid-universal/issues/962)) ([3da21da](https://github.com/ghiscoding/slickgrid-universal/commit/3da21daacc391a0fb309fcddd78442642c5269f6)) - by @ghiscoding
+
 ## [2.6.4](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.3...v2.6.4) (2023-05-20)
 
 ### Bug Fixes

diff --git a/examples/vite-demo-vanilla-bundle/CHANGELOG.md b/examples/vite-demo-vanilla-bundle/CHANGELOG.md
@@ -4,6 +4,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-beta.0](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.4...v3.0.0-beta.0) (2023-05-20)
+
+### ⚠ BREAKING CHANGES
+
+* drop jQuery requirement (#962)
+* **common:** migrate to multiple-select-vanilla (#919)
+
+### Features
+
+* **common:** migrate to multiple-select-vanilla ([#919](https://github.com/ghiscoding/slickgrid-universal/issues/919)) ([bc74207](https://github.com/ghiscoding/slickgrid-universal/commit/bc74207e9b2ec46209e87b126e1fcff596c162af)) - by @ghiscoding
+* drop jQuery requirement ([#962](https://github.com/ghiscoding/slickgrid-universal/issues/962)) ([3da21da](https://github.com/ghiscoding/slickgrid-universal/commit/3da21daacc391a0fb309fcddd78442642c5269f6)) - by @ghiscoding
+
 ## [2.6.4](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.3...v2.6.4) (2023-05-20)
 
 ### Bug Fixes

diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -1,7 +1,7 @@
 {
   "name": "slickgrid-universal-vite-demo",
   "private": true,
-  "version": "2.6.4",
+  "version": "3.0.0-beta.0",
   "scripts": {
     "dev": "vite --mode development",
     "build": "tsc && vite build",
@@ -25,17 +25,16 @@
     "@slickgrid-universal/vanilla-force-bundle": "workspace:~",
     "bulma": "^0.9.4",
     "dompurify": "^3.0.3",
+    "fetch-jsonp": "^1.2.3",
     "flatpickr": "^4.6.13",
-    "jquery": "^3.7.0",
     "moment-mini": "^2.29.4",
-    "multiple-select-modified": "^1.3.17",
+    "multiple-select-vanilla": "^0.3.1",
     "rxjs": "^7.8.1",
     "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.16.13",
     "@types/whatwg-fetch": "^0.0.33",

diff --git a/examples/vite-demo-vanilla-bundle/public/assets/multiple-select.png b/examples/vite-demo-vanilla-bundle/public/assets/multiple-select.png
diff --git a/examples/vite-demo-vanilla-bundle/public/i18n/en.json b/examples/vite-demo-vanilla-bundle/public/i18n/en.json
@@ -43,6 +43,7 @@
   "NOT_CONTAINS": "Not contains",
   "NOT_EQUAL_TO": "Not equal to",
   "NOT_IN_COLLECTION_SEPERATED_BY_COMMA": "Search items not in a collection, must be separated by a comma (a,b)",
+  "NO_MATCHES_FOUND": "No matches found",
   "OF": "of",
   "OK": "OK",
   "PAGE": "Page",

diff --git a/examples/vite-demo-vanilla-bundle/public/i18n/fr.json b/examples/vite-demo-vanilla-bundle/public/i18n/fr.json
@@ -43,6 +43,7 @@
   "NOT_CONTAINS": "Ne contient pas",
   "NOT_EQUAL_TO": "Non égal à",
   "NOT_IN_COLLECTION_SEPERATED_BY_COMMA": "Recherche excluant certain éléments d'une collection, doit être séparé par une virgule (a,b)",
+  "NO_MATCHES_FOUND": "Aucun résultat",
   "OF": "de",
   "OK": "Terminé",
   "PAGE": "Page",

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';
@@ -124,7 +125,7 @@ export default class Example4 {
           editorOptions: {
             filter: true // adds a filter on top of the multi-select dropdown
           },
-          model: Editors.multipleSelect,
+          model: Editors.singleSelect,
         },
       },
       {
@@ -244,22 +245,14 @@ 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 fetch-jsonp, use HttpClient or FetchClient
           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 +275,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/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -506,8 +506,10 @@ export default class Example12 {
       };
 
       if (!(i % 8)) {
-        delete tmpArray[i].finish; // also test with undefined properties
-        delete tmpArray[i].percentComplete; // also test with undefined properties
+        // also test with undefined properties
+        delete tmpArray[i].finish;
+        delete tmpArray[i].percentComplete;
+        delete tmpArray[i].analysis.percentComplete;
       }
     }
     return tmpArray;

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,8 +1,4 @@
-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 'multiple-select-modified/src/multiple-select.css';
 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
@@ -17,16 +17,16 @@ export default defineConfig(() => {
         ],
       },
     },
-    optimizeDeps: {
-      include: ['jquery'],
-    },
     preview: {
       port: 8888
     },
     server: {
       port: 8888,
       cors: true,
       host: 'localhost',
+      hmr: {
+        clientPort: 8888,
+      },
     },
   };
 });
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json",
-  "version": "2.6.4",
+  "version": "3.0.0-beta.0",
   "npmClient": "pnpm",
   "loglevel": "info",
   "command": {
@@ -20,6 +20,7 @@
       "syncWorkspaceLock": true
     }
   },
+  "changelogPreset": "conventional-changelog-conventionalcommits",
   "packages": [
     "examples/*",
     "packages/*"

diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "preview:publish": "lerna publish from-package --dry-run",
     "preview:version": "lerna version --dry-run",
     "preview:roll-new-release": "pnpm bundle && pnpm new-version --dry-run && pnpm new-publish --dry-run",
-    "preview:alpha-release": "lerna publish 2.0.0-alpha.0 --dist-tag next --dry-run",
-    "preview:major-release": "lerna publish 2.0.0 --dry-run",
+    "beta-release": "lerna publish 3.0.0-beta.0 --dist-tag next",
+    "preview:major-release": "lerna publish 3.0.0 --dry-run",
     "new-version": "lerna version",
     "new-publish": "lerna publish from-package",
     "roll-new-release": "pnpm bundle && pnpm new-version && pnpm new-publish",
@@ -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": ">=16.15.0",
@@ -83,7 +83,6 @@
     "jest-cli": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-extended": "^3.2.4",
-    "jquery": "^3.7.0",
     "jsdom": "^22.0.0",
     "jsdom-global": "^3.0.2",
     "moment-mini": "^2.29.4",
@@ -92,7 +91,7 @@
     "rimraf": "^5.0.1",
     "rxjs": "^7.8.1",
     "servor": "^4.0.2",
-    "slickgrid": "^3.0.4",
+    "slickgrid": "^4.0.0",
     "sortablejs": "^1.15.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
@@ -102,5 +101,8 @@
   "funding": {
     "type": "ko_fi",
     "url": "https://ko-fi.com/ghiscoding"
+  },
+  "dependencies": {
+    "conventional-changelog-conventionalcommits": "^5.0.0"
   }
 }
diff --git a/packages/binding/CHANGELOG.md b/packages/binding/CHANGELOG.md
@@ -4,6 +4,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-beta.0](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.4...v3.0.0-beta.0) (2023-05-20)
+
+**Note:** Version bump only for package @slickgrid-universal/binding
+
 ## [2.6.4](https://github.com/ghiscoding/slickgrid-universal/compare/v2.6.3...v2.6.4) (2023-05-20)
 
 ### Bug Fixes

diff --git a/packages/binding/package.json b/packages/binding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@slickgrid-universal/binding",
-  "version": "2.6.4",
+  "version": "3.0.0-beta.0",
   "description": "Simple Vanilla Implementation of a Binding Engine & Helper to add properties/events 2 way bindings",
   "main": "dist/commonjs/index.js",
   "module": "dist/esm/index.js",