@yiiamee/multilinguist 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Nuxt MultiLinguist module
 
-Multilinguist is simple, but smoothly working module for easy and seamless localization implementation in Nuxt 3. 
+Multilinguist is a simple but smoothly working module for easy and seamless localization implementation for Nuxt applications. 
 
 ## Key Features
 
@@ -35,11 +35,45 @@ Then, create a "locales" directory in /public directory. This is necessary for m
 
 Now, you're ready to use Multilinguist Module!
 
+# Usage
+
 ### t()—famous translate function 
  
 ```vue
 <script setup lang="ts">
-const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translate function
+const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
+  
+const pageTitle = computed(() => {
+  return t("Hello, World");
+});
+</script> 
+
+<template>
+  <h3>{{ pageTitle }}</h3>
+  <button>{{ t("Switch Locale") }}</button>
+</template>
+```
+
+It also supports nested keys and dynamic keys with variables;
+you only need to pass the second argument, an object with used in the key variables: 
+
+```vue
+<template>
+  <span>{{ t("Paste your variable here", { variable: locale }) }}</span>
+</template>
+```
+
+And your JSON must look like that:
+
+```json
+{
+  "Paste your variable here": "Here is your variable: {variable}"
+}
+```
+
+```vue
+<script setup lang="ts">
+const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
   
 const pageTitle = computed(() => {
   return t("Hello, World");
@@ -49,10 +83,14 @@ const pageTitle = computed(() => {
 <template>
   <h3>{{ pageTitle }}</h3>
   <button>{{ t("Switch Locale") }}</button>
+  <br />
+  <span>{{ t("Paste your variable here", { variable: locale }) }}</span>
+  <br />
+  <h1>{{ t("nested.Nested key") }}: <span>{{ t("nested.Language") }}</span></h1>
 </template>
 ```
 
-You can already see how the keys auto-completion works:
+You can already see how keys auto-completion works:
 
 ![autocompletion.png](autocompletion.png)
 
@@ -60,12 +98,12 @@ And validation:
 
 ![validation.png](validation.png)
 
-### Set another value to current locale:
+### Set another value to the current locale:
 
 ```vue
 <script setup lang="ts">
 const { t, setLocale } = useMultilinguist();
-// setLocale function accepts string, that should match one of defined
+// setLocale function accepts a string that should match one of defined
 // in the nuxt.config strings from supportedLanguages array
   
 const pageTitle = computed(() => {

package/dist/module.json

@@ -2,6 +2,9 @@
   "name": "@yiiamee/multilinguist",
   "configKey": "multilinguist",
   "version": "0.0.1",
+  "compatibility": {
+    "nuxt": "^3.14.0"
+  },
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -2,15 +2,24 @@ import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addTypeTemp
 import fs from 'fs';
 import path from 'path';
 
+function flattenKeys(obj, prefix = "") {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === "object" && value !== null) {
+      return flattenKeys(value, fullKey);
+    }
+    return [fullKey];
+  });
+}
 function GenerateLocaleKeysPlugin(defaultLocaleFromConfig, localesPath, outPath) {
   async function generateTypes() {
     const defaultLocalePath = path.join(localesPath, `${defaultLocaleFromConfig}.json`);
     if (!fs.existsSync(defaultLocalePath)) {
-      console?.error(`Default locale file not found: ${defaultLocalePath}`);
+      console?.error(`\u274C Default locale file not found: ${defaultLocalePath}`);
       return;
     }
     const json = JSON.parse(fs.readFileSync(defaultLocalePath, "utf-8"));
-    const keys = Object.keys(json);
+    const keys = flattenKeys(json);
     const output = [
       `// AUTO-GENERATED FILE \u2014 DO NOT EDIT MANUALLY`,
       `export interface TranslationMessages {`,
@@ -21,7 +30,7 @@ function GenerateLocaleKeysPlugin(defaultLocaleFromConfig, localesPath, outPath)
     ].join("\n");
     fs.mkdirSync(path.dirname(outPath), { recursive: true });
     fs.writeFileSync(outPath, output, "utf-8");
