svelte-relative-time's Introduction

svelte-relative-time

Tiny Svelte action (620 byte) and Component to render relative times.

Based partly on Fast and Light Relative Time Strings in JS by Steve Sewell with output rounded to the nearest unit and live updates with a single interval timer.

Features

✅ Action version is only 1006 bytes minified / 620 bytes gzipped
✅ Component version enables SSR
✅ Live updates by default (can be disabled)
✅ Uses single interval timer for updating all components
✅ Lightwight and GC friendly (single Intl.RelativeTimeFormat used per locale)
✅ Instance updates scheduled for new visible change
✅ Instance updates synchronized so all happen together

Usage

Install using your package manager of choice:

pnpm i svelte-relative-time

use:action Version

The use:action version only runs on the client so it suitable for Single Page Apps or when Server Side Rendering of timestamps isn't important.

Import the action:

import { relativeTime } from 'svelte-relative-time'

Apply to any HTML Element - the elements `.textContent` time will be set to the timestamp:

<span use:relativeTime={options} />

Options include:

date the Date or number to base the relative time on
locale the locale to use - defaults to browser default (window.navigator.language)
live whether to update live - defaults to true

Component Version

The Component version can be used for Server Side Rendering, but will require the locale to be set. See how to synchronize locale between client and server when using SvelteKit.

Import the component:

import RelativeTime from 'svelte-relative-time'

const date = Date.now()
const locale = 'en' // see note about on how to avoid hard coding this for SSR

Include Component with Properties:

<RelativeTime class="font-semibold" {date} {locale} />

Performance

The package is designed to be as lightweight as possible. A single timer is used (which only runs when there are any instances requiring live updates), a single Intl.RelativeTimeFormat instance per locale is created and re-used, and instances are only re-evaluated when their displayed value will next change. So even with thousands of instances shouldn't cause parformance issues.

svelte-relative-time's People

Contributors

Stargazers

Watchers

svelte-relative-time's Issues

Fuzzy time

Hi! Would it be possible to add just a tiny bit of "fuzzy" time display as an option. For my use case I'm server rendering the timestamps so instead of saying "12 seconds ago" without updating I'd like anything under 1-2 minutes to say just now for example. Perhaps if this is outside the scope of the library you could pass a custom formatting function that could optionally override the default display?

Invalid locale / date causes fatal error

When specifying an invalid locale like locale: "test" the component crashes the whole page:

formatter.js:8 Uncaught (in promise) RangeError: Incorrect locale information provided
    at new RelativeTimeFormat (<anonymous>)
    at getFormatter (formatter.js:8:23)
    at register (state.js:10:23)
    at init2 (action.js:8:9)
    at relativeTime (action.js:10:5)
    at mount (Message.svelte:178:22)
    at targetCmp.$$.fragment.m (svelte-hooks.js?v=2364f85d:291:24)
    at mount_component (Component.js:44:23)
    at Object.mount [as m] (http://localhost:5173/src/routes/(app)/jar/+page.svelte:937:4)
    at Object.mount [as m] (http://localhost:5173/src/routes/(app)/jar/+page.svelte:691:21)

The same happens when an invalid date is specified.

Since Svelte has no support for error boundaries, it's very hard to catch these errors in component init. It would be better if this component handled it gracefully with try/catch (for example, printing a console.warn() about the issue) and not display anything if there was an error.

Recommend Projects

captaincodeman / svelte-relative-time Goto Github PK