Update for ipywidgets 8

Author: vidartf

js/package.json

@@ -24,33 +24,33 @@
     "autogen:shaders": "node ./scripts/generate-shader-utils.js",
     "autogen:wrappers": "node ./scripts/generate-wrappers.js",
     "build:all": "npm run build:labextension",
-    "build:bundles": "webpack -d && node ./scripts/post-build.js --debug",
-    "build:bundles-prod": "webpack -p && node ./scripts/post-build.js",
+    "build:bundles": "webpack --mode development && node ./scripts/post-build.js --debug",
+    "build:bundles-prod": "webpack --mode production && node ./scripts/post-build.js",
     "build:labextension": "rimraf lab-dist && mkdirp lab-dist && cd lab-dist && npm pack .. && cd .. && jupyter labextension build .",
     "clean": "rimraf dist && rimraf ../pythreejs/static && rimraf lab-dist && node ./scripts/clean-generated-files.js",
     "prepack": "npm run build:bundles-prod",
     "prepare": "npm run autogen",
     "update:deps": "update-dependency --minimal --regex \"^(?!@jupyter-widgets|three)\"",
-    "watch": "webpack -d -w"
+    "watch": "webpack --mode development -w"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^1.2.5 || ^2.0.0 || ^3.0.0 || ^4.0.0",
+    "@jupyter-widgets/base": "^6.0.0-rc.0",
     "bluebird": "^3.5.5",
-    "jupyter-dataserializers": "^2.2.0",
+    "jupyter-dataserializers": "^3.0.0",
     "three": "^0.97.0",
