@kong-ui-public/i18n 0.3.4 → 0.3.5-pr.231.5cbb2de.0

package/README.md

@@ -1,6 +1,9 @@
 # @kong-ui-public/i18n
 
 - [Purpose](#purpose)
+- [TypeScript Support](#typescript-support)
+  - [Global Registration](#global-registration)
+  - [Vue Plugin](#vue-plugin)
 - [Use in application](#use-in-application)
 - [Use in shared component](#use-in-shared-component)
 - [Formatting messages](#formatting-messages)
@@ -19,6 +22,52 @@ This is a wrapper around [FormatJS](https://formatjs.io/docs/intl) that allows c
 - format numbers
 - format dates
 
+## TypeScript Support
+
+In order to provide full autocompletion for the translation keys, you need to pass the type of the `messages` object to the various init functions, as shown here:
+
+> **Note**: type checking and autocompletion are still a work-in-progress when utilizing the `i18n-t` component.
+>
+
+### Global Registration
+
+```ts
+// main.ts
+import { createI18n, Translation } from '@kong-ui-public/i18n'
+import english from './locales/en.json'
+
+const i18n = createI18n<typeof english>('en-us', english, true)
+app.use(Translation, { i18n })
+
+// composables/index.ts
+import { useI18n as useI18nComposable } from '@kong-ui-public/i18n'
+import english from './locales/en.json'
+
+
+const useI18n = useI18nComposable<typeof english>
+
+export default {
+  useI18n,
+}
+
+// Component.vue
+import composables from './composables'
+const i18n = composables.useI18n()
+```
+
+### Vue Plugin
+
+```ts
+import { Translation, createI18n } from '@kong-ui-public/i18n'
+import english from './locales/en.json'
+
+const i18n = createI18n<typeof english>('en-us', english, true)
+const app = createApp(App)
+app.use(Translation, { i18n })
+
+app.mount('#app')
+```
+
 ## Use in application
 
 When used in application we only need to instantiate `Intl` object once, during application hydration, and then we can use it anywhere in the app via `useI18n` composable.
@@ -32,7 +81,7 @@ import english from './locales/en.json'
 ...
 
 // this will create Application instance of Intl object
-createI18n('en-us', english, true)
+createI18n<typeof english>('en-us', english, true)
 ```
 
 And then, anywhere in application code where `i18n` is needed:
@@ -48,7 +97,6 @@ const i18n = useI18n()
 </script>
 ```
 
-
 ## Use in shared component
 
 When used in [shared component](https://github.com/Kong/shared-ui-components/pull/118/files#diff-f296a0775f650cac9ecd4b5d7ccef015ca73587be833b40eeae1e396426b0f4fR45) (outside of application code),  we need `Intl` that is local to that component, so that it is using component's own localization strings:
@@ -66,7 +114,7 @@ import english from '../locales/en.json'
 
 // this will instantiate `Intl` local to this component, using component's english messages.
 // TODO: load and pass messages based on language passed from consuming application
-const i18n = createI18n(props.locale || 'en-us', english)
+const i18n = createI18n<typeof english>(props.locale || 'en-us', english)
 </script>
 ```
 
@@ -185,7 +233,7 @@ import english from './locales/en.json'
 ...
 
 //this will create Application instance of Intl object
-const i18n = createI18n('en-us', english, true)
+const i18n = createI18n<typeof english>('en-us', english, true)
 // this will register <i18n-t> component
 app.use(Translation, { i18n })
 ```
@@ -249,7 +297,6 @@ And then, anywhere in application code where `i18n` is needed
 
 In some cases we do not have access to the Vue `app` and cannot relay on registered i18nT plugin. Working on standalone components in `public-ui-components` is of those cases. And for this your component will look like:
 
-
 ```html
 <template>
   <i18n-t
@@ -263,8 +310,8 @@ In some cases we do not have access to the Vue `app` and cannot relay on registe
   import { createI18n, i18nTComponent } from '@kong-ui-public/i18n'
   import english from './locales/en.json'
 
-  const i18n = createI18n('en-us', english)
-  const i18nT = i18nTComponent(i18n)
+  const i18n = createI18n<typeof english>('en-us', english)
+  const i18nT = i18nTComponent<typeof english>(i18n)
 
 </script>
 ```
@@ -289,10 +336,10 @@ Or in old `defineComponent` way
   import english from './locales/en.json'
 
   export default defineComponent({
-    components: { i18nT: i18nTComponent() },
+    components: { i18nT: i18nTComponent<typeof english>() },
     setup() {
       return {
-        i18n: createI18n('en-us', english)
+        i18n: createI18n<typeof english>('en-us', english)
       }
     }
   })

package/dist/i18n.es.js

@@ -41,10 +41,10 @@ function O(e, t, n) {
       (a || !(r in t)) && (a || (a = Array.prototype.slice.call(t, 0, r)), a[r] = t[r]);
   return e.concat(a || Array.prototype.slice.call(t));
 }
-var g;
+var p;
 (function(e) {
   e[e.EXPECT_ARGUMENT_CLOSING_BRACE = 1] = "EXPECT_ARGUMENT_CLOSING_BRACE", e[e.EMPTY_ARGUMENT = 2] = "EMPTY_ARGUMENT", e[e.MALFORMED_ARGUMENT = 3] = "MALFORMED_ARGUMENT", e[e.EXPECT_ARGUMENT_TYPE = 4] = "EXPECT_ARGUMENT_TYPE", e[e.INVALID_ARGUMENT_TYPE = 5] = "INVALID_ARGUMENT_TYPE", e[e.EXPECT_ARGUMENT_STYLE = 6] = "EXPECT_ARGUMENT_STYLE", e[e.INVALID_NUMBER_SKELETON = 7] = "INVALID_NUMBER_SKELETON", e[e.INVALID_DATE_TIME_SKELETON = 8] = "INVALID_DATE_TIME_SKELETON", e[e.EXPECT_NUMBER_SKELETON = 9] = "EXPECT_NUMBER_SKELETON", e[e.EXPECT_DATE_TIME_SKELETON = 10] = "EXPECT_DATE_TIME_SKELETON", e[e.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE = 11] = "UNCLOSED_QUOTE_IN_ARGUMENT_STYLE", e[e.EXPECT_SELECT_ARGUMENT_OPTIONS = 12] = "EXPECT_SELECT_ARGUMENT_OPTIONS", e[e.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE = 13] = "EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE", e[e.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE = 14] = "INVALID_PLURAL_ARGUMENT_OFFSET_VALUE", e[e.EXPECT_SELECT_ARGUMENT_SELECTOR = 15] = "EXPECT_SELECT_ARGUMENT_SELECTOR", e[e.EXPECT_PLURAL_ARGUMENT_SELECTOR = 16] = "EXPECT_PLURAL_ARGUMENT_SELECTOR", e[e.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT = 17] = "EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT", e[e.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT = 18] = "EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT", e[e.INVALID_PLURAL_ARGUMENT_SELECTOR = 19] = "INVALID_PLURAL_ARGUMENT_SELECTOR", e[e.DUPLICATE_PLURAL_ARGUMENT_SELECTOR = 20] = "DUPLICATE_PLURAL_ARGUMENT_SELECTOR", e[e.DUPLICATE_SELECT_ARGUMENT_SELECTOR = 21] = "DUPLICATE_SELECT_ARGUMENT_SELECTOR", e[e.MISSING_OTHER_CLAUSE = 22] = "MISSING_OTHER_CLAUSE", e[e.INVALID_TAG = 23] = "INVALID_TAG", e[e.INVALID_TAG_NAME = 25] = "INVALID_TAG_NAME", e[e.UNMATCHED_CLOSING_TAG = 26] = "UNMATCHED_CLOSING_TAG", e[e.UNCLOSED_TAG = 27] = "UNCLOSED_TAG";
-})(g || (g = {}));
+})(p || (p = {}));
 var d;
 (function(e) {
   e[e.literal = 0] = "literal", e[e.argument = 1] = "argument", e[e.number = 2] = "number", e[e.date = 3] = "date", e[e.time = 4] = "time", e[e.select = 5] = "select", e[e.plural = 6] = "plural", e[e.pound = 7] = "pound", e[e.tag = 8] = "tag";
@@ -330,13 +330,13 @@ function tt(e) {
       case "integer-width":
         if (i.options.length > 1)
           throw new RangeError("integer-width stems only accept a single optional option");
-        i.options[0].replace(Ke, function(h, l, u, f, c, p) {
+        i.options[0].replace(Ke, function(h, l, u, f, c, g) {
           if (l)
             t.minimumIntegerDigits = u.length;
           else {
             if (f && c)
               throw new Error("We currently do not support maximum integer digits");
-            if (p)
+            if (g)
               throw new Error("We currently do not support exact integer digits");
           }
           return "";
@@ -350,8 +350,8 @@ function tt(e) {
     if (oe.test(i.stem)) {
       if (i.options.length > 1)
         throw new RangeError("Fraction-precision stems only accept a single optional option");
-      i.stem.replace(oe, function(h, l, u, f, c, p) {
-        return u === "*" ? t.minimumFractionDigits = l.length : f && f[0] === "#" ? t.maximumFractionDigits = f.length : c && p ? (t.minimumFractionDigits = c.length, t.maximumFractionDigits = c.length + p.length) : (t.minimumFractionDigits = l.length, t.maximumFractionDigits = l.length), "";
+      i.stem.replace(oe, function(h, l, u, f, c, g) {
+        return u === "*" ? t.minimumFractionDigits = l.length : f && f[0] === "#" ? t.maximumFractionDigits = f.length : c && g ? (t.minimumFractionDigits = c.length, t.maximumFractionDigits = c.length + g.length) : (t.minimumFractionDigits = l.length, t.maximumFractionDigits = l.length), "";
       });
       var a = i.options[0];
       a === "w" ? t = m(m({}, t), { trailingZeroDisplay: "stripIfInteger" }) : a && (t = m(m({}, t), se(a)));
@@ -1877,7 +1877,7 @@ var bt = (
           } else if (a === 60 && !this.ignoreTag && this.peek() === 47) {
             if (r)
               break;
-            return this.error(g.UNMATCHED_CLOSING_TAG, v(this.clonePosition(), this.clonePosition()));
+            return this.error(p.UNMATCHED_CLOSING_TAG, v(this.clonePosition(), this.clonePosition()));
           } else if (a === 60 && !this.ignoreTag && $(this.peek() || 0)) {
             var o = this.parseTag(t, n);
             if (o.err)
@@ -1912,9 +1912,9 @@ var bt = (
         var o = a.val, s = this.clonePosition();
         if (this.bumpIf("</")) {
           if (this.isEOF() || !$(this.char()))
-            return this.error(g.INVALID_TAG, v(s, this.clonePosition()));
+            return this.error(p.INVALID_TAG, v(s, this.clonePosition()));
           var h = this.clonePosition(), l = this.parseTagName();
-          return i !== l ? this.error(g.UNMATCHED_CLOSING_TAG, v(h, this.clonePosition())) : (this.bumpSpace(), this.bumpIf(">") ? {
+          return i !== l ? this.error(p.UNMATCHED_CLOSING_TAG, v(h, this.clonePosition())) : (this.bumpSpace(), this.bumpIf(">") ? {
             val: {
               type: d.tag,
               value: i,
@@ -1922,11 +1922,11 @@ var bt = (
               location: v(r, this.clonePosition())
             },
             err: null
-          } : this.error(g.INVALID_TAG, v(s, this.clonePosition())));
+          } : this.error(p.INVALID_TAG, v(s, this.clonePosition())));
         } else
-          return this.error(g.UNCLOSED_TAG, v(r, this.clonePosition()));
+          return this.error(p.UNCLOSED_TAG, v(r, this.clonePosition()));
       } else
-        return this.error(g.INVALID_TAG, v(r, this.clonePosition()));
+        return this.error(p.INVALID_TAG, v(r, this.clonePosition()));
     }, e.prototype.parseTagName = function() {
       var t = this.offset();
       for (this.bump(); !this.isEOF() && dt(this.char()); )
@@ -2001,14 +2001,14 @@ var bt = (
     }, e.prototype.parseArgument = function(t, n) {
       var r = this.clonePosition();
       if (this.bump(), this.bumpSpace(), this.isEOF())
-        return this.error(g.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition()));
+        return this.error(p.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition()));
       if (this.char() === 125)
-        return this.bump(), this.error(g.EMPTY_ARGUMENT, v(r, this.clonePosition()));
+        return this.bump(), this.error(p.EMPTY_ARGUMENT, v(r, this.clonePosition()));
       var i = this.parseIdentifierIfPossible().value;
       if (!i)
-        return this.error(g.MALFORMED_ARGUMENT, v(r, this.clonePosition()));
+        return this.error(p.MALFORMED_ARGUMENT, v(r, this.clonePosition()));
       if (this.bumpSpace(), this.isEOF())
-        return this.error(g.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition()));
+        return this.error(p.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition()));
       switch (this.char()) {
         case 125:
           return this.bump(), {
@@ -2021,9 +2021,9 @@ var bt = (
             err: null
           };
         case 44:
-          return this.bump(), this.bumpSpace(), this.isEOF() ? this.error(g.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition())) : this.parseArgumentOptions(t, n, i, r);
+          return this.bump(), this.bumpSpace(), this.isEOF() ? this.error(p.EXPECT_ARGUMENT_CLOSING_BRACE, v(r, this.clonePosition())) : this.parseArgumentOptions(t, n, i, r);
         default:
-          return this.error(g.MALFORMED_ARGUMENT, v(r, this.clonePosition()));
+          return this.error(p.MALFORMED_ARGUMENT, v(r, this.clonePosition()));
       }
     }, e.prototype.parseIdentifierIfPossible = function() {
       var t = this.clonePosition(), n = this.offset(), r = Y(this.message, n), i = n + r.length;
@@ -2034,7 +2034,7 @@ var bt = (
       var a, o = this.clonePosition(), s = this.parseIdentifierIfPossible().value, h = this.clonePosition();
       switch (s) {
         case "":
-          return this.error(g.EXPECT_ARGUMENT_TYPE, v(o, h));
+          return this.error(p.EXPECT_ARGUMENT_TYPE, v(o, h));
         case "number":
         case "date":
         case "time": {
@@ -2047,9 +2047,9 @@ var bt = (
               return f;
             var c = vt(f.val);
             if (c.length === 0)
-              return this.error(g.EXPECT_ARGUMENT_STYLE, v(this.clonePosition(), this.clonePosition()));
-            var p = v(u, this.clonePosition());
-            l = { style: c, styleLocation: p };
+              return this.error(p.EXPECT_ARGUMENT_STYLE, v(this.clonePosition(), this.clonePosition()));
+            var g = v(u, this.clonePosition());
+            l = { style: c, styleLocation: g };
           }
           var b = this.tryParseArgumentClose(i);
           if (b.err)
@@ -2065,7 +2065,7 @@ var bt = (
               };
             } else {
               if (y.length === 0)
-                return this.error(g.EXPECT_DATE_TIME_SKELETON, E);
+                return this.error(p.EXPECT_DATE_TIME_SKELETON, E);
               var x = y;
               this.locale && (x = rt(y, this.locale));
               var c = {
@@ -2095,14 +2095,14 @@ var bt = (
         case "select": {
           var T = this.clonePosition();
           if (this.bumpSpace(), !this.bumpIf(","))
-            return this.error(g.EXPECT_SELECT_ARGUMENT_OPTIONS, v(T, m({}, T)));
+            return this.error(p.EXPECT_SELECT_ARGUMENT_OPTIONS, v(T, m({}, T)));
           this.bumpSpace();
           var D = this.parseIdentifierIfPossible(), L = 0;
           if (s !== "select" && D.value === "offset") {
             if (!this.bumpIf(":"))
-              return this.error(g.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, v(this.clonePosition(), this.clonePosition()));
+              return this.error(p.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, v(this.clonePosition(), this.clonePosition()));
             this.bumpSpace();
-            var f = this.tryParseDecimalInteger(g.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, g.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);
+            var f = this.tryParseDecimalInteger(p.EXPECT_PLURAL_ARGUMENT_OFFSET_VALUE, p.INVALID_PLURAL_ARGUMENT_OFFSET_VALUE);
             if (f.err)
               return f;
             this.bumpSpace(), D = this.parseIdentifierIfPossible(), L = f.val;
@@ -2135,10 +2135,10 @@ var bt = (
           };
         }
         default:
-          return this.error(g.INVALID_ARGUMENT_TYPE, v(o, h));
+          return this.error(p.INVALID_ARGUMENT_TYPE, v(o, h));
       }
     }, e.prototype.tryParseArgumentClose = function(t) {
-      return this.isEOF() || this.char() !== 125 ? this.error(g.EXPECT_ARGUMENT_CLOSING_BRACE, v(t, this.clonePosition())) : (this.bump(), { val: !0, err: null });
+      return this.isEOF() || this.char() !== 125 ? this.error(p.EXPECT_ARGUMENT_CLOSING_BRACE, v(t, this.clonePosition())) : (this.bump(), { val: !0, err: null });
     }, e.prototype.parseSimpleArgStyleIfPossible = function() {
       for (var t = 0, n = this.clonePosition(); !this.isEOF(); ) {
         var r = this.char();
@@ -2147,7 +2147,7 @@ var bt = (
             this.bump();
             var i = this.clonePosition();
             if (!this.bumpUntil("'"))
-              return this.error(g.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE, v(i, this.clonePosition()));
+              return this.error(p.UNCLOSED_QUOTE_IN_ARGUMENT_STYLE, v(i, this.clonePosition()));
             this.bump();
             break;
           }
@@ -2179,7 +2179,7 @@ var bt = (
       try {
         r = Ye(t);
       } catch {
-        return this.error(g.INVALID_NUMBER_SKELETON, n);
+        return this.error(p.INVALID_NUMBER_SKELETON, n);
       }
       return {
         val: {
@@ -2195,7 +2195,7 @@ var bt = (
         if (l.length === 0) {
           var f = this.clonePosition();
           if (n !== "select" && this.bumpIf("=")) {
-            var c = this.tryParseDecimalInteger(g.EXPECT_PLURAL_ARGUMENT_SELECTOR, g.INVALID_PLURAL_ARGUMENT_SELECTOR);
+            var c = this.tryParseDecimalInteger(p.EXPECT_PLURAL_ARGUMENT_SELECTOR, p.INVALID_PLURAL_ARGUMENT_SELECTOR);
             if (c.err)
               return c;
             u = v(f, this.clonePosition()), l = this.message.slice(f.offset, this.offset());
@@ -2203,26 +2203,26 @@ var bt = (
             break;
         }
         if (h.has(l))
-          return this.error(n === "select" ? g.DUPLICATE_SELECT_ARGUMENT_SELECTOR : g.DUPLICATE_PLURAL_ARGUMENT_SELECTOR, u);
+          return this.error(n === "select" ? p.DUPLICATE_SELECT_ARGUMENT_SELECTOR : p.DUPLICATE_PLURAL_ARGUMENT_SELECTOR, u);
         l === "other" && (o = !0), this.bumpSpace();
-        var p = this.clonePosition();
+        var g = this.clonePosition();
         if (!this.bumpIf("{"))
-          return this.error(n === "select" ? g.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT : g.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT, v(this.clonePosition(), this.clonePosition()));
+          return this.error(n === "select" ? p.EXPECT_SELECT_ARGUMENT_SELECTOR_FRAGMENT : p.EXPECT_PLURAL_ARGUMENT_SELECTOR_FRAGMENT, v(this.clonePosition(), this.clonePosition()));
         var b = this.parseMessage(t + 1, n, r);
         if (b.err)
           return b;
-        var E = this.tryParseArgumentClose(p);
+        var E = this.tryParseArgumentClose(g);
         if (E.err)
           return E;
         s.push([
           l,
           {
             value: b.val,
-            location: v(p, this.clonePosition())
+            location: v(g, this.clonePosition())
           }
         ]), h.add(l), this.bumpSpace(), a = this.parseIdentifierIfPossible(), l = a.value, u = a.location;
       }
-      return s.length === 0 ? this.error(n === "select" ? g.EXPECT_SELECT_ARGUMENT_SELECTOR : g.EXPECT_PLURAL_ARGUMENT_SELECTOR, v(this.clonePosition(), this.clonePosition())) : this.requiresOtherClause && !o ? this.error(g.MISSING_OTHER_CLAUSE, v(this.clonePosition(), this.clonePosition())) : { val: s, err: null };
+      return s.length === 0 ? this.error(n === "select" ? p.EXPECT_SELECT_ARGUMENT_SELECTOR : p.EXPECT_PLURAL_ARGUMENT_SELECTOR, v(this.clonePosition(), this.clonePosition())) : this.requiresOtherClause && !o ? this.error(p.MISSING_OTHER_CLAUSE, v(this.clonePosition(), this.clonePosition())) : { val: s, err: null };
     }, e.prototype.tryParseDecimalInteger = function(t, n) {
       var r = 1, i = this.clonePosition();
       this.bumpIf("+") || this.bumpIf("-") && (r = -1);
@@ -2328,7 +2328,7 @@ function xt(e, t) {
   t === void 0 && (t = {}), t = m({ shouldParseSkeletons: !0, requiresOtherClause: !0 }, t);
   var n = new bt(e, t).parse();
   if (n.err) {
-    var r = SyntaxError(g[n.err.kind]);
+    var r = SyntaxError(p[n.err.kind]);
     throw r.location = n.err.location, r.originalMessage = n.err.message, r;
   }
   return t != null && t.captureLocation || K(n.val), n.val;
@@ -2475,26 +2475,26 @@ function V(e, t, n, r, i, a, o) {
       continue;
     }
     if (de(u)) {
-      var p = typeof u.style == "string" ? r.date[u.style] : q(u.style) ? u.style.parsedOptions : void 0;
+      var g = typeof u.style == "string" ? r.date[u.style] : q(u.style) ? u.style.parsedOptions : void 0;
       s.push({
         type: I.literal,
-        value: n.getDateTimeFormat(t, p).format(c)
+        value: n.getDateTimeFormat(t, g).format(c)
       });
       continue;
     }
     if (ye(u)) {
-      var p = typeof u.style == "string" ? r.time[u.style] : q(u.style) ? u.style.parsedOptions : r.time.medium;
+      var g = typeof u.style == "string" ? r.time[u.style] : q(u.style) ? u.style.parsedOptions : r.time.medium;
       s.push({
         type: I.literal,
-        value: n.getDateTimeFormat(t, p).format(c)
+        value: n.getDateTimeFormat(t, g).format(c)
       });
       continue;
     }
     if (Ee(u)) {
-      var p = typeof u.style == "string" ? r.number[u.style] : Ie(u.style) ? u.style.parsedOptions : void 0;
-      p && p.scale && (c = c * (p.scale || 1)), s.push({
+      var g = typeof u.style == "string" ? r.number[u.style] : Ie(u.style) ? u.style.parsedOptions : void 0;
+      g && g.scale && (c = c * (g.scale || 1)), s.push({
         type: I.literal,
-        value: n.getNumberFormat(t, p).format(c)
+        value: n.getNumberFormat(t, g).format(c)
       });
       continue;
     }
@@ -2923,7 +2923,7 @@ function pe(e, t) {
   return m(m(m({}, n), e), { date: ge(j(n.date, t), j(e.date || {}, t)), time: ge(j(n.time, t), j(e.time || {}, t)) });
 }
 var ve = function(e, t, n, r, i) {
-  var a = e.locale, o = e.formats, s = e.messages, h = e.defaultLocale, l = e.defaultFormats, u = e.fallbackOnEmptyString, f = e.onError, c = e.timeZone, p = e.defaultRichTextElements;
+  var a = e.locale, o = e.formats, s = e.messages, h = e.defaultLocale, l = e.defaultFormats, u = e.fallbackOnEmptyString, f = e.onError, c = e.timeZone, g = e.defaultRichTextElements;
   n === void 0 && (n = { id: "" });
   var b = n.id, E = n.defaultMessage;
   Vt(!!b, "[@formatjs/intl] An `id` must be provided to format a message. You can either:\n1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)\nor [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR\n2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)\nto autofix this issue");
@@ -2935,9 +2935,9 @@ var ve = function(e, t, n, r, i) {
   );
   if (Array.isArray(x) && x.length === 1 && x[0].type === d.literal)
     return x[0].value;
-  if (!r && x && typeof x == "string" && !p)
+  if (!r && x && typeof x == "string" && !g)
     return x.replace(/'\{(.*?)\}'/gi, "{$1}");
-  if (r = m(m({}, p), r || {}), o = pe(o, c), l = pe(l, c), !x) {
+  if (r = m(m({}, g), r || {}), o = pe(o, c), l = pe(l, c), !x) {
     if (u === !1 && x === "")
       return x;
     if ((!E || a && a.toLowerCase() !== h.toLowerCase()) && f(new Dt(n, a)), E)
@@ -3227,7 +3227,7 @@ function F(e, t) {
   const n = t.delimiter || ".", r = t.maxDepth, i = t.transformKey || Ue, a = {};
   function o(s, h, l) {
     l = l || 1, Object.keys(s).forEach(function(u) {
-      const f = s[u], c = t.safe && Array.isArray(f), p = Object.prototype.toString.call(f), b = Ge(f), E = p === "[object Object]" || p === "[object Array]", y = h ? h + n + i(u) : i(u);
+      const f = s[u], c = t.safe && Array.isArray(f), g = Object.prototype.toString.call(f), b = Ge(f), E = g === "[object Object]" || g === "[object Array]", y = h ? h + n + i(u) : i(u);
       if (!c && !b && E && Object.keys(f).length && (!t.maxDepth || l < r))
         return o(f, y, l + 1);
       a[y] = f;
@@ -3245,16 +3245,16 @@ function je(e, t) {
     return isNaN(f) || u.indexOf(".") !== -1 || t.object ? u : f;
   }
   function h(u, f, c) {
-    return Object.keys(c).reduce(function(p, b) {
-      return p[u + n + b] = c[b], p;
+    return Object.keys(c).reduce(function(g, b) {
+      return g[u + n + b] = c[b], g;
     }, f);
   }
   function l(u) {
-    const f = Object.prototype.toString.call(u), c = f === "[object Array]", p = f === "[object Object]";
+    const f = Object.prototype.toString.call(u), c = f === "[object Array]", g = f === "[object Object]";
     if (u) {
       if (c)
         return !u.length;
-      if (p)
+      if (g)
         return !Object.keys(u).length;
     } else
       return !0;
@@ -3268,14 +3268,14 @@ function je(e, t) {
     );
   }, {}), Object.keys(e).forEach(function(u) {
     const f = u.split(n).map(i);
-    let c = s(f.shift()), p = s(f[0]), b = a;
-    for (; p !== void 0; ) {
+    let c = s(f.shift()), g = s(f[0]), b = a;
+    for (; g !== void 0; ) {
       if (c === "__proto__")
         return;
       const E = Object.prototype.toString.call(b[c]), y = E === "[object Object]" || E === "[object Array]";
       if (!r && !y && typeof b[c] < "u")
         return;
-      (r && !y || !r && b[c] == null) && (b[c] = typeof p == "number" && !t.object ? [] : {}), b = b[c], f.length > 0 && (c = s(f.shift()), p = s(f[0]));
+      (r && !y || !r && b[c] == null) && (b[c] = typeof g == "number" && !t.object ? [] : {}), b = b[c], f.length > 0 && (c = s(f.shift()), g = s(f[0]));
     }
     b[c] = je(e[u], t);
   }), a;
@@ -3292,14 +3292,14 @@ const gr = (e, t, n = !1) => {
       })
     },
     fr
-  ), s = {
-    t: (h, l, u) => r.formatMessage({ id: h }, l, u),
-    te: (h) => !!r.messages[h],
-    tm: (h) => r.messages[h] || [],
-    ...r,
+  ), { $t: i, ...a } = r, o = a, u = {
+    t: (f, c, g) => o.formatMessage({ id: f }, c, g),
+    te: (f) => !!o.messages[f],
+    tm: (f) => o.messages[f] || [],
+    ...o,
     source: t
   };
-  return n && (Ve = s), s;
+  return n && (Ve = u), u;
 };
 function pr() {
   return Ve;
@@ -3313,6 +3313,7 @@ const cr = (e = null) => ke({
     },
     keypath: {
       type: String,
+      // type: String as unknown as PropType<PathToDotNotation<MessageSource, string>>, // This breaks the type interface, enable to debug
       required: !0
     },
     tag: {