Add experimental React RelativeTime - #8250
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
|
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
🦋 Changeset detectedLatest commit: 63d5e4e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
|
Integration test results from github/github-ui PR: |
| return new Intl.DateTimeFormat(lang, { | ||
| day: 'numeric', | ||
| month: 'short', | ||
| year: 'numeric', | ||
| hour: 'numeric', | ||
| minute: '2-digit', | ||
| timeZoneName: 'short', | ||
| }).format(date) |
There was a problem hiding this comment.
nit early feedback:
creating Intl.DateTimeFormat (and related objects) objects can actually be quite expensive in some cases - safari especially).
If we can build these once and cache/reuse them between instances rather than creating a new one for every instance it can save a good bit of client thead time.
Particularly in cases where many of these render at once on a page (list views) this saves a lot of overhead.
https://github.com/js-temporal/temporal-polyfill/blob/main/CHANGELOG.md#044
Intl.DateTimeFormat instances can be expensive to create. For performance-sensitive code where the same calendar and time zone are used repeatedly for formatting, we recommend creating and reusing an Intl.DateTimeFormat instance with the desired timeZone and calendar options, and then formatting using the value of Temporal.ZonedDateTime.prototype.epochMilliseconds. Intl.DateTimeFormat instances may also require a lot of RAM, so indefinitely caching large numbers of them is not recommended for memory-constrained environments.
There was a problem hiding this comment.
I pushed some similar changes to relative-time-element for that too github/relative-time-element#364
Closes #
Changelog
New
ExperimentalRelativeTimeis available from@primer/react/experimentalfor opt-in evaluation of the native React implementation.primer_react_relative_timeto evaluate the implementation through the establishedRelativeTimeentry point.Changed
RelativeTimecomponent continues to render the existing<relative-time>custom element and retains its dependency, props, callback event contract, refs, and serialized formatting attributes by default.<time>, and uses Intl APIs for formatting and live updates. It preserves itsdata-componentanddatetimecontract; it intentionally does not reproduce legacy formatting attributes. If rollout diagnostics need DOM metadata, add a dedicateddata-relative-time-*contract rather than reviving custom-element attributes.Removed
Rollout strategy
Testing & Reviewing
ff7297694showed 297 DataTable failures across 99 snapshots (three retries each). The stable default had reverted to<relative-time>, while the prior mask only targeted the experimental<time>shape. Commitfba412b2emasks both shapes; no baselines were regenerated.