react-intlayer 9.5.12 → 9.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -37,11 +37,12 @@ const useIntlayerContext = () => (0, react.useContext)(IntlayerClientContext) ??
|
|
|
37
37
|
*/
|
|
38
38
|
const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLocaleProp, variant, children, setLocale: setLocaleProp, disableEditor, isCookieEnabled }) => {
|
|
39
39
|
const { locales: availableLocales, defaultLocale: defaultLocaleConfig } = _intlayer_config_built.internationalization ?? {};
|
|
40
|
+
const deferredLocaleProp = (0, react.useDeferredValue)(localeProp);
|
|
40
41
|
const [currentLocale, setCurrentLocale] = (0, react.useState)(() => localeProp ?? require_client_useLocaleStorage.getLocaleInStorage() ?? defaultLocaleProp ?? defaultLocaleConfig);
|
|
41
|
-
const [adoptedLocaleProp, setAdoptedLocaleProp] = (0, react.useState)(
|
|
42
|
-
if (
|
|
43
|
-
setAdoptedLocaleProp(
|
|
44
|
-
if (
|
|
42
|
+
const [adoptedLocaleProp, setAdoptedLocaleProp] = (0, react.useState)(deferredLocaleProp);
|
|
43
|
+
if (deferredLocaleProp !== adoptedLocaleProp) {
|
|
44
|
+
setAdoptedLocaleProp(deferredLocaleProp);
|
|
45
|
+
if (deferredLocaleProp && deferredLocaleProp !== currentLocale) setCurrentLocale(deferredLocaleProp);
|
|
45
46
|
}
|
|
46
47
|
(0, react.useEffect)(() => {
|
|
47
48
|
(0, _intlayer_config_client.setIntlayerIdentifier)();
|
|
@@ -59,7 +60,7 @@ const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLoc
|
|
|
59
60
|
availableLocales,
|
|
60
61
|
isCookieEnabled
|
|
61
62
|
]);
|
|
62
|
-
const setLocale = setLocaleProp ?? setLocaleBase;
|
|
63
|
+
const setLocale = (0, react.useCallback)((newLocale) => (0, react.startTransition)(() => (setLocaleProp ?? setLocaleBase)(newLocale)), [setLocaleProp, setLocaleBase]);
|
|
63
64
|
const resolvedLocale = (0, _intlayer_core_localization.localeResolver)(currentLocale);
|
|
64
65
|
const contextValue = (0, react.useMemo)(() => ({
|
|
65
66
|
locale: resolvedLocale,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlayerProvider.cjs","names":["createContext","getLocaleInStorage","internationalization","useContext","useState","useCallback","localeResolver","useMemo","EditorProvider","AnalyticsProvider"],"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 {\n LocalesValues,\n ProviderVariant,\n} from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AnalyticsProvider } from '../analytics/AnalyticsProvider';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { getLocaleInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n /**\n * Ambient variant applied to every dictionary read below the provider, the\n * same way `locale` is. Overridden per call by an explicit selector.\n */\n variant?: ProviderVariant;\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 // Read on demand: only a tree rendered without a provider needs it\n get locale() {\n return getLocaleInStorage() ?? internationalization?.defaultLocale;\n },\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 * Ambient variant applied to every dictionary read below this provider — for\n * a dimension that is fixed for the whole session (tenant, school type, plan\n * tier…) and that therefore no component should have to pass by hand.\n *\n * Accepts three forms:\n * - `variant=\"school1\"` — one named variant for every key\n * - `variant={['school1', 'default']}` — an ordered preference chain: the\n * first variant the key actually declares wins\n * - `variant={{ key1: 'school1', key2: ['school1', 'default'], default: 'base' }}`\n * — per dictionary key, with `default` covering every key not listed\n *\n * A plain object is always read as the per-key map. To pin a structured\n * variant globally, nest it: `variant={{ default: { id: 'prod_abc' } }}`.\n *\n * A call-site selector always wins: `useIntlayer('key', { variant: 'x' })`\n * replaces this default rather than extending it.\n */\n variant?: ProviderVariant;\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 variant,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n // Storage is only read when no locale is passed, and only on mount\n const [currentLocale, setCurrentLocale] = useState<LocalesValues>(\n () =>\n localeProp ??\n getLocaleInStorage() ??\n defaultLocaleProp ??\n defaultLocaleConfig\n );\n const [adoptedLocaleProp, setAdoptedLocaleProp]
|
|
1
|
+
{"version":3,"file":"IntlayerProvider.cjs","names":["createContext","getLocaleInStorage","internationalization","useContext","useDeferredValue","useState","useCallback","startTransition","localeResolver","useMemo","EditorProvider","AnalyticsProvider"],"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 {\n LocalesValues,\n ProviderVariant,\n} from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n startTransition,\n useCallback,\n useContext,\n useDeferredValue,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AnalyticsProvider } from '../analytics/AnalyticsProvider';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { getLocaleInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n /**\n * Ambient variant applied to every dictionary read below the provider, the\n * same way `locale` is. Overridden per call by an explicit selector.\n */\n variant?: ProviderVariant;\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 // Read on demand: only a tree rendered without a provider needs it\n get locale() {\n return getLocaleInStorage() ?? internationalization?.defaultLocale;\n },\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 * Ambient variant applied to every dictionary read below this provider — for\n * a dimension that is fixed for the whole session (tenant, school type, plan\n * tier…) and that therefore no component should have to pass by hand.\n *\n * Accepts three forms:\n * - `variant=\"school1\"` — one named variant for every key\n * - `variant={['school1', 'default']}` — an ordered preference chain: the\n * first variant the key actually declares wins\n * - `variant={{ key1: 'school1', key2: ['school1', 'default'], default: 'base' }}`\n * — per dictionary key, with `default` covering every key not listed\n *\n * A plain object is always read as the per-key map. To pin a structured\n * variant globally, nest it: `variant={{ default: { id: 'prod_abc' } }}`.\n *\n * A call-site selector always wins: `useIntlayer('key', { variant: 'x' })`\n * replaces this default rather than extending it.\n */\n variant?: ProviderVariant;\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 variant,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n // A router usually changes the prop through a sync update, which would\n // suspend on the new locale's dynamic dictionaries and hide the page behind\n // the Suspense fallback. Deferred, the new locale renders in the background\n // and the current UI stays until it is ready.\n const deferredLocaleProp = useDeferredValue(localeProp);\n\n // Storage is only read when no locale is passed, and only on mount\n const [currentLocale, setCurrentLocale] = useState<LocalesValues>(\n () =>\n localeProp ??\n getLocaleInStorage() ??\n defaultLocaleProp ??\n defaultLocaleConfig\n );\n const [adoptedLocaleProp, setAdoptedLocaleProp] =\n useState(deferredLocaleProp);\n\n // Adopt a new `locale` prop during render rather than in an effect: an\n // effect commits the whole subtree once with the stale locale, then renders\n // it again with the new one.\n if (deferredLocaleProp !== adoptedLocaleProp) {\n setAdoptedLocaleProp(deferredLocaleProp);\n\n if (deferredLocaleProp && deferredLocaleProp !== currentLocale) {\n setCurrentLocale(deferredLocaleProp);\n }\n }\n\n useEffect(() => {\n setIntlayerIdentifier();\n }, []);\n\n const setLocaleBase = useCallback(\n (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 [currentLocale, availableLocales, isCookieEnabled]\n );\n\n const setLocale = useCallback(\n (newLocale: LocalesValues) =>\n startTransition(() => (setLocaleProp ?? setLocaleBase)(newLocale)),\n [setLocaleProp, setLocaleBase]\n );\n\n // Resolve based on currentLocale (the state), not the prop directly\n const resolvedLocale = localeResolver(currentLocale);\n\n // Stable value so a parent re-render does not re-render every consumer\n const contextValue = useMemo<IntlayerValue>(\n () => ({\n locale: resolvedLocale,\n setLocale,\n variant,\n disableEditor,\n }),\n [resolvedLocale, setLocale, variant, disableEditor]\n );\n\n return (\n <IntlayerClientContext.Provider value={contextValue}>\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 {/* Build flags drop these, and their modules, when the feature is off */}\n {process.env.INTLAYER_EDITOR_ENABLED !== 'false' && <EditorProvider />}\n {process.env.INTLAYER_ANALYTICS_ENABLED !== 'false' && (\n <AnalyticsProvider />\n )}\n {children}\n </IntlayerProviderContent>\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAwCA,MAAa,4BAAwBA,qBAA6B;CAEhE,IAAI,SAAS;EACX,OAAOC,mDAAmB,KAAKC,6CAAsB;CACvD;CACA,iBAAiB;CACjB,iBAAiB;AACnB,CAAC;;;;;;AAOD,MAAa,+BAA2BC,kBAAW,qBAAqB,KAAK,CAAC;;;;;;;;;AAuD9E,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,SACA,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChDD,+CAAwB,CAAC;CAM3B,MAAM,yBAAqBE,wBAAiB,UAAU;CAGtD,MAAM,CAAC,eAAe,wBAAoBC,sBAEtC,cACAJ,mDAAmB,KACnB,qBACA,mBACJ;CACA,MAAM,CAAC,mBAAmB,4BACxBI,gBAAS,kBAAkB;CAK7B,IAAI,uBAAuB,mBAAmB;EAC5C,qBAAqB,kBAAkB;EAEvC,IAAI,sBAAsB,uBAAuB,eAC/C,iBAAiB,kBAAkB;CAEvC;CAEA,2BAAgB;EACd,mDAAsB;CACxB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAgBC,oBACnB,cAA6B;EAC5B,IAAI,cAAc,SAAS,MAAM,UAAU,SAAS,GAAG;EAEvD,IAAI,CAAC,kBAAkB,IAAI,MAAM,CAAC,CAAC,SAAS,SAAS,GAAG;GACtD,QAAQ,MAAM,UAAU,UAAU,kBAAkB;GACpD;EACF;EAEA,iBAAiB,SAAS;EAC1B,mDAAmB,WAAW,eAAe;CAC/C,GACA;EAAC;EAAe;EAAkB;CAAe,CACnD;CAEA,MAAM,gBAAYA,oBACf,kBACCC,8BAAuB,iBAAiB,cAAa,CAAE,SAAS,CAAC,GACnE,CAAC,eAAe,aAAa,CAC/B;CAGA,MAAM,qBAAiBC,4CAAe,aAAa;CAGnD,MAAM,mBAAeC,sBACZ;EACL,QAAQ;EACR;EACA;EACA;CACF,IACA;EAAC;EAAgB;EAAW;EAAS;CAAa,CACpD;CAEA,OACE,2CAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACpC;CAC6B;AAEpC;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,oBAA+C,EAC1D,UACA,GAAG,YAEH,4CAAC,yBAAD;CAAyB,GAAI;WAA7B;EAEG,QAAQ,IAAI,4BAA4B,WAAW,2CAACC,8CAAD,CAAiB;EACpE,QAAQ,IAAI,+BAA+B,WAC1C,2CAACC,uDAAD,CAAoB;EAErB;CACsB"}
|
|
@@ -4,7 +4,7 @@ import { EditorProvider } from "../editor/EditorProvider.mjs";
|
|
|
4
4
|
import { getLocaleInStorage, setLocaleInStorage } from "./useLocaleStorage.mjs";
|
|
5
5
|
import { AnalyticsProvider } from "../analytics/AnalyticsProvider.mjs";
|
|
6
6
|
import { internationalization } from "@intlayer/config/built";
|
|
7
|
-
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
7
|
+
import { createContext, startTransition, useCallback, useContext, useDeferredValue, useEffect, useMemo, useState } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { setIntlayerIdentifier } from "@intlayer/config/client";
|
|
10
10
|
import { localeResolver } from "@intlayer/core/localization";
|
|
@@ -36,11 +36,12 @@ const useIntlayerContext = () => useContext(IntlayerClientContext) ?? {};
|
|
|
36
36
|
*/
|
|
37
37
|
const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLocaleProp, variant, children, setLocale: setLocaleProp, disableEditor, isCookieEnabled }) => {
|
|
38
38
|
const { locales: availableLocales, defaultLocale: defaultLocaleConfig } = internationalization ?? {};
|
|
39
|
+
const deferredLocaleProp = useDeferredValue(localeProp);
|
|
39
40
|
const [currentLocale, setCurrentLocale] = useState(() => localeProp ?? getLocaleInStorage() ?? defaultLocaleProp ?? defaultLocaleConfig);
|
|
40
|
-
const [adoptedLocaleProp, setAdoptedLocaleProp] = useState(
|
|
41
|
-
if (
|
|
42
|
-
setAdoptedLocaleProp(
|
|
43
|
-
if (
|
|
41
|
+
const [adoptedLocaleProp, setAdoptedLocaleProp] = useState(deferredLocaleProp);
|
|
42
|
+
if (deferredLocaleProp !== adoptedLocaleProp) {
|
|
43
|
+
setAdoptedLocaleProp(deferredLocaleProp);
|
|
44
|
+
if (deferredLocaleProp && deferredLocaleProp !== currentLocale) setCurrentLocale(deferredLocaleProp);
|
|
44
45
|
}
|
|
45
46
|
useEffect(() => {
|
|
46
47
|
setIntlayerIdentifier();
|
|
@@ -58,7 +59,7 @@ const IntlayerProviderContent = ({ locale: localeProp, defaultLocale: defaultLoc
|
|
|
58
59
|
availableLocales,
|
|
59
60
|
isCookieEnabled
|
|
60
61
|
]);
|
|
61
|
-
const setLocale = setLocaleProp ?? setLocaleBase;
|
|
62
|
+
const setLocale = useCallback((newLocale) => startTransition(() => (setLocaleProp ?? setLocaleBase)(newLocale)), [setLocaleProp, setLocaleBase]);
|
|
62
63
|
const resolvedLocale = localeResolver(currentLocale);
|
|
63
64
|
const contextValue = useMemo(() => ({
|
|
64
65
|
locale: resolvedLocale,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 {\n LocalesValues,\n ProviderVariant,\n} from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AnalyticsProvider } from '../analytics/AnalyticsProvider';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { getLocaleInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n /**\n * Ambient variant applied to every dictionary read below the provider, the\n * same way `locale` is. Overridden per call by an explicit selector.\n */\n variant?: ProviderVariant;\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 // Read on demand: only a tree rendered without a provider needs it\n get locale() {\n return getLocaleInStorage() ?? internationalization?.defaultLocale;\n },\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 * Ambient variant applied to every dictionary read below this provider — for\n * a dimension that is fixed for the whole session (tenant, school type, plan\n * tier…) and that therefore no component should have to pass by hand.\n *\n * Accepts three forms:\n * - `variant=\"school1\"` — one named variant for every key\n * - `variant={['school1', 'default']}` — an ordered preference chain: the\n * first variant the key actually declares wins\n * - `variant={{ key1: 'school1', key2: ['school1', 'default'], default: 'base' }}`\n * — per dictionary key, with `default` covering every key not listed\n *\n * A plain object is always read as the per-key map. To pin a structured\n * variant globally, nest it: `variant={{ default: { id: 'prod_abc' } }}`.\n *\n * A call-site selector always wins: `useIntlayer('key', { variant: 'x' })`\n * replaces this default rather than extending it.\n */\n variant?: ProviderVariant;\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 variant,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n // Storage is only read when no locale is passed, and only on mount\n const [currentLocale, setCurrentLocale] = useState<LocalesValues>(\n () =>\n localeProp ??\n getLocaleInStorage() ??\n defaultLocaleProp ??\n defaultLocaleConfig\n );\n const [adoptedLocaleProp, setAdoptedLocaleProp]
|
|
1
|
+
{"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 {\n LocalesValues,\n ProviderVariant,\n} from '@intlayer/types/module_augmentation';\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n startTransition,\n useCallback,\n useContext,\n useDeferredValue,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { AnalyticsProvider } from '../analytics/AnalyticsProvider';\nimport { EditorProvider } from '../editor/EditorProvider';\nimport { getLocaleInStorage, setLocaleInStorage } from './useLocaleStorage';\n\ntype IntlayerValue = {\n locale: LocalesValues;\n setLocale: (newLocale: LocalesValues) => void;\n /**\n * Ambient variant applied to every dictionary read below the provider, the\n * same way `locale` is. Overridden per call by an explicit selector.\n */\n variant?: ProviderVariant;\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 // Read on demand: only a tree rendered without a provider needs it\n get locale() {\n return getLocaleInStorage() ?? internationalization?.defaultLocale;\n },\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 * Ambient variant applied to every dictionary read below this provider — for\n * a dimension that is fixed for the whole session (tenant, school type, plan\n * tier…) and that therefore no component should have to pass by hand.\n *\n * Accepts three forms:\n * - `variant=\"school1\"` — one named variant for every key\n * - `variant={['school1', 'default']}` — an ordered preference chain: the\n * first variant the key actually declares wins\n * - `variant={{ key1: 'school1', key2: ['school1', 'default'], default: 'base' }}`\n * — per dictionary key, with `default` covering every key not listed\n *\n * A plain object is always read as the per-key map. To pin a structured\n * variant globally, nest it: `variant={{ default: { id: 'prod_abc' } }}`.\n *\n * A call-site selector always wins: `useIntlayer('key', { variant: 'x' })`\n * replaces this default rather than extending it.\n */\n variant?: ProviderVariant;\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 variant,\n children,\n setLocale: setLocaleProp,\n disableEditor,\n isCookieEnabled,\n}) => {\n const { locales: availableLocales, defaultLocale: defaultLocaleConfig } =\n internationalization ?? {};\n\n // A router usually changes the prop through a sync update, which would\n // suspend on the new locale's dynamic dictionaries and hide the page behind\n // the Suspense fallback. Deferred, the new locale renders in the background\n // and the current UI stays until it is ready.\n const deferredLocaleProp = useDeferredValue(localeProp);\n\n // Storage is only read when no locale is passed, and only on mount\n const [currentLocale, setCurrentLocale] = useState<LocalesValues>(\n () =>\n localeProp ??\n getLocaleInStorage() ??\n defaultLocaleProp ??\n defaultLocaleConfig\n );\n const [adoptedLocaleProp, setAdoptedLocaleProp] =\n useState(deferredLocaleProp);\n\n // Adopt a new `locale` prop during render rather than in an effect: an\n // effect commits the whole subtree once with the stale locale, then renders\n // it again with the new one.\n if (deferredLocaleProp !== adoptedLocaleProp) {\n setAdoptedLocaleProp(deferredLocaleProp);\n\n if (deferredLocaleProp && deferredLocaleProp !== currentLocale) {\n setCurrentLocale(deferredLocaleProp);\n }\n }\n\n useEffect(() => {\n setIntlayerIdentifier();\n }, []);\n\n const setLocaleBase = useCallback(\n (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 [currentLocale, availableLocales, isCookieEnabled]\n );\n\n const setLocale = useCallback(\n (newLocale: LocalesValues) =>\n startTransition(() => (setLocaleProp ?? setLocaleBase)(newLocale)),\n [setLocaleProp, setLocaleBase]\n );\n\n // Resolve based on currentLocale (the state), not the prop directly\n const resolvedLocale = localeResolver(currentLocale);\n\n // Stable value so a parent re-render does not re-render every consumer\n const contextValue = useMemo<IntlayerValue>(\n () => ({\n locale: resolvedLocale,\n setLocale,\n variant,\n disableEditor,\n }),\n [resolvedLocale, setLocale, variant, disableEditor]\n );\n\n return (\n <IntlayerClientContext.Provider value={contextValue}>\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 {/* Build flags drop these, and their modules, when the feature is off */}\n {process.env.INTLAYER_EDITOR_ENABLED !== 'false' && <EditorProvider />}\n {process.env.INTLAYER_ANALYTICS_ENABLED !== 'false' && (\n <AnalyticsProvider />\n )}\n {children}\n </IntlayerProviderContent>\n);\n"],"mappings":";;;;;;;;;;;;;;;AAwCA,MAAa,wBAAwB,cAA6B;CAEhE,IAAI,SAAS;EACX,OAAO,mBAAmB,KAAK,sBAAsB;CACvD;CACA,iBAAiB;CACjB,iBAAiB;AACnB,CAAC;;;;;;AAOD,MAAa,2BAA2B,WAAW,qBAAqB,KAAK,CAAC;;;;;;;;;AAuD9E,MAAa,2BAAsD,EACjE,QAAQ,YACR,eAAe,mBACf,SACA,UACA,WAAW,eACX,eACA,sBACI;CACJ,MAAM,EAAE,SAAS,kBAAkB,eAAe,wBAChD,wBAAwB,CAAC;CAM3B,MAAM,qBAAqB,iBAAiB,UAAU;CAGtD,MAAM,CAAC,eAAe,oBAAoB,eAEtC,cACA,mBAAmB,KACnB,qBACA,mBACJ;CACA,MAAM,CAAC,mBAAmB,wBACxB,SAAS,kBAAkB;CAK7B,IAAI,uBAAuB,mBAAmB;EAC5C,qBAAqB,kBAAkB;EAEvC,IAAI,sBAAsB,uBAAuB,eAC/C,iBAAiB,kBAAkB;CAEvC;CAEA,gBAAgB;EACd,sBAAsB;CACxB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,aACnB,cAA6B;EAC5B,IAAI,cAAc,SAAS,MAAM,UAAU,SAAS,GAAG;EAEvD,IAAI,CAAC,kBAAkB,IAAI,MAAM,CAAC,CAAC,SAAS,SAAS,GAAG;GACtD,QAAQ,MAAM,UAAU,UAAU,kBAAkB;GACpD;EACF;EAEA,iBAAiB,SAAS;EAC1B,mBAAmB,WAAW,eAAe;CAC/C,GACA;EAAC;EAAe;EAAkB;CAAe,CACnD;CAEA,MAAM,YAAY,aACf,cACC,uBAAuB,iBAAiB,cAAa,CAAE,SAAS,CAAC,GACnE,CAAC,eAAe,aAAa,CAC/B;CAGA,MAAM,iBAAiB,eAAe,aAAa;CAGnD,MAAM,eAAe,eACZ;EACL,QAAQ;EACR;EACA;EACA;CACF,IACA;EAAC;EAAgB;EAAW;EAAS;CAAa,CACpD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACpC;CAC6B;AAEpC;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,oBAA+C,EAC1D,UACA,GAAG,YAEH,qBAAC,yBAAD;CAAyB,GAAI;WAA7B;EAEG,QAAQ,IAAI,4BAA4B,WAAW,oBAAC,gBAAD,CAAiB;EACpE,QAAQ,IAAI,+BAA+B,WAC1C,oBAAC,mBAAD,CAAoB;EAErB;CACsB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlayerProvider.d.ts","names":[],"sources":["../../../src/client/IntlayerProvider.tsx"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"IntlayerProvider.d.ts","names":[],"sources":["../../../src/client/IntlayerProvider.tsx"],"mappings":";;;KAyBK;EACH,QAAQ;EACR,YAAY,WAAW;;;;;EAKvB,UAAU;EACV;EACA;;;;;qBAMW,uCAAqB,QAAA;;;;;;qBAcrB;;;;YAKD,wBAAwB;;;;EAIlC,SAAS;;;;;;;;;;;;;;;;;;;EAmBT,UAAU;;;;EAIV,gBAAgB;;;;EAIhB,aAAa,QAAQ;;;;EAIrB;;;;EAIA;;;;;;;;;;qBAWW,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;qBA0G5B,kBAAkB,GAAG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-intlayer",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Easily internationalize i18n your React applications with type-safe multilingual content management.",
|
|
6
6
|
"keywords": [
|
|
@@ -133,12 +133,12 @@
|
|
|
133
133
|
"typecheck": "tsc --noEmit --project tsconfig.types.json"
|
|
134
134
|
},
|
|
135
135
|
"dependencies": {
|
|
136
|
-
"@intlayer/api": "9.
|
|
137
|
-
"@intlayer/config": "9.
|
|
138
|
-
"@intlayer/core": "9.
|
|
139
|
-
"@intlayer/dictionaries-entry": "9.
|
|
140
|
-
"@intlayer/editor": "9.
|
|
141
|
-
"@intlayer/types": "9.
|
|
136
|
+
"@intlayer/api": "9.6.0",
|
|
137
|
+
"@intlayer/config": "9.6.0",
|
|
138
|
+
"@intlayer/core": "9.6.0",
|
|
139
|
+
"@intlayer/dictionaries-entry": "9.6.0",
|
|
140
|
+
"@intlayer/editor": "9.6.0",
|
|
141
|
+
"@intlayer/types": "9.6.0"
|
|
142
142
|
},
|
|
143
143
|
"devDependencies": {
|
|
144
144
|
"@craco/types": "7.1.0",
|
|
@@ -152,14 +152,14 @@
|
|
|
152
152
|
"rimraf": "6.1.3",
|
|
153
153
|
"tsdown": "0.23.0",
|
|
154
154
|
"typescript": "7.0.2",
|
|
155
|
-
"vitest": "5.0.
|
|
155
|
+
"vitest": "5.0.3"
|
|
156
156
|
},
|
|
157
157
|
"peerDependencies": {
|
|
158
158
|
"react": ">=16.0.0",
|
|
159
159
|
"react-dom": ">=16.0.0"
|
|
160
160
|
},
|
|
161
161
|
"optionalDependencies": {
|
|
162
|
-
"@intlayer/analytics": "9.
|
|
162
|
+
"@intlayer/analytics": "9.6.0"
|
|
163
163
|
},
|
|
164
164
|
"engines": {
|
|
165
165
|
"node": ">=14.18"
|