react-intlayer 1.0.1 → 1.2.1

package/dist/esm/useIntlayerBase.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useIntlayerBase.ts"],"sourcesContent":["/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport type { Locales } from '@intlayer/config/client';\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport type { Content } from './processDictionary/contentDictionary';\nimport { processDictionary } from './processDictionary/index';\n\nexport type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\nexport type UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => IntlayerDictionaryTypesConnector[T];\n\nexport const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const dictionary: Content = dictionaries[id];\n\n  return processDictionary(\n    dictionary,\n    locale\n  ) as IntlayerDictionaryTypesConnector[T];\n};\n"],"mappings":"AAMA,OAAO,kBAAkB;AAGzB,SAAS,yBAAyB;AAY3B,MAAM,kBAA+B,CAC1C,IACA,WACG;AACH,QAAM,aAAsB,aAAa,EAAE;AAE3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/useIntlayerBase.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\n/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport type { Content } from './processDictionary/contentDictionary';\nimport { processDictionary } from './processDictionary/index';\n\nexport type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\nexport type UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => IntlayerDictionaryTypesConnector[T];\n\n/**\n * Hook that picking one dictionary by its id and return the content.\n */\nexport const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const dictionary: Content = dictionaries[id];\n\n  return processDictionary(\n    dictionary,\n    locale\n  ) as IntlayerDictionaryTypesConnector[T];\n};\n"],"mappings":";AAMA,OAAO,kBAAkB;AAGzB,SAAS,yBAAyB;AAe3B,MAAM,kBAA+B,CAC1C,IACA,WACG;AACH,QAAM,aAAsB,aAAa,EAAE;AAE3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/vite/intlayerPlugin.d.mts

@@ -0,0 +1,17 @@
+import { Plugin } from 'vite';
+
+type PluginOptions = {};
+/**
+ *
+ * A Vite plugin that integrates IntLayer configuration into the build process
+ *
+ * ```ts
+ * // Example usage of the plugin in a Vite configuration
+ * export default defineConfig({
+ *   plugins: [ intLayerPlugin() ],
+ * });
+ * ```
+ *  */
+declare const intLayerPlugin: (_pluginOptions?: PluginOptions) => Plugin;
+
+export { intLayerPlugin };

package/dist/esm/vite/intlayerPlugin.mjs

@@ -0,0 +1,36 @@
+import "../chunk-ZNCO4QRF.mjs";
+import { join, relative, resolve } from "path";
+import { watch } from "@intlayer/chokidar";
+import { getConfiguration, formatEnvVariable } from "@intlayer/config";
+import { loadEnv } from "vite";
+const intLayerPlugin = (_pluginOptions = {}) => ({
+  name: "vite-intlayer-plugin",
+  config: (config, { mode }) => {
+    const intlayerConfig = getConfiguration();
+    const env = formatEnvVariable("vite");
+    process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };
+    const { mainDir, baseDir } = intlayerConfig.content;
+    const dictionariesPath = join(mainDir, "dictionaries.mjs");
+    const relativeDictionariesPath = relative(baseDir, dictionariesPath);
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        "@intlayer/dictionaries-entry": resolve(relativeDictionariesPath)
+      }
+    };
+    return config;
+  },
+  buildStart: () => {
+    watch({
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      persistent: import.meta.env === "development"
+    });
+  },
+  configureServer: (server) => {
+  }
+});
+export {
+  intLayerPlugin
+};
+//# sourceMappingURL=intlayerPlugin.mjs.map

