@backstage/core-app-api 1.10.0-next.3 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/core-app-api
 
+## 1.10.0
+
+### Minor Changes
+
+- 18619f793c94: Fixed two bugs in how the `OAuth2Session` type represents the underlying data. The `expiresAt` and `backstageIdentity` are now both optional, since that's what they are in practice. This is not considered a breaking change since it was effectively a bug in the modelling of the state that this type represents, and the type was not used in any other external contract.
+- 18619f793c94: The `OAuth` class which is used by all OAuth providers will now consider both the session expiration of both the Backstage identity as well as the upstream identity provider, and refresh the session with either of them is about to expire.
+- 6e30769cc627: Introduced experimental support for internationalization.
+
+### Patch Changes
+
+- 406b786a2a2c: Mark package as being free of side effects, allowing more optimized Webpack builds.
+- 9fe827b380e1: Internal refactor
+- 8cec7664e146: Removed `@types/node` dependency
+- Updated dependencies
+  - @backstage/config@1.1.0
+  - @backstage/core-plugin-api@1.6.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.5
+
 ## 1.10.0-next.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -6,7 +6,6 @@ import * as _backstage_types from '@backstage/types';
 import { Observable, JsonValue } from '@backstage/types';
 import { Config, AppConfig } from '@backstage/config';
 export { ConfigReader } from '@backstage/config';
