Vendor relative-time-element as local web component by silverwind · Pull Request #36853 · go-gitea/gitea

silverwind · 2026-03-06T17:39:22Z

Replace the @github/relative-time-element npm dependency with a vendored, simplified implementation.

Support 24h format rendering PR 329
Enable ::selection styling in Firefox PR 341
Remove timezone from tooltips (It's always local timezone)
Clean up previous title workaround in tippy
Remove unused features

Replace the `@github/relative-time-element` npm dependency with a vendored, simplified TypeScript implementation in `web_src/js/webcomponents/`. Changes: - Strip unused features: `format="micro"`, `format="elapsed"`, `data-prefers-absolute-time`, `RelativeTimeUpdatedEvent`, and `aria-hidden` span wrapping - Apply hourCycle support from upstream PR go-gitea#329 - Apply `part="root"` for `::selection` styling from upstream PR go-gitea#341 - Remove timezone from date tooltips - Disable `wc/no-constructor` eslint rule (needed for shadow DOM) Co-Authored-By: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>

Single-file vendored component, no separate module needed. Co-Authored-By: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>

Remove unused code paths identified by analyzing actual template usage: - All property setters (never called from JS, config via HTML attributes) - ListFormatPonyFill (Intl.ListFormat has universal browser support) - milliseconds support (durationRe doesn't capture ms, precision always 'second') - digital/2-digit DurationFormat styles (never used) - Duration.from object branch (only string inputs used) - noTitle, timeZoneName, timeZone, precision getters (never set) - Corresponding observedAttributes entries 736 -> 559 lines (~24% reduction). Co-Authored-By: Claude opus-4-6 v1 <noreply@anthropic.com>

web_src/js/webcomponents/relative-time.ts

Signed-off-by: silverwind <me@silverwind.io>

- Derive partsTable from unitNames (single source of truth) - Remove redundant documentElement fallback (closest() traverses to html) - Use static field for observedAttributes - Create span once in constructor, update textContent directly - Remove #updateRenderRootContent method Co-Authored-By: Claude opus-4-6 v1 <noreply@anthropic.com>

Copilot

Pull request overview

This PR replaces the @github/relative-time-element dependency with a locally vendored <relative-time> web component implementation, while simplifying features and adjusting tooltip/time formatting behavior in the web UI.

Changes:

Add a new vendored web_src/js/webcomponents/relative-time.ts implementation and register it via the webcomponents entrypoint.
Remove @github/relative-time-element from package.json / pnpm-lock.yaml.
Update selection styling to support ::part(root) and remove timezone abbreviations from formatted tooltip datetimes.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
web_src/js/webcomponents/relative-time.ts	New vendored `<relative-time>` implementation with shadow DOM + formatting logic.
web_src/js/webcomponents/index.ts	Swap npm import for local web component import.
web_src/js/utils/time.ts	Remove `timeZoneName: 'short'` from formatted datetime output.
web_src/css/base.css	Add `relative-time::part(root)::selection` styling support.
package.json	Drop `@github/relative-time-element` dependency.
pnpm-lock.yaml	Remove lock entries for `@github/relative-time-element`.
eslint.config.ts	Disable `wc/no-constructor` rule (currently globally).

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

web_src/js/webcomponents/relative-time.ts

eslint.config.ts

- Fix epoch date handling: use explicit NaN check instead of falsy getTime() - Fix locale fallback: use navigator.language instead of invalid 'default' - Fix year comparison: use getFullYear() to match local-time formatter - Fix customTitle: treat empty title as not custom (tippy sets title="") - Scope wc/no-constructor disable to file instead of globally Co-Authored-By: Claude opus-4-6 v1 <noreply@anthropic.com>

Title attribute changes now return early after updating customTitle flag, preventing a cycle where update() sets title, tippy clears it, and the attributeChangedCallback queues another update. Co-Authored-By: Claude claude-opus-4-6 v1 <noreply@anthropic.com>

The relative-time component now sets data-tooltip-content and aria-label directly, removing the intermediary title attribute. This eliminates the interaction with tippy's MutationObserver that caused an infinite loop (update sets title → tippy clears title → attributeChangedCallback fires → update runs again). Also removes the relative-time special case and title watching from tippy.ts since they are no longer needed. Co-Authored-By: Claude claude-opus-4-6 v1 <noreply@anthropic.com>

lunny · 2026-03-06T18:32:30Z

Replace the @github/relative-time-element npm dependency with a vendored, simplified implementation.

Strip unused features: format="micro", format="elapsed", data-prefers-absolute-time, RelativeTimeUpdatedEvent, aria-hidden span wrapping, all property setters, ListFormatPonyFill, milliseconds support, digital/2-digit DurationFormat styles, unused attribute getters (noTitle, timeZoneName, timeZone, precision)

Apply hourCycle support from upstream PR #329

Apply part="root" for ::selection styling from upstream PR #341

Remove timezone abbreviation from date tooltips

Disable wc/no-constructor eslint rule (needed for shadow DOM attachment)

Generated by Claude

Please plain why we should vendor it. Whether a fork is better?

silverwind · 2026-03-06T18:42:45Z

Because https://github.com/github/relative-time-element is not well-maintained anymore. The original author is no longer employed by GitHub and the module has been stagnating since then. And I want the 24h feature, but I doubt they will merge it.

lunny · 2026-03-06T19:04:56Z

Because github/relative-time-element is not well-maintained anymore. The original author is no longer employed by GitHub and the module has been stagnating since then. And I want the 24h feature, but I doubt they will merge it.

But how about create a fork rather then vendor it?

web_src/js/webcomponents/relative-time.ts

Signed-off-by: silverwind <me@silverwind.io>

TheFox0x7 · 2026-03-07T20:26:33Z

Since I'm not up to date on this area - are the cut features something that might be useful in the future?
Also I think tests would be good to have here.

techknowlogick · 2026-03-07T22:36:52Z

web_src/js/webcomponents/relative-time.ts

@@ -0,0 +1,531 @@
+// Vendored and simplified from @github/relative-time-element
+


If this is being vendored from upstream, could you include the license text in a comment in the header (assuming it is mit)?

techknowlogick

Meant to submit as comment, not send as PR approval. My apologies

silverwind · 2026-03-08T06:27:07Z

Since I'm not up to date on this area - are the cut features something that might be useful in the future? Also I think tests would be good to have here.

Features can be re-added if needed. The whole module is only 500 lines (down from around 1100 lines of the original), I think it'll be managable. And I agree on tests, I will port a few.

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 6, 2026

github-actions bot added topic/code-linting modifies/dependencies modifies/frontend labels Mar 6, 2026

silverwind and others added 2 commits March 6, 2026 18:43

Merge duration.ts into relative-time.ts

21c912d

Single-file vendored component, no separate module needed. Co-Authored-By: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>

silverwind commented Mar 6, 2026

View reviewed changes

web_src/js/webcomponents/relative-time.ts Outdated Show resolved Hide resolved

silverwind and others added 2 commits March 6, 2026 18:57

Apply suggestion from @silverwind

396cbaa

Signed-off-by: silverwind <me@silverwind.io>

silverwind requested a review from Copilot March 6, 2026 18:06

Copilot started reviewing on behalf of silverwind March 6, 2026 18:07 View session

Copilot AI reviewed Mar 6, 2026

View reviewed changes

github-actions bot removed the topic/code-linting label Mar 6, 2026

silverwind and others added 2 commits March 6, 2026 19:24

silverwind commented Mar 6, 2026

View reviewed changes

web_src/js/webcomponents/relative-time.ts Outdated Show resolved Hide resolved

Apply suggestion from @silverwind

0787ed8

Signed-off-by: silverwind <me@silverwind.io>

techknowlogick approved these changes Mar 7, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 7, 2026

techknowlogick reviewed Mar 7, 2026

View reviewed changes

silverwind marked this pull request as draft March 8, 2026 06:29

		@@ -0,0 +1,531 @@
		// Vendored and simplified from @github/relative-time-element

Uh oh!

Conversation

silverwind commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lunny commented Mar 6, 2026

Uh oh!

silverwind commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lunny commented Mar 6, 2026

Uh oh!

Uh oh!

TheFox0x7 commented Mar 7, 2026

Uh oh!

techknowlogick Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

techknowlogick left a comment

Choose a reason for hiding this comment

Uh oh!

silverwind commented Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silverwind commented Mar 6, 2026 •

edited

Loading

silverwind commented Mar 6, 2026 •

edited

Loading

silverwind commented Mar 8, 2026 •

edited

Loading