@kong-ui-public/i18n 0.3.5-pr.231.276ad83.0 → 0.3.5-pr.231.61cbd08.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,17 +97,6 @@ const i18n = useI18n()
 </script>
 ```
 
-If you want translation key suggestions on the global instance, update your import as shown here, passing the JSON file type to the function:
-
-```html
-<script setup lang="ts">
-import { useI18n } from '@kong-ui-public/i18n'
-import english from './locales/en.json'
-
-const i18n = useI18n<typeof english>()
-</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:
@@ -76,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>
 ```
 
@@ -195,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 })
 ```
@@ -259,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
@@ -273,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>
 ```
@@ -299,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

@@ -3304,7 +3304,7 @@ const gr = (e, t, n = !1) => {
 function pr() {
   return Ve;
 }
-const cr = (e) => ke({
+const cr = (e = null) => ke({
   name: "I18nT",
   props: {
     i18n: {
@@ -3313,6 +3313,7 @@ const cr = (e) => ke({
     },
     keypath: {
       type: String,
+      // type: String as unknown as PropType<PathToDotNotation<MessageSource, string>>, // This breaks the type interface, enable to debug
       required: !0
     },
     tag: {