@backstage/frontend-app-api 0.3.0-next.0 → 0.3.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @backstage/frontend-app-api
 
+## 0.3.0-next.2
+
+### Patch Changes
+
+- [#20999](https://github.com/backstage/backstage/pull/20999) [`fdc348d5d3`](https://github.com/backstage/backstage/commit/fdc348d5d30a98b52d8a756daba29d616418da93) Thanks [@Rugvip](https://github.com/Rugvip)! - The options parameter of `createApp` is now optional.
+
+- [#20888](https://github.com/backstage/backstage/pull/20888) [`733bd95746`](https://github.com/backstage/backstage/commit/733bd95746b99ad8cdb4a7b87e8dc3e16d3b764a) Thanks [@Rugvip](https://github.com/Rugvip)! - Implement new `AppTreeApi`
+
+- [#20999](https://github.com/backstage/backstage/pull/20999) [`fa28d4e6df`](https://github.com/backstage/backstage/commit/fa28d4e6dfcbee2bc8695b7b24289a401df96acd) Thanks [@Rugvip](https://github.com/Rugvip)! - No longer throw error on invalid input if the child is disabled.
+
+- Updated dependencies
+  - @backstage/core-components@0.13.8-next.2
+  - @backstage/frontend-plugin-api@0.3.0-next.2
+  - @backstage/plugin-graphiql@0.3.0-next.2
+
+## 0.3.0-next.1
+
+### Patch Changes
+
+- fe6d09953d: Fix for app node output IDs not being serialized correctly.
+- 77f009b35d: Internal updates to match changes in the experimental `@backstage/frontend-plugin-api`.
+- 4d6fa921db: Internal refactor to rename the app graph to app tree
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.3.0-next.1
+  - @backstage/plugin-graphiql@0.3.0-next.1
+  - @backstage/core-components@0.13.8-next.1
+  - @backstage/config@1.1.1
+  - @backstage/core-app-api@1.11.1-next.0
+  - @backstage/core-plugin-api@1.8.0-next.0
+  - @backstage/theme@0.4.4-next.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7-next.0
+
 ## 0.3.0-next.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -58,7 +58,7 @@ declare function createExtensionTree(options: {
     config: Config;
 }): ExtensionTree;
 /** @public */
-declare function createApp(options: {
+declare function createApp(options?: {
     features?: (BackstagePlugin | ExtensionOverrides)[];
     configLoader?: () => Promise<ConfigApi>;
     bindRoutes?(context: {

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import { ConfigReader } from '@backstage/config';
-import { createExtension, createExtensionInput, coreExtensionData, useRouteRef, createThemeExtension } from '@backstage/frontend-plugin-api';
+import { createExtension, createExtensionInput, coreExtensionData, useRouteRef, createThemeExtension, appTreeApiRef } from '@backstage/frontend-plugin-api';
 import { useRoutes, BrowserRouter, useInRouterContext, MemoryRouter, matchRoutes, generatePath, 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';
@@ -60,10 +60,10 @@ const Core = createExtension({
   output: {
     root: coreExtensionData.reactElement
   },
-  factory({ bind, inputs }) {
-    bind({
+  factory({ inputs }) {
+    return {
       root: inputs.root.element
-    });
+    };
   }
 });
 
@@ -80,7 +80,7 @@ const CoreRoutes = createExtension({
   output: {
     element: coreExtensionData.reactElement
   },
-  factory({ bind, inputs }) {
+  factory({ inputs }) {
     const Routes = () => {
       const element = useRoutes(
         inputs.routes.map((route) => ({
@@ -90,9 +90,9 @@ const CoreRoutes = createExtension({
       );
       return element;
     };
-    bind({
+    return {
       element: /* @__PURE__ */ React.createElement(Routes, null)
-    });
+    };
   }
 });
 
@@ -116,10 +116,10 @@ const CoreLayout = createExtension({
   output: {
     element: coreExtensionData.reactElement
   },
-  factory({ bind, inputs }) {
-    bind({
+  factory({ inputs }) {
+    return {
       element: /* @__PURE__ */ React.createElement(SidebarPage, null, inputs.nav.element, inputs.content.element)
-    });
+    };
   }
 });
 
@@ -214,10 +214,10 @@ const CoreNav = createExtension({
   output: {
     element: coreExtensionData.reactElement
   },
-  factory({ bind, inputs }) {
-    bind({
+  factory({ inputs }) {
+    return {
       element: /* @__PURE__ */ React.createElement(Sidebar, null, /* @__PURE__ */ React.createElement(SidebarLogo, null), /* @__PURE__ */ React.createElement(SidebarDivider, null), inputs.items.map((item, index) => /* @__PURE__ */ React.createElement(SidebarNavItem, { ...item.target, key: index })))
-    });
+    };
   }
 });
 
@@ -1827,7 +1827,7 @@ class SerializableAppNode {
   }
   toString() {
     const dataRefs = this.instance && [...this.instance.getDataRefs()];
-    const out = dataRefs && dataRefs.length > 0 ? ` out=[${[...dataRefs.keys()].join(", ")}]` : "";
+    const out = dataRefs && dataRefs.length > 0 ? ` out=[${[...dataRefs].map((r) => r.id).join(", ")}]` : "";
     if (this.edges.attachments.size === 0) {
       return `<${this.spec.id}${out} />`;
     }
@@ -1840,7 +1840,7 @@ class SerializableAppNode {
     ].join("\n");
   }
 }
-function resolveAppGraph(rootNodeId, specs) {
+function resolveAppTree(rootNodeId, specs) {
   const nodes = /* @__PURE__ */ new Map();
   let rootNode = void 0;
   const orphansByParent = /* @__PURE__ */ new Map();
@@ -1874,7 +1874,7 @@ function resolveAppGraph(rootNodeId, specs) {
     }
   }
   if (!rootNode) {
-    throw new Error(`No root node with id '${rootNodeId}' found in app graph`);
+    throw new Error(`No root node with id '${rootNodeId}' found in app tree`);
   }
   return {
     root: rootNode,
@@ -2035,7 +2035,7 @@ function resolveAppNodeSpecs(options) {
       throw new Error(`Extension ${extensionId} does not exist`);
     }
   }
-  return configuredExtensions.filter((override) => !override.params.disabled).map((param) => ({
+  return configuredExtensions.map((param) => ({
     id: param.extension.id,
     attachTo: param.params.attachTo,
     extension: param.extension,
@@ -2106,26 +2106,24 @@ function createAppNodeInstance(options) {
     );
   }
   try {
-    extension.factory({
+    const namedOutputs = extension.factory({
       source,
       config: parsedConfig,
-      bind: (namedOutputs) => {
-        for (const [name, output] of Object.entries(namedOutputs)) {
-          const ref = extension.output[name];
-          if (!ref) {
-            throw new Error(`unknown output provided via '${name}'`);
-          }
-          if (extensionData.has(ref.id)) {
-            throw new Error(
-              `duplicate extension data '${ref.id}' received via output '${name}'`
-            );
-          }
-          extensionData.set(ref.id, output);
-          extensionDataRefs.add(ref);
-        }
-      },
       inputs: resolveInputs(extension.inputs, attachments)
     });
+    for (const [name, output] of Object.entries(namedOutputs)) {
+      const ref = extension.output[name];
+      if (!ref) {
+        throw new Error(`unknown output provided via '${name}'`);
+      }
+      if (extensionData.has(ref.id)) {
+        throw new Error(
+          `duplicate extension data '${ref.id}' received via output '${name}'`
+        );
+      }
+      extensionData.set(ref.id, output);
+      extensionDataRefs.add(ref);
+    }
   } catch (e) {
     throw new Error(
       `Failed to instantiate extension '${id}'${e.name === "Error" ? `, ${e.message}` : `; caused by ${e}`}`
@@ -2157,7 +2155,9 @@ function instantiateAppNodeTree(rootNode) {
         }
         return [{ id: child.spec.id, instance: childInstance }];
       });
-      instantiatedAttachments.set(input, instantiatedChildren);
+      if (instantiatedChildren.length > 0) {
+        instantiatedAttachments.set(input, instantiatedChildren);
+      }
     }
     node.instance = createAppNodeInstance({
       spec: node.spec,
@@ -2168,8 +2168,8 @@ function instantiateAppNodeTree(rootNode) {
   createInstance(rootNode);
 }
 
-function createAppGraph(options) {
-  const appGraph = resolveAppGraph(
+function createAppTree(options) {
+  const tree = resolveAppTree(
     "core",
     resolveAppNodeSpecs({
       features: options.features,
@@ -2178,8 +2178,8 @@ function createAppGraph(options) {
       forbidden: /* @__PURE__ */ new Set(["core"])
     })
   );
-  instantiateAppNodeTree(appGraph.root);
-  return appGraph;
+  instantiateAppNodeTree(tree.root);
+  return tree;
 }
 
 const builtinExtensions = [
@@ -2192,7 +2192,7 @@ const builtinExtensions = [
 ];
 function createExtensionTree(options) {
   const features = getAvailableFeatures(options.config);
-  const graph = createAppGraph({
+  const tree = createAppTree({
     features,
     builtinExtensions,
     config: options.config
@@ -2208,11 +2208,11 @@ function createExtensionTree(options) {
   }
   return {
     getExtension(id) {
-      return convertNode(graph.nodes.get(id));
+      return convertNode(tree.nodes.get(id));
     },
     getExtensionAttachments(id, inputName) {
       var _a, _b, _c;
-      return (_c = (_b = (_a = graph.nodes.get(id)) == null ? void 0 : _a.edges.attachments.get(inputName)) == null ? void 0 : _b.map(convertNode).filter((node) => Boolean(node))) != null ? _c : [];
+      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) => {
@@ -2273,13 +2273,13 @@ function createApp(options) {
       overrideBaseUrlConfigs(defaultConfigLoaderSync())
     );
     const discoveredFeatures = getAvailableFeatures(config);
-    const loadedFeatures = (_d = await ((_c = options.featureLoader) == null ? void 0 : _c.call(options, { config }))) != null ? _d : [];
+    const loadedFeatures = (_d = await ((_c = options == null ? void 0 : options.featureLoader) == null ? void 0 : _c.call(options, { config }))) != null ? _d : [];
     const allFeatures = deduplicateFeatures([
       ...discoveredFeatures,
       ...loadedFeatures,
-      ...(_e = options.features) != null ? _e : []
+      ...(_e = options == null ? void 0 : options.features) != null ? _e : []
     ]);
-    const appGraph = createAppGraph({
+    const tree = createAppTree({
       features: allFeatures,
       builtinExtensions,
       config
@@ -2290,19 +2290,17 @@ function createApp(options) {
       )
     );
     const routeIds = collectRouteIds(allFeatures);
-    const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: createApiHolder(appGraph.root, config) }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(
+    const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: createApiHolder(tree, config) }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(
       RoutingProvider,
       {
-        ...extractRouteInfoFromAppNode(appGraph.root),
+        ...extractRouteInfoFromAppNode(tree.root),
         routeBindings: resolveRouteBindings(
-          options.bindRoutes,
+          options == null ? void 0 : options.bindRoutes,
           config,
           routeIds
         )
       },
-      /* @__PURE__ */ React.createElement(BrowserRouter, null, appGraph.root.instance.getData(
-        coreExtensionData.reactElement
-      ))
+      /* @__PURE__ */ React.createElement(BrowserRouter, null, tree.root.instance.getData(coreExtensionData.reactElement))
     ))));
     return { default: App };
   }
@@ -2359,14 +2357,14 @@ function createLegacyAppContext(plugins) {
     }
   };
 }
-function createApiHolder(core, configApi) {
+function createApiHolder(tree, configApi) {
   var _a, _b, _c, _d;
   const factoryRegistry = new ApiFactoryRegistry();
-  const pluginApis = (_b = (_a = core.edges.attachments.get("apis")) == null ? void 0 : _a.map((e) => {
+  const pluginApis = (_b = (_a = tree.root.edges.attachments.get("apis")) == null ? void 0 : _a.map((e) => {
     var _a2;
     return (_a2 = e.instance) == null ? void 0 : _a2.getData(coreExtensionData.apiFactory);
   }).filter((x) => !!x)) != null ? _b : [];
-  const themeExtensions = (_d = (_c = core.edges.attachments.get("themes")) == null ? void 0 : _c.map((e) => {
+  const themeExtensions = (_d = (_c = tree.root.edges.attachments.get("themes")) == null ? void 0 : _c.map((e) => {
     var _a2;
     return (_a2 = e.instance) == null ? void 0 : _a2.getData(coreExtensionData.theme);
   }).filter((x) => !!x)) != null ? _d : [];
@@ -2409,6 +2407,13 @@ function createApiHolder(core, configApi) {
       return appIdentityProxy;
     }
   });
+  factoryRegistry.register("static", {
+    api: appTreeApiRef,
+    deps: {},
+    factory: () => ({
+      getTree: () => ({ tree })
+    })
+  });
   factoryRegistry.register("static", {
     api: appThemeApiRef,
     deps: {},