package/dist/esm/vite/intlayerPlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/vite/intlayerPlugin.ts"],"sourcesContent":["import { join, relative, resolve } from 'path';\nimport { watch } from '@intlayer/chokidar';\nimport { getConfiguration, formatEnvVariable } from '@intlayer/config';\nimport { loadEnv, type Plugin } from 'vite';\n\n// Plugin options type definition\ntype PluginOptions = {\n  // Custom options for your plugin, if any\n};\n\n/**\n *\n * A Vite plugin that integrates IntLayer configuration into the build process\n *\n * ```ts\n * // Example usage of the plugin in a Vite configuration\n * export default defineConfig({\n *   plugins: [ intLayerPlugin() ],\n * });\n * ```\n *  */\nexport const intLayerPlugin = (_pluginOptions: PluginOptions = {}): Plugin => ({\n  name: 'vite-intlayer-plugin',\n\n  config: (config, { mode }) => {\n    const intlayerConfig = getConfiguration();\n\n    // Set all configuration values as environment variables\n    const env = formatEnvVariable('vite');\n\n    process.env = { ...process.env, ...loadEnv(mode, process.cwd()), ...env };\n\n    const { mainDir, baseDir } = intlayerConfig.content;\n    const dictionariesPath = join(mainDir, 'dictionaries.mjs');\n    const relativeDictionariesPath = relative(baseDir, dictionariesPath);\n\n    // Update Vite's resolve alias\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve?.alias,\n        '@intlayer/dictionaries-entry': resolve(relativeDictionariesPath),\n      },\n    };\n\n    return config;\n  },\n\n  buildStart: () => {\n    // Code to run when Vite build starts\n    watch({\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      persistent: (import.meta as any).env === 'development',\n    });\n  },\n  configureServer: (server) => {\n    // Custom server configuration, if needed\n  },\n});\n"],"mappings":";AAAA,SAAS,MAAM,UAAU,eAAe;AACxC,SAAS,aAAa;AACtB,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,eAA4B;AAkB9B,MAAM,iBAAiB,CAAC,iBAAgC,CAAC,OAAe;AAAA,EAC7E,MAAM;AAAA,EAEN,QAAQ,CAAC,QAAQ,EAAE,KAAK,MAAM;AAC5B,UAAM,iBAAiB,iBAAiB;AAGxC,UAAM,MAAM,kBAAkB,MAAM;AAEpC,YAAQ,MAAM,EAAE,GAAG,QAAQ,KAAK,GAAG,QAAQ,MAAM,QAAQ,IAAI,CAAC,GAAG,GAAG,IAAI;AAExE,UAAM,EAAE,SAAS,QAAQ,IAAI,eAAe;AAC5C,UAAM,mBAAmB,KAAK,SAAS,kBAAkB;AACzD,UAAM,2BAA2B,SAAS,SAAS,gBAAgB;AAGnE,WAAO,UAAU;AAAA,MACf,GAAG,OAAO;AAAA,MACV,OAAO;AAAA,QACL,GAAG,OAAO,SAAS;AAAA,QACnB,gCAAgC,QAAQ,wBAAwB;AAAA,MAClE;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,YAAY,MAAM;AAEhB,UAAM;AAAA;AAAA,MAEJ,YAAa,YAAoB,QAAQ;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EACA,iBAAiB,CAAC,WAAW;AAAA,EAE7B;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intlayer",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "private": false,
   "description": "Internationalization layer for React applications - Layer of abstraction between the business logic and the data access layer. Manage internationalization in a simple way, through TypeScript, JavaScript or JSON declaration file.",
   "keywords": [
@@ -37,6 +37,21 @@
       "require": "./dist/cjs/server/index.cjs",
       "import": "./dist/esm/server/index.mjs"
     },
+    "./craco-plugin": {
+      "types": "./dist/esm/craco/intlayerCracoPlugin.d.mts",
+      "require": "./dist/cjs/craco/intlayerCracoPlugin.cjs",
+      "import": "./dist/esm/craco/intlayerCracoPlugin.mjs"
+    },
+    "./craco-config": {
+      "types": "./dist/esm/craco/craco.config.d.mts",
+      "require": "./dist/cjs/craco/craco.config.cjs",
+      "import": "./dist/esm/craco/craco.config.mjs"
+    },
+    "./vite-plugin": {
+      "types": "./dist/esm/vite/intlayerPlugin.d.mts",
+      "require": "./dist/cjs/vite/intlayerPlugin.cjs",
+      "import": "./dist/esm/vite/intlayerPlugin.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "./src/index.ts",
@@ -47,28 +62,38 @@
       ]
     }
   },