-    "underscore": "^1.8.3"
+    "underscore": "^1.13.1"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^3.0.0",
-    "@jupyterlab/buildutils": "^2.0.2",
-    "eslint": "^6.8.0",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.4",
+    "@jupyterlab/buildutils": "^3.2.4",
+    "eslint": "^8.4.1",
+    "fs-extra": "^10.0.0",
+    "glob": "^8.0.3",
     "handlebars": "^4.1.2",
     "mkdirp": "^1.0.3",
     "rimraf": "^3.0.2",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4"
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1"
   },
   "jupyterlab": {
     "extension": "src/jupyterlab-plugin",

js/scripts/templates/js_wrapper.mustache

@@ -17,19 +17,19 @@ var {{ dep.modelName }} = require('{{ dep.requirePath }}').{{ dep.modelName }};
 {{/notSuper}}
 {{/each}}
 
-var {{ modelName }} = {{ superClass.modelName }}.extend({
+class {{ modelName }} extends {{ superClass.modelName }} {
 
-    defaults: function() {
+    defaults() {
         return _.extend({{ superClass.modelName }}.prototype.defaults.call(this), {
 
             {{#each properties as |prop propName|}}
             {{ propName }}: {{{ prop.defaultJson }}},
             {{/each}}
 
         });
-    },
+    }
 
-    constructThreeObject: function() {
+    constructThreeObject() {
 
         var result = new THREE.{{ className }}({{#if constructor.args}}
         {{#each constructor.args as |arg|}}
@@ -38,9 +38,9 @@ var {{ modelName }} = {{ superClass.modelName }}.extend({
         {{/if}});
         return Promise.resolve(result);
 
-    },
+    }
 
-    createPropertiesArrays: function() {
+    createPropertiesArrays() {
 
         {{ superClass.modelName }}.prototype.createPropertiesArrays.call(this);
         {{#each properties as |prop propName|}}
@@ -70,20 +70,18 @@ var {{ modelName }} = {{ superClass.modelName }}.extend({
         {{/if}}
         {{/each}}
 
-    },
+    }
+}
 
-}, {
-
-    model_name: '{{ modelName }}',
-
-    {{#if serialized_props }}
-    serializers: _.extend({
-        {{#each serialized_props as |serializer propName|}}
-        {{ propName }}: {{ serializer }},
-        {{/each}}
-    }{{#if superClass }},  {{ superClass.modelName }}.serializers){{/if}},
-    {{/if}}
-});
+{{ modelName }}.model_name = '{{ modelName }}';
+{{#if serialized_props }}
+{{ modelName }}.serializers = {
+    {{#if superClass }}...{{ superClass.modelName }}.serializers,{{/if}}
+    {{#each serialized_props as |serializer propName|}}
+    {{ propName }}: {{ serializer }},
+    {{/each}}
+};
+{{/if}}
 
 module.exports = {
     {{ modelName }}: {{ modelName }},

js/src/_base/Preview.js

@@ -13,23 +13,23 @@ var unpackThreeModel = require('./serializers').unpackThreeModel;
 var BLACK = new THREE.Color('black');
 
 
-var PreviewView = RenderableView.extend({
+class PreviewView extends RenderableView {
 
-    initialize: function() {
+    initialize() {
         RenderableView.prototype.initialize.apply(this, arguments);
 
         this._resetCameraNeeded = true;
         this._rebuildNeeded = true;
 
-    },
+    }
 
-    render: function() {
+    render() {
         // ensure that model is fully initialized before attempting render
         return this.model.initPromise.bind(this).then(this.doRender);
-    },
+    }
 
 
-    setupEventListeners: function() {
+    setupEventListeners() {
         RenderableView.prototype.setupEventListeners.call(this);
         var child = this.model.get('child');
         this.listenTo(child, 'change', this.onChildChanged.bind(this));
@@ -38,17 +38,17 @@ var PreviewView = RenderableView.extend({
             // any nested change instead of just rerendering.
             this.listenTo(child, 'childchange', this.onChildChanged.bind(this));
         }
-    },
+    }
 
-    onChildChanged: function() {
+    onChildChanged() {
         // Enabling this line will reset the camera
         // when any changes are made to the child
         //this._resetCameraNeeded = true;
 
         this._rebuildNeeded = true;
-    },
+    }
 
-    constructScene: function() {
+    constructScene() {
 
         var obj = this.model.get('child').obj;
 
@@ -131,9 +131,9 @@ var PreviewView = RenderableView.extend({
         // Clear at end to ensure that any changes to obj does not
         // cause infinite rebuild chain.
         this._rebuildNeeded = false;
-    },
+    }
 
-    resetCamera: function() {
+    resetCamera() {
         // Compute bounding sphere for entire scene
         var sphere = utils.computeBoundingSphere(this.scene);
         if (sphere === null) {
@@ -152,14 +152,14 @@ var PreviewView = RenderableView.extend({
         // Position light up to the left and behind camera
         var dist = 2.5 * (this.camera.position.z - sphere.center.z);
         this.pointLight.position.set(-dist, dist, dist);
-    },
+    }
 
-    clearScene: function() {
+    clearScene() {
         // this.controls.reset();
         this.scene.remove.apply(this.scene, this.scene.children.slice());
-    },
+    }
 
-    setupControls: function() {
+    setupControls() {
         // Allow user to inspect object with mouse/scrollwheel
         this.debug('setting up controls');
         var control = new OrbitControls(this.camera, this.renderer.domElement);
@@ -168,9 +168,9 @@ var PreviewView = RenderableView.extend({
         control.target.set(0, 0, 0);
         control.update();
         this.controls = [control];
-    },
+    }
 
-    lazyRendererSetup: function() {
+    lazyRendererSetup() {
         this.camera = new THREE.PerspectiveCamera(60, 1.0);
         // aspect is updated by this.updateSize()
         // position and lookat target is updated to fit scene
@@ -194,9 +194,9 @@ var PreviewView = RenderableView.extend({
         this.enableControls();
 
         this.renderScene();
-    },
+    }
 
-    renderScene: function() {
+    renderScene() {
         this.debug('renderScene');
 
         if (this.isFrozen) {
@@ -220,24 +220,24 @@ var PreviewView = RenderableView.extend({
         if (this.scene.ipymodel) {
             this.scene.ipymodel.trigger('afterRender', this.scene, this.renderer, this.camera);
         }
-    },
+    }
 
-    updateSize: function() {
+    updateSize() {
         RenderableView.prototype.updateSize.call(this);
         if (this.camera) {
             var width = this.model.get('_width');
             var height = this.model.get('_height');
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
         }
-    },
+    }
 
-});
+}
 
 
-var PreviewModel = RenderableModel.extend({
+class PreviewModel extends RenderableModel {
 
-    defaults: function() {
+    defaults() {
         return _.extend(RenderableModel.prototype.defaults.call(this), {
             _model_name: 'PreviewModel',
             _view_name: 'PreviewView',
@@ -246,34 +246,33 @@ var PreviewModel = RenderableModel.extend({
             _wire: false,
             child: null,
         });
-    },
+    }
 
-    initialize: function(attributes, options) {
+    initialize(attributes, options) {
         RenderableModel.prototype.initialize.apply(this, arguments);
 
         // Don't listen to child until it is finished it's setup
         this.initPromise = this.get('child').initPromise.bind(this).then(function() {
             this.setupListeners();
         });
-    },
+    }
 
-    setupListeners: function() {
+    setupListeners() {
         var child = this.get('child');
         this.listenTo(child, 'change', this.onChildChanged.bind(this));
         this.listenTo(child, 'childchange', this.onChildChanged.bind(this));
-    },
+    }
 
-    onChildChanged: function(model, options) {
+    onChildChanged(model, options) {
         this.trigger('rerender', this, {});
-    },
+    }
 
-}, {
+}
 
-    serializers: _.extend({
-        child: { deserialize: unpackThreeModel },
-    }, RenderableModel.serializers),
-
-});
+PreviewModel.serializers = {
+    ...RenderableModel.serializers,
+    child: { deserialize: unpackThreeModel },
+};
 
 
 module.exports = {