react-intlayer/dist/esm/client/IntlayerProvider.mjs.map

Easily internationalize i18n your React applications with type-safe multilingual content management.

{"version":3,"file":"IntlayerProvider.mjs","names":[],"sources":["../../../src/client/IntlayerProvider.tsx"],"sourcesContent":["'use client';\n\nimport { internationalization } from '@intlayer/config/built';\nimport { setIntlayerIdentifier } from '@intlayer/config/client';\nimport { localeResolver } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { localeInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n  locale: LocalesValues;\n  setLocale: (newLocale: LocalesValues) => void;\n  disableEditor?: boolean;\n  isCookieEnabled?: boolean;\n};\n\n/**\n * Context that stores the current locale on the client side.\n */\nexport const IntlayerClientContext = createContext<IntlayerValue>({\n  locale: localeInStorage ?? internationalization?.defaultLocale,\n  setLocale: () => null,\n  isCookieEnabled: true,\n});\n\n/**\n * Hook that provides the current Intlayer client context.\n *\n * @returns The current Intlayer context values.\n */\nexport const useIntlayerContext = () => useContext(IntlayerClientContext) ?? {};\n\n/**\n * Props for the IntlayerProvider component.\n */\nexport type IntlayerProviderProps = PropsWithChildren<{\n  /**\n   * The locale to use. If not provided, it will be detected from storage or configuration.\n   */\n  locale?: LocalesValues;\n  /**\n   * The default locale to use as a fallback.\n   */\n  defaultLocale?: LocalesValues;\n  /**\n   * Function to set the locale.\n   */\n  setLocale?: (locale: LocalesValues) => void;\n  /**\n   * Whether to disable the editor.\n   */\n  disableEditor?: boolean;\n  /**\n   * Whether to enable cookies for storing the locale.\n   */\n  isCookieEnabled?: boolean;\n}>;\n\n/**\n * Provider that stores the current locale on the client side.\n *\n * This component is focused on content delivery without the editor features.\n *\n * @param props - The provider props.\n * @returns The provider component.\n */\nexport const IntlayerProviderContent: FC<IntlayerProviderProps> = ({\n  locale: localeProp,\n  defaultLocale: defaultLocaleProp,\n  children,\n  setLocale: setLocaleProp,\n  disableEditor,\n  isCookieEnabled,\n}) => {\n  const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n    internationalization ?? {};\n\n  const initialLocale =\n    localeProp ?? localeInStorage ?? defaultLocaleProp ?? defaultLocaleConfig;\n\n  const [currentLocale, setCurrentLocale] =\n    useState<LocalesValues>(initialLocale);\n\n  // Sync the prop to state if the prop changes from the parent\n  useEffect(() => {\n    if (localeProp && localeProp !== currentLocale) {\n      setCurrentLocale(localeProp);\n    }\n  }, [localeProp]);\n\n  useEffect(() => {\n    setIntlayerIdentifier();\n  }, []);\n\n  const setLocaleBase = (newLocale: LocalesValues) => {\n    if (currentLocale.toString() === newLocale.toString()) return;\n\n    if (!availableLocales?.map(String).includes(newLocale)) {\n      console.error(`Locale ${newLocale} is not available`);\n      return;\n    }\n\n    setCurrentLocale(newLocale);\n    setLocaleInStorage(newLocale, isCookieEnabled);\n  };\n\n  const setLocale = setLocaleProp ?? setLocaleBase;\n\n  // Resolve based on currentLocale (the state), not the prop directly\n  const resolvedLocale = localeResolver(currentLocale);\n\n  return (\n    <IntlayerClientContext.Provider\n      value={{\n        locale: resolvedLocale,\n        setLocale,\n        disableEditor,\n      }}\n    >\n      {children}\n    </IntlayerClientContext.Provider>\n  );\n};\n\n/**\n * Main provider for Intlayer in React applications.\n *\n * It includes the editor provider by default, allowing for live content editing\n * if configured.\n *\n * @param props - The provider props.\n * @returns The provider component with editor support.\n *\n * @example\n * ```tsx\n * import { IntlayerProvider } from 'react-intlayer';\n *\n * const App = () => (\n *   <IntlayerProvider>\n *     <MyComponent />\n *   </IntlayerProvider>\n * );\n * ```\n */\nexport const IntlayerProvider: FC<IntlayerProviderProps> = ({\n  children,\n  ...props\n}) => (\n  <IntlayerProviderContent {...props}>\n    <EditorProvider />\n    {children}\n  </IntlayerProviderContent>\n);\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,cAA6B;CAChE,QAAQ,mBAAmB,sBAAsB;CACjD,iBAAiB;CACjB,iBAAiB;CAClB,CAAC;;;;;;AAOF,MAAa,2BAA2B,WAAW,sBAAsB,IAAI,EAAE;;;;;;;;;AAoC/E,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChD,wBAAwB,EAAE;CAK5B,MAAM,CAAC,eAAe,oBACpB,SAHA,cAAc,mBAAmB,qBAAqB,oBAGhB;AAGxC,iBAAgB;AACd,MAAI,cAAc,eAAe,cAC/B,kBAAiB,WAAW;IAE7B,CAAC,WAAW,CAAC;AAEhB,iBAAgB;AACd,yBAAuB;IACtB,EAAE,CAAC;CAEN,MAAM,iBAAiB,cAA6B;AAClD,MAAI,cAAc,UAAU,KAAK,UAAU,UAAU,CAAE;AAEvD,MAAI,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE;AACtD,WAAQ,MAAM,UAAU,UAAU,mBAAmB;AACrD;;AAGF,mBAAiB,UAAU;AAC3B,qBAAmB,WAAW,gBAAgB;;CAGhD,MAAM,YAAY,iBAAiB;CAGnC,MAAM,iBAAiB,eAAe,cAAc;AAEpD,QACE,oBAAC,sBAAsB,UAAvB;EACE,OAAO;GACL,QAAQ;GACR;GACA;GACD;EAEA;EAC8B;;;;;;;;;;;;;;;;;;;;;;AAwBrC,MAAa,oBAA+C,EAC1D,UACA,GAAG,YAEH,qBAAC,yBAAD;CAAyB,GAAI;WAA7B,CACE,oBAAC,gBAAD,EAAkB,GACjB,SACuB"}