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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @backstage/frontend-app-api
 
+## 0.2.0-next.2
+
+### Minor Changes
+
+- 4461d87d5a: Removed support for the new `useRouteRef`.
+
+### Patch Changes
+
+- 5072824817: Implement `toString()` and `toJSON()` for extension instances.
+- 06432f900c: Updates for `at` -> `attachTo` refactor.
+- 1718ec75b7: Added support for the existing routing system.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.2.0-next.2
+  - @backstage/core-app-api@1.11.0-next.2
+  - @backstage/core-components@0.13.6-next.2
+  - @backstage/core-plugin-api@1.7.0-next.1
+  - @backstage/plugin-graphiql@0.2.55-next.2
+  - @backstage/theme@0.4.3-next.0
+  - @backstage/config@1.1.1-next.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.5
+
 ## 0.2.0-next.1
 
 ### Patch Changes

package/dist/index.esm.js

@@ -1,14 +1,14 @@
-import React, { createContext, useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { ConfigReader } from '@backstage/config';
-import { createExtension, createExtensionInput, coreExtensionData, useRouteRef, createThemeExtension } from '@backstage/frontend-plugin-api';
-import { useRoutes, BrowserRouter, useInRouterContext, MemoryRouter, Route } from 'react-router-dom';
+import { createExtension, createExtensionInput, coreExtensionData, createThemeExtension } from '@backstage/frontend-plugin-api';
+import { useRoutes, matchRoutes, generatePath, BrowserRouter, useInRouterContext, MemoryRouter, Route } from 'react-router-dom';
 import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenState, Link, SidebarItem, Progress, ErrorPage, ErrorPanel } from '@backstage/core-components';
+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 { useApi, appThemeApiRef, FeatureFlagState, createApiFactory, discoveryApiRef, configApiRef, alertApiRef, analyticsApiRef, errorApiRef, storageApiRef, fetchApiRef, identityApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, oneloginAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, atlassianAuthApiRef, attachComponentData, useRouteRef as useRouteRef$1, 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 } from '@backstage/version-bridge';
+import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import { permissionApiRef, IdentityPermissionApi } from '@backstage/plugin-permission-react';
 import Button from '@material-ui/core/Button';
 import MuiApartmentIcon from '@material-ui/icons/Apartment';
