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 & {

packages/core-plugin-api/src/plugin/Plugin.tsx

@@ -98,5 +98,7 @@ export function createPlugin<
 >(
   config: PluginConfig<Routes, ExternalRoutes, PluginInputOptions>,
 ): BackstagePlugin<Routes, ExternalRoutes, PluginInputOptions> {
-  return new PluginImpl(config);
+  const plugin = new PluginImpl(config);
+  window.allPlugins.push(plugin);
+  return plugin;
 }

plugins/graphiql/dev/index.tsx

@@ -28,6 +28,65 @@ import {
   graphQlBrowseApiRef,
   GraphiQLPage,
 } from '../src';
+// import * as orgPlugin from '@backstage/plugin-org';
+
+// console.log(`DEBUG: orgPlugin=`, orgPlugin);
+
+// // (process.env.EXTRA_PACKAGE_IMPORTS as string[]).map(name => require(name))
+// console.log(
+//   `DEBUG: process.env.EXTRA_PACKAGE_IMPORTS=`,
+//   process.env.EXTRA_PACKAGE_IMPORTS,
+// );
+
+// require.ensure(process.env.EXTRA_PACKAGE_IMPORTS as string[], innerRequire => {
+//   console.log(`DEBUG: innerRequire=`, innerRequire);
+//   const path3 = require.resolve('@backstage/plugin-org');
+//   console.log(`DEBUG: path3=`, path3);
+//   const loadedModules = (process.env.EXTRA_PACKAGE_IMPORTS as string[]).map(
+//     name => console.log('require', name) || require(name),
+//   );
+//   console.log(`DEBUG: loadedModules=`, loadedModules);
+// });
+
+console.log(process.env);
+console.log(
+  `DEBUG: process.env.EXTRA_PACKAGE_IMPORTS=`,
+  process.env.EXTRA_PACKAGE_IMPORTS,
+);
+// const orgPlugin = require([
+//   '@backstage/plugin-org',
+//   '@backstage/plugin-todo',
+// ], modules => {
+//   console.log(`DEBUG: modules=`, modules);
+// });
+// require.ensure(
+//   process.env.EXTRA_PACKAGE_IMPORTS,
+//   innerRequire => {
+//     console.log(
+//       `DEBUG: module1=`,
+//       require(process.env.EXTRA_PACKAGE_IMPORTS[0]),
+//     );
+//     // console.log(
+//     //   `DEBUG: module2=`,
+//     //   innerRequire(require.resolve('@backstage/plugin-todo')),
+//     // );
+//   },
+//   err => console.error('ERROR CALLBACK: ', err),
+// );
+
+// console.log(`DEBUG: orgPlugin=`, orgPlugin);
+
+// const orgPlugin2 = require(process.env.EXTRA_PACKAGE_IMPORTS, modules => {
+//   console.log(`DEBUG: modules=`, modules);
+// });
+// console.log(`DEBUG: orgPlugin2=`, orgPlugin2);
+// __webpack_require__(
+//   process.env.EXTRA_PACKAGE_IMPORTS as string[],
+//   loadedModules => {
+//     console.log(`DEBUG: loadedModules=`, loadedModules);
+//   },
+// );
+// require.context()
 
 createDevApp()
   .registerPlugin(graphiqlPlugin)

plugins/org/src/plugin.ts

@@ -27,6 +27,8 @@ export const orgPlugin = createPlugin({
   },
 });
 
+window.iAmTheOrgPlugin = orgPlugin;
+
 /** @public */
 export const EntityGroupProfileCard = orgPlugin.provide(
   createComponentExtension({