@lingui/react
Version:
React bindings for Lingui with Trans components, providers, and compile-time macros
84 lines (79 loc) • 3.09 kB
JavaScript
'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 };