Allow runtime federated plugin imports (jupyterlab#147)

* Allow runtime federated plugin imports

* fix merge conflicts

Author: MUFFANUJ

src/resolver.ts

@@ -25,6 +25,10 @@ function handleImportError(error: Error, module: string) {
   });
 }
 
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
 export namespace ImportResolver {
   export interface IOptions {
     loadKnownModule: (name: string) => Promise<IModule | null>;
@@ -83,6 +87,10 @@ interface ILocalCssSnapshotEntry {
   previousCss: string | null;
 }
 
+interface IFederatedExtensionContainer {
+  get: (key: string) => Promise<(() => IModule) | IModule>;
+}
+
 export class ImportResolver {
   private static _localCssStyles = new Map<string, HTMLStyleElement>();
   private static _localCssSnapshotStacks = new Map<
@@ -183,31 +191,18 @@ export class ImportResolver {
    */
   async resolve(module: string): Promise<Token<any> | IModule | IModuleMember> {
     try {
-      const tokenAndDefaultHandler = {
-        get: (
-          target: IModule,
-          prop: string | number | symbol,
-          receiver: any
-        ) => {
-          if (typeof prop !== 'string') {
-            return Reflect.get(target, prop, receiver);
-          }
-          const tokenName = `${module}:${prop}`;
-          if (this._options.tokenMap.has(tokenName)) {
-            return this._options.tokenMap.get(tokenName);
-          }
-          // synthetic default import (without proxy)
-          if (prop === 'default' && !(prop in target)) {
-            return target;
-          }
-          return Reflect.get(target, prop, receiver);
-        }
-      };
-
       const knownModule = await this._resolveKnownModule(module);
       if (knownModule !== null) {
-        return new Proxy(knownModule, tokenAndDefaultHandler);
+        return this._createTokenAwareModule(module, knownModule);
+      }
+
+      const federatedModule = await this._resolveFederatedExtensionModule(
+        module
+      );
+      if (federatedModule !== null) {
+        return this._createTokenAwareModule(module, federatedModule);
       }
+
       const localFile = await this._resolveLocalFile(module);
       if (localFile !== null) {
         return localFile;
@@ -233,6 +228,90 @@ export class ImportResolver {
     }
   }
 
+  private _createTokenAwareModule(
+    module: string,
+    targetModule: IModule
+  ): IModule {
+    return new Proxy(targetModule, {
+      get: (target: IModule, prop: string | number | symbol, receiver: any) => {
+        if (typeof prop !== 'string') {
+          return Reflect.get(target, prop, receiver);
+        }
+        const tokenName = `${module}:${prop}`;
+        if (this._options.tokenMap.has(tokenName)) {
+          return this._options.tokenMap.get(tokenName);
+        }
+        // synthetic default import (without proxy)
+        if (prop === 'default' && !(prop in target)) {
+          return target;
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
+  }
+
+  private async _resolveFederatedExtensionModule(
+    module: string
+  ): Promise<IModule | null> {
+    if (module.startsWith('.')) {
+      return null;
+    }
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const runtime = window as Window & {
+      _JUPYTERLAB?: Record<string, IFederatedExtensionContainer>;
+    };
+    const container = runtime._JUPYTERLAB?.[module];
+    if (!container) {
+      return null;
+    }
+    if (typeof container.get !== 'function') {
+      throw new Error(
+        `Federated extension container ${module} does not expose get().`
+      );
+    }
+
+    let exposed: (() => IModule) | IModule;
+    try {
+      exposed = await container.get('./extension');
+    } catch (error) {
+      throw new Error(
+        `Failed to resolve federated extension module ${module} from ./extension: ${errorMessage(
+          error
+        )}`
+      );
+    }
+
+    const factory =
+      typeof exposed === 'function'
+        ? (exposed as () => IModule)
+        : () => exposed as IModule;
+
+    let resolved: unknown;
+    try {
+      resolved = factory();
+    } catch (error) {
+      throw new Error(
+        `Failed to evaluate federated extension module ${module} from ./extension: ${errorMessage(
+          error
+        )}`
+      );
+    }
+
+    if (
+      !resolved ||
+      (typeof resolved !== 'object' && typeof resolved !== 'function')
+    ) {
+      throw new Error(
+        `Federated extension module ${module} did not return a module object from ./extension.`
+      );
+    }
+
+    return resolved as IModule;
+  }
+
   private async _getCDNConsent(
     module: string,
     cdnUrl: string

ui-tests/tests/plugin-playground.spec.ts

@@ -1,4 +1,5 @@
 import { expect, galata, test } from '@jupyterlab/galata';
+import { KNOWN_MODULE_NAMES } from '../../src/modules';
 import type { FileEditorWidget } from '@jupyterlab/fileeditor';
 import type { IJupyterLabPageFixture } from '@jupyterlab/galata';
 import type { Contents } from '@jupyterlab/services';
@@ -24,6 +25,10 @@ const TEST_PLUGIN_ID = 'playground-integration-test:plugin';
 const TEST_TOGGLE_COMMAND = 'playground-integration-test:toggle';
 const TEST_ARGS_COMMAND = 'playground-integration-test:with-args';
 const TEST_FILE = 'playground-integration-test.ts';
+const FEDERATED_RUNTIME_PACKAGE = '@jupyterlab/plugin-playground';
+const FEDERATED_RUNTIME_CONSUMER_PLUGIN_ID = 'runtime-consumer-test:plugin';
+const FEDERATED_RUNTIME_CONSUMER_COMMAND = 'runtime-consumer-test:check';
+const FEDERATED_RUNTIME_CONSUMER_FILE = 'runtime-consumer-test.ts';
 const CSS_IMPORT_TEST_PLUGIN_ID = 'playground-css-import-test:plugin';
 const CSS_IMPORT_TEST_MARKER_ID = 'playground-css-import-test-marker';
 const CSS_IMPORT_TEST_COLOR = 'rgb(17, 34, 51)';
@@ -900,6 +905,67 @@ test('loads current editor file as a plugin extension', async ({
   ).resolves.toBe(true);
 });
 
+test('loads plugin importing runtime federated module outside known module map', async ({
+  page,
+  tmpPath
+}) => {
+  const consumerPath = `${tmpPath}/${FEDERATED_RUNTIME_CONSUMER_FILE}`;
+  expect(KNOWN_MODULE_NAMES).not.toContain(FEDERATED_RUNTIME_PACKAGE);
+  const consumerSource = `import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { IPluginPlayground } from '${FEDERATED_RUNTIME_PACKAGE}';
+import type { IPluginPlayground as IPluginPlaygroundType } from '${FEDERATED_RUNTIME_PACKAGE}';
+
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: '${FEDERATED_RUNTIME_CONSUMER_PLUGIN_ID}',
+  autoStart: true,
+  requires: [IPluginPlayground],
+  activate: (app: JupyterFrontEnd, playground: IPluginPlaygroundType) => {
+    app.commands.addCommand('${FEDERATED_RUNTIME_CONSUMER_COMMAND}', {
+      label: 'Runtime Federated Consumer Check',
+      execute: () => typeof playground.shareViaLink === 'function'
+    });
+  }
+};
+
+export default plugin;
+`;
+
+  await page.contents.uploadContent(consumerSource, 'text', consumerPath);
+  await page.goto();
+
+  await page.waitForCondition(() =>
+    page.evaluate((id: string) => {
+      return window.jupyterapp.commands.hasCommand(id);
+    }, LOAD_COMMAND)
+  );
+
+  await page.filebrowser.open(consumerPath);
+  expect(await page.activity.activateTab(FEDERATED_RUNTIME_CONSUMER_FILE)).toBe(
+    true
+  );
+
+  const consumerLoadResult = await page.evaluate((id: string) => {
+    return window.jupyterapp.commands.execute(id);
+  }, LOAD_COMMAND);
+  expect(consumerLoadResult.ok).toBe(true);
+  expect(consumerLoadResult.status).toBe('loaded');
+  expect(consumerLoadResult.pluginIds).toContain(
+    FEDERATED_RUNTIME_CONSUMER_PLUGIN_ID
+  );
+
+  await page.waitForCondition(() =>
+    page.evaluate((id: string) => {
+      return window.jupyterapp.commands.hasCommand(id);
+    }, FEDERATED_RUNTIME_CONSUMER_COMMAND)
+  );
+
+  await expect(
+    page.evaluate((id: string) => {
+      return window.jupyterapp.commands.execute(id);
+    }, FEDERATED_RUNTIME_CONSUMER_COMMAND)
+  ).resolves.toBe(true);
+});
+
 test('loads local CSS imports and cleans stale styles on reload', async ({
   page,
   tmpPath