cli: auto detect frontend plugins

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Jonathan Roebuck <jroebu14@users.noreply.github.com>
Co-authored-by: Jack Palmer <UsainBloot@users.noreply.github.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

packages/cli/package.json

@@ -133,6 +133,7 @@
     "webpack": "^5.70.0",
     "webpack-dev-server": "^4.7.3",
     "webpack-node-externals": "^3.0.0",
+    "webpack-virtual-modules": "^0.5.0",
     "yaml": "^2.0.0",
     "yml-loader": "^2.1.0",
     "yn": "^4.0.0",

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

@@ -22,6 +22,7 @@ import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';
 import { RunScriptWebpackPlugin } from 'run-script-webpack-plugin';
 import webpack, { ProvidePlugin } from 'webpack';
 import nodeExternals from 'webpack-node-externals';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
 import { isChildPath } from '@backstage/cli-common';
 import { getPackages } from '@manypkg/get-packages';
 import { optimization } from './optimization';
@@ -39,6 +40,7 @@ import pickBy from 'lodash/pickBy';
 import yn from 'yn';
 import { readEntryPoints } from '../entryPoints';
 
+const PACKAGES_GLOBAL = '__backstage_detected_packages__';
 const BUILD_CACHE_ENV_VAR = 'BACKSTAGE_CLI_EXPERIMENTAL_BUILD_CACHE';
 
 export function resolveBaseUrl(config: Config): URL {
@@ -84,7 +86,7 @@ export async function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,
 ): Promise<webpack.Configuration> {
-  const { checksEnabled, isDev, frontendConfig, extraPackages } = options;
+  const { checksEnabled, isDev, frontendConfig, extraPackages = [] } = options;
 
   const { plugins, loaders } = transforms(options);
   // Any package that is part of the monorepo but outside the monorepo root dir need
@@ -127,19 +129,17 @@ export async function createConfig(
     }),
   );
 
-  plugins.push(
-    new ProvidePlugin(
-      Object.fromEntries(
-        extraPackages?.map(name => [
-          `__backstageLoadedPackage_${name}`,
-          name,
-        ]) ?? [],
-      ),
-    ),
-  );
+  if (extraPackages.length > 0) {
+    const requirePackageScript = extraPackages
+      ?.map(pkg => `require('${pkg}')`)
+      .join(',');
 
-  // In browser
-  // const packageKeys = Object.keys(window).filter(key => key.startsWith('__backstageLoadedPackage_'))
+    plugins.push(
+      new VirtualModulesPlugin({
+        [`node_modules/${PACKAGES_GLOBAL}.js`]: `window['${PACKAGES_GLOBAL}'] = { modules: [${requirePackageScript}] }`,
+      }),
+    );
+  }
 
   const buildInfo = await readBuildInfo();
   plugins.push(
@@ -177,7 +177,10 @@ export async function createConfig(
     },
     devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
     context: paths.targetPath,
-    entry: [paths.targetEntry, ...(extraPackages ?? [])],
+    entry: [
+      ...(extraPackages.length > 0 ? [`${PACKAGES_GLOBAL}.js`] : []),
+      paths.targetEntry,
+    ],
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json', '.wasm'],
       mainFields: ['browser', 'module', 'main'],

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

@@ -33,8 +33,34 @@ import {
   forbiddenDuplicatesFilter,
   includedFilter,
 } from '../../commands/versions/lint';
+import { BackstagePackageJson } from '@backstage/cli-node';
 
 export async function serveBundle(options: ServeOptions) {
+  const paths = resolveBundlingPaths(options);
+  const pkgPath = paths.targetPackageJson;
+  const pkg: BackstagePackageJson = await fs.readJson(pkgPath);
+
+  // TODO: proper
+  // Assumption for config string based on https://github.com/backstage/backstage/issues/18372 ^
+  const packageDetectionMode = options.fullConfig.getOptionalString(
+    'app.experimental.packages',
+  );
+  const extraPackages = [];
+  if (packageDetectionMode === 'all') {
+    for (const depName of Object.keys(pkg.dependencies ?? {})) {
+      const depPackageJson: BackstagePackageJson = require(require.resolve(
+        `${depName}/package.json`,
+        { paths: [paths.targetPath] },
+      ));
+      if (
+        ['frontend-plugin', 'frontend-plugin-module'].includes(
+          depPackageJson.backstage?.role || '',
+        )
+      ) {
+        extraPackages.push(depName);
+      }
+    }
+  }
   if (options.verifyVersions) {
     const lockfile = await Lockfile.load(
       libPaths.resolveTargetRoot('yarn.lock'),
@@ -107,7 +133,6 @@ export async function serveBundle(options: ServeOptions) {
 
   const { frontendConfig, fullConfig } = cliConfig;
   // TODO: proper
-  const extraPackages = ['@backstage/plugin-org'];
   const url = resolveBaseUrl(frontendConfig);
 
   const host =
@@ -117,9 +142,6 @@ export async function serveBundle(options: ServeOptions) {
     Number(url.port) ||
     (url.protocol === 'https:' ? 443 : 80);
 
-  const paths = resolveBundlingPaths(options);
-  const pkgPath = paths.targetPackageJson;
-  const pkg = await fs.readJson(pkgPath);
   const config = await createConfig(paths, {
     ...options,
     checksEnabled: options.checksEnabled,