refactor(vite-vue-app): restructure content files and update localization implementation in example app

Author: aymericzip

docs/en/intlayer_with_vite+vue.md

@@ -3,6 +3,10 @@ import { useIntlayer } from 'vue-intlayer';
 import HelloWorld from './components/HelloWorld.vue';
 import LocaleSwitcher from './components/LocaleSwitcher.vue';
 import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes';
+import { useLocale } from 'vue-intlayer';
+import { ref, watch } from 'vue';
+
+const { locale, availableLocales, setLocale } = useLocale();
 
 // Use the useIntlayer composable to access translations
 const content = useIntlayer('app');

examples/vite-vue-app/src/App.vue

@@ -10,7 +10,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
-import { Locales, getLocaleName } from 'intlayer';
+import { getLocaleName } from 'intlayer';
 import { useLocale } from 'vue-intlayer';
 
 // Get locale information and setLocale function

examples/vite-vue-app/src/components/LocaleSwitcher.vue

@@ -1,71 +1,35 @@
 import { t, type Dictionary } from 'intlayer';
 
 const helloWorldContent = {
-  key: 'app',
+  key: 'helloworld',
   content: {
-    countIs: t({
-      en: 'count is ',
-      fr: 'le compte est ',
-      es: 'el recuento es ',
+    count: t({ en: 'count is ', fr: 'le compte est ', es: 'el recuento es ' }),
+    edit: t({
+      en: 'Edit <code>components/HelloWorld.vue</code> and save to test HMR',
+      fr: 'Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR',
+      es: 'Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR',
+    }),
+    checkOut: t({ en: 'Check out ', fr: 'Vérifiez ', es: 'Compruebe ' }),
+    officialStarter: t({
+      en: ', the official Vue + Vite starter',
+      fr: ', le starter officiel Vue + Vite',
+      es: ', el starter oficial Vue + Vite',
+    }),
+    learnMore: t({
+      en: 'Learn more about IDE Support for Vue in the ',
+      fr: 'En savoir plus sur le support IDE pour Vue dans le ',
+      es: 'Aprenda más sobre el soporte IDE para Vue en el ',
+    }),
+    vueDocs: t({
+      en: 'Vue Docs Scaling up Guide',
+      fr: 'Vue Docs Scaling up Guide',
+      es: 'Vue Docs Scaling up Guide',
+    }),
+    readTheDocs: t({
+      en: 'Click on the Vite and Vue logos to learn more',
+      fr: 'Cliquez sur les logos Vite et Vue pour en savoir plus',
+      es: 'Haga clic en los logotipos de Vite y Vue para obtener más información',
     }),
-    edit: [
-      t({
-        en: 'Edit ',
-        fr: 'Éditez ',
-        es: 'Edita ',
-      }),
-      t({
-        en: 'components/HelloWorld.vue',
-        fr: 'components/HelloWorld.vue',
-        es: 'components/HelloWorld.vue',
-      }),
-      t({
-        en: ' to test HMR',
-        fr: ' pour tester HMR',
-        es: ' para probar HMR',
-      }),
-    ],
-    checkOutStarter: [
-      t({
-        en: 'Check out ',
-        fr: 'Vérifiez ',
-        es: 'Compruebe ',
-      }),
-      t({
-        en: 'create-vue',
-        fr: 'create-vue',
-        es: 'create-vue',
-      }),
-      t({
-        en: ', the official Vue + Vite starter',
-        fr: ', le starter officiel Vue + Vite',
-        es: ', el starter oficial Vue + Vite',
-      }),
-    ],
-    learnMore: [
-      t({
-        en: 'Learn more about IDE Support for Vue in the ',
-        fr: 'En savoir plus sur le support IDE pour Vue dans le ',
-        es: 'Aprenda más sobre el soporte IDE para Vue en el ',
-      }),
-      t({
-        en: 'Vue Docs Scaling up Guide',
-        fr: 'Vue Docs Scaling up Guide',
-        es: 'Vue Docs Scaling up Guide',
-      }),
-      t({
-        en: ',',
-        fr: ',',
-        es: ',',
-      }),
-    ],
-    clickOnLogos: [
-      t({
-        en: 'Click on the Vite and Vue logos to learn more',
-        fr: 'Cliquez sur les logos Vite et Vue pour en savoir plus',
-        es: 'Haga clic en los logotipos de Vite y Vue para obtener más información',
-      }),
-    ],
   },
 } satisfies Dictionary;
 

examples/vite-vue-app/src/components/helloWorld.content.ts

@@ -1,8 +1,12 @@
 import { createApp } from 'vue';
+import { installIntlayer } from 'vue-intlayer';
 import App from './App.vue';
 import './style.css';
 
 const app = createApp(App);
 
+// Inject the provider at the top level
+installIntlayer(app); // provide the singleton instance
+
 // Mount the app
 app.mount('#app');

examples/vite-vue-app/src/composables/useI18nHTMLAttributes.js renamed to examples/vite-vue-app/src/composables/useI18nHTMLAttributes.ts

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": false,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*", ".intlayer/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

examples/vite-vue-app/src/helloworld.content.ts

@@ -0,0 +1,40 @@
+import configuration from '@intlayer/config/built';
+import type { LocalesValues } from '@intlayer/config/client';
+import { ref } from 'vue';
+import { INTLAYER_SYMBOL } from '../constants';
+import type { IntlayerProvider } from '../types/intlayer';
+
+/**
+ * Singleton instance
+ */
+let instance: IntlayerProvider | null = null;
+
+/**
+ * Create and return a single IntlayerProvider instance
+ */
+export const createIntlayerClient = (): IntlayerProvider => {
+  if (instance) return instance;
+
+  const { defaultLocale } = configuration.internationalization ?? {};
+
+  const locale = ref<LocalesValues>(defaultLocale);
+
+  const setLocale = (newLocale: LocalesValues) => {
+    locale.value = newLocale;
+  };
+
+  instance = {
+    locale,
+    setLocale,
+  };
+
+  return instance;
+};
+
+/**
+ * Helper to install the Intlayer provider into the app
+ */
+export const installIntlayer = (app: any) => {
+  const client = createIntlayerClient();
+  app.provide(INTLAYER_SYMBOL, client);
+};

examples/vite-vue-app/src/main.js

@@ -1,3 +1,4 @@
+export * from './createIntlayerClient';
 export * from './useDictionary';
 export * from './useIntlayer';
 export * from './useLocale';

examples/vite-vue-app/tsconfig.json

@@ -1,14 +1,19 @@
 import type { LocalesValues } from '@intlayer/config/client';
 import type { Dictionary } from '@intlayer/core';
-import { computed, ref } from 'vue';
+import { computed, inject } from 'vue';
+import { INTLAYER_SYMBOL } from '../constants';
 import { getDictionary } from '../getDictionary';
+import { IntlayerProvider } from '../types/intlayer';
 
 export const useDictionary = <T extends Dictionary>(
   dictionary: T,
   locale?: LocalesValues
 ) => {
-  const currentLocale = ref<LocalesValues>();
-  const localeTarget = computed(() => locale ?? currentLocale.value);
+  const intlayer = inject<IntlayerProvider>(INTLAYER_SYMBOL);
 
-  return getDictionary<T, LocalesValues>(dictionary, localeTarget.value);
+  const localeTarget = computed(() => locale ?? intlayer?.locale.value);
+
+  return computed(() =>
+    getDictionary<T, LocalesValues>(dictionary, localeTarget.value)
+  );
 };

packages/vue-intlayer/src/client/createIntlayerClient.ts

@@ -1,9 +1,11 @@
 import type { LocalesValues } from '@intlayer/config/client';
 import { DeepTransformContent, DictionaryKeys } from '@intlayer/core';
-import { computed, ref } from 'vue';
+import { computed, type ComputedRef, inject } from 'vue';
 // @ts-ignore intlayer declared for module augmentation
 import type { IntlayerDictionaryTypesConnector } from 'intlayer';
+import { INTLAYER_SYMBOL } from '../constants';
 import { getIntlayer } from '../getIntlayer';
+import { IntlayerProvider } from '../types/intlayer';
 
 /**
  * On the client side, Hook that picking one dictionary by its key and return the content
@@ -13,9 +15,12 @@ import { getIntlayer } from '../getIntlayer';
 export const useIntlayer = <T extends DictionaryKeys>(
   key: T,
   locale?: LocalesValues
-): DeepTransformContent<IntlayerDictionaryTypesConnector[T]['content']> => {
-  const currentLocale = ref<LocalesValues>();
-  const localeTarget = computed(() => locale ?? currentLocale.value);
+): ComputedRef<
+  DeepTransformContent<IntlayerDictionaryTypesConnector[T]['content']>
+> => {
+  const intlayer = inject<IntlayerProvider>(INTLAYER_SYMBOL);
 
-  return getIntlayer(key, localeTarget.value);
+  const localeTarget = computed(() => locale ?? intlayer?.locale?.value);
+
+  return computed(() => getIntlayer(key, localeTarget.value));
 };

packages/vue-intlayer/src/client/index.ts

@@ -1,7 +1,7 @@
 import configuration from '@intlayer/config/built';
 import type { LocalesValues } from '@intlayer/config/client';
 import { localeList } from '@intlayer/core';
-import { computed, inject } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { INTLAYER_SYMBOL } from '../constants';
 import type { IntlayerProvider } from '../types/intlayer';
 import { useLocaleCookie } from './useLocaleCookie';
@@ -19,15 +19,36 @@ export const useLocale = ({ onLocaleChange }: useLocaleProps = {}) => {
   const intlayer = inject<IntlayerProvider>(INTLAYER_SYMBOL);
   const { setLocaleCookie } = useLocaleCookie();
 
-  const locale = computed(() => intlayer?.locale.value ?? defaultLocale);
+  // Create a reactive reference for the locale
+  const currentLocale = ref(intlayer?.locale?.value ?? defaultLocale);
+
+  // Watch for changes in the intlayer locale and update our local state
+  if (intlayer?.locale) {
+    watch(
+      () => intlayer.locale.value,
+      (newLocale) => {
+        if (newLocale) {
+          currentLocale.value = newLocale;
+        }
+      },
+      { immediate: true }
+    );
+  }
+
+  // Exported computed value based on our local reactive reference
+  const locale = computed(() => currentLocale.value);
 
   const setLocale = (newLocale: LocalesValues) => {
     if (!availableLocales?.map(String).includes(newLocale)) {
       console.error(`Locale ${newLocale} is not available`);
       return;
     }
 
-    intlayer?.setLocale(newLocale);
+    // Update both the local ref and intlayer
+    currentLocale.value = newLocale;
+    if (intlayer) {
+      intlayer.setLocale(newLocale);
+    }
     setLocaleCookie(newLocale);
     onLocaleChange?.(newLocale);
   };