Support processPhosphorMessage. (#20)

For backwards compatibility, support dispatching to processPhosphorMessage.
googlecolab · Nov 22, 2021 · 294824f · 294824f
1 parent 6af7a6e
commit 294824f
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 4 deletions.
diff --git a/src/manager.ts b/src/manager.ts
@@ -33,6 +33,7 @@ import {ManagerBase} from '@jupyter-widgets/base-manager';
 import * as controls from '@jupyter-widgets/controls';
 import * as services from '@jupyterlab/services';
 import {JSONObject} from '@lumino/coreutils';
+import {Message} from '@lumino/messaging';
 import {Widget} from '@lumino/widgets';
 
 export class Manager extends ManagerBase implements IWidgetManager {
@@ -70,6 +71,20 @@ export class Manager extends ManagerBase implements IWidgetManager {
       });
     }
 
+    // https://github.com/googlecolab/colab-cdn-widget-manager/issues/19
+    // Add processPhosphorMessage for better compat with jupyter-widgets 4.0.0.
+    if (
+      !Object.getOwnPropertyDescriptor(
+        DOMWidgetView.prototype,
+        'processPhosphorMessage'
+      )
+    ) {
+      Object.defineProperty(DOMWidgetView.prototype, 'processPhosphorMessage', {
+        value: function () {},
+        writable: true,
+      });
+    }
+
     this.loader.define('@jupyter-widgets/base', [], () => {
       const module: {[key: string]: unknown} = {};
       for (const key of Object.keys(base)) {
@@ -189,7 +204,7 @@ export class Manager extends ManagerBase implements IWidgetManager {
   async render(modelId: string, container: HTMLElement): Promise<void> {
     const model = (await this.get_model(modelId)) as WidgetModel;
     const view = await this.create_view(model);
-    view.luminoWidget.processMessage({
+    dispatchLuminoMessage(view.luminoWidget, {
       type: 'before-attach',
       isConflatable: false,
       conflate: () => false,
@@ -346,7 +361,7 @@ class LuminoLifecycleAdapter extends HTMLElement {
   }
   connectedCallback() {
     if (this.widget) {
-      this.widget.processMessage({
+      dispatchLuminoMessage(this.widget, {
         type: 'after-attach',
         isConflatable: false,
         conflate: () => false,
@@ -357,19 +372,36 @@ class LuminoLifecycleAdapter extends HTMLElement {
     if (this.widget) {
       // We don't have a native event for before-detach, so just fire before
       // the after-detach.
-      this.widget.processMessage({
+      dispatchLuminoMessage(this.widget, {
         type: 'before-detach',
         isConflatable: false,
         conflate: () => false,
       });
-      this.widget.processMessage({
+      dispatchLuminoMessage(this.widget, {
         type: 'after-detach',
         isConflatable: false,
         conflate: () => false,
       });
     }
   }
 }
+
+function dispatchLuminoMessage(widget: Widget, message: Message) {
+  widget.processMessage(message);
+  const phosphorWidget = widget as MaybePhosphorWidget;
+  if (phosphorWidget._view?.processPhosphorMessage) {
+    phosphorWidget._view.processPhosphorMessage(message);
+  }
+}
+
+declare interface MaybePhosphorWidget {
+  _view?: MaybePhosphorView;
+}
+
+declare interface MaybePhosphorView {
+  processPhosphorMessage?(message: Message): void;
+}
+
 try {
   window.customElements.define('colab-lumino-adapter', LuminoLifecycleAdapter);
 } catch (error: unknown) {

diff --git a/test/manager.spec.js b/test/manager.spec.js
@@ -264,4 +264,52 @@ describe('widget manager', () => {
 
     container.remove();
   });
+
+  it('supports processPhosphorMessage', async () => {
+    const provider = new FakeState({
+      123: {
+        state: {
+          _view_module: 'custom-widget',
+          _view_name: 'View',
+        },
+        model_module: 'custom-widget',
+        model_name: 'Model',
+      },
+    });
+    const manager = createWidgetManager(provider);
+    let modelClass;
+    let viewClass;
+    let processPhosphorMessageCalled = false;
+
+    manager.loader.define(
+      'custom-widget',
+      ['@jupyter-widgets/base'],
+      (base) => {
+        class Model extends base.DOMWidgetModel {
+          constructor(...args) {
+            super(...args);
+          }
+        }
+        class View extends base.DOMWidgetView {
+          constructor(...args) {
+            super(...args);
+          }
+          processPhosphorMessage() {
+            super.processPhosphorMessage();
+            processPhosphorMessageCalled = true;
+          }
+        }
+        modelClass = Model;
+        viewClass = View;
+
+        return {
+          Model,
+          View,
+        };
+      }
+    );
+
+    await manager.render('123', container);
+    expect(processPhosphorMessageCalled).toBeTrue();
+  });
 });