(done) Roadmap to 5.0

[ghiscoding]

Tasks for next major 5.0

see Migration Guide 5.0 for more info

• 1. see if Temporal gets closer to a release (to replace moment-mini which is old and is CJS only)
  • ref PR feat(common)!: migrate from moment to moment-tiny #1456
  • good article: https://dev.to/arafat4693/everything-you-need-to-know-about-temporal-date-api-5alk
  • https://blog.webdevsimplified.com/2022-02/temporal-date-api/
  • will need a parser, temporal-parse seems to be what I might need (not sure the locale argument though),
  • other alternatives: DayJS, date-fns, Luxon, SugarJS Dates, Spacetime, locutus- strftime, Miment
  • or another alternative I just found via google, Tempo (this is it, I found a winner!!!)
• 2. recheck moment-tiny, I found Tempo and I am finally migrating away from Moment
  • ref PR feat!: migrate from Moment to Tempo #1507
  • need to verify Angular allowedCommonJsDependencies
• 3. should we drop CJS and only keep ESM? (probably not, since there's a ton of people still using CJS, but maybe in a couple of years)
  • that would possibly require migrating from Jest to Vitest
  • moment-mini is CJS only, so that would have to be migrated first
• 4. should we replace Flatpickr (date picker) with something else? Mainly because Flatpickr is barely maintained and is also not fully ESM ready, possible alternatives are:
  • ref PR feat(common)!: migrate from Flatpickr to Vanilla-Calendar #1466
    • add separate Doc files for v5 and keep old Docs for v4
  • vanilla-calendar-pro (winner), air-datepicker, easepick
• 5. remove SASS math.div polyfill, this is probably a breaking change for next major (see remove-sass-polyfill branch)
  • ref PR feat(styling)!: remove SASS math.div polyfill #1483
• 6. change how to colorize SVG to pure CSS approach by following AntFu icons in pure CSS
  • ref PR feat(styling)!: convert SVG icons to pure CSS #1474
  • possibly a breaking change since that might drop regular Font usage with content
  • partially started in css-icons branch
  • the Styling SVG Icons Docs also requires an update
  • remove any references to fa (Font-Awesome) fonts
• 7. stop re-exporting ms-select interfaces (even if it is more convenient), which I think is discouraged by TypeScript and Linters, so let's stop doing that
  • add it back since it's too inconvenient and I couldn't actually find any TypeScript suggestion to not do this
    

    slickgrid-universal/packages/common/src/index.ts

    Lines 47 to 48 in 30be835

    	// re-export MultipleSelectOption to avoid breaking previous code implementation
    	export { MultipleSelectOption } from 'multiple-select-vanilla';

• 8. remove unused SASS variables after ms-select v3.x upgrade (they were not yet removed to avoid being a breaking change, however these vars are no longer associated to anything)
• 9. remove any leftover code about internalEditor and rename swapInternalEditorToSlickGridFactoryEditor() to something else since we no longer swap these props
• 10. remove nativeSelect Filter since I would be surprised if anyone is using it, ms-select is so much better :) (ref PR feat(filters)!: remove native Filters.select #1485)
• 11. remove checkmarkFormatter and any related Font Awesome code completely from the project (ref PR feat(styling)!: delete checkmarkFormatter and any Font-Awesome related #1484)
• 12. remove all "bare" SASS files and tweak the "lite" to give users choice to use with/without MDI icons subset (ref PR feat(styling)!: delete "bare" Themes but keep "lite" & add to Bootstrap #1493
• 13. remove any deprecated code
• 14. add CSS/SASS variables to align .slick-cell with optional flex (tough we'll keep current block as default)
  • add new --slick-cell-display CSS variable to optionally change display to flex for aligning middle but keep block as default
• 15. look at possibly getting rid of slick-grid.scss and keep only slick-bootstrap.scss since they have a few styles in common (ref PR chore(style): merge slick-grid.scss & slick-bootstrap.scss into 1 file #1501).
• 16. can we make DOMPurify optional in some ways? That would help to avoid loading isomorphic-dompurify which is strictly CJS (ref PR feat(common)!: make DOMPurify as optional sanitizer grid option #1503)
• 17. test in Salesforce
  • Vanilla-Calendar CSS import not working correctly
  • Row Move icon shows an extra dot in bottom right corner
  • Vanilla-Calendar uses .append() which is not supported in Salesforce (just use .appendChild instead)
  • Vanilla-Calendar uses .replaceWith() when destroying (e.g. toggling dark mode) which is not supported in Salesforce (not sure if we actually need that code or not, but if so we could use this SO answer)
• 18. review all buttons with icon
• 19. review autoCommitEdit for input editor and others (also remove Aurelia-Slickgrid focusout trigger)
• 20. composite editor input with clear button are misaligned in Aurelia-Slickgrid
• 21. custom tooltip on "Start" column is showing an empty tooltip when loading
• 22. Example 7 ms-select list items aren't aligned when using icon inside label
• 23. add missing Get Started docs for Slickgrid-Universal
• 24. add git tags in all upstream demos for better tracking refs
• 25. add migration guides to all upstream repos and review all changes to make sure everything is covered before pushing beta releases
  • upgrade to Angular 18 as new minimum requirement for Angular-Slickgrid
• 26. merge next branch into master branch
• 27. add more Dark Mode examples in upstream repos (also add to stock market demo)
• 28. slick tooltip was again showing even when value is empty and it shouldn't
• 29. investigate why grid is calling a resize after opening the date picker
  • actually caused by the new date picker which is not auto-positioning itself
• 30. review text color in Dark Mode (it should be lighter than #ccc especially for column headers)
• 31. add hover color on edit/delete icons (blue/red)
• 32. open Header Menu than click on any cell for editing, why does Header Menu remain open? It should close after clicking a cell
• 33. Example 3, open an ms-select editor issues
  • label with icons is not centered vertically, --slick-multiselect-item-line-height should be 20px
  • when editor is not autoCommitEdit and user clicks outside the viewport it will move to next available cell down!?!
  • Escape key doesn't close the select editor (other editors are working fine)
• 34. review again sort asc/desc icons, 1 should point up and 1 down
• 35. move pagination first/last demo buttons into group buttons
• 36. Tree Data demo shouldn't show "." that is meant to be hidden and is only useful for indentation calc (it's also missing all icons colors)
• 37. Angular-Slickgrid has an extra dot in bottom right corner on the row selection icon (caused by height/width 1.2rem)
• 38. look at possibly merging deepCopy util with node-extend(). ref PR chore: use node-extend() from within deepCopy #1516
• 39. should scroll to selected route in upstream repo demos

After the new Release

• review Migrations docs after releasing new version
• create a version4 branch for possible last minute fixes in v4
• delete Bootstrap 4 demo since it won't be supported anymore
• update all platform demos
• update SF zip bundle file

[ghiscoding]

Side note, I found out that the Vanilla-Calendar migration is actually increasing the build size (not decreasing), the build is larger and the reason was because the CSS file wasn't properly loaded which made it looks like it was smaller but in fact it is larger when the CSS file is properly loaded. I found that out after testing the bundle in Salesforce. Though I still prefer the new lib and the increase is maybe around 20Kb, there might be ways to decrease this in the future since Vanilla-Calendar uses Tailwind which is probably increasing the final CSS file.

[ghiscoding]

@zewa666 I'm thinking to make DOM Purify optional by providing a sanitizer as grid option (actually there's already one but I would modify the internal code to threat it more as an optional process). The reason I'm thinking to do this is because someone on Angular-Slickgrid, in this comment, said I should use isomorphic-dompurify so that Angular-Slickgrid also work as SSR (which I have never used, neither tried) but isomorphic-dompurify is still CJS and dompurify is partially ESM (I think, since it still requires it be to added to allowedCommonJsDependencies). So an optional sanitizer might help.

Another reason is also because DOMPurify doesn't actually work in Salesforce, I had to use my own sanitizer (but actually the fact is that Salesforce does uses DOMPurify internally to sanitize templates, and we can't re-add DOMPurify because it removes itself in some ways). So my bundle includes DOMPurify even though it can't use it in SF, so removing it would help in the zip file size.

slickgrid-universal/packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts

Line 70 in d2865a9

sanitizer: (dirtyHtml: string) => typeof dirtyHtml === 'string' ? dirtyHtml.replace(/(\b)(on[a-z]+)(\s*)=|javascript:([^>]*)[^>]*|(<\s*)(\/*)script([<>]*).*(<\s*)(\/*)script(>*)|(&lt;)(\/*)(script|script defer)(.*)(&gt;|&gt;">)/gi, '') : dirtyHtml,

Also note that isomorphic-dompurify seems to be using JSDOM to make it work in SSR, which I was quite surprised to see since JSDOM probably wasn't exactly designed to be used that way and is typically a dev dependency, which is another reason I want to remove this isomorphic package. It's CJS because it uses code like require('jsdom') (see these lines for JSDOM usage in the isomorphic package)

I imagine most people will omit or forget to add it (which will actually make their build smaller) but will not help at all for CSP, but at least the user could choose between dompurify and isomorphic-dompurify or any other sanitization library that they want to use. Again the risk is less CSP safe for users who forget to add the sanitizer (intentionally or unintentionally), typically you would add it once as a global grid config

@zewa666 So what's your point of view on the subject?
... after writing all of these reasons, I'm actually thinking more and more of going ahead with the change 😆

[zewa666]

so do I get it right that right now DomPurify is fixed and you'd like to remove it but instead leave it up to the user to decide which one to take?

If so, the major release is the perfect time for such a breaking change. but as long as there some guides on how to do that (close to CSP, and getting started) I think its a good idea to do so.

[ghiscoding]

yes indeed, it is exactly what I'm thinking to do and is the best time to do this. I think it's ok to make it optional, I was just asking your point of view on the subject 😉 Of course that will be included in the migration guide and in the docs as well

[ghiscoding]

@zewa666 As another topic, going back on the Themes lite/bare question that I asked you couple days ago, I think of adding the .mdi SVG icons in every themes (even the Bootstrap theme) and also keep a "lite" version without any SVG icons (well I mean except the build-in ones like sort, group icons). I will also add SVG icons to the Bootstrap Theme (which doesn't currently load any SVGs) because I got rid of anything related to the old Font-Awesome icons (I previously had SASS variables like "f101" pointing to old Font-Awesome icons, but I removed them all since I now use SVG icons with pure CSS). The grid would still work without importing the SVG icons except that all the menu plugins won't show any icons (which isn't a big deal) and the most important icons (sort, grouping) have built-in icons so we're good.

If the user wants to use his own font/SVG library, he would then use the "lite" theme and update the global grid options (e.g. GridMenu, HeaderMenu, ...). I'll also delete the "bare" version, because I don't think it's useful anymore, just a "lite" without any SVG icons is enough. I created the PR #1493 to address this, I need to test it with Angular-Slickgrid and Bootstrap and I'm assuming this should work without any problem.

[zewa666]

I think thats a great approach. will as mentioned check tomorrow whats in my apps but I'm pretty sure this full/lite should work 👍

[ghiscoding]

@zewa666 just FYI, I'm pretty much done with code change and testing, I even found some small UI bugs (shown above) that existed in current release but I decided to only push commits going forward (so on the new major only). I have merged everything in the main branches for all other repos, I have decided to probably go forward for all repos next weekend except Angular-Slickgrid since I want to wait for Angular 18 but don't want to delay the other repos. I've done Beta for Slickgrid-Universal but won't publish Betas for downstream repos.