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

refactor(ui): replace moment-timezone with native Intl #12097

Merged
merged 2 commits into from
Nov 5, 2023

Conversation

agilgur5
Copy link
Contributor

@agilgur5 agilgur5 commented Oct 28, 2023

Partial fix for #12059; this replaces a dep instead of code-splitting it out

Motivation

Modifications

  • rather than code-splitting moment-timezone, we can just replace it with native code in the one place it's used

    • equivalently get a list of all timezones from the browser
    • equivalently convert ISO strings with TZ (thanks Canada)
  • remove useEffect code that is no longer needed (and really should've been a useMemo)

Verification

Confirmed that behavior was equivalent on two known TZs (NYC and LA). Screenshots:

Screenshot 2023-10-28 at 11 52 40 AM - NYC time
Screenshot 2023-10-28 at 11 52 13 AM - LA time

Bundle Analysis

before removal of moment-timezone:


Screenshot 2023-10-27 at 4 15 44 PM - with moment tz

after removal of moment-timezone:


Screenshot 2023-10-27 at 6 07 03 PM -- without moment tz

- `moment-timezone` is a very large dependency, currently the second largest in the codebase
  - `moment` is [deprecated](https://momentjs.com/docs/#/-project-status/) and recommends using `Intl`, which is supported in all modern browsers (c.f. [MDN compatibility matrix](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#browser_compatibility))
    - `moment` was announced as deprecated in Sep 2020, so we should be more careful with commits like 8e7c734 that introduce new dependencies
  - rather than code-splitting it, we can just replace it with native code in the one place it's used
    - equivalently get a list of all timezones from the browser
    - equivalently convert ISO strings with TZ (thanks Canada)

- remove `useEffect` code that is no longer needed and should've been a `useMemo`

- shave off 775KB / 760KB minified / 36KB gzipped

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
@agilgur5 agilgur5 added type/dependencies PRs and issues specific to updating dependencies area/ui javascript Pull requests that update Javascript dependencies labels Oct 28, 2023
ui/yarn.lock Show resolved Hide resolved
Signed-off-by: Anton Gilgur <4970083+agilgur5@users.noreply.github.com>
@agilgur5
Copy link
Contributor Author

agilgur5 commented Nov 5, 2023

@terrytangyuan any chance you could merge this soon? Its already been approved and is getting merge conflicts with dependabot 😕

@terrytangyuan terrytangyuan merged commit 249768c into argoproj:master Nov 5, 2023
15 checks passed
@agilgur5 agilgur5 deleted the refactor-remove-moment-tz branch November 6, 2023 00:47
terrytangyuan pushed a commit that referenced this pull request Nov 27, 2023
Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
Signed-off-by: Anton Gilgur <4970083+agilgur5@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/ui javascript Pull requests that update Javascript dependencies type/dependencies PRs and issues specific to updating dependencies
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants