refactor: work towards ipywidgets8 with publicPath

js/src/amd-public-path.js

@@ -0,0 +1,8 @@
+// In an AMD module, we set the public path using the magic requirejs 'module' dependency
+// See https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
+// Since 'module' is a requirejs magic module, we must include 'module' in the webpack externals configuration.
+var module = require('module');
+var url = new URL(module.uri, document.location)
+// Using lastIndexOf('/')+1 gives us the empty string if there is no '/', so pathname becomes '/'
+url.pathname = url.pathname.slice(0,url.pathname.lastIndexOf('/')+1);
+__webpack_public_path__ = `${url.origin}${url.pathname}`;

js/src/extension.js

@@ -14,8 +14,6 @@ if (window.require) {
     });
 }
 
-window.__webpack_public_path__ = `${document.querySelector('body').getAttribute('data-base-url')}nbextensions/k3d/`;
-
 require('katex/dist/katex.min.css');
 require('lil-gui/dist/lil-gui.css');
 

js/webpack.config.js

@@ -57,19 +57,21 @@ module.exports = [
         // custom widget.
         // It must be an amd module
         //
-        entry: './src/index.js',
+        entry: ['./src/amd-public-path.js', './src/index.js'],
         output: {
             filename: 'index.js',
             path: `${__dirname}/../k3d/static`,
             libraryTarget: 'amd',
+            publicPath: '', // Set in amd-public-path.js
         },
         mode,
         plugins,
         devtool: 'source-map',
         module: {
             rules,
         },
-        externals: ['@jupyter-widgets/base'],
+        // 'module' is the magic requirejs dependency used to set the publicPath
+        externals: ['@jupyter-widgets/base', 'module'],
     },
     { // Embeddable K3D-jupyter bundle
         //
@@ -85,20 +87,21 @@ module.exports = [
         // The target bundle is always `dist/index.js`, which is the path required
         // by the custom widget embedder.
         //
-        entry: './src/embed.js',
+        entry: ['./src/amd-public-path.js', './src/embed.js'],
         output: {
             filename: 'index.js',
             path: `${__dirname}/dist/`,
             libraryTarget: 'amd',
-            publicPath: `https://unpkg.com/k3d@${version}/dist/`,
+            publicPath: '', // Set in amd-public-path.js
         },
         mode,
         devtool: 'source-map',
         module: {
             rules,
         },
         plugins,
-        externals: ['@jupyter-widgets/base'],
+        // 'module' is the magic requirejs dependency used to set the publicPath
+        externals: ['@jupyter-widgets/base', 'module'],
     },
     {
         entry: './src/standalone.js',

package.json

@@ -39,7 +39,7 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^4.1.0",
+    "@jupyter-widgets/base": "^4 || ^5 || ^6",
     "fflate": "^0.7.3",
     "file-saver": "^2.0.5",
     "katex": "^0.15.6",

pyproject.toml

@@ -25,7 +25,7 @@ classifiers = [
     "Programming Language :: Python :: 3.9",
 ]
 dependencies = [
-    "ipywidgets",
+    "ipywidgets>=7.0.0,<9.0.0",
     "msgpack",
     "numpy",
     "traitlets",