@backstage/core-app-api 1.0.6-next.0 → 1.1.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/core-app-api
 
+## 1.1.0-next.1
+
+### Minor Changes
+
+- a448fea691: Updated the routing system to be compatible with React Router v6 stable.
+
+### Patch Changes
+
+- 817f3196f6: Updated React Router dependencies to be peer dependencies.
+- 70299c99d5: Updated `FlatRoutes` to be compatible with React Router v6 stable.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.6-next.1
+
 ## 1.0.6-next.0
 
 ### Patch Changes

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import { SessionState, FeatureFlagState, getComponentData, attachComponentData,
 import { z } from 'zod';
 import { ConfigReader } from '@backstage/config';
 export { ConfigReader } from '@backstage/config';
-import { matchRoutes, generatePath, useLocation, Routes, Route, useRoutes } from 'react-router-dom';
+import { matchRoutes, generatePath, useLocation, createRoutesFromChildren, Route, Routes, useRoutes } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import useObservable from 'react-use/lib/useObservable';
 
@@ -1745,10 +1745,142 @@ attachComponentData(FeatureFlagged, "core.featureFlagged", true);
 
 const MATCH_ALL_ROUTE = {
   caseSensitive: false,
-  path: "/*",
+  path: "*",
   element: "match-all",
   routeRefs: /* @__PURE__ */ new Set()
 };
+function stringifyNode(node) {
+  var _a, _b;
+  const anyNode = node;
+  if (anyNode == null ? void 0 : anyNode.type) {
+    return (_b = (_a = anyNode.type.displayName) != null ? _a : anyNode.type.name) != null ? _b : String(anyNode.type);
+  }
+  return String(anyNode);
+}
+function collectSubTree(node, entries = new Array()) {
+  Children.forEach(node, (element) => {
+    if (!isValidElement(element)) {
+      return;
+    }
+    if (element.props.path) {
+      throw new Error(
+        `Elements within the element prop tree may not have paths, found "${element.props.path}"`
+      );
+    }
+    const routeRef = getComponentData(element, "core.mountPoint");
+    if (routeRef) {
+      const plugin = getComponentData(element, "core.plugin");
+      entries.push({ routeRef, plugin });
+    }
+    collectSubTree(element.props.children, entries);
+  });
+  return entries;
+}
+const routingV2Collector = createCollector(
+  () => ({
+    paths: /* @__PURE__ */ new Map(),
+    parents: /* @__PURE__ */ new Map(),
+    objects: new Array()
+  }),
+  (acc, node, parent, ctx) => {
+    var _a, _b, _c, _d, _e, _f;
+    const pathProp = (_a = node.props) == null ? void 0 : _a.path;
+    const mountPoint = getComponentData(node, "core.mountPoint");
+    if (mountPoint && pathProp) {
+      throw new Error(
+        `Path property may not be set directly on a routable extension "${stringifyNode(
+          node
+        )}"`
+      );
+    }
+    if (ctx == null ? void 0 : ctx.isElementAncestor) {
+      return ctx;
+    }
+    if ((parent == null ? void 0 : parent.props.element) === node) {
+      return { ...ctx, isElementAncestor: true };
+    }
+    const parentChildren = (_c = (_b = ctx == null ? void 0 : ctx.obj) == null ? void 0 : _b.children) != null ? _c : acc.objects;
+    if (pathProp !== void 0) {
+      if (typeof pathProp !== "string") {
+        throw new Error(
+          `Element path must be a string at "${stringifyNode(node)}"`
+        );
+      }
+      const path = pathProp.startsWith("/") ? pathProp.slice(1) : pathProp;
+      const elementProp = node.props.element;
+      if (getComponentData(node, "core.gatherMountPoints")) {
+        if (elementProp) {
+          throw new Error(
+            `Mount point gatherers may not have an element prop "${stringifyNode(
+              node
+            )}"`
+          );
+        }
+        const newObj = {
+          path,
+          element: "gathered",
+          routeRefs: /* @__PURE__ */ new Set(),
+          caseSensitive: Boolean((_d = node.props) == null ? void 0 : _d.caseSensitive),
+          children: [MATCH_ALL_ROUTE],
+          plugin: void 0
+        };
+        parentChildren.push(newObj);
+        return {
+          obj: newObj,
+          gatherPath: path,
+          routeRef: ctx == null ? void 0 : ctx.routeRef,
+          gatherRouteRef: ctx == null ? void 0 : ctx.routeRef
+        };
+      }
+      if (elementProp) {
+        const [extension, ...others] = collectSubTree(elementProp);
+        if (others.length > 0) {
+          throw new Error(
+            `Route element with path "${pathProp}" may not contain multiple routable extensions`
+          );
+        }
+        if (!extension) {
+          return ctx;
+        }
+        const { routeRef, plugin } = extension;
+        const newObj = {
+          path,
+          element: "mounted",
+          routeRefs: /* @__PURE__ */ new Set([routeRef]),
+          caseSensitive: Boolean((_e = node.props) == null ? void 0 : _e.caseSensitive),
+          children: [MATCH_ALL_ROUTE],
+          plugin
+        };
+        parentChildren.push(newObj);
+        acc.paths.set(routeRef, path);
+        acc.parents.set(routeRef, ctx == null ? void 0 : ctx.routeRef);
+        return {
+          obj: newObj,
+          routeRef: routeRef != null ? routeRef : ctx == null ? void 0 : ctx.routeRef,
+          gatherPath: path,
+          gatherRouteRef: ctx == null ? void 0 : ctx.gatherRouteRef
+        };
+      }
+    }
+    if (mountPoint) {
+      if (!(ctx == null ? void 0 : ctx.gatherPath)) {
+        throw new Error(
+          `Routable extension "${stringifyNode(
+            node
+          )}" with mount point "${mountPoint}" must be assigned a path`
+        );
+      }
+      (_f = ctx == null ? void 0 : ctx.obj) == null ? void 0 : _f.routeRefs.add(mountPoint);
+      acc.paths.set(mountPoint, ctx.gatherPath);
+      acc.parents.set(mountPoint, ctx == null ? void 0 : ctx.gatherRouteRef);
+      return {
+        ...ctx,
+        routeRef: mountPoint
+      };
+    }
+    return ctx;
+  }
+);
 const routingV1Collector = createCollector(
   () => ({
     paths: /* @__PURE__ */ new Map(),
@@ -1880,6 +2012,7 @@ function joinPaths(...paths) {
   }
   return normalized;
 }
+
 function resolveTargetRef(anyRouteRef, routePaths, routeBindings) {
   let targetRef;
   let subRoutePath = "";
@@ -1914,7 +2047,7 @@ function resolveTargetRef(anyRouteRef, routePaths, routeBindings) {
     return [void 0, ""];
   }
   const resolvedPath = routePaths.get(targetRef);
-  if (!resolvedPath) {
+  if (resolvedPath === void 0) {
     return [void 0, ""];
   }
   const targetPath = joinPaths(resolvedPath, subRoutePath);
@@ -1938,21 +2071,19 @@ function resolveBasePath(targetRef, sourceLocation, routePaths, routeParents, ro
     matchIndex -= 1;
   }
   const parentPath = matchIndex === -1 ? "" : match[matchIndex].pathname;
-  const diffPath = joinPaths(
-    ...refDiffList.slice(0, -1).map((ref) => {
-      const path = routePaths.get(ref);
-      if (!path) {
-        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 parentPath + diffPath;
+  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(parentPath, ...diffPaths)}/`;
 }
 class RouteResolver {
   constructor(routePaths, routeParents, routeObjects, routeBindings, appBasePath) {
@@ -1990,7 +2121,7 @@ class RouteResolver {
       this.routeObjects
     );
     const routeFunc = (...[params]) => {
-      return basePath + generatePath(targetPath, params);
+      return joinPaths(basePath, generatePath(targetPath, params));
     };
     return routeFunc;
   }
@@ -2088,10 +2219,10 @@ function validateRouteParameters(routePaths, routeParents) {
     let fullPath = "";
     while (currentRouteRef) {
       const path = routePaths.get(currentRouteRef);
-      if (!path) {
+      if (path === void 0) {
         throw new Error(`No path for ${currentRouteRef}`);
       }
-      fullPath = `${path}${fullPath}`;
+      fullPath = joinPaths(path, fullPath);
       currentRouteRef = routeParents.get(currentRouteRef);
     }
     const params = fullPath.match(/:(\w+)/g);
@@ -2360,6 +2491,14 @@ function resolveRouteBindings(bindRoutes) {
   return result;
 }
 
+function isReactRouterBeta() {
+  const [obj] = createRoutesFromChildren(/* @__PURE__ */ React.createElement(Route, {
+    index: true,
+    element: /* @__PURE__ */ React.createElement("div", null)
+  }));
+  return !obj.index;
+}
+
 const InternalAppContext = createContext({ routeObjects: [] });
 function getBasePath(configApi) {
   var _a;
@@ -2452,7 +2591,7 @@ class AppManager {
           root: children,
           discoverers: [childDiscoverer, routeElementDiscoverer],
           collectors: {
-            routing: routingV1Collector,
+            routing: isReactRouterBeta() ? routingV1Collector : routingV2Collector,
             collectedPlugins: pluginCollector,
             featureFlags: featureFlagCollector
           }
@@ -2680,9 +2819,11 @@ function createSpecializedApp(options) {
   return new AppManager(options);
 }
 
+let warned = false;
 const FlatRoutes = (props) => {
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
+  const isBeta = useMemo(() => isReactRouterBeta(), []);
   const routes = useElementFilter(
     props.children,
     (elements) => elements.getElements().flatMap((child) => {
@@ -2692,28 +2833,38 @@ const FlatRoutes = (props) => {
         return [];
       }
       path = (_a = path == null ? void 0 : path.replace(/\/\*$/, "")) != null ? _a : "/";
+      let element = isBeta ? child : child.props.element;
+      if (!isBeta && !element) {
+        element = child;
+        if (!warned && process.env.NODE_ENV !== "test") {
+          console.warn(
+            "DEPRECATION WARNING: All elements within <FlatRoutes> must be of type <Route> with an element prop. Existing usages of <Navigate key=[path] to=[to] /> should be replaced with <Route path=[path] element={<Navigate to=[to] />} />."
+          );
+          warned = true;
+        }
+      }
       return [
         {
           path,
-          element: child,
+          element,
           children: child.props.children ? [
             {
-              path: path === "/" ? "/" : "/*",
+              path: path === "/" ? "/" : "*",
               element: child.props.children
             }
           ] : void 0
         }
       ];
-    }).sort((a, b) => b.path.localeCompare(a.path)).map((obj) => {
-      obj.path = obj.path === "/" ? "/" : `${obj.path}/*`;
-      return obj;
-    })
+    }).sort((a, b) => b.path.localeCompare(a.path)).map((obj) => ({ ...obj, path: obj.path === "/" ? "/" : `${obj.path}/*` }))
   );
-  routes.push({
-    element: /* @__PURE__ */ React.createElement(NotFoundErrorPage, null),
-    path: "/*"
-  });
-  return useRoutes(routes);
+  const withNotFound = [
+    ...routes,
+    {
+      path: "*",
+      element: /* @__PURE__ */ React.createElement(NotFoundErrorPage, null)
+    }
+  ];
+  return useRoutes(withNotFound);
 };
 
 export { AlertApiForwarder, ApiFactoryRegistry, ApiProvider, ApiResolver, AppThemeSelector, AtlassianAuth, BitbucketAuth, ErrorAlerter, ErrorApiForwarder, FeatureFlagged, FetchMiddlewares, FlatRoutes, GithubAuth, GitlabAuth, GoogleAuth, LocalStorageFeatureFlags, MicrosoftAuth, NoOpAnalyticsApi, OAuth2, OAuthRequestManager, OktaAuth, OneLoginAuth, SamlAuth, UnhandledErrorForwarder, UrlPatternDiscovery, WebStorage, createFetchApi, createSpecializedApp, defaultConfigLoader };