Explore first options to load plugin modules from package name

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: Vincenzo Scamporlino <vinzscam@users.noreply.github.com>
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

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

@@ -84,7 +84,7 @@ export async function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,
 ): Promise<webpack.Configuration> {
-  const { checksEnabled, isDev, frontendConfig } = 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,6 +127,20 @@ export async function createConfig(
     }),
   );
 
+  plugins.push(
+    new ProvidePlugin(
+      Object.fromEntries(
+        extraPackages?.map(name => [
+          `__backstageLoadedPackage_${name}`,
+          name,
+        ]) ?? [],
+      ),
+    ),
+  );
+
+  // In browser
+  // const packageKeys = Object.keys(window).filter(key => key.startsWith('__backstageLoadedPackage_'))
+
   const buildInfo = await readBuildInfo();
   plugins.push(
     new webpack.DefinePlugin({
@@ -135,6 +149,8 @@ export async function createConfig(
         () => JSON.stringify(options.getFrontendAppConfigs()),
         true,
       ),
+      'process.env.EXTRA_PACKAGE_IMPORTS': JSON.stringify(extraPackages),
+      'process.env.SINGLE_PACKAGE_IMPORT': JSON.stringify(extraPackages[0]),
     }),
   );
 
@@ -161,7 +177,7 @@ export async function createConfig(
     },
     devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
     context: paths.targetPath,
-    entry: [paths.targetEntry],
+    entry: [paths.targetEntry, ...(extraPackages ?? [])],
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx', '.json', '.wasm'],
       mainFields: ['browser', 'module', 'main'],

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

@@ -106,6 +106,8 @@ export async function serveBundle(options: ServeOptions) {
   }
 
   const { frontendConfig, fullConfig } = cliConfig;
+  // TODO: proper
+  const extraPackages = ['@backstage/plugin-org'];
   const url = resolveBaseUrl(frontendConfig);
 
   const host =
@@ -119,7 +121,9 @@ export async function serveBundle(options: ServeOptions) {
   const pkgPath = paths.targetPackageJson;
   const pkg = await fs.readJson(pkgPath);
   const config = await createConfig(paths, {
+    ...options,
     checksEnabled: options.checksEnabled,
+    extraPackages,
     isDev: true,
     baseUrl: url,
     frontendConfig,

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

@@ -25,6 +25,7 @@ export type BundlingOptions = {
   getFrontendAppConfigs(): AppConfig[];
   baseUrl: URL;
   parallelism?: number;
+  extraPackages?: string[];
 };
 
 export type ServeOptions = BundlingPathsOptions & {