@yiiamee/multilinguist 1.2.7 → 1.3.0

package/README.md

@@ -1,6 +1,7 @@
-# Nuxt MultiLinguist module
+# Nuxt Multilinguist module
 
-Multilinguist is a simple but smoothly working module for easy and seamless localization implementation for Nuxt applications. 
+Multilinguist is a simple but smoothly working module for easy and seamless localization implementation for Nuxt
+applications.
 
 ## Key Features
 
@@ -20,7 +21,7 @@ Then, add the module to your nuxt.config
 ```nuxt.config.ts
 export default defineNuxtConfig({
     modules: [
-        @yiiamee/multilinguist,
+        "@yiiamee/multilinguist",
     ],
     multilinguist: {
         defaultLocale: "en", // string representing key to your default (fallback) locale
@@ -35,18 +36,47 @@ Then, create a "locales" directory in /public directory. This is necessary for m
 
 Now, you're ready to use Multilinguist Module!
 
+After running your project, you can see the following warning:
+
+![vite-warning.png](vite-warning.png)
+
+**Dont be scared**, this is just a message from the module, indicating that your locales are typed, and that the module
+can properly perform type-checks and autocompletion.
+
+Also, on both SSR and CSR, you will see the following message:
+
+![initialized.png](initialized.png)
+
+It indicated that the module has been initialized successfully.
+
+To disable logs, you can set the logging option in your nuxt.config to false (by default, it is true):
+
+```nuxt.config.ts
+export default defineNuxtConfig({
+    modules: [
+        "@yiiamee/multilinguist",
+    ],
+    multilinguist: {
+        defaultLocale: "en",
+        supportedLanguages: ["en", "es"],
+        logging: false, // Boolean value to define if the module should send internal logs to console
+    },
+})
+```
+
 # Usage
 
-### t()—famous translate function 
- 
+### t()—famous translate function
+
 ```vue
+
 <script setup lang="ts">
-const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
-  
-const pageTitle = computed(() => {
-  return t("Hello, World");
-});
-</script> 
+  const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
+
+  const pageTitle = computed(() => {
+    return t("Hello, World");
+  });
+</script>
 
 <template>
   <h3>{{ pageTitle }}</h3>
