Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(common)!: migrate from Flatpickr to Vanilla-Calendar #1466

Merged
merged 23 commits into from
Apr 27, 2024

Conversation

ghiscoding
Copy link
Owner

@ghiscoding ghiscoding commented Apr 14, 2024

  • The reason to migrate away from Flatpickr is mostly because it's barely supported anymore (no PRs were merged since well over 2 years), it doesn't offer full ESM support and styling could be a bit more modern (the use of default select, inputs to change year/month/time is a bit outdated and rudimentary and finally date range selection could also be improved).
  • Vanilla-Calendar-Pro offers most of that even though it has some rough corners, the biggest con to this new lib is the use of template with HTML strings (dropping CSP support), and it seems to takes a few weeks to accept any PRs, so I might end up forking it, we'll see... but nonetheless I find it's a great upgrade and it also offers a nice Dark Mode by default and the locale support is flawless and uses simple, but clever, native code without even needing any locale files.
  • this migration also offers much smaller build size
  • this is a breaking change and is only targeted for the next major version

TODOs

  • update all unit tests with full coverage (currently failing because an issue that was fixed via a PR waiting to be merged)
    • might need to pnpm patch it until my PR is merged on that repo, so that my unit tests could run
  • update all Cypress tests
  • remove previous Flatpickr styling
  • remove previous Flatpickr Docs
  • add missing auto-positioning (top/bottom)
  • test in downstream repos like Angular-Slickgrid
  • add build size comparison reference

Build Size Comparison

File before after diff % diff
SF Bundle Zip File 582Kb (596,143) 565Kb (579,246) -17Kb 2.83% smaller
GitHub Vite Demo Website 5.12Mb (5,376,179) 5.16Mb (5,415,631) +39Kb 0.7% larger

NOTE actually it turns out that after the Vanilla-Calendar migration, the build is larger not smaller (as seen in the demo build) and the reason was because the CSS file wasn't properly loaded which made it looks like it was smaller but in fact is larger.

image

image

image

image

image

Copy link

stackblitz bot commented Apr 14, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@ghiscoding ghiscoding marked this pull request as draft April 14, 2024 05:49
Copy link

codecov bot commented Apr 15, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.8%. Comparing base (12661a3) to head (e0180d3).

Additional details and impacted files
@@           Coverage Diff           @@
##            next   #1466     +/-   ##
=======================================
+ Coverage   99.8%   99.8%   +0.1%     
=======================================
  Files        199     199             
  Lines      21763   21766      +3     
  Branches    7264    7249     -15     
=======================================
+ Hits       21699   21702      +3     
  Misses        58      58             
  Partials       6       6             

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@ghiscoding ghiscoding changed the title feat!: migrate from Flatpickr to Vanilla-Calendar feat(common)!: migrate from Flatpickr to Vanilla-Calendar Apr 15, 2024
@ghiscoding ghiscoding changed the base branch from master to next April 26, 2024 18:34
@ghiscoding ghiscoding marked this pull request as ready for review April 27, 2024 05:49
@ghiscoding ghiscoding merged commit fb6e950 into next Apr 27, 2024
6 checks passed
@ghiscoding ghiscoding deleted the feat/vanilla-calendar-picker branch April 27, 2024 06:20
@ghiscoding
Copy link
Owner Author

Alright, I think this is ready to be merged and move to next phase :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant