@shoelace-style/localize 2.1.2 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +3 -0
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +12 -4
  5. package/package.json +1 -1
  6. package/src/index.ts +30 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.2.1
4
+
5
+ - Fixed a bug that prevented updates from happening when `<html dir>` changed
6
+
7
+ ## 2.2.0
8
+
9
+ - Added `dir()` method to return the target element's directionality
10
+ - Added `lang()` method to return the target element's language
11
+
12
+ ## 2.1.3
13
+
14
+ - Renamed `updateLocalizedTerms()` to `update()` (forgive me SemVer, but nobody was using this I promise)
3
15
 
4
16
  ## 2.1.2
5
17
 
package/README.md CHANGED
@@ -185,6 +185,9 @@ export class MyElement extends LitElement {
185
185
 
186
186
  <!-- Number/currency -->
187
187
  ${this.localize.number(1000, { style: 'currency', currency: 'USD'})}
188
+
189
+ <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
190
+ ${this.localize.dir()}
188
191
  `;
189
192
  }
190
193
  }
package/dist/index.d.ts CHANGED
@@ -11,12 +11,14 @@ export declare function term<K extends keyof Translation>(lang: string, key: K,
11
11
  export declare function date(lang: string, dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
12
12
  export declare function number(lang: string, numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
13
13
  export declare function relativeTime(lang: string, value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
14
- export declare function updateLocalizedTerms(): void;
14
+ export declare function update(): void;
15
15
  export declare class LocalizeController implements ReactiveController {
16
16
  host: ReactiveControllerHost & HTMLElement;
17
17
  constructor(host: ReactiveControllerHost & HTMLElement);
18
18
  hostConnected(): void;
19
19
  hostDisconnected(): void;
20
+ dir(): string;
21
+ lang(): string;
20
22
  term<K extends keyof Translation>(key: K, ...args: FunctionParams<Translation[K]>): any;
21
23
  date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
22
24
  number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
package/dist/index.js CHANGED
@@ -1,11 +1,12 @@
1
1
  const connectedElements = new Set();
2
- const documentElementObserver = new MutationObserver(updateLocalizedTerms);
2
+ const documentElementObserver = new MutationObserver(update);
3
3
  const translations = new Map();
4
+ let documentDirection = document.documentElement.dir || 'ltr';
4
5
  let documentLanguage = document.documentElement.lang || navigator.language;
5
6
  let fallback;
6
7
  documentElementObserver.observe(document.documentElement, {
7
8
  attributes: true,
8
- attributeFilter: ['lang']
9
+ attributeFilter: ['dir', 'lang']
9
10
  });
10
11
  export function registerTranslation(...translation) {
11
12
  translation.map(t => {
@@ -15,7 +16,7 @@ export function registerTranslation(...translation) {
15
16
  fallback = t;
16
17
  }
17
18
  });
18
- updateLocalizedTerms();
19
+ update();
19
20
  }
20
21
  export function term(lang, key, ...args) {
21
22
  const code = lang.toLowerCase().slice(0, 2);
@@ -52,7 +53,8 @@ export function number(lang, numberToFormat, options) {
52
53
  export function relativeTime(lang, value, unit, options) {
53
54
  return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
54
55
  }
55
- export function updateLocalizedTerms() {
56
+ export function update() {
57
+ documentDirection = document.documentElement.dir || 'ltr';
56
58
  documentLanguage = document.documentElement.lang || navigator.language;
57
59
  [...connectedElements.keys()].map((el) => {
58
60
  if (typeof el.requestUpdate === 'function') {
@@ -71,6 +73,12 @@ export class LocalizeController {
71
73
  hostDisconnected() {
72
74
  connectedElements.delete(this.host);
73
75
  }
76
+ dir() {
77
+ return `${this.host.dir || documentDirection}`.toLowerCase();
78
+ }
79
+ lang() {
80
+ return `${this.host.lang || documentLanguage}`.toLowerCase();
81
+ }
74
82
  term(key, ...args) {
75
83
  return term(this.host.lang || documentLanguage, key, ...args);
76
84
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoelace-style/localize",
3
- "version": "2.1.2",
3
+ "version": "2.2.1",
4
4
  "description": "A micro library for localizing custom elements using Lit's Reactive Controller model.",
5
5
  "main": "/dist/index.js",
6
6
  "module": "/dist/index.js",
package/src/index.ts CHANGED
@@ -10,15 +10,16 @@ export interface Translation {
10
10
  }
11
11
 
12
12
  const connectedElements = new Set<HTMLElement>();
13
- const documentElementObserver = new MutationObserver(updateLocalizedTerms);
13
+ const documentElementObserver = new MutationObserver(update);
14
14
  const translations: Map<string, Translation> = new Map();
15
+ let documentDirection = document.documentElement.dir || 'ltr';
15
16
  let documentLanguage = document.documentElement.lang || navigator.language;
16
17
  let fallback: Translation;
17
18
 
18
19
  // Watch for changes on <html lang>
19
20
  documentElementObserver.observe(document.documentElement, {
20
21
  attributes: true,
21
- attributeFilter: ['lang']
22
+ attributeFilter: ['dir', 'lang']
22
23
  });
23
24
 
24
25
  //
@@ -35,7 +36,7 @@ export function registerTranslation(...translation: Translation[]) {
35
36
  }
36
37
  });
37
38
 
38
- updateLocalizedTerms();
39
+ update();
39
40
  }
40
41
 
41
42
  //
@@ -97,9 +98,10 @@ export function relativeTime(
97
98
  }
98
99
 
99
100
  //
100
- // Updates the locale for all localized elements that are currently connected
101
+ // Updates all localized elements that are currently connected
101
102
  //
102
- export function updateLocalizedTerms() {
103
+ export function update() {
104
+ documentDirection = document.documentElement.dir || 'ltr';
103
105
  documentLanguage = document.documentElement.lang || navigator.language;
104
106
 
105
107
  [...connectedElements.keys()].map((el: LitElement) => {
@@ -116,9 +118,10 @@ export function updateLocalizedTerms() {
116
118
  //
117
119
  // private localize = new LocalizeController(this);
118
120
  //
119
- // This will add the element to the set and make it respond to changes to <html lang> automatically. To make it respond
120
- // to changes to its own lang property, make it a property:
121
+ // This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
122
+ // respond to changes to its own dir|lang properties, make it a property:
121
123
  //
124
+ // @property() dir: string;
122
125
  // @property() lang: string;
123
126
  //
124
127
  // To use a translation method, call it like this:
@@ -143,18 +146,38 @@ export class LocalizeController implements ReactiveController {
143
146
  connectedElements.delete(this.host);
144
147
  }
145
148
 
149
+ /**
150
+ * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
151
+ * lowercase.
152
+ */
153
+ dir() {
154
+ return `${this.host.dir || documentDirection}`.toLowerCase();
155
+ }
156
+
157
+ /**
158
+ * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
159
+ * lowercase.
160
+ */
161
+ lang() {
162
+ return `${this.host.lang || documentLanguage}`.toLowerCase();
163
+ }
164
+
146
165
  term<K extends keyof Translation>(key: K, ...args: FunctionParams<Translation[K]>) {
166
+ /** Outputs a localized term. */
147
167
  return term(this.host.lang || documentLanguage, key, ...args);
148
168
  }
149
169
 
170
+ /** Outputs a localized date in the specified format. */
150
171
  date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions) {
151
172
  return date(this.host.lang || documentLanguage, dateToFormat, options);
152
173
  }
153
174
 
175
+ /** Outputs a localized number in the specified format. */
154
176
  number(numberToFormat: number | string, options?: Intl.NumberFormatOptions) {
155
177
  return number(this.host.lang || documentLanguage, numberToFormat, options);
156
178
  }
157
179
 
180
+ /** Outputs a localized time in relative format. */
158
181
  relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {
159
182
  return relativeTime(this.host.lang || documentLanguage, value, unit, options);
160
183
  }