ipywidgets 7 support

packages/voila/package.json

@@ -12,6 +12,8 @@
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.6",
+    "@jupyter-widgets/base7": "npm:@jupyter-widgets/[email protected]",
+    "@jupyter-widgets/controls7": "npm:@jupyter-widgets/[email protected]",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.9",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",

packages/voila/src/ipywidgets7.ts

@@ -0,0 +1,77 @@
+/***************************************************************************
+ * Copyright (c) 2024, Voilà contributors                                   *
+ * Copyright (c) 2024, QuantStack                                           *
+ *                                                                          *
+ * Distributed under the terms of the BSD 3-Clause License.                 *
+ *                                                                          *
+ * The full license is in the file LICENSE, distributed with this software. *
+ ****************************************************************************/
+
+import * as base from '@jupyter-widgets/base';
+import * as base7 from '@jupyter-widgets/base7';
+import { JUPYTER_CONTROLS_VERSION as JUPYTER_CONTROLS7_VERSION } from '@jupyter-widgets/controls7/lib/version';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+/**
+ * The base widgets.
+ */
+export const baseWidgets7Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:base-${base7.JUPYTER_WIDGETS_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/base',
+      version: base7.JUPYTER_WIDGETS_VERSION,
+      exports: {
+        WidgetModel: base7.WidgetModel as any,
+        WidgetView: base7.WidgetView as any,
+        DOMWidgetView: base7.DOMWidgetView as any,
+        DOMWidgetModel: base7.DOMWidgetModel as any,
+        LayoutModel: base7.LayoutModel as any,
+        LayoutView: base7.LayoutView as any,
+        StyleModel: base7.StyleModel as any,
+        StyleView: base7.StyleView as any
+      }
+    });
+  }
+};
+
+/**
+ * The control widgets.
+ */
+export const controlWidgets7Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:controls-${JUPYTER_CONTROLS7_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/controls',
+      version: JUPYTER_CONTROLS7_VERSION,
+      exports: () => {
+        return new Promise((resolve, reject) => {
+          (require as any).ensure(
+            ['@jupyter-widgets/controls7'],
+            (require: NodeRequire) => {
+              // eslint-disable-next-line @typescript-eslint/no-var-requires
+              resolve(require('@jupyter-widgets/controls7'));
+            },
+            (err: any) => {
+              reject(err);
+            },
+            '@jupyter-widgets/controls7'
+          );
+        });
+      }
+    });
+  }
+};

packages/voila/src/main.ts

@@ -14,12 +14,14 @@ import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { VoilaApp } from './app';
 import plugins from './voilaplugins';
+import { baseWidgets7Plugin, controlWidgets7Plugin } from './ipywidgets7';
 import { VoilaServiceManager } from './services/servicemanager';
 import { VoilaShell } from './shell';
 import {
   IFederatedExtensionData,
   activePlugins,
   createModule,
+  isIpywidgets7extension,
   loadComponent,
   shouldUseMathJax2
 } from './tools';
@@ -39,9 +41,9 @@ async function main() {
     require('@jupyterlab/rendermime-extension'),
     require('@jupyterlab/theme-light-extension'),
     require('@jupyterlab/theme-dark-extension'),
-    require('@jupyter-widgets/jupyterlab-manager/lib/plugin').default.filter(
-      (p: any) => p.id !== '@jupyter-widgets/jupyterlab-manager:plugin'
-    ),
+    // require('@jupyter-widgets/jupyterlab-manager/lib/plugin').default.filter(
+    //   (p: any) => p.id !== '@jupyter-widgets/jupyterlab-manager:plugin'
+    // ),
     plugins
   ];
 
@@ -85,6 +87,8 @@ async function main() {
     }
 
     const data = p.value;
+    console.log('LOADING EXTENSION ', data.name);
+
     if (data.extension) {
       federatedExtensionPromises.push(createModule(data.name, data.extension));
     }
@@ -104,7 +108,21 @@ async function main() {
   );
   federatedExtensions.forEach((p) => {
     if (p.status === 'fulfilled') {
-      for (const plugin of activePlugins(p.value, [])) {
+      const plugins = p.value;
+      // Special case for ipywidgets
+      // Case for ipywidgets 7 federated ext: we disabled the entire @jupyter-widgets/jupyterlab-manager and mock it
+      // Case for ipywidgets 8 federated ext: we load all plugins but @jupyter-widgets/jupyterlab-manager:plugin
+      if (isIpywidgets7extension(plugins)) {
+        mods.push(baseWidgets7Plugin);
+        mods.push(controlWidgets7Plugin);
+
+        return;
+      }
+
+      // Whichever the ipywidgets version, we disable @jupyter-widgets/jupyterlab-manager:plugin
+      for (const plugin of activePlugins(plugins, [
+        '@jupyter-widgets/jupyterlab-manager:plugin'
+      ])) {
         mods.push(plugin);
       }
     } else {

packages/voila/src/tools.ts

@@ -38,6 +38,27 @@ export async function createModule(
   }
 }
 
+export function isIpywidgets7extension(extension: any) {
+  // Handle commonjs or es2015 modules
+  let exports;
+  if (Object.prototype.hasOwnProperty.call(extension, '__esModule')) {
+    exports = extension.default;
+  } else {
+    // CommonJS exports.
+    exports = extension;
+  }
+
+  const plugins = Array.isArray(exports) ? exports : [exports];
+  const pluginIds = plugins.map((plugin) => {
+    return plugin.id;
+  });
+
+  return (
+    pluginIds.includes('@jupyter-widgets/jupyterlab-manager:plugin') &&
+    pluginIds.length === 1
+  );
+}
+
 /**
  * Iterate over active plugins in an extension.
  *

voila/utils.py

@@ -118,7 +118,6 @@ def get_page_config(base_url, settings, log, voila_configuration: VoilaConfigura
     disabled_extensions = [
         "@voila-dashboards/jupyterlab-preview",
         "@jupyter/collaboration-extension",
-        "@jupyter-widgets/jupyterlab-manager",
     ]
     disabled_extensions.extend(page_config.get("disabledExtensions", []))
     required_extensions = []