@shoelace-style/localize 2.0.0 → 2.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+## 2.1.3
+
+- Renamed `updateLocalizedTerms()` to `update()` (forgive me SemVer, but nobody was using this I promise)
+
+## 2.1.2
+
+- Removed all dependencies
+
+## 2.1.1
+
+- Change import to ensure only types get used
+
+## 2.1.0
+
+- Added relative time method to 
+
+## 2.0.0
+
+- Reworked the library to use the [ReactiveController](https://lit.dev/docs/composition/controllers/) interface

package/README.md

@@ -1,6 +1,6 @@
 # Shoelace: Localize
 
-This micro library does not aim to replicate a full-blown localization tool. For that, you should use something like [i18next](https://www.i18next.com/). What this library _does_ do is provide a lightweight, framework-agnostic mechanism for sharing and applying translations across one or more custom elements in a component library.
+This zero-dependency micro library does not aim to replicate a full-blown localization tool. For that, you should use something like [i18next](https://www.i18next.com/). What this library _does_ do is provide a lightweight, framework-agnostic mechanism for sharing and applying translations across one or more custom elements in a component library.
 
 Included are methods for translating terms, dates, currencies, and numbers and a [Reactive Controller](https://lit.dev/docs/composition/controllers/) that can be used as a mixin in Lit and other supportive component authoring libraries.
 
@@ -193,7 +193,8 @@ export class MyElement extends LitElement {
 ## Advantages
 
 - Extremely lightweight
-	- ~2.5 KB compared to ~33 KB for i18next (both without translations/minifications)
+  - Zero dependencies
+	- Version 2.1 measures 726 bytes (yes, _bytes_) after minify + gzip
 - Uses existing platform features
 - Supports simple terms, plurals, and complex translations
 	- Fun fact: some languages have [six plural forms](https://lingohub.com/blog/2019/02/pluralization) and this will support that

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 export declare type FunctionParams<T> = T extends (...args: infer U) => string ? U : never;
 export interface Translation {
     $code: string;
@@ -10,7 +10,8 @@ export declare function registerTranslation(...translation: Translation[]): void
 export declare function term<K extends keyof Translation>(lang: string, key: K, ...args: FunctionParams<Translation[K]>): any;
 export declare function date(lang: string, dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
 export declare function number(lang: string, numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
-export declare function updateLocalizedTerms(): void;
+export declare function relativeTime(lang: string, value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
+export declare function update(): void;
 export declare class LocalizeController implements ReactiveController {
     host: ReactiveControllerHost & HTMLElement;
     constructor(host: ReactiveControllerHost & HTMLElement);
@@ -19,4 +20,5 @@ export declare class LocalizeController implements ReactiveController {
     term<K extends keyof Translation>(key: K, ...args: FunctionParams<Translation[K]>): any;
     date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
     number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
+    relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 const connectedElements = new Set();
-const documentElementObserver = new MutationObserver(updateLocalizedTerms);
+const documentElementObserver = new MutationObserver(update);
 const translations = new Map();
 let documentLanguage = document.documentElement.lang || navigator.language;
 let fallback;
@@ -15,7 +15,7 @@ export function registerTranslation(...translation) {
             fallback = t;
         }
     });
-    updateLocalizedTerms();
+    update();
 }
 export function term(lang, key, ...args) {
     const code = lang.toLowerCase().slice(0, 2);
@@ -49,7 +49,10 @@ export function number(lang, numberToFormat, options) {
     numberToFormat = Number(numberToFormat);
     return isNaN(numberToFormat) ? '' : new Intl.NumberFormat(lang, options).format(numberToFormat);
 }
-export function updateLocalizedTerms() {
+export function relativeTime(lang, value, unit, options) {
+    return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
+}
+export function update() {
     documentLanguage = document.documentElement.lang || navigator.language;
     [...connectedElements.keys()].map((el) => {
         if (typeof el.requestUpdate === 'function') {
@@ -77,4 +80,7 @@ export class LocalizeController {
     number(numberToFormat, options) {
         return number(this.host.lang || documentLanguage, numberToFormat, options);
     }
+    relativeTime(value, unit, options) {
+        return relativeTime(this.host.lang || documentLanguage, value, unit, options);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoelace-style/localize",
-  "version": "2.0.0",
+  "version": "2.1.3",
   "description": "A micro library for localizing custom elements using Lit's Reactive Controller model.",
   "main": "/dist/index.js",
   "module": "/dist/index.js",
@@ -34,9 +34,7 @@
   "homepage": "https://github.com/shoelace-style/localize#readme",
   "devDependencies": {
     "del": "^6.0.0",
+    "lit": "^2.0.2",
     "typescript": "^4.4.3"
-  },
-  "dependencies": {
-    "lit": "^2.0.2"
   }
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
 
 export type FunctionParams<T> = T extends (...args: infer U) => string ? U : never;
 
@@ -10,7 +10,7 @@ export interface Translation {
 }
 
 const connectedElements = new Set<HTMLElement>();
-const documentElementObserver = new MutationObserver(updateLocalizedTerms);
+const documentElementObserver = new MutationObserver(update);
 const translations: Map<string, Translation> = new Map();
 let documentLanguage = document.documentElement.lang || navigator.language;
 let fallback: Translation;
@@ -35,7 +35,7 @@ export function registerTranslation(...translation: Translation[]) {
     }
   });
 
-  updateLocalizedTerms();
+  update();
 }
 
 //
@@ -85,9 +85,21 @@ export function number(lang: string, numberToFormat: number | string, options?:
 }
 
 //
-// Updates the locale for all localized elements that are currently connected
+// Formats a relative date using the specified locale.
 //
-export function updateLocalizedTerms() {
+export function relativeTime(
+  lang: string,
+  value: number,
+  unit: Intl.RelativeTimeFormatUnit,
+  options?: Intl.RelativeTimeFormatOptions
+) {
+  return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
+}
+
+//
+// Updates all localized elements that are currently connected
+//
+export function update() {
   documentLanguage = document.documentElement.lang || navigator.language;
 
   [...connectedElements.keys()].map((el: LitElement) => {
@@ -142,4 +154,8 @@ export class LocalizeController implements ReactiveController {
   number(numberToFormat: number | string, options?: Intl.NumberFormatOptions) {
     return number(this.host.lang || documentLanguage, numberToFormat, options);
   }
+
+  relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {
+    return relativeTime(this.host.lang || documentLanguage, value, unit, options);
+  }
 }