@backstage/frontend-app-api 0.4.0-next.1 → 0.4.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/frontend-app-api
 
+## 0.4.0-next.2
+
+### Minor Changes
+
+- ea06590: The app no longer provides the `AppContext` from `@backstage/core-plugin-api`. Components that require this context to be available should use the `compatWrapper` helper from `@backstage/core-compat-api`.
+
+### Patch Changes
+
+- aeb8008: Add support for translation extensions.
+- b7adf24: Use the new plugin type for error boundary components.
+- 8f5d6c1: Updates to match the new extension input wrapping.
+- cb4197a: Forward ` node`` instead of  `extensionId` to resolved extension inputs.
+- 8837a96: Updates to match the introduction of `ExtensionDefinition` and new extension ID naming patterns.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.4.0-next.2
+  - @backstage/theme@0.5.0-next.1
+  - @backstage/config@1.1.1
+  - @backstage/core-app-api@1.11.2-next.1
+  - @backstage/core-components@0.13.9-next.2
+  - @backstage/core-plugin-api@1.8.1-next.1
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+
 ## 0.4.0-next.1
 
 ### Minor Changes

package/dist/index.esm.js

@@ -1,46 +1,46 @@
 import React, { useMemo, useState, useEffect, createContext, useContext } from 'react';
 import { ConfigReader } from '@backstage/config';
-import { createExtension, createExtensionInput, coreExtensionData, useApi, componentsApiRef, coreComponentsRefs, useRouteRef, createThemeExtension, createComponentExtension, AnalyticsContext, useAnalytics, appTreeApiRef } from '@backstage/frontend-plugin-api';
+import { createExtension, createExtensionInput, coreExtensionData, createTranslationExtension, useComponentRef, coreComponentRefs, useRouteRef, createThemeExtension, createComponentExtension, AnalyticsContext, useAnalytics, appTreeApiRef, componentsApiRef } from '@backstage/frontend-plugin-api';
 import { useRoutes, BrowserRouter, useInRouterContext, MemoryRouter, matchRoutes, generatePath, useLocation, Route } from 'react-router-dom';
 import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenState, Link, SidebarItem, Progress, ErrorPage, ErrorPanel } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core';
-import { useApi as useApi$1, 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, Button as Button$1 } from '@material-ui/core';
+import { useApi, appThemeApiRef, FeatureFlagState, createApiFactory, discoveryApiRef, configApiRef, alertApiRef, analyticsApiRef, errorApiRef, storageApiRef, fetchApiRef, identityApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, oneloginAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, atlassianAuthApiRef, createApiRef, attachComponentData, featureFlagsApiRef } from '@backstage/core-plugin-api';
 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 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';
-import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
-import MuiCategoryIcon from '@material-ui/icons/Category';
-import MuiCreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
-import MuiSubjectIcon from '@material-ui/icons/Subject';
-import MuiSearchIcon from '@material-ui/icons/Search';
-import MuiChatIcon from '@material-ui/icons/Chat';
-import MuiDashboardIcon from '@material-ui/icons/Dashboard';
-import MuiDocsIcon from '@material-ui/icons/Description';
-import MuiEmailIcon from '@material-ui/icons/Email';
-import MuiExtensionIcon from '@material-ui/icons/Extension';
-import MuiGitHubIcon from '@material-ui/icons/GitHub';
-import MuiHelpIcon from '@material-ui/icons/Help';
-import MuiLocationOnIcon from '@material-ui/icons/LocationOn';
-import MuiMemoryIcon from '@material-ui/icons/Memory';
-import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
-import MuiPeopleIcon from '@material-ui/icons/People';
-import MuiPersonIcon from '@material-ui/icons/Person';
-import MuiWarningIcon from '@material-ui/icons/Warning';
-import MuiWorkIcon from '@material-ui/icons/Work';
-import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList';
+import '@material-ui/icons/Apartment';
+import '@material-ui/icons/BrokenImage';
+import '@material-ui/icons/Category';
+import '@material-ui/icons/CreateNewFolder';
+import '@material-ui/icons/Subject';
+import '@material-ui/icons/Search';
+import '@material-ui/icons/Chat';
+import '@material-ui/icons/Dashboard';
+import '@material-ui/icons/Description';
+import '@material-ui/icons/Email';
+import '@material-ui/icons/Extension';
+import '@material-ui/icons/GitHub';
+import '@material-ui/icons/Help';
+import '@material-ui/icons/LocationOn';
+import '@material-ui/icons/Memory';
+import '@material-ui/icons/MenuBook';
+import '@material-ui/icons/People';
+import '@material-ui/icons/Person';
+import '@material-ui/icons/Warning';
+import '@material-ui/icons/Work';
+import '@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 { getOrCreateGlobalSingleton, createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import { appLanguageApiRef, translationApiRef } from '@backstage/core-plugin-api/alpha';
 import mapValues from 'lodash/mapValues';
 
 const Core = createExtension({
-  id: "core",
+  namespace: "core",
   attachTo: { id: "root", input: "default" },
   // ignored
   inputs: {
@@ -53,6 +53,9 @@ const Core = createExtension({
     components: createExtensionInput({
       component: coreExtensionData.component
     }),
+    translations: createExtensionInput({
+      translation: createTranslationExtension.translationDataRef
+    }),
     root: createExtensionInput(
       {
         element: coreExtensionData.reactElement
@@ -65,14 +68,15 @@ const Core = createExtension({
   },
   factory({ inputs }) {
     return {
-      root: inputs.root.element
+      root: inputs.root.output.element
     };
   }
 });
 
 const CoreRoutes = createExtension({
-  id: "core.routes",
-  attachTo: { id: "core.layout", input: "content" },
+  namespace: "core",
+  name: "routes",
+  attachTo: { id: "core/layout", input: "content" },
   inputs: {
     routes: createExtensionInput({
       path: coreExtensionData.routePath,
@@ -85,14 +89,13 @@ const CoreRoutes = createExtension({
   },
   factory({ inputs }) {
     const Routes = () => {
-      const componentsApi = useApi(componentsApiRef);
-      const NotFoundErrorPage = componentsApi.getComponent(
-        coreComponentsRefs.notFoundErrorPage
+      const NotFoundErrorPage = useComponentRef(
+        coreComponentRefs.notFoundErrorPage
       );
       const element = useRoutes([
         ...inputs.routes.map((route) => ({
-          path: `${route.path}/*`,
-          element: route.element
+          path: `${route.output.path}/*`,
+          element: route.output.element
         })),
         {
           path: "*",
@@ -108,8 +111,9 @@ const CoreRoutes = createExtension({
 });
 
 const CoreLayout = createExtension({
-  id: "core.layout",
-  attachTo: { id: "core.router", input: "children" },
+  namespace: "core",
+  name: "layout",
+  attachTo: { id: "core/router", input: "children" },
   inputs: {
     nav: createExtensionInput(
       {
@@ -129,7 +133,7 @@ const CoreLayout = createExtension({
   },
   factory({ inputs }) {
     return {
-      element: /* @__PURE__ */ React.createElement(SidebarPage, null, inputs.nav.element, inputs.content.element)
+      element: /* @__PURE__ */ React.createElement(SidebarPage, null, inputs.nav.output.element, inputs.content.output.element)
     };
   }
 });
