html manager dist/embed-amd.js is hard to debug

[jasongrout]

I'm doing some work with the html manager's dist/embed-amd.js file, and it is really hard to debug. That file is minimized, with no source map since it is generated by hand (see the directory listing at https://www.jsdelivr.com/package/npm/@jupyter-widgets/html-manager?path=dist), so the browser debugger can only present the minimized source.

If we can, I think we ought to rework how that file is generated so that it can have a source map, or that we can include a non-minified version.

[jasongrout]

Same goes for dist/libembed-amd.js

[jasongrout-db]

For now, here are some step-by-step instructions for building and serving a non-minified version of the html manager:

Create a conda environment with an ipywidgets dev install:

conda create -n devwidgets -c conda-forge notebook jupyterlab yarn
conda activate devwidgets

git clone [email protected]:jupyter-widgets/ipywidgets.git
cd ipywidgets

# check out the ipywidgets 7.x branch
git checkout 7.x

# Now do a development install of ipywidgets
./dev-install.sh

Apply these changes to compile the html manager without minimization:

diff --git a/packages/html-manager/webpack.config.js b/packages/html-manager/webpack.config.js
index f3654466..279826ab 100644
--- a/packages/html-manager/webpack.config.js
+++ b/packages/html-manager/webpack.config.js
@@ -48,6 +48,10 @@ var rules = [
 
 var publicPath = 'https://unpkg.com/@jupyter-widgets/html-manager@' + version + '/dist/';
 
+options = {
+    devtool: 'source-map',
+    mode: 'development'
+}
 module.exports = [
 {// script that renders widgets using the standard embedding and can only render standard controls
     entry: './lib/embed.js',
@@ -58,7 +62,8 @@ module.exports = [
     },
     devtool: 'source-map',
     module: { rules: rules },
-    mode: 'production'
+    mode: 'production',
+    ...options
 },
 {// script that renders widgets using the amd embedding and can render third-party custom widgets
     entry: './lib/embed-amd-render.js',
@@ -68,7 +73,8 @@ module.exports = [
         publicPath: publicPath,
     },
     module: { rules: rules },
-    mode: 'production'
+    mode: 'production',
+    ...options
 },
 {// embed library that depends on requirejs, and can load third-party widgets dynamically
     entry: './lib/libembed-amd.js',
@@ -80,7 +86,8 @@ module.exports = [
         libraryTarget: 'amd'
     },
     module: { rules: rules },
-    mode: 'production'
+    mode: 'production',
+    ...options
 },
 {// @jupyter-widgets/html-manager
     entry: './lib/index.js',
@@ -93,7 +100,8 @@ module.exports = [
     },
     module: { rules: rules },
     externals: ['@jupyter-widgets/base', '@jupyter-widgets/controls'],
-    mode: 'production'
+    mode: 'production',
+    ...options
 },
 {// @jupyter-widgets/base
     entry: '@jupyter-widgets/base/lib/index',
@@ -105,7 +113,8 @@ module.exports = [
         libraryTarget: 'amd',
     },
     module: { rules: rules },
-    mode: 'production'
+    mode: 'production',
+    ...options
 },
 {// @jupyter-widgets/controls
     entry: '@jupyter-widgets/controls/lib/index',
@@ -118,6 +127,7 @@ module.exports = [
     },
     module: { rules: rules },
     externals: ['@jupyter-widgets/base'],
-    mode: 'production'
+    mode: 'production',
+    ...options
 }
 ];

Rebuild the html manager (and all other javascript)

yarn run build

At this point you can verify that packages/html-manager/libembed-amd.js is not minified.

Serve the new files (from localhost:9000/dist/libembed-amd.js, etc.)

cd packages/html-manager
python -m http.server 9000

[tkrabel-db]

At this point you can verify that packages/html-manager/libembed-amd.js is not minified.

I think it should be packages/html-manager/lib/libembed-amd.js :)

[jasongrout-db]

packages/html-manager/lib/libembed-amd.js

Oops, actually packages/html-manager/dist/libembed-amd.js

[tkrabel-db]

Haha, we got there in increments :D