+  "bin": {
+    "react-intlayer": "./dist/cjs/cli/react-intlayer.cjs"
+  },
   "files": [
     "./dist",
     "./src",
     "./package.json"
   ],
   "dependencies": {
+    "cross-spawn": "^7.0.3",
     "js-cookie": "^3.0.5",
     "react-cookie": "^7.1.4",
-    "@intlayer/config": "^1.0.1",
-    "@intlayer/core": "^1.0.1",
-    "@intlayer/dictionaries-entry": "^1.0.1",
-    "intlayer": "^1.0.1"
+    "vite": "^5.2.0",
+    "webpack": "^5.91.0",
+    "@intlayer/chokidar": "^1.2.1",
+    "@intlayer/config": "^1.2.1",
+    "@intlayer/core": "^1.2.1",
+    "@intlayer/dictionaries-entry": "^1.2.1",
+    "@intlayer/webpack": "^1.2.1",
+    "intlayer": "^1.2.1"
   },
   "devDependencies": {
+    "@craco/types": "^7.1.0",
+    "@types/cross-spawn": "^6.0.6",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "5.0.5",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
     "@utils/eslint-config": "^1.0.1",
     "@utils/ts-config": "^1.0.1"
   },

package/src/IntlayerProvider.tsx

@@ -0,0 +1,24 @@
+import { getConfiguration } from '@intlayer/config/client';
+import type { FC } from 'react';
+import {
+  IntlayerClientProvider,
+  type IntlayerClientProviderProps,
+} from './client/IntlayerClientProvider';
+import {
+  IntlayerServerProvider,
+  type IntlayerServerProviderProps,
+} from './server/IntlayerServerProvider';
+
+const { defaultLocale } = getConfiguration().internationalization;
+
+type IntlayerProviderProps = IntlayerClientProviderProps &
+  IntlayerServerProviderProps;
+
+export const IntlayerProvider: FC<IntlayerProviderProps> = ({
+  children,
+  locale = defaultLocale,
+}) => (
+  <IntlayerServerProvider locale={locale}>
+    <IntlayerClientProvider locale={locale}>{children}</IntlayerClientProvider>
+  </IntlayerServerProvider>
+);

package/src/cli/react-intlayer.ts

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/**
+ * To make the setup easier, we are using craco to override the webpack configuration.
+ * This script is used to run the craco scripts with the custom configuration.
+ *
+ * The script is based on the original craco script from create-react-app.
+ */
+
+import spawn from 'cross-spawn';
+
+const args = process.argv.slice(2);
+const scriptIndex = args.findIndex(
+  (x) => x === 'build' || x === 'start' || x === 'test'
+);
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+
+switch (script) {
+  case 'build':
+  case 'start':
+  case 'test': {
+    const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+    const scriptPath = require.resolve(`@craco/craco/dist/scripts/${script}`);
+    const scriptArgs = args.slice(scriptIndex + 1);
+    const processArgs = nodeArgs
+      .concat(scriptPath)
+      .concat([
+        ...scriptArgs,
+        '--config',
+        './node_modules/react-intlayer/dist/cjs/craco/craco.config.cjs',
+      ]);
+
+    const child = spawn.sync('node', processArgs, { stdio: 'inherit' });
+
+    if (child.signal) {
+      if (child.signal === 'SIGKILL') {
+        console.info(`
+                The build failed because the process exited too early.
+                This probably means the system ran out of memory or someone called
+                \`kill -9\` on the process.
+            `);
+      } else if (child.signal === 'SIGTERM') {
+        console.info(`
+                The build failed because the process exited too early.
+                Someone might have called  \`kill\` or \`killall\`, or the system could
+                be shutting down.
+            `);
+      }
+
+      process.exit(1);
+    }
+
+    process.exit(child.status ?? undefined);
+    break;
+  }
+  default:
+    console.info(`Unknown script "${script}".`);
+    console.info('Perhaps you need to update craco?');
+    break;
+}

