Vendor relative-time-element as local web component

package.json

@@ -12,7 +12,6 @@
     "@citation-js/plugin-software-formats": "0.6.2",
     "@github/markdown-toolbar-element": "2.2.3",
     "@github/paste-markdown": "1.5.3",
-    "@github/relative-time-element": "5.0.0",
     "@github/text-expander-element": "2.9.4",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@mermaid-js/layout-elk": "0.2.0",

routers/web/devtest/devtest.go

@@ -51,16 +51,7 @@ func FetchActionTest(ctx *context.Context) {
 	ctx.JSONRedirect("")
 }
 
-func prepareMockDataGiteaUI(ctx *context.Context) {
-	now := time.Now()
-	ctx.Data["TimeNow"] = now
-	ctx.Data["TimePast5s"] = now.Add(-5 * time.Second)
-	ctx.Data["TimeFuture5s"] = now.Add(5 * time.Second)
-	ctx.Data["TimePast2m"] = now.Add(-2 * time.Minute)
-	ctx.Data["TimeFuture2m"] = now.Add(2 * time.Minute)
-	ctx.Data["TimePast1y"] = now.Add(-1 * 366 * 86400 * time.Second)
-	ctx.Data["TimeFuture1y"] = now.Add(1 * 366 * 86400 * time.Second)
-}
+func prepareMockDataGiteaUI(_ *context.Context) {}
 
 func prepareMockDataBadgeCommitSign(ctx *context.Context) {
 	var commits []*asymkey.SignCommit
@@ -166,6 +157,29 @@ func prepareMockDataBadgeActionsSvg(ctx *context.Context) {
 	ctx.Data["SelectedStyle"] = selectedStyle
 }
 
+func prepareMockDataRelativeTime(ctx *context.Context) {
+	now := time.Now()
+	ctx.Data["TimeNow"] = now
+	ctx.Data["TimePast5s"] = now.Add(-5 * time.Second)
+	ctx.Data["TimeFuture5s"] = now.Add(5 * time.Second)
+	ctx.Data["TimePast2m"] = now.Add(-2 * time.Minute)
+	ctx.Data["TimeFuture2m"] = now.Add(2 * time.Minute)
+	ctx.Data["TimePast3m"] = now.Add(-3 * time.Minute)
+	ctx.Data["TimePast1h"] = now.Add(-1 * time.Hour)
+	ctx.Data["TimePast3h"] = now.Add(-3 * time.Hour)
+	ctx.Data["TimePast1d"] = now.Add(-24 * time.Hour)
+	ctx.Data["TimePast2d"] = now.Add(-2 * 24 * time.Hour)
+	ctx.Data["TimePast3d"] = now.Add(-3 * 24 * time.Hour)
+	ctx.Data["TimePast26h"] = now.Add(-26 * time.Hour)
+	ctx.Data["TimePast40d"] = now.Add(-40 * 24 * time.Hour)
+	ctx.Data["TimePast60d"] = now.Add(-60 * 24 * time.Hour)
+	ctx.Data["TimePast1y"] = now.Add(-366 * 24 * time.Hour)
+	ctx.Data["TimeFuture1h"] = now.Add(1 * time.Hour)
+	ctx.Data["TimeFuture3h"] = now.Add(3 * time.Hour)
+	ctx.Data["TimeFuture3d"] = now.Add(3 * 24 * time.Hour)
+	ctx.Data["TimeFuture1y"] = now.Add(366 * 24 * time.Hour)
+}
+
 func prepareMockData(ctx *context.Context) {
 	switch ctx.Req.URL.Path {
 	case "/devtest/gitea-ui":
@@ -174,6 +188,8 @@ func prepareMockData(ctx *context.Context) {
 		prepareMockDataBadgeCommitSign(ctx)
 	case "/devtest/badge-actions-svg":
 		prepareMockDataBadgeActionsSvg(ctx)
+	case "/devtest/relative-time":
+		prepareMockDataRelativeTime(ctx)
 	}
 }
 

templates/devtest/gitea-ui.tmpl

@@ -117,15 +117,6 @@
 		</overflow-menu>
 	</div>
 
-	<div>
-		<h1>Absolute Dates</h1>
-		<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
-		<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
-		<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
-		<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
-		<div><relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
-	</div>
-
 	<div>
 		<h1>LocaleNumber</h1>
 		<div>{{ctx.Locale.PrettyNumber 1}}</div>
@@ -137,17 +128,6 @@
 		<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
 	</div>
 
-	<div>
-		<h1>TimeSince</h1>
-		<div>Now: {{DateUtils.TimeSince .TimeNow}}</div>
-		<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
-		<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
-		<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
-		<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
-		<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
-		<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
-	</div>
-
 	<div>
 		<h1>SVG alignment</h1>
 

templates/devtest/relative-time.tmpl

@@ -0,0 +1,66 @@
+{{template "devtest/devtest-header"}}
+<div class="page-content devtest ui container">
+	<div class="tw-grid tw-grid-cols-3 tw-gap-4">
+		<div>
+			<h2>Relative (auto)</h2>
+			<div>now: <relative-time datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>3m ago: <relative-time datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>3h ago: <relative-time datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>1d ago: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>3d ago: <relative-time datetime="{{.TimePast3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>3d future: <relative-time datetime="{{.TimeFuture3d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>40d ago (threshold): <relative-time datetime="{{.TimePast40d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+		</div>
+		<div>
+			<h2>tense=past</h2>
+			<div>3m ago: <relative-time tense="past" datetime="{{.TimePast3m.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>future clamped: <relative-time tense="past" datetime="{{.TimeFuture1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>60d ago: <relative-time tense="past" datetime="{{.TimePast60d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+		</div>
+		<div>
+			<h2>tense=future</h2>
+			<div>3h future: <relative-time tense="future" datetime="{{.TimeFuture3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>past clamped: <relative-time tense="future" datetime="{{.TimePast1h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+		</div>
+		<div>
+			<h2>Duration</h2>
+			<div>0s: <relative-time format="duration" datetime="{{.TimeNow.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>3h: <relative-time format="duration" datetime="{{.TimePast3h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>1d 2h: <relative-time format="duration" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>short: <relative-time format="duration" format-style="short" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>narrow: <relative-time format="duration" format-style="narrow" datetime="{{.TimePast26h.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+		</div>
+		<div>
+			<h2>Datetime (absolute)</h2>
+			<div>default: <relative-time format="datetime" datetime="2024-03-11"></relative-time></div>
+			<div>month=short: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
+			<div>month=long: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
+			<div>numeric: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
+			<div>weekday: <relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
+			<div>with time: <relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
+		</div>
+		<div>
+			<h2>Threshold</h2>
+			<div>P0Y: <relative-time threshold="P0Y" prefix="" weekday="" year="numeric" month="short" datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>P1D: <relative-time threshold="P1D" datetime="{{.TimePast2d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+			<div>P30D: <relative-time datetime="{{.TimePast1d.Format "2006-01-02T15:04:05Z07:00"}}"></relative-time></div>
+		</div>
+		<div>
+			<h2>Prefix</h2>
+			<div>default: <relative-time datetime="2024-03-11"></relative-time></div>
+			<div>prefix="": <relative-time prefix="" datetime="2024-03-11"></relative-time></div>
+			<div>prefix="at": <relative-time prefix="at" datetime="2024-03-11"></relative-time></div>
+		</div>
+		<div>
+			<h2>TimeSince (Go helper)</h2>
+			<div>now: {{DateUtils.TimeSince .TimeNow}}</div>
+			<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
+			<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
+			<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
+			<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
+			<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
+			<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
+		</div>
+	</div>
+</div>
+{{template "devtest/devtest-footer"}}

web_src/css/base.css

@@ -238,7 +238,8 @@ progress::-moz-progress-bar {
   background: var(--color-hover);
 }
 
-::selection {
+::selection,
+relative-time::part(root)::selection {
   background: var(--color-primary-light-1);
   color: var(--color-white);
 }

web_src/js/modules/tippy.ts

@@ -1,6 +1,5 @@
 import tippy, {followCursor} from 'tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
-import {formatDatetime} from '../utils/time.ts';
 import type {Content, Instance, Placement, Props} from 'tippy.js';
 import {html} from '../utils/html.ts';
 
@@ -100,20 +99,10 @@ function attachTooltip(target: Element, content: Content | null = null): Instanc
 }
 
 function switchTitleToTooltip(target: Element): void {
-  let title = target.getAttribute('title');
+  const title = target.getAttribute('title');
   if (title) {
-    // apply custom formatting to relative-time's tooltips
-    if (target.tagName.toLowerCase() === 'relative-time') {
-      const datetime = target.getAttribute('datetime');
-      if (datetime) {
-        title = formatDatetime(new Date(datetime));
-      }
-    }
     target.setAttribute('data-tooltip-content', title);
     target.setAttribute('aria-label', title);
-    // keep the attribute, in case there are some other "[title]" selectors
-    // and to prevent infinite loop with <relative-time> which will re-add
-    // title if it is absent
     target.setAttribute('title', '');
   }
 }
@@ -155,7 +144,7 @@ export function initGlobalTooltips(): void {
   const observerConnect = (observer: MutationObserver) => observer.observe(document, {
     subtree: true,
     childList: true,
-    attributeFilter: ['data-tooltip-content', 'title'],
+    attributeFilter: ['data-tooltip-content'],
   });
   const observer = new MutationObserver((mutationList, observer) => {
     const pending = observer.takeRecords();

web_src/js/utils/time.ts

@@ -77,7 +77,6 @@ export function formatDatetime(date: Date | number): string {
       hour: 'numeric',
       hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())),
       minute: '2-digit',
-      timeZoneName: 'short',
     });
   }
   return dateFormat.format(date);

web_src/js/webcomponents/index.ts

@@ -1,4 +1,4 @@
 import './polyfills.ts';
-import '@github/relative-time-element';
+import './relative-time.ts';
 import './origin-url.ts';
 import './overflow-menu.ts';

web_src/js/webcomponents/polyfills.ts

@@ -1,21 +1,3 @@
-try {
-  // some browsers like PaleMoon don't have full support for Intl.NumberFormat, so do the minimum polyfill to support "relative-time-element"
-  // https://repo.palemoon.org/MoonchildProductions/UXP/issues/2289
-  new Intl.NumberFormat('en', {style: 'unit', unit: 'minute'}).format(1);
-} catch {
-  const intlNumberFormat = Intl.NumberFormat;
-  Intl.NumberFormat = function(locales: string | string[], options: Intl.NumberFormatOptions) {
-    if (options.style === 'unit') {
-      return {
-        format(value: number | bigint | string) {
-          return ` ${value} ${options.unit}`;
-        },
-      } as Intl.NumberFormat;
-    }
-    return intlNumberFormat(locales, options);
-  } as unknown as typeof Intl.NumberFormat;
-}
-
 export function weakRefClass() {
   const weakMap = new WeakMap();
   return class {