Skip to content

Commit

Permalink
Merge pull request #1150 from ghiscoding/next
Browse files Browse the repository at this point in the history 
feat!: drop jQuery requirement & use multiple-select-vanilla dependency
  • Loading branch information
@ghiscoding
ghiscoding authored May 29, 2023
2 parents 438fe7c + 0b24780 commit 714c48b
Show file tree
Hide file tree
Showing 51 changed files with 3,204 additions and 3,925 deletions.
16 changes: 4 additions & 12 deletions .github/renovate.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,23 @@
depTypeList: ['peerDependencies'],
enabled: false,
},
{
packageNames: ['@ngx-translate/core'],
allowedVersions: '14.0.0',
},
// allow Node14/npm8 until its EOL June 2023
{
packageNames: ['node'],
allowedVersions: '14.17.0',
allowedVersions: '16.15.0',
},
{
packageNames: ['npm'],
allowedVersions: '6.14.13',
},
{
packageNames: ['rxjs'],
allowedVersions: '7.5.0',
allowedVersions: '8.5.0',
},
{
// skip any Angular major version updates
"updateTypes": ["major"],
"enabled": false
}
],
schedule: ['on friday and tuesday'],
ignoreDeps: [
// ignore TypeScript since it has to follow whatever version allows at the time
// ignore TypeScript since it has to follow Angular recommended version
'typescript'
],
}
3 changes: 2 additions & 1 deletion .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ on:
push:
branches:
- master
- next
pull_request:
branches:
- '**'
Expand Down Expand Up @@ -44,7 +45,7 @@ jobs:
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Run yarn install dependencies
run: yarn --frozen-lockfile

