0.4.x: Lazy loading of widgets packages, for ipywidgets 7 and 8 support

packages/voila/package.json

@@ -9,7 +9,9 @@
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.5",
+    "@jupyter-widgets/base7": "npm:@jupyter-widgets/[email protected]",
     "@jupyter-widgets/controls": "^5.0.6",
+    "@jupyter-widgets/controls7": "npm:@jupyter-widgets/[email protected]",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.8",
     "@jupyterlab/application": "^3 || ^4",
     "@jupyterlab/apputils": "^3 || ^4",
@@ -27,18 +29,20 @@
     "@lumino/signaling": "^1.4.3 || ^2",
     "@lumino/virtualdom": "^1.8.0 || ^2",
     "@lumino/widgets": "^1.18.0 || ^2",
+    "jquery": "^3.7.0",
     "mathjax-full": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
+    "@types/node": "^20.14.10",
     "babel-loader": "^8.0.5",
     "css-loader": "^5.0.0",
     "file-loader": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "p-limit": "^2.2.2",
     "style-loader": "^2.0.0",
-    "typescript": "~4.1.3",
+    "typescript": "^5",
     "url-loader": "^1.0.0",
     "webpack": "^5",
     "webpack-cli": "^3.2.3"

packages/voila/src/manager.ts

@@ -7,16 +7,14 @@
  * The full license is in the file LICENSE, distributed with this software. *
  ****************************************************************************/
 
+import $ from "jquery";
+import 'jquery-ui/ui/widgets/slider';
+
 import {
   WidgetManager as JupyterLabManager,
   WidgetRenderer
 } from '@jupyter-widgets/jupyterlab-manager';
 
-import { output } from '@jupyter-widgets/jupyterlab-manager';
-
-import * as base from '@jupyter-widgets/base';
-import * as controls from '@jupyter-widgets/controls';
-
 import * as Application from '@jupyterlab/application';
 import * as AppUtils from '@jupyterlab/apputils';
 import * as CoreUtils from '@jupyterlab/coreutils';
@@ -41,9 +39,7 @@
 import { requireLoader } from './loader';
 
 if (typeof window !== 'undefined' && typeof window.define !== 'undefined') {
-  window.define('@jupyter-widgets/base', base);
-  window.define('@jupyter-widgets/controls', controls);
-  window.define('@jupyter-widgets/output', output);
+  window.define('jquery', $);
 
   window.define('@jupyterlab/application', Application);
   window.define('@jupyterlab/apputils', AppUtils);
@@ -105,34 +101,23 @@
       if (!viewtag?.parentElement) {
         return;
       }
-      try {
-        const widgetViewObject = JSON.parse(viewtag.innerHTML);
-        const { model_id } = widgetViewObject;
-        const model = await this.get_model(model_id);
-        const widgetel = document.createElement('div');
-        viewtag.parentElement.insertBefore(widgetel, viewtag);
-        const view = await this.create_view(model);
-        // TODO: fix typing
-        await this.display_view(undefined as any, view, {
-          el: widgetel
-        });
-      } catch (error) {
-        // Each widget view tag rendering is wrapped with a try-catch statement.
-        //
-        // This fixes issues with widget models that are explicitly "closed"
-        // but are still referred to in a previous cell output.
-        // Without the try-catch statement, this error interrupts the loop and
-        // prevents the rendering of further cells.
-        //
-        // This workaround may not be necessary anymore with templates that make use
-        // of progressive rendering.
-      }
+
+      const widgetViewObject = JSON.parse(viewtag.innerHTML);
+      const { model_id } = widgetViewObject;
+      const model = await this.get_model(model_id);
+      const widgetel = document.createElement('div');
+      viewtag.parentElement.insertBefore(widgetel, viewtag);
+      const view = await this.create_view(model);
+      // TODO: fix typing
+      await this.display_view(undefined as any, view, {
+        el: widgetel
+      });
     });
   }
 
   async display_view(msg: any, view: any, options: any): Promise<Widget> {
     if (options.el) {
-      LuminoWidget.Widget.attach(view.luminoWidget, options.el);
+      LuminoWidget.Widget.attach(view.luminoWidget || view.pWidget, options.el);
     }
     if (view.el) {
       view.el.setAttribute('data-voila-jupyter-widget', '');
@@ -183,18 +168,28 @@
   private _registerWidgets(): void {
     this.register({
       name: '@jupyter-widgets/base',
-      version: base.JUPYTER_WIDGETS_VERSION,
-      exports: base as any
+      version: "2.0.0",
+      exports: async () => require('@jupyter-widgets/base') as any,
     });
     this.register({
       name: '@jupyter-widgets/controls',
-      version: controls.JUPYTER_CONTROLS_VERSION,
-      exports: controls as any
+      version: "2.0.0",
+      exports: async () => require('@jupyter-widgets/controls') as any,
     });
     this.register({
       name: '@jupyter-widgets/output',
-      version: output.OUTPUT_WIDGET_VERSION,
-      exports: output as any
+      version: "1.0.0",
+      exports: async () => (await require('@jupyter-widgets/jupyterlab-manager')).output as any,
+    });
+    this.register({
+      name: '@jupyter-widgets/base',
+      version: "1.2.0",
+      exports: async () => require('@jupyter-widgets/base7') as any,
+    });
+    this.register({
+      name: '@jupyter-widgets/controls',
+      version: "1.5.0",
+      exports: async () => require('@jupyter-widgets/controls7') as any,
     });
   }
 

packages/voila/style/index.css

@@ -1,4 +1,4 @@
-@import '@jupyter-widgets/controls/css/widgets-base.css';
+@import '@jupyter-widgets/controls7/css/widgets-base.css';
 
 @font-face /* 0 */ {
   font-family: MJXZERO;

tsconfigbase.json

@@ -17,6 +17,6 @@
     "skipLibCheck": true,
     "strictNullChecks": true,
     "target": "es2017",
-    "types": []
+    "types": ["node"]
   }
 }