added the frontend-extension-bundle role

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: blam <ben@blam.sh>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/cold-tomatoes-vanish.md

@@ -0,0 +1,7 @@
+---
+'@backstage/cli-node': patch
+'@backstage/cli': patch
+'@backstage/eslint-plugin': patch
+---
+
+Added support for the `frontend-extension-bundle` role, which is used in conjunction with the new frontend system to ship extensions to your apps.

docs/tooling/cli/02-build-system.md

@@ -93,18 +93,19 @@ defined in the `package.json` of each package like this:
 
 These are the available roles that are currently supported by the Backstage build system:
 
-| Role                   | Description                                  | Example                                      |
-| ---------------------- | -------------------------------------------- | -------------------------------------------- |
-| frontend               | Bundled frontend application                 | `packages/app`                               |
-| backend                | Bundled backend application                  | `packages/backend`                           |
-| cli                    | Package used as a command-line interface     | `@backstage/cli`, `@backstage/codemods`      |
-| web-library            | Web library for use by other packages        | `@backstage/plugin-catalog-react`            |
-| node-library           | Node.js library for use by other packages    | `@backstage/plugin-techdocs-node`            |
-| common-library         | Isomorphic library for use by other packages | `@backstage/plugin-permission-common`        |
-| frontend-plugin        | Backstage frontend plugin                    | `@backstage/plugin-scaffolder`               |
-| frontend-plugin-module | Backstage frontend plugin module             | `@backstage/plugin-analytics-module-ga`      |
-| backend-plugin         | Backstage backend plugin                     | `@backstage/plugin-auth-backend`             |
-| backend-plugin-module  | Backstage backend plugin module              | `@backstage/plugin-search-backend-module-pg` |
+| Role                      | Description                                  | Example                                      |
+| ------------------------- | -------------------------------------------- | -------------------------------------------- |
+| frontend                  | Bundled frontend application                 | `packages/app`                               |
+| backend                   | Bundled backend application                  | `packages/backend`                           |
+| cli                       | Package used as a command-line interface     | `@backstage/cli`, `@backstage/codemods`      |
+| web-library               | Web library for use by other packages        | `@backstage/plugin-catalog-react`            |
+| node-library              | Node.js library for use by other packages    | `@backstage/plugin-techdocs-node`            |
+| common-library            | Isomorphic library for use by other packages | `@backstage/plugin-permission-common`        |
+| frontend-plugin           | Backstage frontend plugin                    | `@backstage/plugin-scaffolder`               |
+| frontend-extension-bundle | Extensions for the Backstage frontend        | Typically only appears in adopter repos      |
+| frontend-plugin-module    | Backstage frontend plugin module             | `@backstage/plugin-analytics-module-ga`      |
+| backend-plugin            | Backstage backend plugin                     | `@backstage/plugin-auth-backend`             |
+| backend-plugin-module     | Backstage backend plugin module              | `@backstage/plugin-search-backend-module-pg` |
 
 Most of the steps that we cover below have an accompanying command that is intended to be used as a package script. The commands are all available under the `backstage-cli package` category, and many of the commands will behave differently depending on the role of the package. The commands are intended to be used like this:
 

packages/cli-node/api-report.md

@@ -154,6 +154,7 @@ export type PackageRole =
   | 'node-library'
   | 'common-library'
   | 'frontend-plugin'
+  | 'frontend-extension-bundle'
   | 'frontend-plugin-module'
   | 'backend-plugin'
   | 'backend-plugin-module';

packages/cli-node/src/roles/PackageRoles.ts

@@ -53,6 +53,11 @@ const packageRoleInfos: PackageRoleInfo[] = [
     platform: 'web',
     output: ['types', 'esm'],
   },
