mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Valere
7485b3d71f
Element Call configured the global i18next singleton. When Element Call runs embedded in a host application rather than as its own page, that singleton belongs to the host, so configuring it would clobber the host's translations. Create Element Call's own instance in utils/i18n.ts, configure it in the initializer, and pass it to components via <I18nextProvider>. Drop .use(initReactI18next) from the initializer: it registers the instance as react-i18next's global default, which is the global we are trying to avoid. Tests and stories keep using it, so that they do not need to wrap every render in a provider. Two modules imported `t` directly from "i18next" and so were bound to the global instance: utils/errors.ts now calls i18n.t() on the instance (reached at call time, since i18next only assigns `t` during init), and QrCode uses useTranslation() like every other component. No functional change.
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import type { Preview } from "@storybook/react-vite";
|
|
import { TooltipProvider } from "@vector-im/compound-web";
|
|
import { logger } from "matrix-js-sdk/lib/logger";
|
|
|
|
import EN from "../locales/en/app.json";
|
|
import { initReactI18next } from "react-i18next";
|
|
import { i18n } from "../src/utils/i18n";
|
|
import "../src/index.css";
|
|
|
|
// Bare-minimum i18n config.
|
|
// Unlike the app, stories register the instance as react-i18next's default
|
|
// rather than wrapping every story in an <I18nextProvider>.
|
|
i18n
|
|
.use(initReactI18next)
|
|
.init({
|
|
lng: "en",
|
|
fallbackLng: "en",
|
|
supportedLngs: ["en"],
|
|
// We embed the translations, so that it never needs to fetch
|
|
resources: {
|
|
en: {
|
|
translation: EN,
|
|
},
|
|
},
|
|
interpolation: {
|
|
escapeValue: false, // React has built-in XSS protections
|
|
},
|
|
})
|
|
.catch((e) => logger.warn("Failed to init i18n for stories", e));
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
layout: "centered",
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
decorators: [
|
|
(Story) => (
|
|
<TooltipProvider>
|
|
<Story />
|
|
</TooltipProvider>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default preview;
|