package/src/client/IntlayerClientProvider.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { getConfiguration, type Locales } from '@intlayer/config/client';
+import {
+  type PropsWithChildren,
+  createContext,
+  useContext,
+  useMemo,
+  type FC,
+  useState,
+  useCallback,
+} from 'react';
+import { localeCookie, setLocaleCookie } from './useLocaleCookie';
+
+type IntlayerValue = {
+  locale: Locales;
+  setLocale: (newLocale: Locales) => void;
+};
+
+/**
+ * Context that store the current locale on the client side
+ */
+export const IntlayerClientContext = createContext<IntlayerValue>({
+  locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,
+  setLocale: () => null,
+});
+
+/**
+ * Hook that provides the current locale
+ */
+export const useIntlayerContext = () => useContext(IntlayerClientContext);
+
+export type IntlayerClientProviderProps = PropsWithChildren & {
+  locale?: Locales;
+};
+
+/**
+ * Provider that store the current locale on the client side
+ */
+export const IntlayerClientProvider: FC<IntlayerClientProviderProps> = ({
+  locale,
+  children,
+}) => {
+  const { defaultLocale, locales: availableLocales } =
+    getConfiguration().internationalization;
+
+  const [currentLocale, setCurrentLocale] = useState(
+    locale ?? localeCookie ?? defaultLocale
+  );
+
+  const setLocale = useCallback(
+    (newLocale: Locales) => {
+      if (currentLocale.toString() === newLocale.toString()) return;
+
+      if (!availableLocales.includes(newLocale)) {
+        console.error(`Locale ${locale} is not available`);
+        return;
+      }
+
+      setCurrentLocale(newLocale); // Update state
+      setLocaleCookie(newLocale); // Optionally set cookie for persistence
+    },
+    [availableLocales, currentLocale, locale]
+  );
+
+  const value: IntlayerValue = useMemo<IntlayerValue>(
+    () => ({ locale: currentLocale, setLocale }),
+    [currentLocale, setLocale]
+  );
+
+  return (
+    <IntlayerClientContext.Provider value={value}>
+      {children}
+    </IntlayerClientContext.Provider>
+  );
+};

package/src/client/getBrowserLocale.tsx

