diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index 2f09a66e18..7f629b9e11 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -84,7 +84,7 @@ export async function createConfig( paths: BundlingPaths, options: BundlingOptions, ): Promise { - 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'], diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 74c6b2a53c..878d9d971d 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/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, diff --git a/packages/cli/src/lib/bundler/types.ts b/packages/cli/src/lib/bundler/types.ts index 69e75b113d..8996ed995d 100644 --- a/packages/cli/src/lib/bundler/types.ts +++ b/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 & { diff --git a/packages/core-plugin-api/src/plugin/Plugin.tsx b/packages/core-plugin-api/src/plugin/Plugin.tsx index da26cd4db0..dd82169e40 100644 --- a/packages/core-plugin-api/src/plugin/Plugin.tsx +++ b/packages/core-plugin-api/src/plugin/Plugin.tsx @@ -98,5 +98,7 @@ export function createPlugin< >( config: PluginConfig, ): BackstagePlugin { - return new PluginImpl(config); + const plugin = new PluginImpl(config); + window.allPlugins.push(plugin); + return plugin; } diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx index 163b4d0512..2aabfc51ba 100644 --- a/plugins/graphiql/dev/index.tsx +++ b/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) diff --git a/plugins/org/src/plugin.ts b/plugins/org/src/plugin.ts index ea6856b6b4..a6715801f5 100644 --- a/plugins/org/src/plugin.ts +++ b/plugins/org/src/plugin.ts @@ -27,6 +27,8 @@ export const orgPlugin = createPlugin({ }, }); +window.iAmTheOrgPlugin = orgPlugin; + /** @public */ export const EntityGroupProfileCard = orgPlugin.provide( createComponentExtension({