question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Move to standard Intl.RelativeTimeFormat

See original GitHub issue

This is now a widely supported web standard, as seen by the compat table here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat

As with everything, Safari is behind so we’re not quite at full support across all browsers yet.

Right now, date-fns simply chooses a format string based on the difference between two dates, then passes it on to format(). We should instead see if we can make use of the built-in Intl.RelativeTimeFormat.

If we switch some day, it’d mean we can delete a lot of locale information and more than likely increase performance, too.

Couple of problems:

  • formatRelative wouldn’t use format anymore (probably isn’t a problem anyway)
  • Intl.RelativeTimeFormat works on individual units, so we might have to round more to the closest unit if we don’t already (i.e. there would never be a combination like “3 days and 6 hours ago”, it would be “3 days ago”)
  • It doesn’t have a concept of something like “Last Sunday” like our current implementation seems to, it would instead be something like “4 days ago”

Happy to try a WIP PR if we have any idea how we’d tackle this.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:6
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
kossnocorpcommented, May 17, 2020

“Moving” is not an option, but I would love to see a new function that will use the Intl API behind the scenes.

I think intlFormatRelative name is a good option because it suggests that Intl API used and the polyfill is required. Also, in the future, we plan to move I18n to separate packages, and when we do that we can rename intlFormatRelative to formatRelative or create @date-fns/intl.

2reactions
AndreiIgnacommented, Sep 14, 2020

The reason I’m using date-fns over other libraries is that it has a small footprint and relies on as many native JS parts as it can. Because of this, I’m also in support of relying on Intl.RelativeTimeFormat for relative date/times. It looks like an obvious advantage of taking advantage of what JS is capable of, instead of duplicating features.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Intl.RelativeTimeFormat - JavaScript - MDN Web Docs - Mozilla
Returns an Array of objects representing the relative time format in parts that can be used for custom locale-aware formatting. Intl.RelativeTimeFormat.
Read more >
Relative Date Internationalization In JavaScript
The formatter is specifically called Intl.RelativeTimeFormat . This is a class which when instantiated can be used to format any relative ...
Read more >
intl-relative-time-format - npm package - Snyk
Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points. Maintenance. Inactive ......
Read more >
relative-time-format | Yarn - Package Manager
relative-time-format. npm version npm downloads npm size coverage. This library consists of three parts: A convenient Intl.RelativeTimeFormat polyfill.
Read more >
Javascript timestamp to relative time - datetime - Stack Overflow
The Intl.RelativeTimeFormat API seems more of a locale conscious string formatter (for time units) than something for formatting raw date/time ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found