@backstage/core-app-api 0.1.10 → 0.1.14

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @backstage/core-app-api
 
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.5.0
+  - @backstage/config@0.1.10
+
+## 0.1.13
+
+### Patch Changes
+
+- 671015f132: Switch to using utilities from `@backstage/version-bridge'.
+- bd1981d609: Allow users to specify their own AppThemeProvider
+- Updated dependencies
+  - @backstage/core-components@0.4.2
+  - @backstage/core-plugin-api@0.1.8
+
+## 0.1.12
+
+### Patch Changes
+
+- 841666a19: Removed deprecated internal functions.
+- Updated dependencies
+  - @backstage/core-components@0.4.1
+  - @backstage/config@0.1.9
+  - @backstage/core-plugin-api@0.1.7
+
+## 0.1.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.4.0
+
 ## 0.1.10
 
 ### Patch Changes

package/dist/index.d.ts

@@ -393,6 +393,7 @@ declare type AppComponents = {
     Progress: ComponentType<{}>;
     Router: ComponentType<{}>;
     ErrorBoundaryFallback: ComponentType<ErrorBoundaryFallbackProps>;
+    ThemeProvider: ComponentType<{}>;
     /**
      * An optional sign-in page that will be rendered instead of the AppRouter at startup.
      *

package/dist/index.esm.js

@@ -1,8 +1,9 @@
-import React, { useContext, createContext, Children, isValidElement, useMemo, useState, useEffect } from 'react';
+import React, { useContext, Children, isValidElement, useMemo, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import OAuth2Icon from '@material-ui/icons/AcUnit';
 import ObservableImpl from 'zen-observable';
-import { SessionState, FeatureFlagState, useApi, featureFlagsApiRef, attachComponentData, appThemeApiRef, configApiRef, identityApiRef, createApiFactory, discoveryApiRef, alertApiRef, errorApiRef, storageApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, auth0AuthApiRef, oauth2ApiRef, samlAuthApiRef, oneloginAuthApiRef, oidcAuthApiRef, useApp, useElementFilter } from '@backstage/core-plugin-api';
+import { SessionState, FeatureFlagState, getComponentData, useApi, featureFlagsApiRef, attachComponentData, appThemeApiRef, configApiRef, identityApiRef, createApiFactory, discoveryApiRef, alertApiRef, errorApiRef, storageApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, auth0AuthApiRef, oauth2ApiRef, samlAuthApiRef, oneloginAuthApiRef, oidcAuthApiRef, useApp, useElementFilter } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/config';
 export { ConfigReader } from '@backstage/config';
 import { ThemeProvider, CssBaseline, Button } from '@material-ui/core';
@@ -11,7 +12,7 @@ import { lightTheme, darkTheme } from '@backstage/theme';
 import DarkIcon from '@material-ui/icons/Brightness2';
 import LightIcon from '@material-ui/icons/WbSunny';
 import { matchRoutes, generatePath, Routes, Route, BrowserRouter, useInRouterContext, MemoryRouter, useRoutes } from 'react-router-dom';
-import { useObservable, useAsync } from 'react-use';
+import { useAsync, useObservable } from 'react-use';
 import MuiApartmentIcon from '@material-ui/icons/Apartment';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import MuiCategoryIcon from '@material-ui/icons/Category';
@@ -44,38 +45,7 @@ class ApiAggregator {
   }
 }
 
-function getGlobalObject() {
-  if (typeof window !== "undefined" && window.Math === Math) {
-    return window;
-  }
-  if (typeof self !== "undefined" && self.Math === Math) {
-    return self;
-  }
-  return Function("return this")();
-}
-const globalObject = getGlobalObject();
-const makeKey = (id) => `__@backstage/${id}__`;
-function getOrCreateGlobalSingleton(id, supplier) {
-  const key = makeKey(id);
-  let value = globalObject[key];
-  if (value) {
-    return value;
-  }
-  value = supplier();
-  globalObject[key] = value;
-  return value;
-}
-
-function createVersionedValueMap(versions) {
-  Object.freeze(versions);
-  return {
-    atVersion(version) {
-      return versions[version];
-    }
-  };
-}
-
-const ApiContext = getOrCreateGlobalSingleton("api-context", () => createContext(void 0));
+const ApiContext = createVersionedContext("api-context");
 const ApiProvider = ({
   apis,
   children
@@ -1677,23 +1647,6 @@ function routeElementDiscoverer(element) {
   return void 0;
 }
 
-const DATA_KEY = Symbol("backstage-component-data");
-const store = getOrCreateGlobalSingleton("component-data-store", () => new WeakMap());
-function getComponentData(node, type) {
-  if (!node) {
-    return void 0;
-  }
-  const component = node.type;
-  if (!component) {
-    return void 0;
-  }
-  const container = store.get(component) || component[DATA_KEY];
-  if (!container) {
-    return void 0;
-  }
-  return container.map.get(type);
-}
-
 const pluginCollector = createCollector(() => new Set(), (acc, node) => {
   const plugin = getComponentData(node, "core.plugin");
   if (plugin) {
@@ -1929,7 +1882,7 @@ class RouteResolver {
   }
 }
 
-const RoutingContext = getOrCreateGlobalSingleton("routing-context", () => createContext(void 0));
+const RoutingContext = createVersionedContext("routing-context");
 const RoutingProvider = ({
   routePaths,
   routeParents,
@@ -1975,7 +1928,7 @@ function validateRoutes(routePaths, routeParents) {
   }
 }
 
-const AppContext = getOrCreateGlobalSingleton("app-context", () => createContext(void 0));
+const AppContext = createVersionedContext("app-context");
 const AppContextProvider = ({
   appContext,
   children
@@ -2036,52 +1989,6 @@ class AppIdentity {
   }
 }
 
-function resolveTheme(themeId, shouldPreferDark, themes) {
-  if (themeId !== void 0) {
-    const selectedTheme = themes.find((theme) => theme.id === themeId);
-    if (selectedTheme) {
-      return selectedTheme;
-    }
-  }
-  if (shouldPreferDark) {
-    const darkTheme = themes.find((theme) => theme.variant === "dark");
-    if (darkTheme) {
-      return darkTheme;
-    }
-  }
-  const lightTheme = themes.find((theme) => theme.variant === "light");
-  if (lightTheme) {
-    return lightTheme;
-  }
-  return themes[0];
-}
-const useShouldPreferDarkTheme = () => {
-  const mediaQuery = useMemo(() => window.matchMedia("(prefers-color-scheme: dark)"), []);
-  const [shouldPreferDark, setPrefersDark] = useState(mediaQuery.matches);
-  useEffect(() => {
-    const listener = (event) => {
-      setPrefersDark(event.matches);
-    };
-    mediaQuery.addListener(listener);
-    return () => {
-      mediaQuery.removeListener(listener);
-    };
-  }, [mediaQuery]);
-  return shouldPreferDark;
-};
-function AppThemeProvider({children}) {
-  const appThemeApi = useApi(appThemeApiRef);
-  const themeId = useObservable(appThemeApi.activeThemeId$(), appThemeApi.getActiveThemeId());
-  const shouldPreferDark = Boolean(window.matchMedia) ? useShouldPreferDarkTheme() : false;
-  const appTheme = resolveTheme(themeId, shouldPreferDark, appThemeApi.getInstalledThemes());
-  if (!appTheme) {
-    throw new Error("App has no themes");
-  }
-  return /* @__PURE__ */ React.createElement(ThemeProvider, {
-    theme: appTheme.theme
-  }, /* @__PURE__ */ React.createElement(CssBaseline, null, children));
-}
-
 function generateBoundRoutes(bindRoutes) {
   const result = new Map();
   if (bindRoutes) {
@@ -2124,11 +2031,12 @@ function useConfigLoader(configLoader, components, appThemeApi) {
       error: config.error
     });
   }
+  const {ThemeProvider} = components;
   if (noConfigNode) {
     return {
       node: /* @__PURE__ */ React.createElement(ApiProvider, {
         apis: ApiRegistry.from([[appThemeApiRef, appThemeApi]])
-      }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, noConfigNode))
+      }, /* @__PURE__ */ React.createElement(ThemeProvider, null, noConfigNode))
     };
   }
   const configReader = ConfigReader.fromConfigs((_a = config.value) != null ? _a : []);
@@ -2221,11 +2129,12 @@ class PrivateAppImpl {
       if ("node" in loadedConfig) {
         return loadedConfig.node;
       }
+      const {ThemeProvider} = this.components;
       return /* @__PURE__ */ React.createElement(ApiProvider, {
         apis: this.getApiHolder()
       }, /* @__PURE__ */ React.createElement(AppContextProvider, {
         appContext
-      }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, {
+      }, /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, {
         routePaths,
         routeParents,
         routeObjects,
@@ -2336,6 +2245,52 @@ class PrivateAppImpl {
   }
 }
 
+function resolveTheme(themeId, shouldPreferDark, themes) {
+  if (themeId !== void 0) {
+    const selectedTheme = themes.find((theme) => theme.id === themeId);
+    if (selectedTheme) {
+      return selectedTheme;
+    }
+  }
+  if (shouldPreferDark) {
+    const darkTheme = themes.find((theme) => theme.variant === "dark");
+    if (darkTheme) {
+      return darkTheme;
+    }
+  }
+  const lightTheme = themes.find((theme) => theme.variant === "light");
+  if (lightTheme) {
+    return lightTheme;
+  }
+  return themes[0];
+}
+const useShouldPreferDarkTheme = () => {
+  const mediaQuery = useMemo(() => window.matchMedia("(prefers-color-scheme: dark)"), []);
+  const [shouldPreferDark, setPrefersDark] = useState(mediaQuery.matches);
+  useEffect(() => {
+    const listener = (event) => {
+      setPrefersDark(event.matches);
+    };
+    mediaQuery.addListener(listener);
+    return () => {
+      mediaQuery.removeListener(listener);
+    };
+  }, [mediaQuery]);
+  return shouldPreferDark;
+};
+function AppThemeProvider({children}) {
+  const appThemeApi = useApi(appThemeApiRef);
+  const themeId = useObservable(appThemeApi.activeThemeId$(), appThemeApi.getActiveThemeId());
+  const shouldPreferDark = Boolean(window.matchMedia) ? useShouldPreferDarkTheme() : false;
+  const appTheme = resolveTheme(themeId, shouldPreferDark, appThemeApi.getInstalledThemes());
+  if (!appTheme) {
+    throw new Error("App has no themes");
+  }
+  return /* @__PURE__ */ React.createElement(ThemeProvider, {
+    theme: appTheme.theme
+  }, /* @__PURE__ */ React.createElement(CssBaseline, null, children));
+}
+
 const defaultApis = [
   createApiFactory({
     api: discoveryApiRef,
@@ -2592,6 +2547,7 @@ function createApp(options) {
     Progress,
     Router: BrowserRouter,
     ErrorBoundaryFallback: DefaultErrorBoundaryFallback,
+    ThemeProvider: AppThemeProvider,
     ...options == null ? void 0 : options.components
   };
   const themes = (_c = options == null ? void 0 : options.themes) != null ? _c : [