Expand Down
41 changes: 20 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,20 @@
[![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)

### Brief introduction
One of the best javascript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to React. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork, it is the most active fork since the original @mleibman was retired some time ago by the original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of all the SlickGrid libraries that I maintain like this one here.... also as a reminder, this is a wrapper of a jQuery lib (SlickGrid) and its core component is written in jQuery/JavaScript, so just keep that in mind and it also mean that jQuery is a dependency of Angular-Slickgrid.
One of the best JavasSript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid) which was originally developed by @mleibman is now available to Angular. SlickGrid beats most other datagrids in terms of functionalities and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and we are using the [6pac/SlickGrid](https://github.com/6pac/SlickGrid/) fork which is the most active fork since the original was put on pause by its original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of all the SlickGrid libraries that I maintain like this one here....

### License
[MIT License](LICENSE)

## Installation
Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
A good starting point is the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or simply clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please consult all Wikis and closed issues before opening new ones, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.

```sh
npm install angular-slickgrid
```

### Demo page
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Wiki - SVG Icons](https://github.com/ghiscoding/Angular-Slickgrid/wiki/SVG-Icons)
- [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
- [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-translate)

Expand All @@ -38,42 +38,41 @@ npm start
```

### Like it? :star: it
You like to use **Angular-Slickgrid**? Be sure to upvote :star:, maybe support me with cafeine :coffee: and feel free to contribute. 👷👷‍♀️
You like to use **Angular-Slickgrid**? Be sure to upvote :star: and maybe support me with caffeine :coffee: and feel free to contribute. 👷👷‍♀️

<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />

## Latest News & Releases
Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.

## Angular Compatibility
- version `1.x.x` for Angular 4-6
- version `2.x.x` for Angular 7-11
- version `3.x.x` for Angular 12+ and RxJS 7+ ([migration guide to 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x))
- IE11 is EOL and **no longer supported**, if you still need to support it stay with version 2.x
- uses new [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo version 0.19.2
- version `4.x.x` for Angular 13+, RxJS 7+ and **Ivy ONLY** ([migration guide to 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x))
- for Ivy build only (no more UMD bundle & output >= ES2017), IE not supported.
- requires Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version
- version `5.x.x` for Angular 14+, RxJS >=7.5.0 and **Ivy ONLY** ([migration guide to 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x))
- removal of jQueryUI dependency (replaced internally by SortableJS, a smaller and touch friendly lib).
- requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version

**Note** For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, you can consult the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table)

For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error)

| Angular-Slickgrid | Angular version | Migration Guide | Notes |
|-------------------|-----------------------|-----------------|------|
| 1.x | 4-6.x | | |
| 2.x | 7-11.x | | |
| 3.x | >=12.0 | [Migration 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x) | the lib now uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo version [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2). Also, IE11 is EOL and no longer supported. |
| 4.x | >=13.0 | [Migration 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x) | for Ivy build only, uses Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version |
| 5.x | >=14.0 | [Migration 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x) | removal of jQueryUI, uses Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |
| 6.x | >=16.0 | [Migration 6.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-6.x) | removal of jQuery (now uses browser native code), uses Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) version |

**Note** For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, please take a look at the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table).

For Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](https://github.com/ghiscoding/Angular-Slickgrid#angular-12-with-webpack-5---how-to-fix-polyfill-error).

### ngx-translate Compatibility

If you are facing any issues with `ngx-translate` library while building your Angular Project. You need to make sure that `@ngx-translate/core` is part of your dependencies, that is also true even when using a single Locale, that is because it is a `peerDependency` of Angular-Slickgrid. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, we still need it to be installed, but don't worry it should still be removed by the tree shaking process after a running a production build. See their version compatibility table below
Angular-Slickgrid uses `ngx-translate` library to support Locales, it is also required even when using a single Locale. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, it requires `ngx-translate` to installed. Once you run the build and if you are using a single Locale then the tree shaking process should remove these optional dependencies. See their version compatibility table below for more info

| Angular Version | @ngx-translate/core |
|-----------------|---------------------|
| 16+ | 15.x+ |
| 13+ (Ivy only) | 14.x+ |
| 10-13 | 13.x+ |
| 8-9 | 12.x+ |
| 7 | 11.x+ |

### Build Warnings (Angular 8+)
### Build Warnings (Angular >=8.0 && <16.0)
You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named `ngcc.config.js` in your project root (same location as the `angular.json` file) with the following content (you can also see this [commit](https://github.com/ghiscoding/angular-slickgrid-demos/commit/1fe8092bcd2e99ede5ab048f4a7ebe6254e4bee0) which fixes the Angular-Slickgrid-Demos prod build):
```js
module.exports = {
Expand Down
6 changes: 1 addition & 5 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"dompurify",
"excel-builder-webpacker",
"flatpickr",
"jquery",
"moment-mini",
"stream"
],
Expand Down Expand Up @@ -54,15 +53,12 @@
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/flatpickr/dist/flatpickr.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/multiple-select-modified/src/multiple-select.css",
"node_modules/@ng-select/ng-select/themes/default.theme.css",
"src/app/slickgrid-custom-variables.scss",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/multiple-select-modified/src/multiple-select.js",
"node_modules/sortablejs/Sortable.min.js"
],
"vendorChunk": true,
Expand Down Expand Up @@ -151,4 +147,4 @@
],
"analytics": false
}
}
}
94 changes: 46 additions & 48 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
},
"scripts": {
"start": "ng serve --port 4300",
"postinstall": "ngcc",
"prebuild": "npm-run-all delete:dist lint",
"build": "ng-packagr -p ng-package.json",
"postbuild": "npm-run-all copy:i18n",
Expand Down Expand Up @@ -49,85 +48,84 @@
"url": "https://ko-fi.com/ghiscoding"
},
"dependencies": {
"@ngx-translate/core": ">=14.0.0",
"@slickgrid-universal/common": "~2.6.4",
"@slickgrid-universal/custom-footer-component": "~2.6.4",
"@slickgrid-universal/empty-warning-component": "~2.6.4",
"@slickgrid-universal/event-pub-sub": "~2.6.4",
"@slickgrid-universal/pagination-component": "~2.6.4",
"@slickgrid-universal/row-detail-view-plugin": "~2.6.4",
"@slickgrid-universal/rxjs-observable": "~2.6.4",
"@types/jquery": "^3.5.16",
"@ngx-translate/core": ">=15.0.0 <16.0.0",
"@slickgrid-universal/common": "3.0.0",
"@slickgrid-universal/custom-footer-component": "3.0.0",
"@slickgrid-universal/empty-warning-component": "3.0.0",
"@slickgrid-universal/event-pub-sub": "3.0.0",
"@slickgrid-universal/pagination-component": "3.0.0",
"@slickgrid-universal/row-detail-view-plugin": "3.0.0",
"@slickgrid-universal/rxjs-observable": "3.0.0",
"dequal": "^2.0.3",
"dompurify": "^3.0.3",
"jquery": "^3.7.0",
"rxjs": ">=7.5.0",
"rxjs": "^7.8.1",
"sortablejs": "^1.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.11",
"@angular-eslint/builder": "^14.4.0",
"@angular-eslint/eslint-plugin": "^14.4.0",
"@angular-eslint/eslint-plugin-template": "^14.4.0",
"@angular-eslint/schematics": "^14.4.0",
"@angular-eslint/template-parser": "^14.4.0",
"@angular/animations": "^14.3.0",
"@angular/cli": "^14.2.11",
"@angular/common": "^14.3.0",
"@angular/compiler": "^14.3.0",
"@angular/compiler-cli": "^14.3.0",
"@angular/core": "^14.3.0",
"@angular/forms": "^14.3.0",
"@angular/language-service": "^14.3.0",
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/router": "^14.3.0",
"@faker-js/faker": "^7.6.0",
"@angular-devkit/build-angular": "^16.0.2",
"@angular-eslint/builder": "^16.0.2",
"@angular-eslint/eslint-plugin": "^16.0.2",
"@angular-eslint/eslint-plugin-template": "^16.0.2",
"@angular-eslint/schematics": "^16.0.2",
"@angular-eslint/template-parser": "^16.0.2",
"@angular/animations": "^16.0.2",
"@angular/cli": "^16.0.2",
"@angular/common": "^16.0.2",
"@angular/compiler": "^16.0.2",
"@angular/compiler-cli": "^16.0.2",
"@angular/core": "^16.0.2",
"@angular/forms": "^16.0.2",
"@angular/language-service": "^16.0.2",
"@angular/platform-browser": "^16.0.2",
"@angular/platform-browser-dynamic": "^16.0.2",
"@angular/router": "^16.0.2",
"@faker-js/faker": "^8.0.1",
"@fnando/sparkline": "^0.3.10",
"@ng-select/ng-select": "^9.1.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@ng-select/ng-select": "^10.0.4",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@release-it/conventional-changelog": "^5.1.1",
"@slickgrid-universal/composite-editor-component": "~2.6.4",
"@slickgrid-universal/custom-tooltip-plugin": "~2.6.4",
"@slickgrid-universal/excel-export": "~2.6.4",
"@slickgrid-universal/graphql": "~2.6.4",
"@slickgrid-universal/odata": "~2.6.4",
"@slickgrid-universal/text-export": "~2.6.4",
"@slickgrid-universal/composite-editor-component": "3.0.0",
"@slickgrid-universal/custom-tooltip-plugin": "3.0.0",
"@slickgrid-universal/excel-export": "3.0.0",
"@slickgrid-universal/graphql": "3.0.0",
"@slickgrid-universal/odata": "3.0.0",
"@slickgrid-universal/text-export": "3.0.0",
"@types/dompurify": "^3.0.2",
"@types/flatpickr": "^3.1.2",
"@types/fnando__sparkline": "^0.3.4",
"@types/jest": "^29.5.1",
"@types/jquery": "^3.5.16",
"@types/moment": "^2.13.0",
"@types/node": "^18.16.13",
"@types/node": "^20.2.3",
"@types/sortablejs": "^1.15.1",
"@types/text-encoding-utf-8": "^1.0.2",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"autoprefixer": "^10.4.14",
"bootstrap": "^5.2.3",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",
"custom-event-polyfill": "^1.0.7",
"eslint": "^8.41.0",
"fetch-jsonp": "^1.2.3",
"font-awesome": "^4.7.0",
"jest": "^29.5.0",
"jest-extended": "^3.2.4",
"jest-preset-angular": "^13.1.1",
"moment-mini": "^2.29.4",
"ng-packagr": "^14.3.0",
"ngx-bootstrap": "^9.0.0",
"ng-packagr": "^16.0.1",
"ngx-bootstrap": "^10.2.0",
"npm-run-all2": "^6.0.5",
"postcss": "^8.4.23",
"postcss-cli": "^10.1.0",
"release-it": "^15.10.3",
"rimraf": "^4.4.1",
"rimraf": "^5.0.1",
"rxjs": "^7.8.1",
"sass": "^1.62.1",
"stream-browserify": "^3.0.0",
"ts-node": "^10.9.1",
"tslib": "^2.5.2",
"typescript": "~4.7.4",
"typescript": "~5.0.4",
"zone.js": "~0.13.0"
},
"engines": {
Expand All @@ -137,4 +135,4 @@
"resolutions": {
"caniuse-lite": "1.0.30001488"
}
}
}
2 changes: 1 addition & 1 deletion src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const routes: Routes = [
];

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }), TranslateModule],
imports: [RouterModule.forRoot(routes, { useHash: true }), TranslateModule],
exports: [RouterModule, TranslateModule],
})
export class AppRoutingRoutingModule { }
Loading

0 comments on commit 714c48b

Please sign in to comment.