feat: DH-21476: Middleware plugin infrastructure for widget chaining

packages/app-utils/src/plugins/PluginUtils.tsx

@@ -9,23 +9,15 @@ import {
   type Plugin,
   PluginType,
   isLegacyAuthPlugin,
-  isLegacyPlugin,
-  type PluginModule,
-  isPlugin,
-  isMultiPlugin,
+  processLoadedModule,
+  sortPluginsByDependency,
+  type PluginManifest,
 } from '@deephaven/plugin';
 import loadRemoteModule from './loadRemoteModule';
+import { resolve } from './remote-component.config';
 
 const log = Log.module('@deephaven/app-utils.PluginUtils');
 
-export type PluginManifestPluginInfo = {
-  name: string;
-  main: string;
-  version: string;
-};
-
-export type PluginManifest = { plugins: PluginManifestPluginInfo[] };
-
 /**
  * Imports a commonjs plugin module from the provided URL
  * @param pluginUrl The URL of the plugin to load
@@ -55,56 +47,11 @@ export async function loadJson(jsonUrl: string): Promise<PluginManifest> {
   }
 }
 
-function hasDefaultExport(value: unknown): value is { default: Plugin } {
-  return (
-    typeof value === 'object' &&
-    value != null &&
-    typeof (value as { default?: unknown }).default === 'object'
-  );
-}
-
-export function getPluginModuleValue(
-  value: LegacyPlugin | Plugin | { default: Plugin }
-): PluginModule | null {
-  // TypeScript builds CJS default exports differently depending on
-  // whether there are also named exports. If the default is the only
-  // export, it will be the value. If there are also named exports,
-  // it will be assigned to the `default` property on the value.
-  if (isPlugin(value)) {
-    return value;
-  }
-  if (hasDefaultExport(value) && isPlugin(value.default)) {
-    return value.default;
-  }
-  if (isLegacyPlugin(value)) {
-    return value;
-  }
-  return null;
-}
-
-/**
- * Register a plugin in the plugin map, logging a warning if a plugin with the same name already exists.
- * @param pluginMap The plugin map to register the plugin in
- * @param name The name to register the plugin under
- * @param plugin The plugin to register
- * @param version Optional version to attach to the plugin
- */
-function registerPlugin(
-  pluginMap: PluginModuleMap,
-  name: string,
-  plugin: PluginModule,
-  version?: string
-): void {
-  if (pluginMap.has(name)) {
-    log.warn(
-      `Plugin '${name}' is already registered. The existing plugin will be replaced.`
-    );
-  }
-  pluginMap.set(name, { ...plugin, version });
-}
-
 /**
- * Load all plugin modules available based on the manifest file at the provided base URL
+ * Load all plugin modules available based on the manifest file at the provided base URL.
+ * Plugins are loaded sequentially so that each plugin's exports are registered
+ * in the module resolve map before subsequent plugins load. This enables
+ * cross-plugin imports via standard import statements.
  * @param modulePluginsUrl The base URL of the module plugins to load
  * @returns A map from the name of the plugin to the plugin module that was loaded
  */
@@ -120,36 +67,30 @@ export async function loadModulePlugins(
     }
 
     log.debug('Plugin manifest loaded:', manifest);
-    const pluginPromises: Promise<LegacyPlugin | { default: Plugin }>[] = [];
-    for (let i = 0; i < manifest.plugins.length; i += 1) {
-      const { name, main } = manifest.plugins[i];
-      const pluginMainUrl = `${modulePluginsUrl}/${name}/${main}`;
-      pluginPromises.push(loadModulePlugin(pluginMainUrl));
-    }
 
-    const pluginModules = await Promise.allSettled(pluginPromises);
+    const sortedPlugins = sortPluginsByDependency(manifest.plugins);
 
     const pluginMap: PluginModuleMap = new Map();
-    for (let i = 0; i < pluginModules.length; i += 1) {
-      const module = pluginModules[i];
-      const { name, version } = manifest.plugins[i];
-      if (module.status === 'fulfilled') {
-        const moduleValue = getPluginModuleValue(module.value);
-        if (moduleValue == null) {
-          log.error(`Plugin '${name}' is missing an exported value.`);
-        } else if (isMultiPlugin(moduleValue)) {
-          // Flatten MultiPlugin: register each inner plugin by its own name
-          log.debug(
-            `MultiPlugin '${name}' contains ${moduleValue.plugins.length} plugins`
-          );
-          moduleValue.plugins.forEach(innerPlugin => {
-            registerPlugin(pluginMap, innerPlugin.name, innerPlugin, version);
-          });
-        } else {
-          registerPlugin(pluginMap, name, moduleValue, version);
-        }
-      } else {
-        log.error(`Unable to load plugin '${name}'`, module.reason);
+
+    // Load plugins sequentially so each plugin's exports are available
+    // to subsequently loaded plugins via import
+    for (let i = 0; i < sortedPlugins.length; i += 1) {
+      const { name, main, version, package: packageName } = sortedPlugins[i];
+      const pluginMainUrl = `${modulePluginsUrl}/${name}/${main}`;
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        const pluginExports = await loadModulePlugin(pluginMainUrl);
+
+        processLoadedModule(
+          pluginMap,
+          resolve,
+          pluginExports,
+          name,
+          packageName,
+          version
+        );
+      } catch (e) {
+        log.error(`Unable to load plugin '${name}'`, e);
       }
     }
     log.info('Plugins loaded:', pluginMap);

packages/app-utils/src/plugins/remote-component.config.ts

@@ -25,7 +25,7 @@ import * as DeephavenReactHooks from '@deephaven/react-hooks';
 import * as DeephavenPlugin from '@deephaven/plugin';
 
 // eslint-disable-next-line import/prefer-default-export
-export const resolve = {
+export const resolve: Record<string, unknown> = {
   react,
   'react-dom': ReactDOM,
   redux,