@@ -216,8 +220,9 @@ const SidebarNavItem = (props) => {
   return /* @__PURE__ */ React.createElement(SidebarItem, { to, icon: Icon, text: title });
 };
 const CoreNav = createExtension({
-  id: "core.nav",
-  attachTo: { id: "core.layout", input: "nav" },
+  namespace: "core",
+  name: "nav",
+  attachTo: { id: "core/layout", input: "nav" },
   inputs: {
     items: createExtensionInput({
       target: coreExtensionData.navTarget
@@ -238,7 +243,7 @@ const CoreNav = createExtension({
   factory({ inputs }) {
     var _a;
     return {
-      element: /* @__PURE__ */ React.createElement(Sidebar, null, /* @__PURE__ */ React.createElement(SidebarLogo, { ...(_a = inputs.logos) == null ? void 0 : _a.elements }), /* @__PURE__ */ React.createElement(SidebarDivider, null), inputs.items.map((item, index) => /* @__PURE__ */ React.createElement(SidebarNavItem, { ...item.target, key: index })))
+      element: /* @__PURE__ */ React.createElement(Sidebar, null, /* @__PURE__ */ React.createElement(SidebarLogo, { ...(_a = inputs.logos) == null ? void 0 : _a.output.elements }), /* @__PURE__ */ React.createElement(SidebarDivider, null), inputs.items.map((item, index) => /* @__PURE__ */ React.createElement(SidebarNavItem, { ...item.output.target, key: index })))
     };
   }
 });
@@ -332,7 +337,7 @@ const useShouldPreferDarkTheme = () => {
   return shouldPreferDark;
 };
 function AppThemeProvider({ children }) {
-  const appThemeApi = useApi$1(appThemeApiRef);
+  const appThemeApi = useApi(appThemeApiRef);
   const themeId = useObservable(
     appThemeApi.activeThemeId$(),
     appThemeApi.getActiveThemeId()
@@ -434,15 +439,6 @@ class AppIdentityProxy {
   }
 }
 
-const AppContext = createVersionedContext("app-context");
-const AppContextProvider = ({
-  appContext,
-  children
-}) => {
-  const versionedValue = createVersionedValueMap({ 1: appContext });
-  return /* @__PURE__ */ React.createElement(AppContext.Provider, { value: versionedValue, children });
-};
-
 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) => {
@@ -1069,6 +1065,23 @@ registerDefaults_fn = function(internalRef) {
 };
 let I18nextTranslationApi = _I18nextTranslationApi;
 
+function resolveExtensionDefinition(definition, context) {
+  var _a;
+  const { name, kind, namespace: _, ...rest } = definition;
+  const namespace = (_a = definition.namespace) != null ? _a : context == null ? void 0 : context.namespace;
+  const namePart = name && namespace ? `${namespace}/${name}` : namespace || name;
+  if (!namePart) {
+    throw new Error(
+      `Extension must declare an explicit namespace or name as it could not be resolved from context, kind=${kind} namespace=${namespace} name=${name}`
+    );
+  }
+  return {
+    ...rest,
+    id: kind ? `${kind}:${namePart}` : namePart,
+    $$type: "@backstage/Extension"
+  };
+}
+
 const apis = [
   createApiFactory({
     api: discoveryApiRef,
@@ -1307,33 +1320,6 @@ const components = {
   ErrorBoundaryFallback: DefaultErrorBoundaryFallback
 };
 
-const icons = {
-  brokenImage: MuiBrokenImageIcon,
-  // To be confirmed: see https://github.com/backstage/backstage/issues/4970
-  catalog: MuiMenuBookIcon,
-  scaffolder: MuiCreateNewFolderIcon,
-  techdocs: MuiSubjectIcon,
-  search: MuiSearchIcon,
-  chat: MuiChatIcon,
-  dashboard: MuiDashboardIcon,
-  docs: MuiDocsIcon,
-  email: MuiEmailIcon,
-  github: MuiGitHubIcon,
-  group: MuiPeopleIcon,
-  help: MuiHelpIcon,
-  "kind:api": MuiExtensionIcon,
-  "kind:component": MuiMemoryIcon,
-  "kind:domain": MuiApartmentIcon,
-  "kind:group": MuiPeopleIcon,
-  "kind:location": MuiLocationOnIcon,
-  "kind:system": MuiCategoryIcon,
-  "kind:user": MuiPersonIcon,
-  "kind:resource": MuiWorkIcon,
-  "kind:template": MuiFeaturedPlayListIcon,
-  user: MuiPersonIcon,
-  warning: MuiWarningIcon
-};
-
 const LightTheme = createThemeExtension({
   id: "light",
   title: "Light Theme",
@@ -1754,14 +1740,6 @@ function expandShorthandExtensionParameters(arrayEntry, arrayIndex) {
         errorMsg("extension ID must not be empty or contain whitespace")
       );
     }
-    if (id2.includes("/")) {
-      let message = `extension ID must not contain slashes; got '${id2}'`;
-      const good = id2.split("/")[0];
-      if (good) {
-        message += `, did you mean '${good}'?`;
-      }
-      throw new Error(errorMsg(message));
-    }
   }
   if (typeof arrayEntry === "string") {
     assertValidId(arrayEntry);
@@ -2117,10 +2095,11 @@ function resolveAppNodeSpecs(options) {
 
 function resolveInputData(dataMap, attachment, inputName) {
   return mapValues(dataMap, (ref) => {
-    const value = attachment.instance.getData(ref);
+    var _a;
+    const value = (_a = attachment.instance) == null ? void 0 : _a.getData(ref);
     if (value === void 0 && !ref.config.optional) {
       throw new Error(
-        `input '${inputName}' did not receive required extension data '${ref.id}' from extension '${attachment.id}'`
+        `input '${inputName}' did not receive required extension data '${ref.id}' from extension '${attachment.spec.id}'`
       );
     }
     return value;
@@ -2133,7 +2112,7 @@ function resolveInputs(inputMap, attachments) {
   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("', '")}'`
+        ([k, exts]) => `'${k}' from extension${exts.length > 1 ? "s" : ""} '${exts.map((e) => e.spec.id).join("', '")}'`
       ).join(" and ")}`
     );
   }
@@ -2142,7 +2121,7 @@ function resolveInputs(inputMap, attachments) {
     const attachedNodes = (_a = attachments.get(inputName)) != null ? _a : [];
     if (input.config.singleton) {
       if (attachedNodes.length > 1) {
-        const attachedNodeIds = attachedNodes.map((e) => e.id);
+        const attachedNodeIds = attachedNodes.map((e) => e.spec.id);
         throw Error(
           `expected ${input.config.optional ? "at most" : "exactly"} one '${inputName}' input but received multiple: '${attachedNodeIds.join(
             "', '"
@@ -2154,11 +2133,19 @@ function resolveInputs(inputMap, attachments) {
         }
         throw Error(`input '${inputName}' is required but was not received`);
       }
-      return resolveInputData(input.extensionData, attachedNodes[0], inputName);
+      return {
+        node: attachedNodes[0],
+        output: resolveInputData(
+          input.extensionData,
+          attachedNodes[0],
+          inputName
+        )
+      };
     }
-    return attachedNodes.map(
-      (attachment) => resolveInputData(input.extensionData, attachment, inputName)
-    );
+    return attachedNodes.map((attachment) => ({
+      node: attachment,
+      output: resolveInputData(input.extensionData, attachment, inputName)
+    }));
   });
 }
 function createAppNodeInstance(options) {
@@ -2196,7 +2183,7 @@ function createAppNodeInstance(options) {
     }
   } catch (e) {
     throw new Error(
-      `Failed to instantiate extension '${id}'${e.name === "Error" ? `, ${e.message}` : `; caused by ${e}`}`
+      `Failed to instantiate extension '${id}'${e.name === "Error" ? `, ${e.message}` : `; caused by ${e.stack}`}`
     );
   }
   return {
@@ -2223,7 +2210,7 @@ function instantiateAppNodeTree(rootNode) {
         if (!childInstance) {
           return [];
         }
-        return [{ id: child.spec.id, instance: childInstance }];
+        return [child];
       });
       if (instantiatedChildren.length > 0) {
         instantiatedAttachments.set(input, instantiatedChildren);
@@ -2253,20 +2240,22 @@ function createAppTree(options) {
 }
 
 const DefaultProgressComponent = createComponentExtension({
-  ref: coreComponentsRefs.progress,
+  ref: coreComponentRefs.progress,
   component: { sync: () => components.Progress }
 });
-const DefaultBootErrorPageComponent = createComponentExtension({
-  ref: coreComponentsRefs.bootErrorPage,
-  component: { sync: () => components.BootErrorPage }
-});
 const DefaultNotFoundErrorPageComponent = createComponentExtension({
-  ref: coreComponentsRefs.notFoundErrorPage,
+  ref: coreComponentRefs.notFoundErrorPage,
   component: { sync: () => components.NotFoundErrorPage }
 });
 const DefaultErrorBoundaryComponent = createComponentExtension({
-  ref: coreComponentsRefs.errorBoundaryFallback,
-  component: { sync: () => components.ErrorBoundaryFallback }
+  ref: coreComponentRefs.errorBoundaryFallback,
+  component: {
+    sync: () => (props) => {
+      const { plugin, error, resetError } = props;
+      const title = `Error in ${plugin == null ? void 0 : plugin.id}`;
+      return /* @__PURE__ */ React.createElement(ErrorPanel, { title, error, defaultExpanded: true }, /* @__PURE__ */ React.createElement(Button$1, { variant: "outlined", onClick: resetError }, "Retry"));
+    }
+  }
 });
 
 const InternalAppContext = createContext(void 0);
@@ -2280,6 +2269,16 @@ getOrCreateGlobalSingleton(
   })
 );
 
+createApiRef({ id: "core.app-tree" });
+
+createApiRef({
+  id: "core.components"
+});
+
+createApiRef({
+  id: "core.analytics"
+});
+
 function createExtensionDataRef(id) {
   return {
     id,
@@ -2361,7 +2360,8 @@ const RouteTracker = ({
 };
 
 const CoreRouter = createExtension({
-  id: "core.router",
+  namespace: "core",
+  name: "router",
   attachTo: { id: "core", input: "root" },
   inputs: {
     signInPage: createExtensionInput(
@@ -2383,7 +2383,7 @@ const CoreRouter = createExtension({
   factory({ inputs }) {
     var _a;
     return {
-      element: /* @__PURE__ */ React.createElement(AppRouter, { SignInPageComponent: (_a = inputs.signInPage) == null ? void 0 : _a.component }, inputs.children.element)
+      element: /* @__PURE__ */ React.createElement(AppRouter, { SignInPageComponent: (_a = inputs.signInPage) == null ? void 0 : _a.output.component }, inputs.children.output.element)
     };
   }
 });
@@ -2403,7 +2403,7 @@ function SignInPageWrapper({
   children
 }) {
   const [identityApi, setIdentityApi] = useState();
-  const configApi = useApi$1(configApiRef);
+  const configApi = useApi(configApiRef);
   const basePath = getBasePath(configApi);
   if (!identityApi) {
     return /* @__PURE__ */ React.createElement(Component, { onSignInSuccess: setIdentityApi });
@@ -2415,7 +2415,7 @@ function SignInPageWrapper({
 }
 function AppRouter(props) {
   const { children, SignInPageComponent } = props;
-  const configApi = useApi$1(configApiRef);
+  const configApi = useApi(configApiRef);
   const basePath = getBasePath(configApi);
   const internalAppContext = useContext(InternalAppContext);
   if (!internalAppContext) {
@@ -2500,11 +2500,10 @@ const builtinExtensions = [
   CoreLayout,
   DefaultProgressComponent,
   DefaultErrorBoundaryComponent,
-  DefaultBootErrorPageComponent,
   DefaultNotFoundErrorPageComponent,
   LightTheme,
   DarkTheme
-];
+].map((def) => resolveExtensionDefinition(def));
 function createExtensionTree(options) {
   const features = getAvailableFeatures(options.config);
   const tree = createAppTree({
@@ -2530,7 +2529,7 @@ function createExtensionTree(options) {
       return (_c = (_b = (_a = tree.nodes.get(id)) == null ? void 0 : _a.edges.attachments.get(inputName)) == null ? void 0 : _b.map(convertNode).filter((node) => Boolean(node))) != null ? _c : [];
     },
     getRootRoutes() {
-      return this.getExtensionAttachments("core.routes", "routes").map((node) => {
+      return this.getExtensionAttachments("core/routes", "routes").map((node) => {
         const path = node.getData(coreExtensionData.routePath);
         const element = node.getData(coreExtensionData.reactElement);
         const routeRef = node.getData(coreExtensionData.routeRef);
@@ -2549,7 +2548,7 @@ function createExtensionTree(options) {
         const location = useRouteRef(props.routeRef);
         return /* @__PURE__ */ React.createElement(SidebarItem, { icon: props.icon, to: location(), text: props.title });
       };
-      return this.getExtensionAttachments("core.nav", "items").map((node, index) => {
+      return this.getExtensionAttachments("core/nav", "items").map((node, index) => {
         const target = node.getData(coreExtensionData.navTarget);
         if (!target) {
           return null;
@@ -2618,11 +2617,6 @@ function createSpecializedApp(options) {
     builtinExtensions,
     config
   });
-  const appContext = createLegacyAppContext(
-    features.filter(
-      (f) => f.$$type === "@backstage/BackstagePlugin"
-    )
-  );
   const appIdentityProxy = new AppIdentityProxy();
   const apiHolder = createApiHolder(tree, config, appIdentityProxy);
   const featureFlagApi = apiHolder.get(featureFlagsApiRef);
@@ -2650,37 +2644,21 @@ function createSpecializedApp(options) {
     collectRouteIds(features)
   );
   const rootEl = tree.root.instance.getData(coreExtensionData.reactElement);
-  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__ */ React.createElement(
+  const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: apiHolder }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, { ...routeInfo, routeBindings }, /* @__PURE__ */ React.createElement(
     InternalAppContext.Provider,
     {
       value: { appIdentityProxy, routeObjects: routeInfo.routeObjects }
     },
     rootEl
-  )))));
+  ))));
   return {
     createRoot() {
       return /* @__PURE__ */ React.createElement(App, null);
     }
   };
 }
-function createLegacyAppContext(plugins) {
-  return {
-    getPlugins() {
-      return plugins.map(toLegacyPlugin);
-    },
-    getSystemIcon(key) {
-      return key in icons ? icons[key] : void 0;
-    },
-    getSystemIcons() {
-      return icons;
-    },
-    getComponents() {
-      return components;
-    }
-  };
-}
 function createApiHolder(tree, configApi, appIdentityProxy) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const factoryRegistry = new ApiFactoryRegistry();
   const pluginApis = (_b = (_a = tree.root.edges.attachments.get("apis")) == null ? void 0 : _a.map((e) => {
     var _a2;
@@ -2690,6 +2668,14 @@ function createApiHolder(tree, configApi, appIdentityProxy) {
     var _a2;
     return (_a2 = e.instance) == null ? void 0 : _a2.getData(coreExtensionData.theme);
   }).filter((x) => !!x)) != null ? _d : [];
+  const translationResources = (_f = (_e = tree.root.edges.attachments.get("translations")) == null ? void 0 : _e.map(
+    (e) => {
+      var _a2;
+      return (_a2 = e.instance) == null ? void 0 : _a2.getData(createTranslationExtension.translationDataRef);
+    }
+  ).filter(
+    (x) => !!x
+  )) != null ? _f : [];
   for (const factory of [...apis, ...pluginApis]) {
     factoryRegistry.register("default", factory);
   }
@@ -2710,10 +2696,10 @@ function createApiHolder(tree, configApi, appIdentityProxy) {
       getTree: () => ({ tree })
     })
   });
-  const componentsExtensions = (_f = (_e = tree.root.edges.attachments.get("components")) == null ? void 0 : _e.map((e) => {
+  const componentsExtensions = (_h = (_g = tree.root.edges.attachments.get("components")) == null ? void 0 : _g.map((e) => {
     var _a2;
     return (_a2 = e.instance) == null ? void 0 : _a2.getData(coreExtensionData.component);
-  }).filter((x) => !!x)) != null ? _f : [];
+  }).filter((x) => !!x)) != null ? _h : [];
   const componentsMap = componentsExtensions.reduce(
     (components, component) => component ? components.set(component.ref, component == null ? void 0 : component.impl) : components,
     /* @__PURE__ */ new Map()
@@ -2734,13 +2720,6 @@ function createApiHolder(tree, configApi, appIdentityProxy) {
     deps: {},
     factory: () => AppLanguageSelector.createWithStorage()
   });
-  factoryRegistry.register("default", {
-    api: translationApiRef,
-    deps: { languageApi: appLanguageApiRef },
-    factory: ({ languageApi }) => I18nextTranslationApi.create({
-      languageApi
-    })
-  });
   factoryRegistry.register("static", {
     api: configApiRef,
     deps: {},
@@ -2751,11 +2730,12 @@ function createApiHolder(tree, configApi, appIdentityProxy) {
     deps: {},
     factory: () => AppLanguageSelector.createWithStorage()
   });
-  factoryRegistry.register("default", {
+  factoryRegistry.register("static", {
     api: translationApiRef,
     deps: { languageApi: appLanguageApiRef },
     factory: ({ languageApi }) => I18nextTranslationApi.create({
-      languageApi
+      languageApi,
+      resources: translationResources
     })
   });
   for (const factory of apis) {