@backstage/frontend-app-api 0.2.0-next.2 → 0.2.0

package/dist/index.esm.js

@@ -6,9 +6,11 @@ import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenStat
 import { useRouteRef, useApi, appThemeApiRef, FeatureFlagState, createApiFactory, discoveryApiRef, configApiRef, alertApiRef, analyticsApiRef, errorApiRef, storageApiRef, fetchApiRef, identityApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, oneloginAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, atlassianAuthApiRef, attachComponentData, featureFlagsApiRef } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core';
 import mapValues from 'lodash/mapValues';
-import { UrlPatternDiscovery, AlertApiForwarder, NoOpAnalyticsApi, ErrorAlerter, ErrorApiForwarder, UnhandledErrorForwarder, WebStorage, createFetchApi, FetchMiddlewares, OAuthRequestManager, GoogleAuth, MicrosoftAuth, GithubAuth, OktaAuth, GitlabAuth, OneLoginAuth, BitbucketAuth, BitbucketServerAuth, AtlassianAuth, ApiFactoryRegistry, AppThemeSelector, ApiResolver, ApiProvider } from '@backstage/core-app-api';
+import { UrlPatternDiscovery, AlertApiForwarder, NoOpAnalyticsApi, ErrorAlerter, ErrorApiForwarder, UnhandledErrorForwarder, WebStorage, createFetchApi, FetchMiddlewares, OAuthRequestManager, GoogleAuth, MicrosoftAuth, GithubAuth, OktaAuth, GitlabAuth, OneLoginAuth, BitbucketAuth, BitbucketServerAuth, AtlassianAuth, ApiProvider, ApiFactoryRegistry, AppThemeSelector, ApiResolver } from '@backstage/core-app-api';
 import useObservable from 'react-use/lib/useObservable';
 import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
+import ObservableImpl from 'zen-observable';
+import { createInstance } from 'i18next';
 import { permissionApiRef, IdentityPermissionApi } from '@backstage/plugin-permission-react';
 import Button from '@material-ui/core/Button';
 import MuiApartmentIcon from '@material-ui/icons/Apartment';
