be-intl 0.0.49 → 0.0.50
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.
- package/README.md +24 -0
- package/be-intl.js +5 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -36,6 +36,30 @@ We can also employ more semantic syntax:
|
|
|
36
36
|
<data value=123456.789 lang="de-DE" be-intl-style=currency be-intl-currency=EUR></data>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
## Locale resolution
|
|
40
|
+
|
|
41
|
+
The examples above put `lang` right on the formatted element, but that isn't required.
|
|
42
|
+
`be-intl` uses the element's **effective language**, resolved the same way the browser's
|
|
43
|
+
`:lang()` selector works:
|
|
44
|
+
|
|
45
|
+
1. the nearest ancestor with a `lang` (or `xml:lang`) attribute — crossing shadow-root
|
|
46
|
+
boundaries via the host element;
|
|
47
|
+
2. otherwise `<html lang>`;
|
|
48
|
+
3. otherwise the browser's own `navigator.language`.
|
|
49
|
+
|
|
50
|
+
So in practice you set `lang` once, high up:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<html lang="de-DE">
|
|
54
|
+
...
|
|
55
|
+
<data value=123456.789 be-intl-style=currency be-intl-currency=EUR></data>
|
|
56
|
+
<!-- emits 123.456,79 € -->
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Changing the formatted element's **own** `lang` after it has been enhanced re-formats it only
|
|
60
|
+
if you opt in with `be-intl-observe-lang` (`🌐-observe-lang`); changes to an ancestor's `lang`
|
|
61
|
+
after enhancement are not tracked.
|
|
62
|
+
|
|
39
63
|
## Alternative names
|
|
40
64
|
|
|
41
65
|
The semantic example above involves a lot of keyboard tapping of the letters "be-intl". To avoid blisters on your itty bitty fingers, we provide an alternative base attribute you can use:
|
package/be-intl.js
CHANGED
|
@@ -69,17 +69,17 @@ class BeIntl {
|
|
|
69
69
|
self.value = inference.value;
|
|
70
70
|
});
|
|
71
71
|
|
|
72
|
-
// Opt-in: track lang changes.
|
|
72
|
+
// Opt-in: track lang changes on the element itself. Container-`lang`
|
|
73
|
+
// changes after mount aren't observed (rare); `inference.lang` still
|
|
74
|
+
// walks ancestors + shadow hosts on each read.
|
|
73
75
|
if(self.observeLang && enhancedElement instanceof HTMLElement){
|
|
74
76
|
const langObserver = new MutationObserver(() => {
|
|
75
|
-
self.locale =
|
|
77
|
+
self.locale = inference.lang || defaultLocale;
|
|
76
78
|
});
|
|
77
79
|
langObserver.observe(enhancedElement, {attributes: true, attributeFilter: ['lang']});
|
|
78
80
|
}
|
|
79
81
|
|
|
80
|
-
const locale = self.locale
|
|
81
|
-
|| (enhancedElement instanceof HTMLElement ? enhancedElement.lang : '')
|
|
82
|
-
|| defaultLocale;
|
|
82
|
+
const locale = self.locale || inference.lang || defaultLocale;
|
|
83
83
|
return {locale, value: inference.value};
|
|
84
84
|
}
|
|
85
85
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "be-intl",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.50",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"web-components",
|
|
6
6
|
"web-component",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"update": "ncu -u && npm install"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"assign-gingerly": "0.0.
|
|
34
|
+
"assign-gingerly": "0.0.93",
|
|
35
35
|
"be-hive": "0.1.18",
|
|
36
36
|
"inferencer": "0.0.13",
|
|
37
37
|
"mount-observer": "0.1.53",
|