-import { TranslationRef } from '@backstage/core-plugin-api/alpha';
 
 /**
  * Prop types for the ApiProvider component.
@@ -803,13 +802,6 @@ type TargetRouteMap<ExternalRoutes extends {
 type AppRouteBinder = <ExternalRoutes extends {
     [name: string]: ExternalRouteRef;
 }>(externalRoutes: ExternalRoutes, targetRoutes: PartialKeys<TargetRouteMap<ExternalRoutes>, KeysWithType<ExternalRoutes, ExternalRouteRef<any, true>>>) => void;
-/**
- * TODO: To be remove when TranslationMessages in packages/core-app-api/src/app/TranslationResource.ts
- * come to be public
- *
- * @ignore
- * */
-type TranslationMessages<T> = T extends TranslationRef<infer R> ? Partial<R> : never;
 /**
  * The options accepted by {@link createSpecializedApp}.
  *
@@ -908,19 +900,17 @@ type AppOptions = {
     bindRoutes?(context: {
         bind: AppRouteBinder;
     }): void;
-    /**
-     * TODO: Change to ExperimentalI18n type when packages/core-app-api/src/apis/implementations/AppTranslationApi/AppTranslationImpl.ts
-     * become to public
-     */
-    __experimentalI18n?: {
-        supportedLanguages: string[];
-        fallbackLanguage?: string | string[];
-        messages?: Array<{
-            ref: TranslationRef;
-            messages?: Record<string, TranslationMessages<TranslationRef>>;
-            lazyMessages: Record<string, () => Promise<{
-                messages: TranslationMessages<TranslationRef>;
-            }>>;
+    __experimentalTranslations?: {
+        defaultLanguage?: string;
+        availableLanguages?: string[];
+        resources?: Array<{
+            $$type: '@backstage/TranslationResource';
+            id: string;
+        } | {
+            $$type: '@backstage/TranslationMessages';
+            id: string;
+            full: boolean;
+            messages: Record<string, string>;
         }>;
     };
 };

package/dist/index.esm.js

@@ -8,12 +8,9 @@ import { ConfigReader } from '@backstage/config';
 export { ConfigReader } from '@backstage/config';
 import { createRoutesFromChildren, Route, useLocation, matchRoutes, Routes, generatePath, useRoutes } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
-import { appTranslationApiRef } from '@backstage/core-plugin-api/alpha';
+import { appLanguageApiRef, translationApiRef } from '@backstage/core-plugin-api/alpha';
 import useObservable from 'react-use/lib/useObservable';
-import { I18nextProvider } from 'react-i18next';
-import { A as AppTranslationApiImpl } from './esm/AppTranslationImpl-8a2e981b.esm.js';
-import 'i18next';
-import 'i18next-browser-languagedetector';
+import { createInstance } from 'i18next';
 
 var __defProp$l = Object.defineProperty;
 var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1562,7 +1559,7 @@ var __publicField$8 = (obj, key, value) => {
   __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-const STORAGE_KEY = "theme";
+const STORAGE_KEY$1 = "theme";
 class AppThemeSelector {
   constructor(themes) {
     this.themes = themes;
@@ -1575,19 +1572,19 @@ class AppThemeSelector {
     if (!window.localStorage) {
       return selector;
     }
-    const initialThemeId = (_a = window.localStorage.getItem(STORAGE_KEY)) != null ? _a : void 0;
+    const initialThemeId = (_a = window.localStorage.getItem(STORAGE_KEY$1)) != null ? _a : void 0;
     selector.setActiveThemeId(initialThemeId);
     selector.activeThemeId$().subscribe((themeId) => {
       if (themeId) {
-        window.localStorage.setItem(STORAGE_KEY, themeId);
+        window.localStorage.setItem(STORAGE_KEY$1, themeId);
       } else {
-        window.localStorage.removeItem(STORAGE_KEY);
+        window.localStorage.removeItem(STORAGE_KEY$1);
       }
     });
     window.addEventListener("storage", (event) => {
       var _a2;
-      if (event.key === STORAGE_KEY) {
-        const themeId = (_a2 = localStorage.getItem(STORAGE_KEY)) != null ? _a2 : void 0;
+      if (event.key === STORAGE_KEY$1) {
+        const themeId = (_a2 = localStorage.getItem(STORAGE_KEY$1)) != null ? _a2 : void 0;
         selector.setActiveThemeId(themeId);
       }
     });
@@ -3185,11 +3182,407 @@ function resolveRouteBindings(bindRoutes) {
   return result;
 }
 
-function AppTranslationProvider({ children }) {
-  const appTranslationAPi = useApi(appTranslationApiRef);
-  const i18n = appTranslationAPi.getI18n();
-  return /* @__PURE__ */ React.createElement(I18nextProvider, { i18n }, children);
+var __accessCheck$2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$2 = (obj, member, value, setter) => {
+  __accessCheck$2(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _languages, _language$1, _subject;
+const STORAGE_KEY = "language";
+const DEFAULT_LANGUAGE = "en";
+const _AppLanguageSelector = class _AppLanguageSelector {
+  constructor(languages, initialLanguage) {
+    __privateAdd$2(this, _languages, void 0);
+    __privateAdd$2(this, _language$1, void 0);
+    __privateAdd$2(this, _subject, void 0);
+    __privateSet$2(this, _languages, languages);
+    __privateSet$2(this, _language$1, initialLanguage);
+    __privateSet$2(this, _subject, new BehaviorSubject({
+      language: __privateGet$2(this, _language$1)
+    }));
+  }
+  static create(options) {
+    var _a, _b;
+    const languages = (_a = options == null ? void 0 : options.availableLanguages) != null ? _a : [DEFAULT_LANGUAGE];
+    if (languages.length !== new Set(languages).size) {
+      throw new Error(
+        `Supported languages may not contain duplicates, got '${languages.join(
+          "', '"
+        )}'`
+      );
+    }
+    if (!languages.includes(DEFAULT_LANGUAGE)) {
+      throw new Error(`Supported languages must include '${DEFAULT_LANGUAGE}'`);
+    }
+    const initialLanguage = (_b = options == null ? void 0 : options.defaultLanguage) != null ? _b : DEFAULT_LANGUAGE;
+    if (!languages.includes(initialLanguage)) {
+      throw new Error(
+        `Initial language must be one of the supported languages, got '${initialLanguage}'`
+      );
+    }
+    return new _AppLanguageSelector(languages, initialLanguage);
+  }
+  static createWithStorage(options) {
+    const selector = _AppLanguageSelector.create(options);
+    if (!window.localStorage) {
+      return selector;
+    }
+    const storedLanguage = window.localStorage.getItem(STORAGE_KEY);
+    const { languages } = selector.getAvailableLanguages();
+    if (storedLanguage && languages.includes(storedLanguage)) {
+      selector.setLanguage(storedLanguage);
+    }
+    selector.language$().subscribe(({ language }) => {
+      if (language !== window.localStorage.getItem(STORAGE_KEY)) {
+        window.localStorage.setItem(STORAGE_KEY, language);
+      }
+    });
+    window.addEventListener("storage", (event) => {
+      var _a;
+      if (event.key === STORAGE_KEY) {
+        const language = (_a = localStorage.getItem(STORAGE_KEY)) != null ? _a : void 0;
+        if (language) {
+          selector.setLanguage(language);
+        }
+      }
+    });
+    return selector;
+  }
+  getAvailableLanguages() {
+    return { languages: __privateGet$2(this, _languages).slice() };
+  }
+  setLanguage(language) {
+    const lng = language != null ? language : DEFAULT_LANGUAGE;
+    if (lng === __privateGet$2(this, _language$1)) {
+      return;
+    }
+    if (lng && !__privateGet$2(this, _languages).includes(lng)) {
+      throw new Error(
+        `Failed to change language to '${lng}', available languages are '${__privateGet$2(this, _languages).join(
+          "', '"
+        )}'`
+      );
+    }
+    __privateSet$2(this, _language$1, lng);
+    __privateGet$2(this, _subject).next({ language: lng });
+  }
+  getLanguage() {
+    return { language: __privateGet$2(this, _language$1) };
+  }
+  language$() {
+    return __privateGet$2(this, _subject);
+  }
+};
+_languages = new WeakMap();
+_language$1 = new WeakMap();
+_subject = new WeakMap();
+let AppLanguageSelector = _AppLanguageSelector;
+
+function toInternalTranslationResource(resource) {
+  const r = resource;
+  if (r.$$type !== "@backstage/TranslationResource") {
+    throw new Error(`Invalid translation resource, bad type '${r.$$type}'`);
+  }
+  if (r.version !== "v1") {
+    throw new Error(`Invalid translation resource, bad version '${r.version}'`);
+  }
+  return r;
+}
+
+function toInternalTranslationRef(ref) {
+  const r = ref;
+  if (r.$$type !== "@backstage/TranslationRef") {
+    throw new Error(`Invalid translation ref, bad type '${r.$$type}'`);
+  }
+  if (r.version !== "v1") {
+    throw new Error(`Invalid translation ref, bad version '${r.version}'`);
+  }
+  return r;
+}
+
+var __accessCheck$1 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$1 = (obj, member, getter) => {
+  __accessCheck$1(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$1 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$1 = (obj, member, value, setter) => {
+  __accessCheck$1(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck$1(obj, member, "access private method");
+  return method;
+};
+var _loaded, _loading, _loaders, _getLoaderKey, getLoaderKey_fn, _i18n, _loader, _language, _registeredRefs, _languageChangeListeners, _changeLanguage, changeLanguage_fn, _createSnapshot, createSnapshot_fn, _registerDefaults, registerDefaults_fn;
+function removeNulls(messages) {
+  return Object.fromEntries(
+    Object.entries(messages).filter(
+      (e) => e[1] !== null
+    )
+  );
 }
+class ResourceLoader {
+  constructor(onLoad) {
+    this.onLoad = onLoad;
+    __privateAdd$1(this, _getLoaderKey);
+    /** Loaded resources by loader key */
+    __privateAdd$1(this, _loaded, /* @__PURE__ */ new Set());
+    /** Resource loading promises by loader key */
+    __privateAdd$1(this, _loading, /* @__PURE__ */ new Map());
+    /** Loaders for each resource language */
+    __privateAdd$1(this, _loaders, /* @__PURE__ */ new Map());
+  }
+  addTranslationResource(resource) {
+    const internalResource = toInternalTranslationResource(resource);
+    for (const entry of internalResource.resources) {
+      const key = __privateMethod(this, _getLoaderKey, getLoaderKey_fn).call(this, entry.language, internalResource.id);
+      if (!__privateGet$1(this, _loaders).has(key)) {
+        __privateGet$1(this, _loaders).set(key, entry.loader);
+      }
+    }
+  }
+  needsLoading(language, namespace) {
+    const key = __privateMethod(this, _getLoaderKey, getLoaderKey_fn).call(this, language, namespace);
+    const loader = __privateGet$1(this, _loaders).get(key);
+    if (!loader) {
+      return false;
+    }
+    return !__privateGet$1(this, _loaded).has(key);
+  }
+  async load(language, namespace) {
+    const key = __privateMethod(this, _getLoaderKey, getLoaderKey_fn).call(this, language, namespace);
+    const loader = __privateGet$1(this, _loaders).get(key);
+    if (!loader) {
+      return;
+    }
+    if (__privateGet$1(this, _loaded).has(key)) {
+      return;
+    }
+    const loading = __privateGet$1(this, _loading).get(key);
+    if (loading) {
+      await loading;
+      return;
+    }
+    const load = loader().then(
+      (result) => {
+        this.onLoad({ language, namespace, messages: result.messages });
+        __privateGet$1(this, _loaded).add(key);
+      },
+      (error) => {
+        __privateGet$1(this, _loaded).add(key);
+        throw error;
+      }
+    );
+    __privateGet$1(this, _loading).set(key, load);
+    await load;
+  }
+}
+_loaded = new WeakMap();
+_loading = new WeakMap();
+_loaders = new WeakMap();
+_getLoaderKey = new WeakSet();
+getLoaderKey_fn = function(language, namespace) {
+  return `${language}/${namespace}`;
+};
+const _I18nextTranslationApi = class _I18nextTranslationApi {
+  constructor(i18n, loader, language) {
+    __privateAdd$1(this, _changeLanguage);
+    __privateAdd$1(this, _createSnapshot);
+    __privateAdd$1(this, _registerDefaults);
+    __privateAdd$1(this, _i18n, void 0);
+    __privateAdd$1(this, _loader, void 0);
+    __privateAdd$1(this, _language, void 0);
+    /** Keep track of which refs we have registered default resources for */
+    __privateAdd$1(this, _registeredRefs, /* @__PURE__ */ new Set());
+    /** Notify observers when language changes */
+    __privateAdd$1(this, _languageChangeListeners, /* @__PURE__ */ new Set());
+    __privateSet$1(this, _i18n, i18n);
+    __privateSet$1(this, _loader, loader);
+    __privateSet$1(this, _language, language);
+  }
+  static create(options) {
+    const { languages } = options.languageApi.getAvailableLanguages();
+    const i18n = createInstance({
+      fallbackLng: DEFAULT_LANGUAGE,
+      supportedLngs: languages,
+      interpolation: {
+        escapeValue: false
+      },
+      ns: [],
+      defaultNS: false,
+      fallbackNS: false,
+      // Disable resource loading on init, meaning i18n will be ready to use immediately
+      initImmediate: false
+    });
+    i18n.init();
+    if (!i18n.isInitialized) {
+      throw new Error("i18next was unexpectedly not initialized");
+    }
+    const { language: initialLanguage } = options.languageApi.getLanguage();
+    if (initialLanguage !== DEFAULT_LANGUAGE) {
+      i18n.changeLanguage(initialLanguage);
+    }
+    const loader = new ResourceLoader((loaded) => {
+      i18n.addResourceBundle(
+        loaded.language,
+        loaded.namespace,
+        removeNulls(loaded.messages),
+        false,
+        // do not merge with existing translations
+        true
+        // overwrite translations
+      );
+    });
+    const resources = (options == null ? void 0 : options.resources) || [];
+    for (let i = resources.length - 1; i >= 0; i--) {
+      const resource = resources[i];
+      if (resource.$$type === "@backstage/TranslationResource") {
+        loader.addTranslationResource(resource);
+      } else if (resource.$$type === "@backstage/TranslationMessages") {
+        i18n.addResourceBundle(
+          DEFAULT_LANGUAGE,
+          resource.id,
+          removeNulls(resource.messages),
+          true,
+          // merge with existing translations
+          false
+          // do not overwrite translations
+        );
+      }
+    }
+    const instance = new _I18nextTranslationApi(
+      i18n,
+      loader,
+      options.languageApi.getLanguage().language
+    );
+    options.languageApi.language$().subscribe(({ language }) => {
+      var _a;
+      __privateMethod(_a = instance, _changeLanguage, changeLanguage_fn).call(_a, language);
+    });
+    return instance;
+  }
+  getTranslation(translationRef) {
+    const internalRef = toInternalTranslationRef(translationRef);
+    __privateMethod(this, _registerDefaults, registerDefaults_fn).call(this, internalRef);
+    return __privateMethod(this, _createSnapshot, createSnapshot_fn).call(this, internalRef);
+  }
+  translation$(translationRef) {
+    const internalRef = toInternalTranslationRef(translationRef);
+    __privateMethod(this, _registerDefaults, registerDefaults_fn).call(this, internalRef);
+    return new ObservableImpl((subscriber) => {
+      let loadTicket = {};
+      let lastSnapshotWasReady = false;
+      const loadResource = () => {
+        loadTicket = {};
+        const ticket = loadTicket;
+        __privateGet$1(this, _loader).load(__privateGet$1(this, _language), internalRef.id).then(
+          () => {
+            if (ticket === loadTicket) {
+              const snapshot = __privateMethod(this, _createSnapshot, createSnapshot_fn).call(this, internalRef);
+              if (snapshot.ready || lastSnapshotWasReady) {
+                lastSnapshotWasReady = snapshot.ready;
+                subscriber.next(snapshot);
+              }
+            }
+          },
+          (error) => {
+            if (ticket === loadTicket) {
+              subscriber.error(Array.isArray(error) ? error[0] : error);
+            }
+          }
+        );
+      };
+      const onChange = () => {
+        const snapshot = __privateMethod(this, _createSnapshot, createSnapshot_fn).call(this, internalRef);
+        if (lastSnapshotWasReady && !snapshot.ready) {
+          lastSnapshotWasReady = snapshot.ready;
+          subscriber.next(snapshot);
+        }
+        if (!snapshot.ready) {
+          loadResource();
+        }
+      };
+      if (__privateGet$1(this, _loader).needsLoading(__privateGet$1(this, _language), internalRef.id)) {
+        loadResource();
+      }
+      __privateGet$1(this, _languageChangeListeners).add(onChange);
+      return () => {
+        __privateGet$1(this, _languageChangeListeners).delete(onChange);
+      };
+    });
+  }
+};
+_i18n = new WeakMap();
+_loader = new WeakMap();
+_language = new WeakMap();
+_registeredRefs = new WeakMap();
+_languageChangeListeners = new WeakMap();
+_changeLanguage = new WeakSet();
+changeLanguage_fn = function(language) {
+  if (__privateGet$1(this, _language) !== language) {
+    __privateSet$1(this, _language, language);
+    __privateGet$1(this, _i18n).changeLanguage(language);
+    __privateGet$1(this, _languageChangeListeners).forEach((listener) => listener());
+  }
+};
+_createSnapshot = new WeakSet();
+createSnapshot_fn = function(internalRef) {
+  if (__privateGet$1(this, _loader).needsLoading(__privateGet$1(this, _language), internalRef.id)) {
+    return { ready: false };
+  }
+  const t = __privateGet$1(this, _i18n).getFixedT(
+    null,
+    internalRef.id
+  );
+  return {
+    ready: true,
+    t
+  };
+};
+_registerDefaults = new WeakSet();
+registerDefaults_fn = function(internalRef) {
+  if (__privateGet$1(this, _registeredRefs).has(internalRef.id)) {
+    return;
+  }
+  __privateGet$1(this, _registeredRefs).add(internalRef.id);
+  const defaultMessages = internalRef.getDefaultMessages();
+  __privateGet$1(this, _i18n).addResourceBundle(
+    DEFAULT_LANGUAGE,
+    internalRef.id,
+    defaultMessages,
+    true,
+    // merge with existing translations
+    false
+    // do not overwrite translations
+  );
+  const defaultResource = internalRef.getDefaultResource();
+  if (defaultResource) {
+    __privateGet$1(this, _loader).addTranslationResource(defaultResource);
+  }
+};
+let I18nextTranslationApi = _I18nextTranslationApi;
 
 function createLocalBaseUrl(fullUrl) {
   const url = new URL(fullUrl);
@@ -3315,11 +3708,12 @@ class AppManager {
     __publicField(this, "configLoader");
     __publicField(this, "defaultApis");
     __publicField(this, "bindRoutes");
-    __publicField(this, "appTranslationApi");
+    __publicField(this, "appLanguageApi");
+    __publicField(this, "translationResources");
     __publicField(this, "appIdentityProxy", new AppIdentityProxy());
     __publicField(this, "apiFactoryRegistry");
     __privateAdd(this, _getProviderCalled, false);
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     this.apis = (_a = options.apis) != null ? _a : [];
     this.icons = options.icons;
     this.plugins = new Set((_b = options.plugins) != null ? _b : []);
@@ -3330,9 +3724,11 @@ class AppManager {
     this.defaultApis = (_e = options.defaultApis) != null ? _e : [];
     this.bindRoutes = options.bindRoutes;
     this.apiFactoryRegistry = new ApiFactoryRegistry();
-    this.appTranslationApi = AppTranslationApiImpl.create(
-      options.__experimentalI18n
-    );
+    this.appLanguageApi = AppLanguageSelector.createWithStorage({
+      defaultLanguage: (_f = options.__experimentalTranslations) == null ? void 0 : _f.defaultLanguage,
+      availableLanguages: (_g = options.__experimentalTranslations) == null ? void 0 : _g.availableLanguages
+    });
+    this.translationResources = (_i = (_h = options.__experimentalTranslations) == null ? void 0 : _h.resources) != null ? _i : [];
   }
   getPlugins() {
     return Array.from(this.plugins);
@@ -3446,7 +3842,7 @@ class AppManager {
         }
       }
       const { ThemeProvider = AppThemeProvider } = this.components;
-      return /* @__PURE__ */ React.createElement(ApiProvider, { apis: this.getApiHolder() }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(AppTranslationProvider, null, /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement(ApiProvider, { apis: this.getApiHolder() }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(
         RoutingProvider,
         {
           routePaths: routing.paths,
@@ -3465,7 +3861,7 @@ class AppManager {
           },
           children
         )
-      )))));
+      ))));
     };
     return Provider;
   }
@@ -3510,9 +3906,17 @@ class AppManager {
       factory: () => this.appIdentityProxy
     });
     this.apiFactoryRegistry.register("static", {
-      api: appTranslationApiRef,
+      api: appLanguageApiRef,
       deps: {},
-      factory: () => this.appTranslationApi
+      factory: () => this.appLanguageApi
+    });
+    this.apiFactoryRegistry.register("default", {
+      api: translationApiRef,
+      deps: { languageApi: appLanguageApiRef },
+      factory: ({ languageApi }) => I18nextTranslationApi.create({
+        languageApi,
+        resources: this.translationResources
+      })
     });
     this.apiFactoryRegistry.register("default", {
       api: featureFlagsApiRef,