@@ -55,9 +85,10 @@ const pageTitle = computed(() => {
 ```
 
 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: 
+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>
@@ -72,13 +103,14 @@ And your JSON must look like that:
 ```
 
 ```vue
+
 <script setup lang="ts">
-const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
-  
-const pageTitle = computed(() => {
-  return t("Hello, World");
-});
-</script> 
+  const { t } = useMultilinguist(); // Call useMultilinguist composable to get the translation function
+
+  const pageTitle = computed(() => {
+    return t("Hello, World");
+  });
+</script>
 
 <template>
   <h3>{{ pageTitle }}</h3>
@@ -101,15 +133,16 @@ And validation:
 ### Set another value to the current locale:
 
 ```vue
+
 <script setup lang="ts">
-const { t, setLocale } = useMultilinguist();
-// setLocale function accepts a string that should match one of defined
-// in the nuxt.config strings from supportedLanguages array
-  
-const pageTitle = computed(() => {
-  return t("Hello, World");
-});
-</script> 
+  const { t, setLocale } = useMultilinguist();
+  // setLocale function accepts a string that should match one of defined
+  // in the nuxt.config strings from supportedLanguages array
+
+  const pageTitle = computed(() => {
+    return t("Hello, World");
+  });
+</script>
 
 <template>
   <h3>{{ pageTitle }}</h3>
@@ -120,13 +153,14 @@ const pageTitle = computed(() => {
 ### Get current locale
 
 ```vue
+
 <script setup lang="ts">
-const { t, setLocale, locale } = useMultilinguist();
-// locale is SSR friendly, shared among the app ref state  
+  const { t, setLocale, locale } = useMultilinguist();
+  // locale is SSR friendly, shared among the app ref state  
 
-const pageTitle = computed(() => {
+  const pageTitle = computed(() => {
     return t("Hello, World");
-});
+  });
 </script>
 
 <template>

package/dist/module.json

@@ -1,10 +1,15 @@
 {
   "name": "@yiiamee/multilinguist",
   "configKey": "multilinguist",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "compatibility": {
     "nuxt": "^3.0.0"
   },
+  "defaults": {
+    "logging": true,
+    "defaultLocale": "",
+    "supportedLanguages": []
+  },
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/module.mjs

@@ -11,7 +11,45 @@ function flattenKeys(obj, prefix = "") {
     return [fullKey];
   });
 }
-function GenerateLocaleKeysPlugin(defaultLocaleFromConfig, localesPath, outPath) {
+const generateOutputString = (func) => {
+  return `
+// AUTO-GENERATED FILE \u2014 DO NOT EDIT MANUALLY
+
+export interface TranslationMessages {
+${func()}
+}
+
+export type LocaleKey = keyof TranslationMessages;
+
+export type TFunction = <K extends LocaleKey>(
+  key: K,
+  variables?: Record<string, string>
+) => string;
+
+declare global {
+  type LocaleKey = keyof TranslationMessages;
+  type TFunction = <K extends LocaleKey>(
+    key: K,
+    variables?: Record<string, string>
+  ) => string;
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $t: TFunction;
+    t: TFunction;
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $t: TFunction;
+    t: TFunction;
+  }
+}
+`;
+};
+function GenerateLocaleKeysPlugin(defaultLocaleFromConfig, localesPath, outPath, logging = true) {
   async function generateTypes() {
     const defaultLocalePath = path.join(localesPath, `${defaultLocaleFromConfig}.json`);
     if (!fs.existsSync(defaultLocalePath)) {
@@ -20,32 +58,12 @@ function GenerateLocaleKeysPlugin(defaultLocaleFromConfig, localesPath, outPath)
     }
     const json = JSON.parse(fs.readFileSync(defaultLocalePath, "utf-8"));
     const keys = flattenKeys(json);
-    const output = [
-      `// AUTO-GENERATED FILE \u2014 DO NOT EDIT MANUALLY`,
-      `export interface TranslationMessages {`,
-      ...keys.map((key) => `  ${JSON.stringify(key)}: string;`),
-      `}`,
-      ``,
-      `export type LocaleKey = keyof TranslationMessages;`,
-      ``,
-      `declare module '#app' {`,
-      `  interface NuxtApp {`,
-      "    $t<const K extends LocaleKey>(key: K, variables?: Record<string, string>): string; ",
-      "    t<const K extends LocaleKey>(key: K, variables?: Record<string, string>): string; ",
-      `  }`,
-      `}`,
-      ``,
-      `declare module 'vue' {`,
-      `  interface ComponentCustomProperties {`,
-      "    $t<const K extends LocaleKey>(key: K, variables?: Record<string, string>): string; ",
-      "    t<const K extends LocaleKey>(key: K, variables?: Record<string, string>): string; ",
-      `  }`,
-      `}`,
-      ``
-    ].join("\n");
+    const output = generateOutputString(() => keys.map((key) => `  ${JSON.stringify(key)}: string;`).join("\n"));
     fs.mkdirSync(path.dirname(outPath), { recursive: true });
     fs.writeFileSync(outPath, output, "utf-8");
-    console?.warn(`\u2705 Generated types to ${outPath} from ${defaultLocalePath}`);
+    if (logging) {
+      console?.warn(`\u2705 Generated types to ${outPath} from ${defaultLocalePath}`);
+    }
   }
   return {
     name: "vite-plugin-generate-locales-types",
@@ -64,28 +82,41 @@ const module = defineNuxtModule({
   meta: {
     name: "@yiiamee/multilinguist",
     configKey: "multilinguist",
-    version: "1.2.7",
+    version: "1.3.0",
     compatibility: {
       nuxt: "^3.0.0"
+    },
+    defaults: {
+      logging: true,
+      defaultLocale: "",
+      supportedLanguages: []
     }
   },
   setup(moduleOptions, nuxtApp) {
     const resolver = createResolver(import.meta.url);
     addPlugin(resolver.resolve("runtime/plugin"));
     addImportsDir(resolver.resolve("runtime/composables"));
+    nuxtApp.options.runtimeConfig.public.multilinguist = {
+      defaultLocale: moduleOptions.defaultLocale,
+      supportedLanguages: moduleOptions.supportedLanguages,
+      logging: typeof moduleOptions.logging === "boolean" ? moduleOptions.logging : true
+    };
     nuxtApp.hook("vite:extendConfig", (viteConfig) => {
       viteConfig.plugins = viteConfig.plugins || [];
-      viteConfig.plugins.push(GenerateLocaleKeysPlugin(moduleOptions.defaultLocale, `${nuxtApp.options.rootDir}/public/locales`, resolver.resolve("./runtime/types/generated-locales.d.ts")));
+      viteConfig.plugins.push(
+        GenerateLocaleKeysPlugin(
+          moduleOptions.defaultLocale,
+          `${nuxtApp.options.rootDir}/public/locales`,
+          resolver.resolve("./runtime/types/generated-locales.d.ts"),
+          moduleOptions.logging
+        )
+      );
     });
     nuxtApp.hook("prepare:types", ({ references }) => {
       references.push({
         path: resolver.resolve("./runtime/types/generated-locales.d.ts")
       });
     });
-    nuxtApp.options.runtimeConfig.public.multilinguist = {
-      defaultLocale: moduleOptions.defaultLocale,
-      supportedLanguages: moduleOptions.supportedLanguages
-    };
   }
 });
 

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<const K extends LocaleKey>(key: K, variables?: Record<string, string>): string;
+    t<K extends LocaleKey>(key: K, variables?: Record<string, string>): string;
     setLocale: (locale: Locale<T>) => void;
     initLocalization: () => Promise<void>;
     locale: Ref<Locale<T>>;

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

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

package/dist/runtime/plugin.js

@@ -3,13 +3,16 @@ import useLocalization from "../runtime/composables/useLocalization";
 export default defineNuxtPlugin(async (nuxtApp) => {
   const config = nuxtApp.$config.public.multilinguist || {
     defaultLocale: "en",
-    supportedLanguages: ["en"]
+    supportedLanguages: ["en"],
+    logging: true
   };
   const supportedLanguages = config.supportedLanguages;
   const defaultLocale = config.defaultLocale;
   const { initLocalization, ...localizationProperties } = useLocalization(supportedLanguages, defaultLocale);
   await initLocalization();
-  console.log("[multilinguist] is initialised");
+  if (nuxtApp.$config.public.multilinguist.logging) {
+    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

@@ -0,0 +1,40 @@
+
+// AUTO-GENERATED FILE — DO NOT EDIT MANUALLY
+
+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;
+
+export type TFunction = <K extends LocaleKey>(
+  key: K,
+  variables?: Record<string, string>
+) => string;
+
+declare global {
+  type LocaleKey = keyof TranslationMessages;
+  type TFunction = <K extends LocaleKey>(
+    key: K,
+    variables?: Record<string, string>
+  ) => string;
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $t: TFunction;
+    t: TFunction;
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $t: TFunction;
+    t: TFunction;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yiiamee/multilinguist",
-  "version": "1.2.7",
-  "description": "Nuxt 3 Multilinguist Localization module",
+  "version": "1.3.0",
+  "description": "Nuxt Multilinguist module for localizations",
   "repository": "yiiameeMich/multilinguist",
   "license": "MIT",
   "type": "module",
@@ -14,9 +14,24 @@
   },
   "types": "./dist/types.d.mts",
   "files": [
-    "dist"
+    "dist",
+    "runtime/types"
+  ],
+  "keywords": [
+    "localization",
+    "nuxt localization",
+    "nuxt",
+    "internationalization",
+    "languages",
+    "locales",
+    "translation",
+    "localization nuxt",
+    "translation nuxt",
+    "nuxt translation",
+    "nuxt multilinguist",
+    "multilinguist nuxt",
+    "ssr localization"
   ],
-  "keywords": ["localization", "nuxt localization", "nuxt", "internationalization", "languages", "locales", "translation"],
   "bugs": {
     "email": "michaelkukh.dev@gmail.com"
   },
@@ -36,7 +51,10 @@
     "nuxt": "^3.0.0"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.17.4"
+    "@nuxt/kit": "^3.17.4",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "prettier": "^3.5.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.4.1",