Roadmap to v5 - ES6/ESM/TypeScript/ModernTheme

[ghiscoding]

Project Modernization

This is a Work in Progress and all roadblock were resolved. This next release will be filled with a lot of changes to modernize the project, the main changes will be the following:

1. support ES6 (and ESM), the ESM build will provide Tree Shaking support
   • this will close a very old issue updating to node ES6 #41
2. support TypeScript and provide Type Definition (.d.ts files)
3. provide a more modern Styling Theme

Note all PRs (Pull Requests) should be done against the next branch and all Cypress E2E tests must still be passing

---

TODOs

Below is the list of files that need to be converted to TypeScript and also other tasks that are required for our upcoming v5 release

Core (10/10) - all core files were migrated in PR #804)

• slick.grid.js
• slick.core.js
• slick.compositeeditor.js
• slick.dataview.js
• slick.interaction.js
• slick.groupitemmetadataprovider.js
• slick.editors.js
• slick.formatters.js
• not sure yet what to do with the next 2 files since they uses jQuery with JSONP
  • slick.remotemodel.js (ref PR feat: migrate RemoteModel Plugins to TypeScript #823)
  • slick.remotemodel-yahoo.js (ref PR feat: migrate RemoteModel Plugins to TypeScript #823)

Controls (4/4) - all controls were migrated in PR #808)

• slick.columnmenu.js
• slick.columnpicker.js
• slick.gridmenu.js
• slick.pager.js

Plugins (19/19)

• slick.autotooltips.js (ref PR feat!: major folder restructuring with esbuild to support iife, cjs and esm and TypeScript #804)
• slick.cellcopymanager.js (ref PR feat!: major folder restructuring with esbuild to support iife, cjs and esm and TypeScript #804)
• slick.cellexternalcopymanager.js (ref PR feat: migrate all Controls to TypeScript #808)
• slick.cellmenu.js (ref PR feat: migrate all Menu/Buttons Plugins to TypeScript #811)
• slick.cellrangedecorator.js (ref PR feat: migrate all Decorator & Selection Plugins to TypeScript #812)
• slick.cellrangeselector.js (ref PR feat: migrate all Decorator & Selection Plugins to TypeScript #812)
• slick.cellselectionmodel.js (ref PR feat: migrate all Decorator & Selection Plugins to TypeScript #812)
• slick.checkboxselectcolumn.js (ref PR feat: migrate CheckboxSelector & State Plugins to TypeScript #813)
• slick.contextmenu.js (ref PR feat: migrate all Menu/Buttons Plugins to TypeScript #811)
• slick.crossgridrowmovemanager.js (ref PR feat: migrate RowMoveManager Plugins to TypeScript #817)
• slick.customtooltip.js (ref PR feat: migrate CustomTooltip Plugin to TypeScript #816)
• slick.draggablegrouping.js (ref PR feat: migrate Draggable Grouping Plugins to TypeScript #814)
• slick.headerbuttons.js (ref PR feat: migrate all Menu/Buttons Plugins to TypeScript #811)
• slick.headermenu.js (ref PR feat: migrate all Menu/Buttons Plugins to TypeScript #811)
• slick.resizer.js (ref PR feat: migrate Resizer Plugin to TypeScript #815)
• slick.rowdetailview.js (ref PR feat: migrate RowDetail Plugin to TypeScript #822)
• slick.rowmovemanager.js (ref PR feat: migrate RowMoveManager Plugins to TypeScript #817)
• slick.rowselectionmodel.js (ref PR feat: migrate all Decorator & Selection Plugins to TypeScript #812)
• slick.state.js (ref PR feat: migrate CheckboxSelector & State Plugins to TypeScript #813)

Others

• use esbuild to build as 3 new format types (iife, esm and cjs)
• add Browser-Sync for development to auto-reload page after build or file changes
• update all Examples to use new dist/browser folder
• add some ESM examples with <script type="module"> import { SlickGrid } from 'slickgrid'; </script>
• delete all images and replace them with SVGs (in pure CSS)
• provide a more modern styling theme
  • provide 2 ways to customize theme styles (via SASS variables and/or CSS variables)
• add TypeScript-ESLint to the build and CI workflow (ref PR chore: add TypeScript ESLint to lint all TS Code with recommended TS #826)
• get it all working in Slickgrid-Universal by using ESM imports
  • all unit tests should pass
  • all Cypress E2E tests should pass
• remove dev deps from package.json that we will no longer use with our new structure (i.e. uglifyjs)
• update the Release npm script to make it work with the new structure (ref PR chore: update Release npm script with new project structure #840)
  • find how to update slickgridVersion and v4.0.1 in comments with esbuild build (perhaps an esbuild custom plugin)
    • it turns out that reusing previous release script was enough to update version in the new location src/slick.grid.ts and that's it
• see if we can add VSCode debugger in the project with dev mode (ref PR chore: add VSCode debugger config #838)
• upgrade to latest Cypress v12 and convert all E2E spec files to TypeScript as well (ref PR chore: upgrade Cypress to v12 and migrate all E2E tests to TypeScript #837)
• currently slick.core.ts and slick.interactions.ts were converted to TypeScript but were not converted to Classes, it might be better to do that change as well (ref PR chore: migrate slickcore Utils to class with static methods #834)
• remove all IE10-11 old code that is no longer required neither supported (i.e. isIEPreVer9)
• see if we can drop http-server and keep only Browser-Sync for running CI Cypress E2E tests (currently only works with http-server)
• possibly add a new Example with high frequency updates to demo SlickGrid performances (i.e. Realtime Trading Platform, ref PR feat: add new trading platform high frequency update grid #835)
• see if adding Context Sub-Menus is doable, see Discussion Thanks!!! #806
  • it's Ag-Grid code, so that won't work
• we could also remove any old deprecated code like groupBy (which was replaced by setGrouping) (ref PR feat: remove deprecated DataView methods #833)
  

  SlickGrid/slick.dataview.js

  Lines 350 to 353 in d0a0e3f

  	/**
  	* @deprecated Please use {@link setGrouping}.
  	*/
  	function groupBy(valueGetter, valueFormatter, sortComparer) {

• throw error in slick.remote files if they are used without jQuery since these 2 remote API are still requiring jQuery and we won't convert them to vanilla JS.

For the release

• write up a Migration Guide v5 and add link to homepage
  • see Discussion #776 for some migration detail
  • mention that all source files were moved to src/ and user will have to use SlickGrid files from dist/ folder
  • mention that lib folder got removed from npm publish
  • mention all ports/wrappers using 6pac/slickgrid (i.e. Angular-Slickgrid, ...)
  • provide all possible ways to import new code, via dist folder, CDN (jsdelivr) and npm
  • add class="slickgrid-container" to migration
  • removed all images, firebugx, bootstrap.css and moved select2.css to lib folder
  • draggableGrouping must be binded to plugin instance (ie: enableColumnReorder: draggableGrouping.getSetupColumnReorder.bind(draggableGrouping))
  • add note about deprecated methods being removed (DataView setAggregators and groupBy were both replaced by setGrouping)
  • mention new TS Generics on SlickGrid and SlickDataView
  • mention about possibility to extend TS classes (because everything is protected which is extendable instead of private which is not)
  • all TS Classes (core files, controls & plugins) now have the Slick prefix (i.e., SlickGrid, SlickDataView, SlickColumnPicker) when imported as CJS/ES6/ESM
    • few exceptions (without the prefix):
      • all grouped methods: Aggregators Editors, Formatters
      • all enums like ColAutosizeMode, RowSelectionMode, ...

After the release

• maybe update slickgrid.net website with new info and print screen of the new theme
• update jspreadsheets details (no more jQuery) and print screens about SlickGrid
• add new ESM and Icons examples to Examples - Wiki
• close any issues related to this new release
  • updating to node ES6 #41 -- one of SlickGrid's oldest issue requesting ES6 support
  • Possibility of replacing the images directory with Data URIs #255 -- add a small subset of SVGs in pure CSS and delete all images
    • why use SVG instead of Data URI? Read this article: Probably Don’t Base64 SVG
  • Bootstrap or styles #533 -- we have a new styling theme: Alpine Theme
  • slickGrid column resizing not worked Properly in RTL  #446 -- RTL support simply by using Flex container (in the new theme)
  • Grid content disappear when dragging scrollbar on big data sets #219 -- scrolling on large dataset shows blank screen
• also check if PR Add Mixin option for adding defaults to options and columns objects, … #831 can close issue Retrofit rather than mixin parameters #666

[ghiscoding]

@6pac
I'm ready for a SlickGrid 5.0 beta (or alpha), the only remaining and major thing left to do (done) is to write a migration guide (like I've done with previous versions) and I will do that in coming days. I rewrote all node scripts as .mjs extension so that we can use ESM (mainly the use of import instead of require) and the release script itself is pretty much the same except that the build is now from esbuild (from build.mjs) instead of a minify script (which is now gone). I have updated some npm packages again last night, like TypeScript and Cypress, so make sure that you run npm install before you do anything. You could also run a dry-run (preview) of the release by running the preview script (if you do, just make sure to undo any file changes from git before you later run the official release afterward). I also added a minimum requirement of Node 16 to run the project in the package.json file, even though Node 16 will become EOL next Monday Sept. 11 so you might as well install Node 18.

Summary of steps for a 5.0 Beta release:

1. Make sure to have Node 16 or higher (probably better with Node 18 since 16 is now EOL)
2. Fetch latest code from the next branch
3. Install latest dependencies

npm install

4. Optionally execute a dry-run (preview) release (it execute a full build and then preview a release)
   • if you do a dry-run, then make sure to rollback git changes once you are satisfied with the preview

npm run preview:release

5. Run a full release of 5.0 Beta (or alpha release)

npm run release # choose bump option 6 or higher

Cheers

EDIT

I wrote the new Migration 5.0

[6pac]

Hey Ghislain, sorry about dragging my heels, I’ve been sick :-( TBH I’ve been wondering if you should just take over the repo at this point – I barely understand all the packaging requirements, and if I test them it’s going to be extremely cosmetic. Would you be happy with that, and if so, what would we need to do to make it happen? B From: Ghislain B. ***@***.***> Date: Saturday, 9 September 2023 at 12:14 am To: 6pac/SlickGrid ***@***.***> Cc: Ben McIntyre ***@***.***>, Mention ***@***.***> Subject: Re: [6pac/SlickGrid] Roadmap to v5 - ES6/ESM/TypeScript/ModernTheme (WIP 👷🏻) (Discussion #807) @6pac<https://github.com/6pac> I'm ready for a SlickGrid 5.0 beta (or alpha), the only remaining and major thing left to do is to write a migration guide (like I've done with previous versions) and I will do that in coming days. I rewrote all node scripts as .mjs extension so that we can use ESM (mainly the use of import instead of require) and the release script itself is pretty much the same except that the build is now from esbuild (from build.mjs) instead of a minify script (which is now gone). I have updated some npm packages again last night, like TypeScript and Cypress, so make sure that you run npm install before you do anything. You could also run a dry-run (preview) of the release by running the preview script (if you do, just make sure to undo any file changes from git before you later run the official release afterward). I also added a minimum requirement of Node 16 to run the project in the package.json file, even though Node 16 will become EOL next Monday Sept. 11 so you might as well install Node 18. Summary of steps for a 5.0 Beta release: 1. Make sure to have Node 16 or higher 2. Fetch latest code from the next branch 3. Install latest dependencies npm install 1. Optionally execute a dry-run (preview) release (it execute a full build and then preview a release) * if you do a dry-run, then make sure to rollback git changes once you are satisfied with the preview npm run preview:release 1. Run a full release of 5.0 Beta (or alpha release) npm run release # choose bump option 6 or higher Cheers — Reply to this email directly, view it on GitHub<#807 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AABDEVPHYRB7CE2KGQZIBEDXZMVOBANCNFSM6AAAAAA2ICFOX4>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ghiscoding]

@6pac oh sorry to hear that, I hope you recover quickly and enjoy the upcoming Spring on your side :)
As for the release, I wouldn't mind to take it over but at this point I cannot since I do not have access to the NPM, you would have to add me to the npm project (below is who currently has access to publish on npm, as you can see I'm not in this list)

[6pac]

Thanks @ghiscoding, I can add your NPM user to the approved list, do you have a username for NPM, or if not, could you register?

[6pac]

should have thought of that! you've been invited as a maintainer

[ghiscoding]

got the invite thanks... wish you well soon, I didn't catch covid yet (at least I think) but I'm sure it's just a matter of time

[6pac]

great. you're onto it, I see. that will be a lot easier for both of us ;-)

[ghiscoding]

official v5 is out, I made a couple of by releasing alpha versions without the alpha tag (oops) so I decided to go ahead with the official v5 to erase the mistake haha

There's maybe 1 task left that has to be done by you, it should be easy but is not urgent

• maybe update slickgrid.net website with new info and print screen of the new theme

[ghiscoding]

@6pac
I'm not sure if you saw my last comment, in case you didn't, there's this task left for you to do eventually (not urgent though) 😉

• maybe update slickgrid.net website with new info and print screen of the new theme

oh can you also update the GitHub project link, I think the link should be either pointing to the Examples page OR your slickgrid.net website