fix: deepcopy with structuredClone over JSON.parse/stringify

[manzt]

structuredClone is now the preferred way to deeply copy objects in JS. It is widely supported across browsers, minus some edge cases like in Safari web-workers (see the table in the linked documentation).

The old JSON.parse + JSON.stringify trick deletes any DataViews (without a custom serializer) within WidgetModel.serialize, leading to a serious bug when using raw "binary" traitlets. With the {remove,put}_buffers implementations, extra serializers are not required for transferring binary data. The following example should work without custom serializers but immediately deletes text value when this.model.save_changes() is called for the first time.

import { DOMWidgetModel, DOMWidgetView } from "@jupyter-widgets/base";
class CustomModel extends DOMWidgetModel { /* ... */ }
class CustomView extends DOMWidgetView {
  render() {
    let decoder = new TextDecoder(), encoder = new TextEncoder();
    let text = document.createElement("textarea");
    text.oninput = () => {
      let bytes = encoder.encode(text.value);
      this.model.set("text", new DataView(bytes.buffer));
      this.model.save_changes(); // internally calls JSON.parse(JSON.stringify(DataView)) -> {}
    };
    let on_change = () => text.value = decoder.decode(this.model.get("text"));
    on_change();
    this.model.on("change:text", on_change);
    this.el.appendChild(text);
  }
}
export { CustomModel, CustomView };

class CustomWidget(ipywidgets.DOMWidget):
    # ...
    text = traitlets.Any(b'hello, world').tag(sync=True)

[github-actions]

👈 Launch a binder notebook on branch manzt/ipywidgets/patch-1

[manzt]

You can see this bug with anywidget in Google Colab.

import anywidget
import traitlets

class BinaryTextArea(anywidget.AnyWidget):
    _esm = """
    let decoder = new TextDecoder(), encoder = new TextEncoder();
    export function render(view) {
        let text = document.createElement("textarea");
        text.oninput = () => {
          let bytes = encoder.encode(text.value);
          view.model.set("text", new DataView(bytes.buffer));
          view.model.save_changes();
        };
        function on_change() {
          text.value = decoder.decode(view.model.get("text"));
        }
        on_change();
        view.model.on("change:text", on_change);
        view.el.appendChild(text);
    }    
    """
    text = traitlets.Any(b'hello, world').tag(sync=True)


area = BinaryTextArea()
area

[maartenbreddels]

Whow, this is good news. This makes it much better to implement binary support on the front end. I think it would be good to backport this to 7.
@jasongrout would you classify this as a fix or feature?

[jasongrout]

@jasongrout would you classify this as a fix or feature?

I think it's fine to backport to 7.x. It's definitely backwards compatible, right? Especially with the fallback.

[jasongrout]

The visual test failure is unrelated - looks like jlab puts a notification in the background that we are capturing:

Before:

After:

Diff:

[martinRenou]

The visual test failure is unrelated

Updating Galata seems to do the trick for getting rid of this new notification. We had the same in bqplot.

[jasongrout]

Visual regression fixed in #3694. Thanks @martinRenou

[jasongrout]

Thanks @manzt!

[manzt]

I know this caused a lot of issues, and I'm very sorry for that. Since anywidget doesn't have the same backward compat requirements, I decided to use structuredClone there. Perhaps this is a good middle ground.

[maartenbreddels]

No need to say sorry, thank you for contributing! The burden of breaking changes rests on the maintainers, we are all responsible.
I hope you continue to contribute, I love the work you are doing ❤️