@@ -0,0 +1,192 @@
+import { getConfiguration, type Locales } from '@intlayer/config/client';
+import { localeList } from '@intlayer/core';
+
+export enum LanguageDetector {
+  Querystring = 'querystring',
+  Cookie = 'cookie',
+  LocalStorage = 'localStorage',
+  SessionStorage = 'sessionStorage',
+  Navigator = 'navigator',
+  HtmlTag = 'htmlTag',
+}
+
+// Default settings for the language detector
+type LanguageDetectorOptions = {
+  order?: LanguageDetector[];
+  lookupQuerystring?: string;
+  lookupCookie?: string;
+  lookupLocalStorage?: string;
+  lookupSessionStorage?: string;
+  excludeCacheFor?: string[];
+  htmlTag?: HTMLElement | null;
+};
+
+const getDefaultsOptions = (): LanguageDetectorOptions => {
+  const { middleware } = getConfiguration();
+
+  return {
+    order: [
+      LanguageDetector.Querystring,
+      LanguageDetector.Cookie,
+      LanguageDetector.Navigator,
+      LanguageDetector.HtmlTag,
+    ],
+    lookupQuerystring: 'locale',
+    lookupCookie: middleware.cookieName,
+    htmlTag: document.documentElement,
+  };
+};
+
+// Helper functions for various checks and operations
+const isLocalStorageAvailable = (): boolean => {
+  try {
+    if (typeof window === 'undefined') return false;
+    const testKey = 'intlayer.translate.boo';
+    window.localStorage.setItem(testKey, 'foo');
+    window.localStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const isSessionStorageAvailable = (): boolean => {
+  try {
+    if (typeof window === 'undefined') return false;
+    const testKey = 'intlayer.translate.boo';
+    window.sessionStorage.setItem(testKey, 'foo');
+    window.sessionStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Function to detect language using different detectors
+const detectLanguage = (
+  order: string[],
+  options: LanguageDetectorOptions
+): Record<LanguageDetector, Locales | Locales[]> => {
+  const detected: Record<LanguageDetector, Locales | Locales[]> = {} as Record<
+    LanguageDetector,
+    Locales | Locales[]
+  >;
+
+  const queryStringDetector = () => {
+    if (typeof window === 'undefined') return;
+    const search = window.location.search || '';
+    const params = new URLSearchParams(search);
+    const value = params.get(options.lookupQuerystring ?? '');
+    if (value) {
+      detected[LanguageDetector.Querystring] = value as Locales;
+    }
+  };
+
+  const cookieDetector = () => {
+    if (typeof document === 'undefined') return;
+    const cookies = document.cookie.split(';');
+    const cookieName = `${options.lookupCookie ?? ''}=`;
+    const cookie = cookies.find((c) => c.trim().startsWith(cookieName));
+    if (cookie) {
+      const value = cookie.split('=')[1].trim();
+
+      detected[LanguageDetector.Cookie] = value as Locales;
+    }
+  };
+
+  const localStorageDetector = () => {
+    if (!isLocalStorageAvailable()) return;
+    const value = window.localStorage.getItem(options.lookupLocalStorage ?? '');
+    if (value) {
+      detected[LanguageDetector.LocalStorage] = value as Locales;
+    }
+  };
+
+  const sessionStorageDetector = () => {
+    if (!isSessionStorageAvailable()) return;
+    const value = window.sessionStorage.getItem(
+      options.lookupSessionStorage ?? ''
+    );
+    if (value) {
+      detected[LanguageDetector.SessionStorage] = value as Locales;
+    }
+  };
+
+  const navigatorDetector = () => {
+    if (typeof navigator === 'undefined') return;
+
+    if (navigator.language) {
+      detected[LanguageDetector.Navigator] = navigator.language as Locales;
+    }
+  };
+
+  const htmlTagDetector = () => {
+    const htmlTag = options.htmlTag;
+    if (htmlTag && typeof htmlTag.getAttribute === 'function') {
+      const lang = htmlTag.getAttribute('lang');
+      if (lang) {
+        detected[LanguageDetector.HtmlTag] = lang as Locales;
+      }
+    }
+  };
+
+  // Map detector names to their corresponding functions
+  const detectors: Record<string, () => void> = {
+    [LanguageDetector.Querystring]: queryStringDetector,
+    [LanguageDetector.Cookie]: cookieDetector,
+    [LanguageDetector.LocalStorage]: localStorageDetector,
+    [LanguageDetector.SessionStorage]: sessionStorageDetector,
+    [LanguageDetector.Navigator]: navigatorDetector,
+    [LanguageDetector.HtmlTag]: htmlTagDetector,
+  };
+
+  // Use the provided order to run each detector
+  order.forEach((detectorName) => {
+    detectors[detectorName]?.();
+  });
+
+  return detected;
+};
+
+const getFirstAvailableLocale = (
+  locales: Record<LanguageDetector, Locales | Locales[]>,
+  order: LanguageDetector[]
+): Locales => {
+  const { internationalization } = getConfiguration();
+
+  for (const detector of order) {
+    const localesArray = [locales[detector]].flat() as Locales[];
+
+    for (const locale of localesArray) {
+      if (
+        locale &&
+        (internationalization.locales ?? localeList).includes(locale)
+      ) {
+        return locale;
+      } else if (
+        locale?.includes('-') &&
+        (internationalization.locales ?? localeList).includes(
+          locale.split('-')[0] as Locales
+        )
+      ) {
+        return locale.split('-')[0] as Locales;
+      }
+    }
+  }
+
+  return internationalization.defaultLocale;
+};
+
+/**
+ * Core language detector function
+ * const detectedLanguages = detectLanguage(['LanguageDetector.Cookie', 'LanguageDetector.LocalStorage'], { lookupCookie: 'myCookie' });
+ */
+export const getBrowserLocale = (
+  userOptions: LanguageDetectorOptions | undefined = {}
+): Locales => {
+  const options = { ...getDefaultsOptions(), ...userOptions };
+
+  const locales = detectLanguage(options.order ?? [], options);
+
+  return getFirstAvailableLocale(locales, options.order ?? []);
+};

package/src/client/index.ts

@@ -1,10 +1,11 @@
-export type { LocaleClientContextProviderProps } from './LocaleClientContextProvider';
+export type { IntlayerClientProviderProps } from './IntlayerClientProvider';
 export {
-  LocaleClientContext,
-  useLocaleContext,
-  LocaleClientContextProvider,
-} from './LocaleClientContextProvider';
+  IntlayerClientContext as IntlayerClient,
+  useIntlayerContext,
+  IntlayerClientProvider,
+} from './IntlayerClientProvider';
 export { useIntlayer } from './useIntlayer';
+export { useLocaleBase } from './useLocaleBase';
 export { useLocale } from './useLocale';
 export { useTraduction } from './useTraduction';
 export {
@@ -12,3 +13,4 @@ export {
   localeCookie,
   setLocaleCookie,
 } from './useLocaleCookie';
+export { getBrowserLocale } from './getBrowserLocale';

package/src/client/useContent.ts

@@ -1,11 +1,14 @@
 import type { LanguageContent } from '@intlayer/core';
-import { useLocale } from './useLocale';
+import { useLocaleBase } from './useLocaleBase';
 import { useTraduction } from './useTraduction';
 
+/**
+ * On the client side, hook to get the translation content based on the locale
+ */
 export const useContent = <Content>(
   languageContent: LanguageContent<Content>
 ) => {
-  const { locale } = useLocale();
+  const { locale } = useLocaleBase();
 
   const content = useTraduction(languageContent);
 

package/src/client/useIntlayer.ts

@@ -7,13 +7,18 @@ import {
   useIntlayerBase,
   type UseIntlayer,
 } from '../useIntlayerBase';
-import { LocaleClientContext } from './LocaleClientContextProvider';
+import { IntlayerClientContext } from './IntlayerClientProvider';
 
+/**
+ * On the client side, Hook that picking one dictionary by its id and return the content
+ *
+ * If the locale is not provided, it will use the locale from the client context
+ */
 export const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(
   id: T,
   locale?: Locales
 ) => {
-  const { locale: currentLocale } = useContext(LocaleClientContext);
+  const { locale: currentLocale } = useContext(IntlayerClientContext);
   const localeTarget = locale ?? currentLocale;
 
   return useIntlayerBase(id, localeTarget);

package/src/client/useLocale.ts

@@ -1,19 +1,23 @@
 'use client';
 
-import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import { getConfiguration } from '@intlayer/config/client';
 import { localeList } from '@intlayer/core';
 import { useContext } from 'react';
-import { LocaleClientContext } from './LocaleClientContextProvider';
-
-const { defaultLocale, locales: availableLocales } = intlayerIntlConfiguration;
+import { IntlayerClientContext } from './IntlayerClientProvider';
 
+/**
+ * On the client side, hook to get the current locale and all related fields
+ */
 export const useLocale = () => {
-  const { locale } = useContext(LocaleClientContext);
+  const { defaultLocale, locales: availableLocales } =
+    getConfiguration().internationalization;
+  const { locale, setLocale } = useContext(IntlayerClientContext);
 
   return {
     locale, // Current locale
     defaultLocale, // Principal locale defined in config
     availableLocales, // List of the available locales defined in config
     localeList, // List of all available locales
+    setLocale, // Function to set the locale
   };
 };

package/src/client/useLocaleBase.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { getConfiguration } from '@intlayer/config/client';
+import { localeList } from '@intlayer/core';
+import { useContext } from 'react';
+import { IntlayerClientContext } from './IntlayerClientProvider';
+
+const { defaultLocale, locales: availableLocales } =
+  getConfiguration().internationalization;
+
+/**
+ * On the client side, hook to get the current locale and all related fields
+ */
+export const useLocaleBase = () => {
+  const { locale, setLocale } = useContext(IntlayerClientContext);
+
+  return {
+    locale, // Current locale
+    defaultLocale, // Principal locale defined in config
+    availableLocales, // List of the available locales defined in config
+    localeList, // List of all available locales
+    setLocale, // Function to set the locale
+  };
+};

package/src/client/useLocaleCookie.ts

@@ -1,11 +1,7 @@
-/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
-import {
-  type Locales,
-  intlayerMiddlewareConfiguration,
-} from '@intlayer/config/client';
+import { type Locales, getConfiguration } from '@intlayer/config/client';
 import Cookies from 'js-cookie';
 
-const { cookieName } = intlayerMiddlewareConfiguration;
+const { cookieName } = getConfiguration().middleware;
 
 const cookieAttributes: Cookies.CookieAttributes = {
   path: '/',
@@ -15,12 +11,21 @@ const cookieAttributes: Cookies.CookieAttributes = {
   sameSite: 'strict',
 };
 
+/**
+ * Get the locale cookie
+ */
 export const localeCookie = Cookies.get(cookieName) as Locales | undefined;
 
+/**
+ * Set the locale cookie
+ */
 export const setLocaleCookie = (locale: Locales) => {
   Cookies.set(cookieName, locale, cookieAttributes);
 };
 
+/**
+ * Hook that provides the locale cookie and a function to set it
+ */
 export const useLocaleCookie = () => ({
   localeCookie,
   setLocaleCookie,