@@ -35,6 +37,7 @@ import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import LightIcon from '@material-ui/icons/WbSunny';
+import { appLanguageApiRef, translationApiRef } from '@backstage/core-plugin-api/alpha';
 
 const Core = createExtension({
   id: "core",
@@ -42,10 +45,24 @@ const Core = createExtension({
   inputs: {
     apis: createExtensionInput({
       api: coreExtensionData.apiFactory
-    })
+    }),
+    themes: createExtensionInput({
+      theme: coreExtensionData.theme
+    }),
+    root: createExtensionInput(
+      {
+        element: coreExtensionData.reactElement
+      },
+      { singleton: true }
+    )
+  },
+  output: {
+    root: coreExtensionData.reactElement
   },
-  output: {},
-  factory() {
+  factory({ bind, inputs }) {
+    bind({
+      root: inputs.root.element
+    });
   }
 });
 
@@ -66,7 +83,7 @@ const CoreRoutes = createExtension({
     const Routes = () => {
       const element = useRoutes(
         inputs.routes.map((route) => ({
-          path: route.path,
+          path: `${route.path}/*`,
           element: route.element
         }))
       );
@@ -80,7 +97,7 @@ const CoreRoutes = createExtension({
 
 const CoreLayout = createExtension({
   id: "core.layout",
-  attachTo: { id: "root", input: "default" },
+  attachTo: { id: "core", input: "root" },
   inputs: {
     nav: createExtensionInput(
       {
@@ -203,27 +220,27 @@ const CoreNav = createExtension({
   }
 });
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck = (obj, member, msg) => {
+var __accessCheck$2 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$2(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd = (obj, member, value) => {
+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 = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
+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;
 };
@@ -240,6 +257,16 @@ function resolveInputData(dataMap, attachment, inputName) {
   });
 }
 function resolveInputs(inputMap, attachments) {
+  const undeclaredAttachments = Array.from(attachments.entries()).filter(
+    ([inputName]) => inputMap[inputName] === void 0
+  );
+  if (undeclaredAttachments.length > 0) {
+    throw new Error(
+      `received undeclared input${undeclaredAttachments.length > 1 ? "s" : ""} ${undeclaredAttachments.map(
+        ([k, exts]) => `'${k}' from extension${exts.length > 1 ? "s" : ""} '${exts.map((e) => e.id).join("', '")}'`
+      ).join(" and ")}`
+    );
+  }
   return mapValues(inputMap, (input, inputName) => {
     var _a;
     const attachedInstances = (_a = attachments.get(inputName)) != null ? _a : [];
@@ -270,28 +297,28 @@ function indent(str) {
 }
 class ExtensionInstanceImpl {
   constructor(id, extensionData, attachments, source) {
-    __publicField$2(this, "$$type", "@backstage/ExtensionInstance");
-    __publicField$2(this, "id");
-    __privateAdd(this, _extensionData, void 0);
-    __publicField$2(this, "attachments");
-    __publicField$2(this, "source");
+    __publicField$3(this, "$$type", "@backstage/ExtensionInstance");
+    __publicField$3(this, "id");
+    __privateAdd$2(this, _extensionData, void 0);
+    __publicField$3(this, "attachments");
+    __publicField$3(this, "source");
     this.id = id;
-    __privateSet(this, _extensionData, extensionData);
+    __privateSet$2(this, _extensionData, extensionData);
     this.attachments = attachments;
     this.source = source;
   }
   getData(ref) {
-    return __privateGet(this, _extensionData).get(ref.id);
+    return __privateGet$2(this, _extensionData).get(ref.id);
   }
   toJSON() {
     return {
       id: this.id,
-      output: __privateGet(this, _extensionData).size > 0 ? [...__privateGet(this, _extensionData).keys()] : void 0,
+      output: __privateGet$2(this, _extensionData).size > 0 ? [...__privateGet$2(this, _extensionData).keys()] : void 0,
       attachments: this.attachments.size > 0 ? Object.fromEntries(this.attachments) : void 0
     };
   }
   toString() {
-    const out = __privateGet(this, _extensionData).size > 0 ? ` out=[${[...__privateGet(this, _extensionData).keys()].join(", ")}]` : "";
+    const out = __privateGet$2(this, _extensionData).size > 0 ? ` out=[${[...__privateGet$2(this, _extensionData).keys()].join(", ")}]` : "";
     if (this.attachments.size === 0) {
       return `<${this.id}${out} />`;
     }
@@ -350,6 +377,21 @@ function createExtensionInstance(options) {
   );
 }
 
+function toInternalExtensionOverrides(overrides) {
+  const internal = overrides;
+  if (internal.$$type !== "@backstage/ExtensionOverrides") {
+    throw new Error(
+      `Invalid translation resource, bad type '${internal.$$type}'`
+    );
+  }
+  if (internal.version !== "v1") {
+    throw new Error(
+      `Invalid translation resource, bad version '${internal.version}'`
+    );
+  }
+  return internal;
+}
+
 const knownExtensionParameters = ["attachTo", "disabled", "config"];
 function readAppExtensionParameters(rootConfig) {
   const arr = rootConfig.getOptional("app.extensions");
@@ -462,19 +504,47 @@ function expandShorthandExtensionParameters(arrayEntry, arrayIndex) {
   };
 }
 function mergeExtensionParameters(options) {
-  const { sources, builtinExtensions, parameters } = options;
-  const pluginExtensions = sources.flatMap((source) => {
+  var _a;
+  const { builtinExtensions, parameters } = options;
+  const plugins = options.features.filter(
+    (f) => f.$$type === "@backstage/BackstagePlugin"
+  );
+  const overrides = options.features.filter(
+    (f) => f.$$type === "@backstage/ExtensionOverrides"
+  );
+  const pluginExtensions = plugins.flatMap((source) => {
     return source.extensions.map((extension) => ({ ...extension, source }));
   });
-  if (pluginExtensions.some(({ id }) => id === "root")) {
-    const rootPluginIds = pluginExtensions.filter(({ id }) => id === "root").map(({ source }) => source.id);
+  const overrideExtensions = overrides.flatMap(
+    (override) => toInternalExtensionOverrides(override).extensions
+  );
+  if (pluginExtensions.some(({ id }) => id === "core")) {
+    const pluginIds = pluginExtensions.filter(({ id }) => id === "core").map(({ source }) => source.id);
     throw new Error(
-      `The following plugin(s) are overriding the 'root' extension which is forbidden: ${rootPluginIds.join(
+      `The following plugin(s) are overriding the 'core' extension which is forbidden: ${pluginIds.join(
         ","
       )}`
     );
   }
-  const overrides = [
+  if (overrideExtensions.some(({ id }) => id === "root")) {
+    throw new Error(
+      `An extension override is overriding the 'root' extension which is forbidden`
+    );
+  }
+  const overrideExtensionIds = overrideExtensions.map(({ id }) => id);
+  if (overrideExtensionIds.length !== new Set(overrideExtensionIds).size) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const id of overrideExtensionIds) {
+      counts.set(id, ((_a = counts.get(id)) != null ? _a : 0) + 1);
+    }
+    const duplicated = Array.from(counts.entries()).filter(([, count]) => count > 1).map(([id]) => id);
+    throw new Error(
+      `The following extensions had duplicate overrides: ${duplicated.join(
+        ", "
+      )}`
+    );
+  }
+  const configuredExtensions = [
     ...pluginExtensions.map(({ source, ...extension }) => ({
       extension,
       params: {
@@ -494,14 +564,34 @@ function mergeExtensionParameters(options) {
       }
     }))
   ];
+  for (const extension of overrideExtensions) {
+    const index = configuredExtensions.findIndex(
+      (e) => e.extension.id === extension.id
+    );
+    if (index !== -1) {
+      configuredExtensions[index].extension = extension;
+      configuredExtensions[index].params.attachTo = extension.attachTo;
+      configuredExtensions[index].params.disabled = extension.disabled;
+    } else {
+      configuredExtensions.push({
+        extension,
+        params: {
+          source: void 0,
+          attachTo: extension.attachTo,
+          disabled: extension.disabled,
+          config: void 0
+        }
+      });
+    }
+  }
   const duplicatedExtensionIds = /* @__PURE__ */ new Set();
-  const duplicatedExtensionData = overrides.reduce((data, { extension, params }) => {
-    var _a, _b, _c;
+  const duplicatedExtensionData = configuredExtensions.reduce((data, { extension, params }) => {
+    var _a2, _b, _c;
     const extensionId = extension.id;
     const extensionData = data == null ? void 0 : data[extensionId];
     if (extensionData)
       duplicatedExtensionIds.add(extensionId);
-    const pluginId = (_b = (_a = params.source) == null ? void 0 : _a.id) != null ? _b : "internal";
+    const pluginId = (_b = (_a2 = params.source) == null ? void 0 : _a2.id) != null ? _b : "internal";
     const pluginCount = (_c = extensionData == null ? void 0 : extensionData[pluginId]) != null ? _c : 0;
     return {
       ...data,
@@ -523,16 +613,16 @@ function mergeExtensionParameters(options) {
   }
   for (const overrideParam of parameters) {
     const extensionId = overrideParam.id;
-    if (extensionId === "root") {
+    if (extensionId === "core") {
       throw new Error(
-        "A 'root' extension configuration was detected, but the root extension is not configurable"
+        "A 'core' extension configuration was detected, but the core extension is not configurable"
       );
     }
-    const existingIndex = overrides.findIndex(
+    const existingIndex = configuredExtensions.findIndex(
       (e) => e.extension.id === extensionId
     );
     if (existingIndex !== -1) {
-      const existing = overrides[existingIndex];
+      const existing = configuredExtensions[existingIndex];
       if (overrideParam.attachTo) {
         existing.params.attachTo = overrideParam.attachTo;
       }
@@ -542,15 +632,15 @@ function mergeExtensionParameters(options) {
       if (Boolean(existing.params.disabled) !== Boolean(overrideParam.disabled)) {
         existing.params.disabled = Boolean(overrideParam.disabled);
         if (!existing.params.disabled) {
-          overrides.splice(existingIndex, 1);
-          overrides.push(existing);
+          configuredExtensions.splice(existingIndex, 1);
+          configuredExtensions.push(existing);
         }
       }
     } else {
       throw new Error(`Extension ${extensionId} does not exist`);
     }
   }
-  return overrides.filter((override) => !override.params.disabled).map((param) => ({
+  return configuredExtensions.filter((override) => !override.params.disabled).map((param) => ({
     extension: param.extension,
     attachTo: param.params.attachTo,
     source: param.params.source,
@@ -558,14 +648,54 @@ function mergeExtensionParameters(options) {
   }));
 }
 
-function getAvailablePlugins() {
+function readPackageDetectionConfig(config) {
+  const packages = config.getOptional("app.experimental.packages");
+  if (packages === void 0 || packages === null) {
+    return void 0;
+  }
+  if (typeof packages === "string") {
+    if (packages !== "all") {
+      throw new Error(
+        `Invalid app.experimental.packages mode, got '${packages}', expected 'all'`
+      );
+    }
+    return {};
+  }
+  if (typeof packages !== "object" || Array.isArray(packages)) {
+    throw new Error(
+      "Invalid config at 'app.experimental.packages', expected object"
+    );
+  }
+  const packagesConfig = new ConfigReader(
+    packages,
+    "app.experimental.packages"
+  );
+  return {
+    include: packagesConfig.getOptionalStringArray("include"),
+    exclude: packagesConfig.getOptionalStringArray("exclude")
+  };
+}
+function getAvailableFeatures(config) {
   var _a;
   const discovered = window["__@backstage/discovered__"];
-  return (_a = discovered == null ? void 0 : discovered.modules.map((m) => m.default).filter(isBackstagePlugin)) != null ? _a : [];
+  const detection = readPackageDetectionConfig(config);
+  if (!detection) {
+    return [];
+  }
+  return (_a = discovered == null ? void 0 : discovered.modules.filter(({ name }) => {
+    var _a2;
+    if ((_a2 = detection.exclude) == null ? void 0 : _a2.includes(name)) {
+      return false;
+    }
+    if (detection.include && !detection.include.includes(name)) {
+      return false;
+    }
+    return true;
+  }).map((m) => m.default).filter(isBackstageFeature)) != null ? _a : [];
 }
-function isBackstagePlugin(obj) {
+function isBackstageFeature(obj) {
   if (obj !== null && typeof obj === "object" && "$$type" in obj) {
-    return obj.$$type === "@backstage/BackstagePlugin";
+    return obj.$$type === "@backstage/BackstagePlugin" || obj.$$type === "@backstage/ExtensionOverrides";
   }
   return false;
 }
@@ -624,10 +754,10 @@ function AppThemeProvider({ children }) {
   return /* @__PURE__ */ React.createElement(appTheme.Provider, { children });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function mkError(thing) {
@@ -642,11 +772,11 @@ function logDeprecation(thing) {
 }
 class AppIdentityProxy {
   constructor() {
-    __publicField$1(this, "target");
-    __publicField$1(this, "waitForTarget");
-    __publicField$1(this, "resolveTarget", () => {
+    __publicField$2(this, "target");
+    __publicField$2(this, "waitForTarget");
+    __publicField$2(this, "resolveTarget", () => {
     });
-    __publicField$1(this, "signOutTargetUrl", "/");
+    __publicField$2(this, "signOutTargetUrl", "/");
     this.waitForTarget = new Promise((resolve) => {
       this.resolveTarget = resolve;
     });
@@ -718,10 +848,10 @@ const AppContextProvider = ({
   return /* @__PURE__ */ React.createElement(AppContext.Provider, { value: versionedValue, children });
 };
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function validateFlagName(name) {
@@ -743,8 +873,8 @@ function validateFlagName(name) {
 }
 class LocalStorageFeatureFlags {
   constructor() {
-    __publicField(this, "registeredFeatureFlags", []);
-    __publicField(this, "flags");
+    __publicField$1(this, "registeredFeatureFlags", []);
+    __publicField$1(this, "flags");
   }
   registerFlag(flag) {
     validateFlagName(flag.name);
@@ -1048,6 +1178,499 @@ const RoutingProvider = ({
   return /* @__PURE__ */ React.createElement(RoutingContext.Provider, { value: versionedValue }, children);
 };
 
+function resolveRouteBindings(bindRoutes) {
+  const result = /* @__PURE__ */ new Map();
+  if (bindRoutes) {
+    const bind = (externalRoutes, targetRoutes) => {
+      for (const [key, value] of Object.entries(targetRoutes)) {
+        const externalRoute = externalRoutes[key];
+        if (!externalRoute) {
+          throw new Error(`Key ${key} is not an existing external route`);
+        }
+        if (!value && !externalRoute.optional) {
+          throw new Error(
+            `External route ${key} is required but was undefined`
+          );
+        }
+        if (value) {
+          result.set(externalRoute, value);
+        }
+      }
+    };
+    bindRoutes({ bind });
+  }
+  return result;
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class BehaviorSubject {
+  constructor(value) {
+    __publicField(this, "isClosed");
+    __publicField(this, "currentValue");
+    __publicField(this, "terminatingError");
+    __publicField(this, "observable");
+    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
+    this.isClosed = false;
+    this.currentValue = value;
+    this.terminatingError = void 0;
+    this.observable = new ObservableImpl((subscriber) => {
+      if (this.isClosed) {
+        if (this.terminatingError) {
+          subscriber.error(this.terminatingError);
+        } else {
+          subscriber.complete();
+        }
+        return () => {
+        };
+      }
+      subscriber.next(this.currentValue);
+      this.subscribers.add(subscriber);
+      return () => {
+        this.subscribers.delete(subscriber);
+      };
+    });
+  }
+  [Symbol.observable]() {
+    return this;
+  }
+  get closed() {
+    return this.isClosed;
+  }
+  next(value) {
+    if (this.isClosed) {
+      throw new Error("BehaviorSubject is closed");
+    }
+    this.currentValue = value;
+    this.subscribers.forEach((subscriber) => subscriber.next(value));
+  }
+  error(error) {
+    if (this.isClosed) {
+      throw new Error("BehaviorSubject is closed");
+    }
+    this.isClosed = true;
+    this.terminatingError = error;
+    this.subscribers.forEach((subscriber) => subscriber.error(error));
+  }
+  complete() {
+    if (this.isClosed) {
+      throw new Error("BehaviorSubject is closed");
+    }
+    this.isClosed = true;
+    this.subscribers.forEach((subscriber) => subscriber.complete());
+  }
+  subscribe(onNext, onError, onComplete) {
+    const observer = typeof onNext === "function" ? {
+      next: onNext,
+      error: onError,
+      complete: onComplete
+    } : onNext;
+    return this.observable.subscribe(observer);
+  }
+}
+
+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 _languages, _language$1, _subject;
+const STORAGE_KEY = "language";
+const DEFAULT_LANGUAGE = "en";
+const _AppLanguageSelector = class _AppLanguageSelector {
+  constructor(languages, initialLanguage) {
+    __privateAdd$1(this, _languages, void 0);
+    __privateAdd$1(this, _language$1, void 0);
+    __privateAdd$1(this, _subject, void 0);
+    __privateSet$1(this, _languages, languages);
+    __privateSet$1(this, _language$1, initialLanguage);
+    __privateSet$1(this, _subject, new BehaviorSubject({
+      language: __privateGet$1(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$1(this, _languages).slice() };
+  }
+  setLanguage(language) {
+    const lng = language != null ? language : DEFAULT_LANGUAGE;
+    if (lng === __privateGet$1(this, _language$1)) {
+      return;
+    }
+    if (lng && !__privateGet$1(this, _languages).includes(lng)) {
+      throw new Error(
+        `Failed to change language to '${lng}', available languages are '${__privateGet$1(this, _languages).join(
+          "', '"
+        )}'`
+      );
+    }
+    __privateSet$1(this, _language$1, lng);
+    __privateGet$1(this, _subject).next({ language: lng });
+  }
+  getLanguage() {
+    return { language: __privateGet$1(this, _language$1) };
+  }
+  language$() {
+    return __privateGet$1(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 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (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 = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(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(this, _getLoaderKey);
+    /** Loaded resources by loader key */
+    __privateAdd(this, _loaded, /* @__PURE__ */ new Set());
+    /** Resource loading promises by loader key */
+    __privateAdd(this, _loading, /* @__PURE__ */ new Map());
+    /** Loaders for each resource language */
+    __privateAdd(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(this, _loaders).has(key)) {
+        __privateGet(this, _loaders).set(key, entry.loader);
+      }
+    }
+  }
+  needsLoading(language, namespace) {
+    const key = __privateMethod(this, _getLoaderKey, getLoaderKey_fn).call(this, language, namespace);
+    const loader = __privateGet(this, _loaders).get(key);
+    if (!loader) {
+      return false;
+    }
+    return !__privateGet(this, _loaded).has(key);
+  }
+  async load(language, namespace) {
+    const key = __privateMethod(this, _getLoaderKey, getLoaderKey_fn).call(this, language, namespace);
+    const loader = __privateGet(this, _loaders).get(key);
+    if (!loader) {
+      return;
+    }
+    if (__privateGet(this, _loaded).has(key)) {
+      return;
+    }
+    const loading = __privateGet(this, _loading).get(key);
+    if (loading) {
+      await loading;
+      return;
+    }
+    const load = loader().then(
+      (result) => {
+        this.onLoad({ language, namespace, messages: result.messages });
+        __privateGet(this, _loaded).add(key);
+      },
+      (error) => {
+        __privateGet(this, _loaded).add(key);
+        throw error;
+      }
+    );
+    __privateGet(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(this, _changeLanguage);
+    __privateAdd(this, _createSnapshot);
+    __privateAdd(this, _registerDefaults);
+    __privateAdd(this, _i18n, void 0);
+    __privateAdd(this, _loader, void 0);
+    __privateAdd(this, _language, void 0);
+    /** Keep track of which refs we have registered default resources for */
+    __privateAdd(this, _registeredRefs, /* @__PURE__ */ new Set());
+    /** Notify observers when language changes */
+    __privateAdd(this, _languageChangeListeners, /* @__PURE__ */ new Set());
+    __privateSet(this, _i18n, i18n);
+    __privateSet(this, _loader, loader);
+    __privateSet(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 = {};
+      const loadResource = () => {
+        loadTicket = {};
+        const ticket = loadTicket;
+        __privateGet(this, _loader).load(__privateGet(this, _language), internalRef.id).then(
+          () => {
+            if (ticket === loadTicket) {
+              const snapshot = __privateMethod(this, _createSnapshot, createSnapshot_fn).call(this, internalRef);
+              if (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 (snapshot.ready) {
+          subscriber.next(snapshot);
+        } else {
+          loadResource();
+        }
+      };
+      if (__privateGet(this, _loader).needsLoading(__privateGet(this, _language), internalRef.id)) {
+        loadResource();
+      }
+      __privateGet(this, _languageChangeListeners).add(onChange);
+      return () => {
+        __privateGet(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(this, _language) !== language) {
+    __privateSet(this, _language, language);
+    __privateGet(this, _i18n).changeLanguage(language);
+    __privateGet(this, _languageChangeListeners).forEach((listener) => listener());
+  }
+};
+_createSnapshot = new WeakSet();
+createSnapshot_fn = function(internalRef) {
+  if (__privateGet(this, _loader).needsLoading(__privateGet(this, _language), internalRef.id)) {
+    return { ready: false };
+  }
+  const t = __privateGet(this, _i18n).getFixedT(
+    null,
+    internalRef.id
+  );
+  return {
+    ready: true,
+    t
+  };
+};
+_registerDefaults = new WeakSet();
+registerDefaults_fn = function(internalRef) {
+  if (__privateGet(this, _registeredRefs).has(internalRef.id)) {
+    return;
+  }
+  __privateGet(this, _registeredRefs).add(internalRef.id);
+  const defaultMessages = internalRef.getDefaultMessages();
+  __privateGet(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(this, _loader).addTranslationResource(defaultResource);
+  }
+};
+let I18nextTranslationApi = _I18nextTranslationApi;
+
 const apis = [
   createApiFactory({
     api: discoveryApiRef,
@@ -1343,7 +1966,7 @@ function joinPaths(...paths) {
   }
   return normalized;
 }
-function extractRouteInfoFromInstanceTree(roots) {
+function extractRouteInfoFromInstanceTree(core) {
   const routePaths = /* @__PURE__ */ new Map();
   const routeParents = /* @__PURE__ */ new Map();
   const routeObjects = new Array();
@@ -1409,16 +2032,14 @@ function extractRouteInfoFromInstanceTree(roots) {
       }
     }
   }
-  for (const root of roots) {
-    visit(root);
-  }
+  visit(core);
   return { routePaths, routeParents, routeObjects };
 }
 
 function createExtensionTree(options) {
-  const plugins = getAvailablePlugins();
+  const features = getAvailableFeatures(options.config);
   const { instances } = createInstances({
-    plugins,
+    features,
     config: options.config
   });
   return {
@@ -1468,7 +2089,6 @@ function createExtensionTree(options) {
   };
 }
 function createInstances(options) {
-  var _a, _b;
   const builtinExtensions = [
     Core,
     CoreRoutes,
@@ -1478,7 +2098,7 @@ function createInstances(options) {
     DarkTheme
   ];
   const extensionParams = mergeExtensionParameters({
-    sources: options.plugins,
+    features: options.features,
     builtinExtensions,
     parameters: readAppExtensionParameters(options.config)
   });
@@ -1500,14 +2120,14 @@ function createInstances(options) {
   }
   const instances = /* @__PURE__ */ new Map();
   function createInstance(instanceParams) {
-    var _a2, _b2;
+    var _a, _b;
     const extensionId = instanceParams.extension.id;
     const existingInstance = instances.get(extensionId);
     if (existingInstance) {
       return existingInstance;
     }
     const attachments = new Map(
-      Array.from((_b2 = (_a2 = attachmentMap.get(extensionId)) == null ? void 0 : _a2.entries()) != null ? _b2 : []).map(
+      Array.from((_b = (_a = attachmentMap.get(extensionId)) == null ? void 0 : _a.entries()) != null ? _b : []).map(
         ([inputName, attachmentConfigs]) => {
           return [inputName, attachmentConfigs.map(createInstance)];
         }
@@ -1522,38 +2142,43 @@ function createInstances(options) {
     instances.set(extensionId, newInstance);
     return newInstance;
   }
-  const rootConfigs = (_b = (_a = attachmentMap.get("root")) == null ? void 0 : _a.get("default")) != null ? _b : [];
-  const rootInstances = rootConfigs.map(
-    (instanceParams) => createInstance(instanceParams)
+  const coreInstance = createInstance(
+    extensionParams.find((p) => p.extension.id === "core")
   );
-  return { instances, rootInstances };
+  return { coreInstance, instances };
 }
 function createApp(options) {
   async function appLoader() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const config = (_b = await ((_a = options == null ? void 0 : options.configLoader) == null ? void 0 : _a.call(options))) != null ? _b : ConfigReader.fromConfigs(
       overrideBaseUrlConfigs(defaultConfigLoaderSync())
     );
-    const discoveredPlugins = getAvailablePlugins();
-    const loadedPlugins = (_d = await ((_c = options.pluginLoader) == null ? void 0 : _c.call(options, { config }))) != null ? _d : [];
-    const allPlugins = Array.from(
-      /* @__PURE__ */ new Set([...discoveredPlugins, ...options.plugins, ...loadedPlugins])
+    const discoveredFeatures = getAvailableFeatures(config);
+    const loadedFeatures = (_d = await ((_c = options.featureLoader) == null ? void 0 : _c.call(options, { config }))) != null ? _d : [];
+    const allFeatures = Array.from(
+      /* @__PURE__ */ new Set([
+        ...discoveredFeatures,
+        ...(_e = options.features) != null ? _e : [],
+        ...loadedFeatures
+      ])
     );
-    const { rootInstances } = createInstances({
-      plugins: allPlugins,
+    const { coreInstance } = createInstances({
+      features: allFeatures,
       config
     });
-    const routeInfo = extractRouteInfoFromInstanceTree(rootInstances);
-    const coreInstance = rootInstances.find(({ id }) => id === "core");
-    if (!coreInstance) {
-      throw Error("Unable to find core extension instance");
-    }
-    const apiHolder = createApiHolder(coreInstance, config);
-    const appContext = createLegacyAppContext(allPlugins);
-    const rootElements = rootInstances.map((e) => /* @__PURE__ */ React.createElement(React.Fragment, { key: e.id }, e.getData(coreExtensionData.reactElement))).filter((x) => !!x);
-    const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: apiHolder }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, { ...routeInfo, routeBindings: /* @__PURE__ */ new Map(
-      /* TODO */
-    ) }, /* @__PURE__ */ React.createElement(BrowserRouter, null, rootElements)))));
+    const appContext = createLegacyAppContext(
+      allFeatures.filter(
+        (f) => f.$$type === "@backstage/BackstagePlugin"
+      )
+    );
+    const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: createApiHolder(coreInstance, config) }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(
+      RoutingProvider,
+      {
+        ...extractRouteInfoFromInstanceTree(coreInstance),
+        routeBindings: resolveRouteBindings(options.bindRoutes)
+      },
+      /* @__PURE__ */ React.createElement(BrowserRouter, null, coreInstance.getData(coreExtensionData.reactElement))
+    ))));
     return { default: App };
   }
   return {
@@ -1664,6 +2289,18 @@ function createApiHolder(coreExtension, configApi) {
     deps: {},
     factory: () => configApi
   });
+  factoryRegistry.register("static", {
+    api: appLanguageApiRef,
+    deps: {},
+    factory: () => AppLanguageSelector.createWithStorage()
+  });
+  factoryRegistry.register("default", {
+    api: translationApiRef,
+    deps: { languageApi: appLanguageApiRef },
+    factory: ({ languageApi }) => I18nextTranslationApi.create({
+      languageApi
+    })
+  });
   for (const factory of apis) {
     if (!factoryRegistry.register("app", factory)) {
       throw new Error(