@shoelace-style/localize 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 3.0.2
+
+- Fixed a parsing bug in extended language codes [#16](https://github.com/shoelace-style/localize/issues/16)
+- Updated TypeScript to 4.8.4
+
+## 3.0.1
+
+- Fixed module paths in `package.json`
+
 ## 3.0.0
 
 - 🚨BREAKING: Removed top level `term()`, `date()`, `number()`, and `relativeTime()` functions

package/README.md

@@ -176,7 +176,8 @@ import { LocalizeController } from '@shoelace-style/localize/dist/lit.js';
 export class MyElement extends LitElement {
   private localize = new LocalizeController(this);
 
-  // Make sure to define `lang` so the component will respond to changes to its own lang attribute
+  // Make sure to make `dir` and `lang` reactive so the component will respond to changes to its own attributes
+  @property() dir: string;
   @property() lang: string;
 
   render() {

package/dist/index.js

@@ -50,10 +50,12 @@ export class LocalizeController {
         return `${this.host.lang || documentLanguage}`.toLowerCase();
     }
     term(key, ...args) {
-        const code = this.lang().toLowerCase().slice(0, 2);
-        const regionCode = this.lang().length > 2 ? this.lang().toLowerCase() : '';
-        const primary = translations.get(regionCode);
-        const secondary = translations.get(code);
+        var _a, _b;
+        const locale = new Intl.Locale(this.lang());
+        const language = locale === null || locale === void 0 ? void 0 : locale.language.toLowerCase();
+        const region = (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.region) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+        const primary = translations.get(region);
+        const secondary = translations.get(language);
         let term;
         if (primary && primary[key]) {
             term = primary[key];

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@shoelace-style/localize",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A micro library for localizing custom elements using Lit's Reactive Controller model.",
-  "main": "/dist/index.js",
-  "module": "/dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -35,6 +35,6 @@
   "devDependencies": {
     "del": "^6.0.0",
     "lit": "^2.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "4.8.4"
   }
 }

package/src/index.ts

@@ -116,10 +116,11 @@ export class LocalizeController<UserTranslation extends Translation = DefaultTra
   }
 
   term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>) {
-    const code = this.lang().toLowerCase().slice(0, 2); // e.g. en
-    const regionCode = this.lang().length > 2 ? this.lang().toLowerCase() : ''; // e.g. en-gb
-    const primary = <UserTranslation>translations.get(regionCode);
-    const secondary = <UserTranslation>translations.get(code);
+    const locale = new Intl.Locale(this.lang());
+    const language = locale?.language.toLowerCase();
+    const region = locale?.region?.toLowerCase() ?? '';
+    const primary = <UserTranslation>translations.get(region);
+    const secondary = <UserTranslation>translations.get(language);
     let term: any;
 
     // Look for a matching term using regionCode, code, then the fallback