+  {
+    role: 'frontend-extension-bundle',
+    platform: 'web',
+    output: ['types', 'esm'],
+  },
   {
     role: 'frontend-plugin-module',
     platform: 'web',

packages/cli-node/src/roles/types.ts

@@ -27,6 +27,7 @@ export type PackageRole =
   | 'node-library'
   | 'common-library'
   | 'frontend-plugin'
+  | 'frontend-extension-bundle'
   | 'frontend-plugin-module'
   | 'backend-plugin'
   | 'backend-plugin-module';

packages/cli/config/eslint-factory.js

@@ -200,6 +200,7 @@ function createConfigForRole(dir, role, extraConfig = {}) {
     case 'web-library':
     case 'frontend':
     case 'frontend-plugin':
+    case 'frontend-extension-bundle':
     case 'frontend-plugin-module':
     case 'frontend-dynamic-container':
       return createConfig(dir, {

packages/cli/config/jest.js

@@ -54,6 +54,7 @@ function getRoleConfig(role) {
     case 'web-library':
     case 'common-library':
     case 'frontend-plugin':
+    case 'frontend-extension-bundle':
     case 'frontend-plugin-module':
       return { testEnvironment: require.resolve('jest-environment-jsdom') };
     case 'cli':

packages/cli/src/commands/repo/fix.ts

@@ -246,6 +246,8 @@ function guessPluginId(role: PackageRole, pkgName: string): string | undefined {
     case 'frontend':
     case 'frontend-plugin':
       return pkgName.match(/plugin-(.*)/)?.[1];
+    case 'frontend-extension-bundle':
+      return undefined;
     case 'frontend-plugin-module':
       return pkgName.match(/plugin-(.*)-module-/)?.[1];
     case 'backend-plugin':
@@ -364,6 +366,7 @@ export function fixPluginPackages(
       role === 'common-library' ||
       role === 'web-library' ||
       role === 'node-library' ||
+      role === 'frontend-extension-bundle' ||
       role === 'frontend-plugin-module' // TODO(Rugvip): Remove this once frontend modules are required to have a plugin ID
     ) {
       return;

packages/cli/src/commands/start/command.ts

@@ -46,6 +46,7 @@ export async function command(opts: OptionValues): Promise<void> {
       });
     case 'web-library':
     case 'frontend-plugin':
+    case 'frontend-extension-bundle':
     case 'frontend-plugin-module':
       return startFrontend({ entry: 'dev/index', ...options });
     case 'frontend-dynamic-container' as PackageRole: // experimental

packages/cli/src/lib/bundler/packageDetection.ts

@@ -84,9 +84,11 @@ async function detectPackages(
         { paths: [targetPath] },
       ));
       if (
-        ['frontend-plugin', 'frontend-plugin-module'].includes(
-          depPackageJson.backstage?.role ?? '',
-        )
+        [
+          'frontend-plugin',
+          'frontend-extension-bundle',
+          'frontend-plugin-module',
+        ].includes(depPackageJson.backstage?.role ?? '')
       ) {
         // Include alpha entry point if available. If there's no default export it will be ignored
         const exp = depPackageJson.exports;

packages/eslint-plugin/rules/no-undeclared-imports.js

@@ -48,6 +48,7 @@ function getExpectedDepType(
     case 'common-library':
     case 'web-library':
     case 'frontend-plugin':
+    case 'frontend-extension-bundle':
     case 'frontend-plugin-module':
     case 'node-library':
     case 'backend-plugin':

scripts/list-no-top-level-material-ui-4-imports.js

@@ -25,7 +25,11 @@ async function main() {
 
   for (const pkg of packages) {
     pkgRole = pkg.packageJson.backstage?.role;
-    if (pkgRole === 'frontend-plugin' || pkgRole === 'web-library') {
+    if (
+      pkgRole === 'frontend-plugin' ||
+      pkgRole === 'web-library' ||
+      pkgRole === 'frontend-extension-bundle'
+    ) {
       const depKeys = Object.keys(pkg.packageJson.dependencies);
       if (depKeys.findIndex(d => d.includes('@material-ui')) !== -1) {
         const eslintrcPath = join(pkg.dir, '.eslintrc.js');

scripts/verify-local-dependencies.js

@@ -41,7 +41,12 @@ const roleRules = [
   },
   {
     sourceRole: ['backend-plugin', 'node-library', 'backend-plugin-module'],
-    targetRole: ['frontend-plugin', 'web-library'],
+    targetRole: [
+      'frontend-plugin',
+      'web-library',
+      'frontend-plugin-module',
+      'frontend-extension-bundle',
+    ],
     message: `Package SOURCE_NAME with backend role SOURCE_ROLE has a dependency on package TARGET_NAME with frontend role TARGET_ROLE, which is not permitted`,
   },
   {
@@ -49,6 +54,8 @@ const roleRules = [
     targetRole: [
       'frontend-plugin',
       'web-library',
+      'frontend-plugin-module',
+      'frontend-extension-bundle',
       'backend-plugin',
       'node-library',
       'backend-plugin-module',
@@ -57,7 +64,11 @@ const roleRules = [
   },
   {
     sourceRole: ['frontend-plugin', 'web-library'],
-    targetRole: 'frontend-plugin',
+    targetRole: [
+      'frontend-plugin',
+      'frontend-plugin-module',
+      'frontend-extension-bundle',
+    ],
     except: [
       // TODO(freben): Address these
       '@backstage/plugin-api-docs',