-    console?.warn(`Generated types/generated-locales.d.ts from ${defaultLocalePath}`);
+    console?.warn(`\u2705 Generated types to ${outPath} from ${defaultLocalePath}`);
   }
   return {
     name: "vite-plugin-generate-locales-types",
@@ -40,7 +49,10 @@ const module = defineNuxtModule({
   meta: {
     name: "@yiiamee/multilinguist",
     configKey: "multilinguist",
-    version: "0.0.1"
+    version: "0.0.1",
+    compatibility: {
+      nuxt: "^3.14.0"
+    }
   },
   setup(moduleOptions, nuxtApp) {
     const resolver = createResolver(import.meta.url);

package/dist/runtime/composables/useLocalization.d.ts

@@ -4,7 +4,7 @@ export type TranslationMap = readonly string[];
 export type Locale<T extends TranslationMap> = T[number];
 export type LocaleKeys<T extends TranslationMap> = T[keyof T];
 export type TMultilinguistResponse<T extends TranslationMap> = {
-    t: (key: LocaleKey) => string;
+    t: (key: LocaleKey, variables?: Record<string, string>) => string;
     setLocale: (locale: Locale<T>) => void;
     initLocalization: () => Promise<void>;
     locale: Ref<Locale<T>>;

package/dist/runtime/composables/useLocalization.js

@@ -23,9 +23,19 @@ export default function useLocalization(supportedLanguages, defaultLocale) {
   const locale = useState(() => {
     return userPrefferableLocale.value || defaultLocale;
   });
-  const t = (key) => {
-    const localeKeys = loadedLanguages.value[locale.value];
-    return String(localeKeys?.[key] || key);
+  const t = (key, variables) => {
+    const messages = loadedLanguages.value[locale.value];
+    let translatedText = messages?.[key] ?? key;
+    if (key.includes(".")) {
+      const nestedKeyArray = key.split(".");
+      translatedText = nestedKeyArray.reduce((acc, key2) => acc?.[key2], messages);
+    }
+    if (variables && typeof translatedText === "string") {
+      translatedText = translatedText.replace(/{([^}]+)}/g, (_, varKey) => {
+        return variables[varKey] ?? `{${varKey}}`;
+      });
+    }
+    return String(translatedText);
   };
   const setLocale = async (newLocale) => {
     if (!loadedLanguages.value[newLocale] && supportedLanguages.includes(newLocale)) {

package/dist/runtime/composables/useMultilinguist.d.ts

@@ -1,5 +1,5 @@
 export default function useMultilinguist(): {
-    t: (key: import("../types/generated-locales.js").LocaleKey) => string;
+    t: (key: import("../types/generated-locales.js").LocaleKey, variables?: Record<string, string>) => string;
     setLocale: (locale: string) => void;
     initLocalization: () => Promise<void>;
     locale: import("vue").Ref<string, string>;

package/dist/runtime/plugin.js

@@ -7,10 +7,10 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   };
   const supportedLanguages = config.supportedLanguages;
   const defaultLocale = config.defaultLocale;
-  const localization = useLocalization(supportedLanguages, defaultLocale);
-  await localization.initLocalization();
-  console.log("[multilinguist] is initialised", config.supportedLanguages, config.defaultLocale);
-  nuxtApp.provide("localization", localization);
-  nuxtApp.provide("t", localization.t);
-  nuxtApp._localization = localization;
+  const { initLocalization, ...localizationProperties } = useLocalization(supportedLanguages, defaultLocale);
+  await initLocalization();
+  console.log("[multilinguist] is initialised");
+  nuxtApp.provide("localization", localizationProperties);
+  nuxtApp.provide("t", localizationProperties.t);
+  nuxtApp._localization = localizationProperties;
 });

package/dist/runtime/types/generated-locales.d.ts

@@ -2,6 +2,10 @@
 export interface TranslationMessages {
   "Hello, World": string;
   "Switch Locale": string;
+  "Paste your variable here": string;
+  "nested.Nested key": string;
+  "nested.Language": string;
+  "nested.nested second level.nested second level language": string;
 }
 
 export type LocaleKey = keyof TranslationMessages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yiiamee/multilinguist",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Nuxt 3 Multilinguist Localization module",
   "repository": "yiiameeMich/multilinguist",
   "license": "MIT",
@@ -16,6 +16,10 @@
   "files": [
     "dist"
   ],
+  "keywords": ["localization", "nuxt localization", "nuxt", "internationalization", "languages", "locales", "translation"],
+  "bugs": {
+    "email": "michaelkukh.dev@gmail.com"
+  },
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground",