Updating loading logic for dynamic extensions

- adding styles
- changing extension data format and initialization

buildutils/src/webpack.config.ext.ts

@@ -53,6 +53,10 @@ if (data.jupyterlab.mimeExtension === true) {
   );
 }
 
+if (data.style) {
+  exposes['./style'] = path.join(packagePath, data.style);
+}
+
 const coreData = require(path.join(corePath, 'package.json'));
 
 const shared: any = {};
@@ -138,7 +142,7 @@ module.exports = [
     output: {
       filename: '[name].[chunkhash].js',
       path: outputPath,
-      publicPath: `lab/extensions/${data.name}/`
+      publicPath: `/lab/extensions/${data.name}/`
     },
     module: {
       rules: [{ test: /\.html$/, use: 'file-loader' }]

examples/federated/core_package/index.js

@@ -18,7 +18,7 @@ function loadScript(url) {
   });
 }
 
-async function loadComponent(url, scope, module) {
+async function loadComponent(url, scope) {
   await loadScript(url);
 
   // From MIT-licensed https://github.com/module-federation/module-federation-examples/blob/af043acd6be1718ee195b2511adf6011fba4233c/advanced-api/dynamic-remotes/app1/src/App.js#L6-L12
@@ -26,7 +26,9 @@ async function loadComponent(url, scope, module) {
   const container = window._JUPYTERLAB[scope];
   // Initialize the container, it may provide shared modules and may need ours
   await container.init(__webpack_share_scopes__.default);
+}
 
+async function createModule(scope, module) {
   const factory = await window._JUPYTERLAB[scope].get(module);
   const Module = factory();
   return Module;
@@ -48,29 +50,29 @@ async function main() {
   const extension_data = JSON.parse(
     PageConfig.getOption('dynamic_extensions')
   );
-  const mime_extension_data = JSON.parse(
-    PageConfig.getOption('dynamic_mime_extensions')
-  );
+
+  const dynamicPlugins = [];
+  const dynamicMimePlugins = [];
+  const dynamicStyles = [];
 
   // Get dynamic plugins
   // TODO: deconflict these with builtins?
-  const dynamicPromises = extension_data.map(data =>
-    loadComponent(
-      `${URLExt.join(PageConfig.getOption('fullLabextensionsUrl'), data.name, 'remoteEntry.js')}`,
-      data.name,
-      data.module
-    )
-  );
-  const dynamicPlugins = await Promise.all(dynamicPromises);
-
-  const dynamicMimePromises = mime_extension_data.map(data =>
-    loadComponent(
+  const componentLoadPromises = extension_data.map(async (data) => {
+    await loadComponent(
       `${URLExt.join(PageConfig.getOption('fullLabextensionsUrl'), data.name, 'remoteEntry.js')}`,
-      data.name,
-      data.module
+      data.name
     )
-  );
-  const dynamicMimePlugins = await Promise.all(dynamicMimePromises);
+    if (data.plugin) {
+      dynamicPlugins.push(await createModule(data.name, data.plugin));
+    }
+    if (data.mimePlugin) {
+      dynamicMimePlugins.push(await createModule(data.name, data.mimePlugin));
+    }
+    if (data.style) {
+      dynamicStyles.push(await createModule(data.name, data.style));
+    }
+  });
+  await Promise.all(componentLoadPromises);
 
   // Handle the registered mime extensions.
   var mimeExtensions = [];

examples/federated/main.py

@@ -50,11 +50,13 @@ class ExampleApp(LabServerApp):
         web_app.settings.setdefault('terminals_available', True)
 
         # Add labextension metadata
-        dynamic_extensions = page_config['dynamic_extensions'] = []
-        dynamic_mime_extension = page_config['dynamic_mime_extensions'] = []
-        name = "@jupyterlab/example-federated-md"
-        dynamic_extensions.append(dict(name=name, module="./extension"))
-        dynamic_mime_extension.append(dict(name=name, module="./mimeExtension"))
+        extension = {
+            'name': '@jupyterlab/example-federated-md',
+            'plugin': './extension',
+            'mimePlugin': './mimeExtension',
+            'style': './style'
+        }
+        page_config['dynamic_extensions'] = [extension];
 
         super().initialize_handlers()
 

jupyterlab/labapp.py

@@ -695,14 +695,18 @@ class LabApp(NBClassicConfigShimMixin, LabServerApp):
 
         # Handle dynamic extensions
         info = get_app_info()
-        dynamic_extensions = page_config['dynamic_extensions'] = []
-        dynamic_mime_extension = page_config['dynamic_mime_extensions'] = []
+        extensions = page_config['dynamic_extensions'] = []
         for (ext, ext_data) in info.get('dynamic_exts', dict()).items():
-            name = ext_data['name']
+            extension = {
+                'name': ext_data['name']
+            }
             if ext_data['jupyterlab'].get('extension'):
-                dynamic_extensions.append(dict(name=name, module="./extension"))
+                extension['plugin'] = './extension'
             if ext_data['jupyterlab'].get('mimeExtension'):
-                dynamic_mime_extension.append(dict(name=name, module="./mimeExtension"))
+                extension['mimePlugin'] = './mimeExtension'
+            if ext_data.get('style'):
+                extension['style'] = './style'
+            extensions.append(extension)
 
         # Update Jupyter Server's webapp settings with jupyterlab settings.
         self.serverapp.web_app.settings['page_config_data'] = page_config