.eslintrc.js

@@ -10,12 +10,12 @@ module.exports = {
 	plugins: ['@typescript-eslint'],
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020,
+		ecmaVersion: 2024,
 		extraFileExtensions: ['.svelte']
 	},
 	env: {
 		browser: true,
-		es2017: true,
+		es2024: true,
 		node: true
 	},
 	rules: {

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "teasanctuary-ru",
 			"version": "0.0.1",
+			"dependencies": {
+				"@formatjs/intl-durationformat": "^0.7.6"
+			},
 			"devDependencies": {
 				"@iconify/svelte": "^4.2.0",
 				"@react2svelte/swipeable": "^0.1.4",
@@ -619,6 +622,47 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@formatjs/ecma402-abstract": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+			"integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+			"license": "MIT",
+			"dependencies": {
+				"@formatjs/fast-memoize": "2.2.7",
+				"@formatjs/intl-localematcher": "0.6.2",
+				"decimal.js": "^10.4.3",
+				"tslib": "^2.8.0"
+			}
+		},
+		"node_modules/@formatjs/fast-memoize": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+			"integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
+		"node_modules/@formatjs/intl-durationformat": {
+			"version": "0.7.6",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl-durationformat/-/intl-durationformat-0.7.6.tgz",
+			"integrity": "sha512-jatAN3E84X6aP2UOGK1jTrwD1a7BiG3qWUSEDAhtyNd1BgYeS5wQPtXlnuGF1QRx0DjnwwNOIssyd7oQoRlQeg==",
+			"license": "MIT",
+			"dependencies": {
+				"@formatjs/ecma402-abstract": "2.3.6",
+				"@formatjs/intl-localematcher": "0.6.2",
+				"tslib": "^2.8.0"
+			}
+		},
+		"node_modules/@formatjs/intl-localematcher": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+			"integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.1",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1960,6 +2004,12 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+			"integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+			"license": "MIT"
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4097,7 +4147,6 @@
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
 			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-			"dev": true,
 			"license": "0BSD"
 		},
 		"node_modules/type-check": {

package.json

@@ -41,5 +41,8 @@
 		"typescript": "^5.7.3",
 		"vite": "^6.2.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@formatjs/intl-durationformat": "^0.7.6"
+	}
 }

src/app.d.ts

@@ -1,4 +1,17 @@
+import type {
+	DurationFormatConstructor,
+	DurationFormatOptions as _DurationFormatOptions,
+	DurationInput as _DurationInput,
+} from '@formatjs/intl-durationformat/src/types';
+
 declare global {
+	// rndtrash: Терпим. https://github.com/microsoft/TypeScript/issues/60608
+	namespace Intl {
+		const DurationFormat: DurationFormatConstructor;
+		type DurationFormatOptions = _DurationFormatOptions;
+		type DurationInput = _DurationInput;
+	}
+
 	namespace App {
 		interface Route {
 			label: string;

src/lib/components/DateWidget.svelte

@@ -1,15 +1,27 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import { dateFormatLong, dateFormatShort } from '$lib/util/Dates';
 
-	let className: string = '';
-	export { className as class };
+	let {
+		dateString,
+		type = undefined,
+		highlight = false,
+		showTime = false,
+		class: className = ''
+	}: {
+		dateString?: string;
+		type?: 'published' | 'updated';
+		highlight?: boolean;
+		showTime?: boolean;
+		class?: string;
+	} = $props();
 
-	export let dateString: string | undefined;
-	export let type: 'published' | 'updated' = 'published';
-	export let highlight = false;
+	const typeToIcon = {
+		published: 'material-symbols:calendar-today',
+		updated: 'material-symbols:update'
+	};
 
-	const icon =
-		type == 'published' ? 'material-symbols:calendar-today' : 'material-symbols:update';
+	const icon = type ? typeToIcon[type] : undefined;
 
 	const highlightClasses = (classes: string) => (highlight ? classes : '');
 </script>
@@ -19,14 +31,12 @@
     {highlightClasses(type == 'published' ? 'bg-amber-600' : 'bg-purple-600')}
     {highlightClasses('text-slate-50')}"
 >
+	{#if icon}
 		<Icon {icon} width={28} height={28} />
+	{/if}
 	<span class="text-nowrap">
 		{dateString
-			? new Date(dateString).toLocaleString(undefined, {
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})
+			? (showTime ? dateFormatLong : dateFormatShort).format(new Date(dateString))
 			: 'Не опубликован!'}
 	</span>
 </div>

src/lib/util/Dates.ts

@@ -0,0 +1,42 @@
+import { shouldPolyfill } from '@formatjs/intl-durationformat/should-polyfill'
+if (shouldPolyfill()) {
+    import('@formatjs/intl-durationformat/polyfill-force');
+}
+
+export const dateFormatShort = new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+});
+
+export const dateFormatLong = new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+});
+
+export const dateDurationLong = new Intl.DurationFormat(undefined, {
+    style: "long"
+});
+
+export const dateDurationLongBackup = new Intl.DurationFormat(undefined, {
+    style: "long",
+    seconds: "long"
+});
+
+export const durationHumanReadable = (a: Date, b: Date) => durationHumanReadableMillis(b.valueOf() - a.valueOf());
+
+export function durationHumanReadableMillis(dur: number): string {
+    dur = Math.max(dur, 0);
+    const seconds = dur / 1000;
+    const minutes = dur / (1000 * 60);
+    const hours = dur / (1000 * 60 * 60);
+    const days = dur / (1000 * 60 * 60 * 24);
+
+    const formatObject = { days: Math.floor(days), hours: Math.floor(hours) % 24, minutes: Math.floor(minutes) % 60, seconds: Math.floor(seconds) % 60 };
+    const result = dateDurationLong.format(formatObject);
+    // Если на выходе получаем пустую строку, то хоть выведем 0 секунд
+    return result === '' ? dateDurationLongBackup.format(formatObject) : result;
+}