remove window i18n and auto import instead

Author: vinceau

config/transformers/i18nMessagesTransformer.ts

@@ -138,12 +138,11 @@ export default function i18nMessagesTransformer(
   return (context: ts.TransformationContext) => {
     const f = context.factory;
 
-    // Build window.i18next.t("hash") call
+    // create i18next.t("hash") call
     const makeI18nextCall = (hashId: string): ts.CallExpression => {
-      const windowIdent = f.createIdentifier("window");
-      const i18nextAccess = f.createPropertyAccessExpression(windowIdent, "i18next");
-      const tAccess = f.createPropertyAccessExpression(i18nextAccess, "t");
-      return f.createCallExpression(tAccess, /*typeArgs*/ undefined, [f.createStringLiteral(hashId)]);
+      const i18nextIdent = f.createIdentifier("i18next");
+      const tAccess = f.createPropertyAccessExpression(i18nextIdent, "t");
+      return f.createCallExpression(tAccess, undefined, [f.createStringLiteral(hashId)]);
     };
 
     const visitNode: ts.Visitor = (node) => {
@@ -214,6 +213,37 @@ export default function i18nMessagesTransformer(
       return ts.visitEachChild(node, visitNode, context);
     };
 
-    return (sf: ts.SourceFile) => ts.visitNode(sf, visitNode);
+    // return (sf: ts.SourceFile) => ts.visitNode(sf, visitNode);
+    return (sf: ts.SourceFile) => {
+      // 1️⃣ Check if "import i18next from 'i18next'" already exists
+      const alreadyImported = sf.statements.some(
+        (stmt) =>
+          ts.isImportDeclaration(stmt) &&
+          stmt.moduleSpecifier &&
+          ts.isStringLiteral(stmt.moduleSpecifier) &&
+          stmt.moduleSpecifier.text === "i18next"
+      );
+
+      // 2️⃣ Visit and transform nodes as before
+      let updated = ts.visitNode(sf, visitNode);
+
+      // 3️⃣ If missing, prepend a new import
+      if (!alreadyImported) {
+        const importDecl = f.createImportDeclaration(
+          undefined,
+          undefined,
+          f.createImportClause(
+            false, // isTypeOnly
+            f.createIdentifier("i18next"), // default import name
+            undefined
+          ),
+          f.createStringLiteral("i18next")
+        );
+
+        updated = f.updateSourceFile(updated, [importDecl, ...updated.statements]);
+      }
+
+      return updated;
+    };
   };
 }

src/i18n/init.ts

@@ -4,8 +4,6 @@ import HttpApi from "i18next-http-backend";
 import { defaultLanguage } from "./store";
 
 export async function initializeTranslations(): Promise<void> {
-  (window as any).i18next = i18next;
-
   await i18next.use(HttpApi).init({
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",

src/i18n/store.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import i18next from "i18next";
 
 export type SupportedLanguages = "en" | "de";
 
@@ -16,11 +17,9 @@ export const useLanguageStore = create<LanguageState>()((set) => ({
 
 export class LanguagePresenter {
   public async setLanguage(language: SupportedLanguages): Promise<void> {
-    const i18next = (window as any).i18next;
     useLanguageStore.setState({ loading: true });
 
     try {
-      // await this.loadLanguage(language);
       await i18next.changeLanguage(language);
       useLanguageStore.setState({ language });
     } catch (err) {

src/views/MainView.tsx

@@ -61,7 +61,6 @@ export const MainView: React.FC = () => {
           <button onClick={() => languagePresenter.setLanguage("de")} disabled={languageIsLoading}>
             {languageIsLoading ? "loading..." : "use de"}
           </button>
-          <h1>{(window as any).i18next.t("something")}</h1>
           <Header
             css={css`
               cursor: pointer;