fix,feat: add pack_models

Author: bollwyvl

packages/base/src/widget.ts

@@ -9,7 +9,7 @@ import $ from 'jquery';
 
 import { NativeView } from './nativeview';
 
-import { JSONObject, JSONValue } from '@lumino/coreutils';
+import { JSONObject, JSONValue, JSONExt } from '@lumino/coreutils';
 
 import { Message, MessageLoop } from '@lumino/messaging';
 
@@ -29,6 +29,17 @@ import { BufferJSON, Dict } from './utils';
 
 import { KernelMessage } from '@jupyterlab/services';
 
+/**
+ * The magic key used in the widget graph serialization.
+ */
+const IPY_MODEL_ = 'IPY_MODEL_';
+
+/**
+ * A best-effort method for performing deep copies.
+ */
+const deepcopy =
+  globalThis.structuredClone || ((x: any) => JSON.parse(JSON.stringify(x)));
+
 /**
  * Replace model ids with models recursively.
  */
@@ -38,24 +49,51 @@ export function unpack_models(
 ): Promise<WidgetModel | Dict<WidgetModel> | WidgetModel[] | any> {
   if (Array.isArray(value)) {
     const unpacked: any[] = [];
-    value.forEach((sub_value, key) => {
+    for (const sub_value of value) {
       unpacked.push(unpack_models(sub_value, manager));
-    });
+    }
     return Promise.all(unpacked);
   } else if (value instanceof Object && typeof value !== 'string') {
     const unpacked: { [key: string]: any } = {};
-    Object.keys(value).forEach((key) => {
-      unpacked[key] = unpack_models(value[key], manager);
-    });
+    for (const [key, sub_value] of Object.entries(value)) {
+      unpacked[key] = unpack_models(sub_value, manager);
+    }
     return utils.resolvePromisesDict(unpacked);
-  } else if (typeof value === 'string' && value.slice(0, 10) === 'IPY_MODEL_') {
+  } else if (typeof value === 'string' && value.slice(0, 10) === IPY_MODEL_) {
     // get_model returns a promise already
     return manager!.get_model(value.slice(10, value.length));
   } else {
     return Promise.resolve(value);
   }
 }
 
+/** Replace models with ids recursively.
+ *
+ * If the commonly-used `unpack_models` is given as the `seralize` method,
+ * and no `deserialize` is given, this will be used as a default.
+ */
+export function pack_models(
+  value: WidgetModel | Dict<WidgetModel> | WidgetModel[] | any,
+  widget?: WidgetModel
+): any | Dict<unknown> | string | (Dict<unknown> | string)[] {
+  if (Array.isArray(value)) {
+    const model_ids: string[] = [];
+    for (const model of value) {
+      model_ids.push(pack_models(model, widget));
+    }
+    return model_ids;
+  } else if (value instanceof WidgetModel) {
+    return `${IPY_MODEL_}${value.model_id}`;
+  } else if (value instanceof Object && typeof value !== 'string') {
+    const packed: { [key: string]: string } = {};
+    for (const [key, sub_value] of Object.entries(value)) {
+      packed[key] = pack_models(sub_value, widget);
+    }
+  } else {
+    return value;
+  }
+}
+
 /**
  * Type declaration for general widget serializers.
  */
@@ -524,18 +562,26 @@ export class WidgetModel extends Backbone.Model {
    * binary array buffers.
    */
   serialize(state: Dict<any>): JSONObject {
-    const deepcopy =
-      globalThis.structuredClone || ((x: any) => JSON.parse(JSON.stringify(x)));
     const serializers =
-      (this.constructor as typeof WidgetModel).serializers || {};
+      (this.constructor as typeof WidgetModel).serializers ||
+      JSONExt.emptyObject;
     for (const k of Object.keys(state)) {
       try {
-        if (serializers[k] && serializers[k].serialize) {
-          state[k] = serializers[k].serialize!(state[k], this);
+        const keySerializers = serializers[k] || JSONExt.emptyObject;
+        let { serialize } = keySerializers;
+
+        if (serialize == null && keySerializers.deserialize === unpack_models) {
+          // handle https://github.com/jupyter-widgets/ipywidgets/issues/3735
+          serialize = pack_models;
+        }
+
+        if (serialize) {
+          state[k] = serialize(state[k], this);
         } else {
           // the default serializer just deep-copies the object
           state[k] = deepcopy(state[k]);
         }
+
         if (state[k] && state[k].toJSON) {
           state[k] = state[k].toJSON();
         }

packages/base/test/karma-cov.conf.js

@@ -14,6 +14,9 @@ module.exports = function (config) {
         { type: 'html', dir: 'test/coverage' },
       ],
     },
+    mochaReporter: {
+      showDiff: true
+    },
     port: 9876,
     colors: true,
     singleRun: true,

packages/base/test/karma.conf.js

@@ -3,6 +3,9 @@ module.exports = function (config) {
     basePath: '..',
     frameworks: ['mocha'],
     reporters: ['mocha'],
+    mochaReporter: {
+      showDiff: true
+    },
     files: ['test/build/bundle.js'],
     port: 9876,
     colors: true,