@backstage/frontend-plugin-api 0.9.5 → 0.9.6-next.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @backstage/frontend-plugin-api
 
+## 0.9.6-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.16.5-next.0
+  - @backstage/core-plugin-api@1.10.4
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+
+## 0.9.6-next.0
+
+### Patch Changes
+
+- de72253: Added a new `ExtensionBoundary.lazyComponent` helper in addition to the existing `ExtensionBoundary.lazy` helper.
+
 ## 0.9.5
 
 ### Patch Changes

package/dist/components/ExtensionBoundary.esm.js

@@ -36,13 +36,20 @@ function ExtensionBoundary(props) {
   return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(ErrorBoundary, { plugin, Fallback: fallback }, /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes }, /* @__PURE__ */ React.createElement(RouteTracker, { disableTracking: !(routable ?? doesOutputRoutePath) }, children))));
 }
 ((ExtensionBoundary2) => {
-  function lazy$1(appNode, lazyElement) {
+  function lazy$1(appNode, loader) {
     const ExtensionComponent = lazy(
-      () => lazyElement().then((element) => ({ default: () => element }))
+      () => loader().then((element) => ({ default: () => element }))
     );
     return /* @__PURE__ */ React.createElement(ExtensionBoundary2, { node: appNode }, /* @__PURE__ */ React.createElement(ExtensionComponent, null));
   }
   ExtensionBoundary2.lazy = lazy$1;
+  function lazyComponent(appNode, loader) {
+    const ExtensionComponent = lazy(
+      () => loader().then((Component) => ({ default: Component }))
+    );
+    return (props) => /* @__PURE__ */ React.createElement(ExtensionBoundary2, { node: appNode }, /* @__PURE__ */ React.createElement(ExtensionComponent, { ...props }));
+  }
+  ExtensionBoundary2.lazyComponent = lazyComponent;
 })(ExtensionBoundary || (ExtensionBoundary = {}));
 
 export { ExtensionBoundary };

package/dist/components/ExtensionBoundary.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionBoundary.esm.js","sources":["../../src/components/ExtensionBoundary.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n  PropsWithChildren,\n  ReactNode,\n  Suspense,\n  useEffect,\n  lazy as reactLazy,\n} from 'react';\nimport { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';\nimport { ErrorBoundary } from './ErrorBoundary';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { routableExtensionRenderedEvent } from '../../../core-plugin-api/src/analytics/Tracker';\nimport { AppNode, useComponentRef } from '../apis';\nimport { coreComponentRefs } from './coreComponentRefs';\nimport { coreExtensionData } from '../wiring';\n\ntype RouteTrackerProps = PropsWithChildren<{\n  disableTracking?: boolean;\n}>;\n\nconst RouteTracker = (props: RouteTrackerProps) => {\n  const { disableTracking, children } = props;\n  const analytics = useAnalytics();\n\n  // This event, never exposed to end-users of the analytics API,\n  // helps inform which extension metadata gets associated with a\n  // navigation event when the route navigated to is a gathered\n  // mountpoint.\n  useEffect(() => {\n    if (disableTracking) return;\n    analytics.captureEvent(routableExtensionRenderedEvent, '');\n  }, [analytics, disableTracking]);\n\n  return <>{children}</>;\n};\n\n/** @public */\nexport interface ExtensionBoundaryProps {\n  node: AppNode;\n  /**\n   * This explicitly marks the extension as routable for the purpose of\n   * capturing analytics events. If not provided, the extension boundary will be\n   * marked as routable if it outputs a routePath.\n   */\n  routable?: boolean;\n  children: ReactNode;\n}\n\n/** @public */\nexport function ExtensionBoundary(props: ExtensionBoundaryProps) {\n  const { node, routable, children } = props;\n\n  const doesOutputRoutePath = Boolean(\n    node.instance?.getData(coreExtensionData.routePath),\n  );\n\n  const plugin = node.spec.source;\n  const Progress = useComponentRef(coreComponentRefs.progress);\n  const fallback = useComponentRef(coreComponentRefs.errorBoundaryFallback);\n\n  // Skipping \"routeRef\" attribute in the new system, the extension \"id\" should provide more insight\n  const attributes = {\n    extensionId: node.spec.id,\n    pluginId: node.spec.source?.id ?? 'app',\n  };\n\n  return (\n    <Suspense fallback={<Progress />}>\n      <ErrorBoundary plugin={plugin} Fallback={fallback}>\n        <AnalyticsContext attributes={attributes}>\n          <RouteTracker disableTracking={!(routable ?? doesOutputRoutePath)}>\n            {children}\n          </RouteTracker>\n        </AnalyticsContext>\n      </ErrorBoundary>\n    </Suspense>\n  );\n}\n\n/** @public */\nexport namespace ExtensionBoundary {\n  export function lazy(\n    appNode: AppNode,\n    lazyElement: () => Promise<JSX.Element>,\n  ): JSX.Element {\n    const ExtensionComponent = reactLazy(() =>\n      lazyElement().then(element => ({ default: () => element })),\n    );\n    return (\n      <ExtensionBoundary node={appNode}>\n        <ExtensionComponent />\n      </ExtensionBoundary>\n    );\n  }\n}\n"],"names":["ExtensionBoundary","lazy","reactLazy"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAe,CAAC,KAA6B,KAAA;AACjD,EAAM,MAAA,EAAE,eAAiB,EAAA,QAAA,EAAa,GAAA,KAAA;AACtC,EAAA,MAAM,YAAY,YAAa,EAAA;AAM/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,eAAiB,EAAA;AACrB,IAAU,SAAA,CAAA,YAAA,CAAa,gCAAgC,EAAE,CAAA;AAAA,GACxD,EAAA,CAAC,SAAW,EAAA,eAAe,CAAC,CAAA;AAE/B,EAAA,iEAAU,QAAS,CAAA;AACrB,CAAA;AAeO,SAAS,kBAAkB,KAA+B,EAAA;AAC/D,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA;AAErC,EAAA,MAAM,mBAAsB,GAAA,OAAA;AAAA,IAC1B,IAAK,CAAA,QAAA,EAAU,OAAQ,CAAA,iBAAA,CAAkB,SAAS;AAAA,GACpD;AAEA,EAAM,MAAA,MAAA,GAAS,KAAK,IAAK,CAAA,MAAA;AACzB,EAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC3D,EAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAGxE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,WAAA,EAAa,KAAK,IAAK,CAAA,EAAA;AAAA,IACvB,QAAU,EAAA,IAAA,CAAK,IAAK,CAAA,MAAA,EAAQ,EAAM,IAAA;AAAA,GACpC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,QAAU,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CAC5B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,MAAA,EAAgB,QAAU,EAAA,QAAA,EAAA,sCACtC,gBAAiB,EAAA,EAAA,UAAA,EAAA,kBACf,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,eAAiB,EAAA,EAAE,YAAY,mBAC1C,CAAA,EAAA,EAAA,QACH,CACF,CACF,CACF,CAAA;AAEJ;AAAA,CAGO,CAAUA,kBAAV,KAAA;AACE,EAAS,SAAAC,MAAA,CACd,SACA,WACa,EAAA;AACb,IAAA,MAAM,kBAAqB,GAAAC,IAAA;AAAA,MAAU,MACnC,aAAc,CAAA,IAAA,CAAK,cAAY,EAAE,OAAA,EAAS,MAAM,OAAA,EAAU,CAAA;AAAA,KAC5D;AACA,IAAA,2CACGF,kBAAA,EAAA,EAAkB,MAAM,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,wBAAmB,CACtB,CAAA;AAAA;AAVG,EAAAA,kBAAS,CAAA,IAAA,GAAAC,MAAA;AAAA,CADD,EAAA,iBAAA,KAAA,iBAAA,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"ExtensionBoundary.esm.js","sources":["../../src/components/ExtensionBoundary.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n  PropsWithChildren,\n  ReactNode,\n  Suspense,\n  useEffect,\n  lazy as reactLazy,\n} from 'react';\nimport { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';\nimport { ErrorBoundary } from './ErrorBoundary';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { routableExtensionRenderedEvent } from '../../../core-plugin-api/src/analytics/Tracker';\nimport { AppNode, useComponentRef } from '../apis';\nimport { coreComponentRefs } from './coreComponentRefs';\nimport { coreExtensionData } from '../wiring';\n\ntype RouteTrackerProps = PropsWithChildren<{\n  disableTracking?: boolean;\n}>;\n\nconst RouteTracker = (props: RouteTrackerProps) => {\n  const { disableTracking, children } = props;\n  const analytics = useAnalytics();\n\n  // This event, never exposed to end-users of the analytics API,\n  // helps inform which extension metadata gets associated with a\n  // navigation event when the route navigated to is a gathered\n  // mountpoint.\n  useEffect(() => {\n    if (disableTracking) return;\n    analytics.captureEvent(routableExtensionRenderedEvent, '');\n  }, [analytics, disableTracking]);\n\n  return <>{children}</>;\n};\n\n/** @public */\nexport interface ExtensionBoundaryProps {\n  node: AppNode;\n  /**\n   * This explicitly marks the extension as routable for the purpose of\n   * capturing analytics events. If not provided, the extension boundary will be\n   * marked as routable if it outputs a routePath.\n   */\n  routable?: boolean;\n  children: ReactNode;\n}\n\n/** @public */\nexport function ExtensionBoundary(props: ExtensionBoundaryProps) {\n  const { node, routable, children } = props;\n\n  const doesOutputRoutePath = Boolean(\n    node.instance?.getData(coreExtensionData.routePath),\n  );\n\n  const plugin = node.spec.source;\n  const Progress = useComponentRef(coreComponentRefs.progress);\n  const fallback = useComponentRef(coreComponentRefs.errorBoundaryFallback);\n\n  // Skipping \"routeRef\" attribute in the new system, the extension \"id\" should provide more insight\n  const attributes = {\n    extensionId: node.spec.id,\n    pluginId: node.spec.source?.id ?? 'app',\n  };\n\n  return (\n    <Suspense fallback={<Progress />}>\n      <ErrorBoundary plugin={plugin} Fallback={fallback}>\n        <AnalyticsContext attributes={attributes}>\n          <RouteTracker disableTracking={!(routable ?? doesOutputRoutePath)}>\n            {children}\n          </RouteTracker>\n        </AnalyticsContext>\n      </ErrorBoundary>\n    </Suspense>\n  );\n}\n\n/** @public */\nexport namespace ExtensionBoundary {\n  export function lazy(\n    appNode: AppNode,\n    loader: () => Promise<JSX.Element>,\n  ): JSX.Element {\n    const ExtensionComponent = reactLazy(() =>\n      loader().then(element => ({ default: () => element })),\n    );\n    return (\n      <ExtensionBoundary node={appNode}>\n        <ExtensionComponent />\n      </ExtensionBoundary>\n    );\n  }\n\n  export function lazyComponent<TProps extends {}>(\n    appNode: AppNode,\n    loader: () => Promise<(props: TProps) => JSX.Element>,\n  ): (props: TProps) => JSX.Element {\n    const ExtensionComponent = reactLazy(() =>\n      loader().then(Component => ({ default: Component })),\n    ) as unknown as React.ComponentType<TProps>;\n\n    return (props: TProps) => (\n      <ExtensionBoundary node={appNode}>\n        <ExtensionComponent {...props} />\n      </ExtensionBoundary>\n    );\n  }\n}\n"],"names":["ExtensionBoundary","lazy","reactLazy"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAe,CAAC,KAA6B,KAAA;AACjD,EAAM,MAAA,EAAE,eAAiB,EAAA,QAAA,EAAa,GAAA,KAAA;AACtC,EAAA,MAAM,YAAY,YAAa,EAAA;AAM/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,eAAiB,EAAA;AACrB,IAAU,SAAA,CAAA,YAAA,CAAa,gCAAgC,EAAE,CAAA;AAAA,GACxD,EAAA,CAAC,SAAW,EAAA,eAAe,CAAC,CAAA;AAE/B,EAAA,iEAAU,QAAS,CAAA;AACrB,CAAA;AAeO,SAAS,kBAAkB,KAA+B,EAAA;AAC/D,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA;AAErC,EAAA,MAAM,mBAAsB,GAAA,OAAA;AAAA,IAC1B,IAAK,CAAA,QAAA,EAAU,OAAQ,CAAA,iBAAA,CAAkB,SAAS;AAAA,GACpD;AAEA,EAAM,MAAA,MAAA,GAAS,KAAK,IAAK,CAAA,MAAA;AACzB,EAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC3D,EAAM,MAAA,QAAA,GAAW,eAAgB,CAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAGxE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,WAAA,EAAa,KAAK,IAAK,CAAA,EAAA;AAAA,IACvB,QAAU,EAAA,IAAA,CAAK,IAAK,CAAA,MAAA,EAAQ,EAAM,IAAA;AAAA,GACpC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,QAAU,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CAC5B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,MAAA,EAAgB,QAAU,EAAA,QAAA,EAAA,sCACtC,gBAAiB,EAAA,EAAA,UAAA,EAAA,kBACf,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,eAAiB,EAAA,EAAE,YAAY,mBAC1C,CAAA,EAAA,EAAA,QACH,CACF,CACF,CACF,CAAA;AAEJ;AAAA,CAGO,CAAUA,kBAAV,KAAA;AACE,EAAS,SAAAC,MAAA,CACd,SACA,MACa,EAAA;AACb,IAAA,MAAM,kBAAqB,GAAAC,IAAA;AAAA,MAAU,MACnC,QAAS,CAAA,IAAA,CAAK,cAAY,EAAE,OAAA,EAAS,MAAM,OAAA,EAAU,CAAA;AAAA,KACvD;AACA,IAAA,2CACGF,kBAAA,EAAA,EAAkB,MAAM,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,wBAAmB,CACtB,CAAA;AAAA;AAVG,EAAAA,kBAAS,CAAA,IAAA,GAAAC,MAAA;AAcT,EAAS,SAAA,aAAA,CACd,SACA,MACgC,EAAA;AAChC,IAAA,MAAM,kBAAqB,GAAAC,IAAA;AAAA,MAAU,MACnC,QAAS,CAAA,IAAA,CAAK,gBAAc,EAAE,OAAA,EAAS,WAAY,CAAA;AAAA,KACrD;AAEA,IAAO,OAAA,CAAC,KACN,qBAAA,KAAA,CAAA,aAAA,CAACF,kBAAA,EAAA,EAAkB,IAAM,EAAA,OAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAoB,GAAG,KAAA,EAAO,CACjC,CAAA;AAAA;AAXG,EAAAA,kBAAS,CAAA,aAAA,GAAA,aAAA;AAAA,CAfD,EAAA,iBAAA,KAAA,iBAAA,GAAA,EAAA,CAAA,CAAA;;;;"}

package/dist/index.d.ts

@@ -835,7 +835,8 @@ interface ExtensionBoundaryProps {
 declare function ExtensionBoundary(props: ExtensionBoundaryProps): React__default.JSX.Element;
 /** @public */
 declare namespace ExtensionBoundary {
-    function lazy(appNode: AppNode, lazyElement: () => Promise<JSX.Element>): JSX.Element;
+    function lazy(appNode: AppNode, loader: () => Promise<JSX.Element>): JSX.Element;
+    function lazyComponent<TProps extends {}>(appNode: AppNode, loader: () => Promise<(props: TProps) => JSX.Element>): (props: TProps) => JSX.Element;
 }
 
 /** @public */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/frontend-plugin-api",
-  "version": "0.9.5",
+  "version": "0.9.6-next.1",
   "backstage": {
     "role": "web-library"
   },
@@ -31,20 +31,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.16.4",
-    "@backstage/core-plugin-api": "^1.10.4",
-    "@backstage/types": "^1.2.1",
-    "@backstage/version-bridge": "^1.0.11",
+    "@backstage/core-components": "0.16.5-next.0",
+    "@backstage/core-plugin-api": "1.10.4",
+    "@backstage/types": "1.2.1",
+    "@backstage/version-bridge": "1.0.11",
     "@material-ui/core": "^4.12.4",
     "lodash": "^4.17.21",
     "zod": "^3.22.4",
     "zod-to-json-schema": "^3.21.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.30.0",
-    "@backstage/frontend-app-api": "^0.10.5",
-    "@backstage/frontend-test-utils": "^0.2.6",
-    "@backstage/test-utils": "^1.7.5",
+    "@backstage/cli": "0.30.1-next.0",
+    "@backstage/frontend-app-api": "0.10.6-next.1",
+    "@backstage/frontend-test-utils": "0.2.7-next.1",
+    "@backstage/test-utils": "1.7.5",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.0.0",