UNPKG

@lingui/react

Version:

React bindings for Lingui with Trans components, providers, and compile-time macros

84 lines (79 loc) 3.09 kB
'use client'; import { jsx } from 'react/jsx-runtime'; import { createContext, useMemo, useContext } from 'react'; import { useSyncExternalStore } from 'use-sync-external-store/shim'; import { T as TransNoContext } from './shared/react.DZONiYSA.mjs'; const LinguiContext = createContext(null); const useLinguiInternal = (devErrorMessage) => { const context = useContext(LinguiContext); if (process.env.NODE_ENV !== "production") { if (context == null) { throw new Error( devErrorMessage ?? "useLingui hook was used without I18nProvider.\n\nThis often happens when multiple instances of @lingui/react are installed (e.g. due to a version mismatch or misconfiguration in a monorepo). Verify you have only one version installed by running: npm ls @lingui/react (or pnpm why @lingui/react / yarn why @lingui/react)." ); } } return context; }; function useLingui() { return useLinguiInternal(); } const getI18nContext = (i18n, defaultComponent) => ({ i18n: new Proxy(i18n, {}), defaultComponent, _: i18n.t.bind(i18n) }); const createI18nStore = (i18n, defaultComponent) => { let latestLocale = i18n.locale; let context = getI18nContext(i18n, defaultComponent); const updateContext = () => { latestLocale = i18n.locale; context = getI18nContext(i18n, defaultComponent); }; const getSnapshot = () => { if (latestLocale !== i18n.locale) { updateContext(); } return context; }; const subscribe = (onStoreChange) => i18n.on("change", () => { updateContext(); onStoreChange(); }); return { getSnapshot, subscribe }; }; const I18nProvider = ({ i18n, defaultComponent, children }) => { const store = useMemo( () => createI18nStore(i18n, defaultComponent), [i18n, defaultComponent] ); const context = useSyncExternalStore( store.subscribe, store.getSnapshot, store.getSnapshot ); if (!context.i18n.locale) { process.env.NODE_ENV === "development" && console.log( "I18nProvider rendered `null`. A call to `i18n.activate` needs to happen in order for translations to be activated and for the I18nProvider to render.This is not an error but an informational message logged only in development." ); return null; } return /* @__PURE__ */ jsx(LinguiContext.Provider, { value: context, children }); }; function Trans(props) { let errMessage = void 0; if (process.env.NODE_ENV !== "production") { errMessage = `Trans component was rendered without I18nProvider. Attempted to render message: ${props.message} id: ${props.id}. Make sure this component is rendered inside a I18nProvider. This often happens when multiple instances of @lingui/react are installed (e.g. due to a version mismatch or misconfiguration in a monorepo). Verify you have only one version installed by running: npm ls @lingui/react (or pnpm why @lingui/react / yarn why @lingui/react).`; } const lingui = useLinguiInternal(errMessage); return /* @__PURE__ */ jsx(TransNoContext, { ...props, lingui }); } export { I18nProvider, LinguiContext, Trans, useLingui };