@@ -38,7 +38,7 @@ import LightIcon from '@material-ui/icons/WbSunny';
 
 const Core = createExtension({
   id: "core",
-  at: "root",
+  attachTo: { id: "root", input: "default" },
   inputs: {
     apis: createExtensionInput({
       api: coreExtensionData.apiFactory
@@ -51,7 +51,7 @@ const Core = createExtension({
 
 const CoreRoutes = createExtension({
   id: "core.routes",
-  at: "core.layout/content",
+  attachTo: { id: "core.layout", input: "content" },
   inputs: {
     routes: createExtensionInput({
       path: coreExtensionData.routePath,
@@ -80,7 +80,7 @@ const CoreRoutes = createExtension({
 
 const CoreLayout = createExtension({
   id: "core.layout",
-  at: "root",
+  attachTo: { id: "root", input: "default" },
   inputs: {
     nav: createExtensionInput(
       {
@@ -182,12 +182,12 @@ const SidebarLogo = () => {
 };
 const SidebarNavItem = (props) => {
   const { icon: Icon, title, routeRef } = props;
-  const to = useRouteRef(routeRef)();
+  const to = useRouteRef(routeRef)({});
   return /* @__PURE__ */ React.createElement(SidebarItem, { to, icon: Icon, text: title });
 };
 const CoreNav = createExtension({
   id: "core.nav",
-  at: "core.layout/nav",
+  attachTo: { id: "core.layout", input: "nav" },
   inputs: {
     items: createExtensionInput({
       target: coreExtensionData.navTarget
@@ -203,6 +203,31 @@ 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);
+  return value;
+};
+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 _extensionData;
 function resolveInputData(dataMap, attachment, inputName) {
   return mapValues(dataMap, (ref) => {
     const value = attachment.getData(ref);
@@ -240,6 +265,46 @@ function resolveInputs(inputMap, attachments) {
     );
   });
 }
+function indent(str) {
+  return str.replace(/^/gm, "  ");
+}
+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");
+    this.id = id;
+    __privateSet(this, _extensionData, extensionData);
+    this.attachments = attachments;
+    this.source = source;
+  }
+  getData(ref) {
+    return __privateGet(this, _extensionData).get(ref.id);
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      output: __privateGet(this, _extensionData).size > 0 ? [...__privateGet(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(", ")}]` : "";
+    if (this.attachments.size === 0) {
+      return `<${this.id}${out} />`;
+    }
+    return [
+      `<${this.id}${out}>`,
+      ...[...this.attachments.entries()].map(
+        ([k, v]) => indent([`${k} [`, ...v.map((e) => indent(e.toString())), `]`].join("\n"))
+      ),
+      `</${this.id}>`
+    ].join("\n");
+  }
+}
+_extensionData = new WeakMap();
 function createExtensionInstance(options) {
   var _a;
   const { extension, config, source, attachments } = options;
@@ -277,17 +342,15 @@ function createExtensionInstance(options) {
       `Failed to instantiate extension '${extension.id}'${e.name === "Error" ? `, ${e.message}` : `; caused by ${e}`}`
     );
   }
-  return {
-    $$type: "@backstage/ExtensionInstance",
-    id: options.extension.id,
-    getData(ref) {
-      return extensionData.get(ref.id);
-    },
-    attachments
-  };
+  return new ExtensionInstanceImpl(
+    options.extension.id,
+    extensionData,
+    attachments,
+    source
+  );
 }
 
-const knownExtensionParameters = ["at", "disabled", "config"];
+const knownExtensionParameters = ["attachTo", "disabled", "config"];
 function readAppExtensionParameters(rootConfig) {
   const arr = rootConfig.getOptional("app.extensions");
   if (!Array.isArray(arr)) {
@@ -353,14 +416,28 @@ function expandShorthandExtensionParameters(arrayEntry, arrayIndex) {
   if (typeof value !== "object" || Array.isArray(value)) {
     throw new Error(errorMsg("value must be a boolean or object", id));
   }
-  const at = value.at;
+  const attachTo = value.attachTo;
   const disabled = value.disabled;
   const config = value.config;
-  if (at !== void 0 && typeof at !== "string") {
-    throw new Error(errorMsg("must be a string", id, "at"));
-  } else if (disabled !== void 0 && typeof disabled !== "boolean") {
+  if (attachTo !== void 0) {
+    if (attachTo === null || typeof attachTo !== "object" || Array.isArray(attachTo)) {
+      throw new Error(errorMsg("must be an object", id, "attachTo"));
+    }
+    if (typeof attachTo.id !== "string" || attachTo.id === "") {
+      throw new Error(
+        errorMsg("must be a non-empty string", id, "attachTo.id")
+      );
+    }
+    if (typeof attachTo.input !== "string" || attachTo.input === "") {
+      throw new Error(
+        errorMsg("must be a non-empty string", id, "attachTo.input")
+      );
+    }
+  }
+  if (disabled !== void 0 && typeof disabled !== "boolean") {
     throw new Error(errorMsg("must be a boolean", id, "disabled"));
-  } else if (config !== void 0 && (typeof config !== "object" || config === null || Array.isArray(config))) {
+  }
+  if (config !== void 0 && (typeof config !== "object" || config === null || Array.isArray(config))) {
     throw new Error(errorMsg("must be an object", id, "config"));
   }
   const unknownKeys = Object.keys(value).filter(
@@ -379,7 +456,7 @@ function expandShorthandExtensionParameters(arrayEntry, arrayIndex) {
   }
   return {
     id,
-    at,
+    attachTo,
     disabled,
     config
   };
@@ -402,7 +479,7 @@ function mergeExtensionParameters(options) {
       extension,
       params: {
         source,
-        at: extension.at,
+        attachTo: extension.attachTo,
         disabled: extension.disabled,
         config: void 0
       }
@@ -411,7 +488,7 @@ function mergeExtensionParameters(options) {
       extension,
       params: {
         source: void 0,
-        at: extension.at,
+        attachTo: extension.attachTo,
         disabled: extension.disabled,
         config: void 0
       }
@@ -456,8 +533,8 @@ function mergeExtensionParameters(options) {
     );
     if (existingIndex !== -1) {
       const existing = overrides[existingIndex];
-      if (overrideParam.at) {
-        existing.params.at = overrideParam.at;
+      if (overrideParam.attachTo) {
+        existing.params.attachTo = overrideParam.attachTo;
       }
       if (overrideParam.config) {
         existing.params.config = overrideParam.config;
@@ -475,31 +552,12 @@ function mergeExtensionParameters(options) {
   }
   return overrides.filter((override) => !override.params.disabled).map((param) => ({
     extension: param.extension,
-    at: param.params.at,
+    attachTo: param.params.attachTo,
     source: param.params.source,
     config: param.params.config
   }));
 }
 
-const RoutingContext = createContext({
-  resolve: () => () => ""
-});
-class RouteResolver {
-  constructor(routePaths) {
-    this.routePaths = routePaths;
-  }
-  resolve(anyRouteRef) {
-    const basePath = this.routePaths.get(anyRouteRef);
-    if (!basePath) {
-      return void 0;
-    }
-    return () => basePath;
-  }
-}
-function RoutingProvider(props) {
-  return /* @__PURE__ */ React.createElement(RoutingContext.Provider, { value: new RouteResolver(props.routePaths) }, props.children);
-}
-
 function getAvailablePlugins() {
   var _a;
   const discovered = window["__@backstage/discovered__"];
@@ -817,6 +875,179 @@ function overrideBaseUrlConfigs(inputConfigs) {
   return configs;
 }
 
+const routeRefType = getOrCreateGlobalSingleton(
+  "route-ref-type",
+  () => Symbol("route-ref-type")
+);
+function isRouteRef(routeRef) {
+  return routeRef[routeRefType] === "absolute";
+}
+function isSubRouteRef(routeRef) {
+  return routeRef[routeRefType] === "sub";
+}
+function isExternalRouteRef(routeRef) {
+  return routeRef[routeRefType] === "external";
+}
+
+function joinPaths$1(...paths) {
+  const normalized = paths.join("/").replace(/\/\/+/g, "/");
+  if (normalized !== "/" && normalized.endsWith("/")) {
+    return normalized.slice(0, -1);
+  }
+  return normalized;
+}
+
+function resolveTargetRef(anyRouteRef, routePaths, routeBindings) {
+  let targetRef;
+  let subRoutePath = "";
+  if (isRouteRef(anyRouteRef)) {
+    targetRef = anyRouteRef;
+  } else if (isSubRouteRef(anyRouteRef)) {
+    targetRef = anyRouteRef.parent;
+    subRoutePath = anyRouteRef.path;
+  } else if (isExternalRouteRef(anyRouteRef)) {
+    const resolvedRoute = routeBindings.get(anyRouteRef);
+    if (!resolvedRoute) {
+      return [void 0, ""];
+    }
+    if (isRouteRef(resolvedRoute)) {
+      targetRef = resolvedRoute;
+    } else if (isSubRouteRef(resolvedRoute)) {
+      targetRef = resolvedRoute.parent;
+      subRoutePath = resolvedRoute.path;
+    } else {
+      throw new Error(
+        `ExternalRouteRef was bound to invalid target, ${resolvedRoute}`
+      );
+    }
+  } else if (anyRouteRef[routeRefType]) {
+    throw new Error(
+      `Unknown or invalid route ref type, ${anyRouteRef[routeRefType]}`
+    );
+  } else {
+    throw new Error(`Unknown object passed to useRouteRef, got ${anyRouteRef}`);
+  }
+  if (!targetRef) {
+    return [void 0, ""];
+  }
+  const resolvedPath = routePaths.get(targetRef);
+  if (resolvedPath === void 0) {
+    return [void 0, ""];
+  }
+  const targetPath = joinPaths$1(resolvedPath, subRoutePath);
+  return [targetRef, targetPath];
+}
+function resolveBasePath(targetRef, sourceLocation, routePaths, routeParents, routeObjects) {
+  var _a;
+  const match = (_a = matchRoutes(routeObjects, sourceLocation)) != null ? _a : [];
+  const refDiffList = Array();
+  let matchIndex = -1;
+  for (let targetSearchRef = targetRef; targetSearchRef; targetSearchRef = routeParents.get(targetSearchRef)) {
+    matchIndex = match.findIndex(
+      (m) => m.route.routeRefs.has(targetSearchRef)
+    );
+    if (matchIndex !== -1) {
+      break;
+    }
+    refDiffList.unshift(targetSearchRef);
+  }
+  if (refDiffList.length === 0) {
+    matchIndex -= 1;
+  }
+  const parentPath = matchIndex === -1 ? "" : match[matchIndex].pathname;
+  const diffPaths = refDiffList.slice(0, -1).map((ref) => {
+    const path = routePaths.get(ref);
+    if (path === void 0) {
+      throw new Error(`No path for ${ref}`);
+    }
+    if (path.includes(":")) {
+      throw new Error(
+        `Cannot route to ${targetRef} with parent ${ref} as it has parameters`
+      );
+    }
+    return path;
+  });
+  return `${joinPaths$1(parentPath, ...diffPaths)}/`;
+}
+class RouteResolver {
+  constructor(routePaths, routeParents, routeObjects, routeBindings, appBasePath) {
+    this.routePaths = routePaths;
+    this.routeParents = routeParents;
+    this.routeObjects = routeObjects;
+    this.routeBindings = routeBindings;
+    this.appBasePath = appBasePath;
+  }
+  resolve(anyRouteRef, sourceLocation) {
+    const [targetRef, targetPath] = resolveTargetRef(
+      anyRouteRef,
+      this.routePaths,
+      this.routeBindings
+    );
+    if (!targetRef) {
+      return void 0;
+    }
+    let relativeSourceLocation;
+    if (typeof sourceLocation === "string") {
+      relativeSourceLocation = this.trimPath(sourceLocation);
+    } else if (sourceLocation.pathname) {
+      relativeSourceLocation = {
+        ...sourceLocation,
+        pathname: this.trimPath(sourceLocation.pathname)
+      };
+    } else {
+      relativeSourceLocation = sourceLocation;
+    }
+    const basePath = this.appBasePath + resolveBasePath(
+      targetRef,
+      relativeSourceLocation,
+      this.routePaths,
+      this.routeParents,
+      this.routeObjects
+    );
+    const routeFunc = (...[params]) => {
+      const encodedParams = params && mapValues(params, (value) => {
+        if (typeof value === "string") {
+          return value.replaceAll(/[&?#;\/]/g, (c) => encodeURIComponent(c));
+        }
+        return value;
+      });
+      return joinPaths$1(basePath, generatePath(targetPath, encodedParams));
+    };
+    return routeFunc;
+  }
+  trimPath(targetPath) {
+    if (!targetPath) {
+      return targetPath;
+    }
+    if (targetPath.startsWith(this.appBasePath)) {
+      return targetPath.slice(this.appBasePath.length);
+    }
+    return targetPath;
+  }
+}
+
+const RoutingContext = createVersionedContext(
+  "routing-context"
+);
+const RoutingProvider = ({
+  routePaths,
+  routeParents,
+  routeObjects,
+  routeBindings,
+  basePath = "",
+  children
+}) => {
+  const resolver = new RouteResolver(
+    routePaths,
+    routeParents,
+    routeObjects,
+    routeBindings,
+    basePath
+  );
+  const versionedValue = createVersionedValueMap({ 1: resolver });
+  return /* @__PURE__ */ React.createElement(RoutingContext.Provider, { value: versionedValue }, children);
+};
+
 const apis = [
   createApiFactory({
     api: discoveryApiRef,
@@ -1097,6 +1328,93 @@ const DarkTheme = createThemeExtension({
   Provider: ({ children }) => /* @__PURE__ */ React.createElement(UnifiedThemeProvider, { theme: themes.dark, children })
 });
 
+const MATCH_ALL_ROUTE = {
+  caseSensitive: false,
+  path: "*",
+  element: "match-all",
+  // These elements aren't used, so we add in a bit of debug information
+  routeRefs: /* @__PURE__ */ new Set(),
+  plugins: /* @__PURE__ */ new Set()
+};
+function joinPaths(...paths) {
+  const normalized = paths.join("/").replace(/\/\/+/g, "/");
+  if (normalized !== "/" && normalized.endsWith("/")) {
+    return normalized.slice(0, -1);
+  }
+  return normalized;
+}
+function extractRouteInfoFromInstanceTree(roots) {
+  const routePaths = /* @__PURE__ */ new Map();
+  const routeParents = /* @__PURE__ */ new Map();
+  const routeObjects = new Array();
+  function visit(current, collectedPath, foundRefForCollectedPath = false, parentRef, candidateParentRef, parentObj) {
+    var _a, _b;
+    const routePath = (_a = current.getData(coreExtensionData.routePath)) == null ? void 0 : _a.replace(/^\//, "");
+    const routeRef = current.getData(coreExtensionData.routeRef);
+    const parentChildren = (_b = parentObj == null ? void 0 : parentObj.children) != null ? _b : routeObjects;
+    let currentObj = parentObj;
+    let newCollectedPath = collectedPath;
+    let newFoundRefForCollectedPath = foundRefForCollectedPath;
+    let newParentRef = parentRef;
+    let newCandidateParentRef = candidateParentRef;
+    if (routePath !== void 0) {
+      currentObj = {
+        path: routePath,
+        element: "mounted",
+        routeRefs: /* @__PURE__ */ new Set(),
+        caseSensitive: false,
+        children: [MATCH_ALL_ROUTE],
+        plugins: /* @__PURE__ */ new Set()
+      };
+      parentChildren.push(currentObj);
+      newParentRef = candidateParentRef;
+      newCandidateParentRef = void 0;
+      if (newFoundRefForCollectedPath) {
+        newCollectedPath = routePath;
+        newFoundRefForCollectedPath = false;
+      } else {
+        newCollectedPath = collectedPath ? joinPaths(collectedPath, routePath) : routePath;
+      }
+    }
+    if (routeRef) {
+      const routeRefId = routeRef.id;
+      if (routeRefId !== current.id) {
+        throw new Error(
+          `Route ref '${routeRefId}' must have the same ID as extension '${current.id}'`
+        );
+      }
+      if (!newCandidateParentRef) {
+        newCandidateParentRef = routeRef;
+      }
+      if (newCollectedPath !== void 0) {
+        routePaths.set(routeRef, newCollectedPath);
+        newFoundRefForCollectedPath = true;
+      }
+      routeParents.set(routeRef, newParentRef);
+      currentObj == null ? void 0 : currentObj.routeRefs.add(routeRef);
+      if (current.source) {
+        currentObj == null ? void 0 : currentObj.plugins.add(toLegacyPlugin(current.source));
+      }
+    }
+    for (const children of current.attachments.values()) {
+      for (const child of children) {
+        visit(
+          child,
+          newCollectedPath,
+          newFoundRefForCollectedPath,
+          newParentRef,
+          newCandidateParentRef,
+          currentObj
+        );
+      }
+    }
+  }
+  for (const root of roots) {
+    visit(root);
+  }
+  return { routePaths, routeParents, routeObjects };
+}
+
 function createExtensionTree(options) {
   const plugins = getAvailablePlugins();
   const { instances } = createInstances({
@@ -1128,7 +1446,7 @@ function createExtensionTree(options) {
     },
     getSidebarItems() {
       const RoutedSidebarItem = (props) => {
-        const location = useRouteRef$1(props.routeRef);
+        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) => {
@@ -1166,7 +1484,8 @@ function createInstances(options) {
   });
   const attachmentMap = /* @__PURE__ */ new Map();
   for (const instanceParams of extensionParams) {
-    const [extensionId, pointId = "default"] = instanceParams.at.split("/");
+    const extensionId = instanceParams.attachTo.id;
+    const pointId = instanceParams.attachTo.input;
     let pointMap = attachmentMap.get(extensionId);
     if (!pointMap) {
       pointMap = /* @__PURE__ */ new Map();
@@ -1224,7 +1543,7 @@ function createApp(options) {
       plugins: allPlugins,
       config
     });
-    const routePaths = extractRouteInfoFromInstanceTree(rootInstances);
+    const routeInfo = extractRouteInfoFromInstanceTree(rootInstances);
     const coreInstance = rootInstances.find(({ id }) => id === "core");
     if (!coreInstance) {
       throw Error("Unable to find core extension instance");
@@ -1232,7 +1551,9 @@ function createApp(options) {
     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, { routePaths }, /* @__PURE__ */ React.createElement(BrowserRouter, null, rootElements)))));
+    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)))));
     return { default: App };
   }
   return {
@@ -1242,25 +1563,35 @@ function createApp(options) {
     }
   };
 }
+const legacyPluginStore = getOrCreateGlobalSingleton(
+  "legacy-plugin-compatibility-store",
+  () => /* @__PURE__ */ new WeakMap()
+);
 function toLegacyPlugin(plugin) {
+  let legacy = legacyPluginStore.get(plugin);
+  if (legacy) {
+    return legacy;
+  }
   const errorMsg = "Not implemented in legacy plugin compatibility layer";
   const notImplemented = () => {
     throw new Error(errorMsg);
   };
-  return {
+  legacy = {
     getId() {
       return plugin.id;
     },
     get routes() {
-      throw new Error(errorMsg);
+      return {};
     },
     get externalRoutes() {
-      throw new Error(errorMsg);
+      return {};
     },
     getApis: notImplemented,
     getFeatureFlags: notImplemented,
     provide: notImplemented
   };
+  legacyPluginStore.set(plugin, legacy);
+  return legacy;
 }
 function createLegacyAppContext(plugins) {
   return {
@@ -1343,33 +1674,6 @@ function createApiHolder(coreExtension, configApi) {
   ApiResolver.validateFactories(factoryRegistry, factoryRegistry.getAllApis());
   return new ApiResolver(factoryRegistry);
 }
-function extractRouteInfoFromInstanceTree(roots) {
-  const results = /* @__PURE__ */ new Map();
-  function visit(current, basePath) {
-    var _a;
-    const routePath = (_a = current.getData(coreExtensionData.routePath)) != null ? _a : "";
-    const routeRef = current.getData(coreExtensionData.routeRef);
-    const fullPath = basePath + routePath;
-    if (routeRef) {
-      const routeRefId = routeRef.id;
-      if (routeRefId !== current.id) {
-        throw new Error(
-          `Route ref '${routeRefId}' must have the same ID as extension '${current.id}'`
-        );
-      }
-      results.set(routeRef, fullPath);
-    }
-    for (const children of current.attachments.values()) {
-      for (const child of children) {
-        visit(child, fullPath);
-      }
-    }
-  }
-  for (const root of roots) {
-    visit(root, "");
-  }
-  return results;
-}
 
 export { createApp, createExtensionTree };
 //# sourceMappingURL=index.esm.js.map