Better logic to set webpack public path in AMD modules.

jasongrout · jasongrout · commit 803cc66b7dde · 2022-07-06T11:29:46.000-06:00
Fixes #3474. This is another take on #3464, since that approach did not work to set the public path in AMD modules. Essentially, since AMD modules are executed asynchronously, the webpack 'auto' public path logic does not work. Instead, we use the requirejs-specific 'module' magic dependency, which allows us to get the path to the current AMD module, and use that to get the public path. We do this public path computation in a separate script to isolate it from any library code.
diff --git a/examples/embed-amd/README.md b/examples/embed-amd/README.md
@@ -0,0 +1,24 @@
+# Using the HTML widget manager as a RequireJS AMD module
+
+## Description
+
+This is an example project showing how to embed widgets in an HTML document using a RequireJS AMD module.
+
+In order to test the current development repo, make a symbolic link from the `packages/html-manager` directory to this directory and uncomment the `html-manager` paths config in `index.html`.
+
+The widget data in this example was generated from the following code:
+
+```python
+from ipywidgets import VBox, jsdlink, IntSlider, Button
+
+s1, s2 = IntSlider(max=200, value=100), IntSlider(value=40)
+b = Button(icon='legal')
+jsdlink((s1, 'value'), (s2, 'max'))
+VBox([s1, s2, b])
+```
+
+## Try it
+
+1. Start with a repository checkout, and run `yarn install` in the root directory.
+2. Run `yarn run build:examples` in the root directory.
+3. Open the `index.html` file in this directory.
diff --git a/examples/embed-amd/index.html b/examples/embed-amd/index.html
@@ -0,0 +1,167 @@
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF8">
+        <style>
+        .jupyter-widgetarea {
+            margin: 5px;
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 900px;
+        }
+        </style>
+    </head>
+    <body>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
+        <script>
+            require.config({
+                bundles: {
+                    '@jupyter-widgets/html-manager/dist/embed-amd': [
+                        '@jupyter-widgets/html-manager', 
+                        '@jupyter-widgets/base', 
+                        '@jupyter-widgets/controls'
+                    ]
+                },
+                paths: {
+                    '@jupyter-widgets/html-manager': [
+                        // 'html-manager', // if a symbolic link is set up to the html-manager package for local dev
+                        'https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager',
+                    ]
+                },
+            })
+            require(["@jupyter-widgets/html-manager/dist/embed-amd"], () => {
+                console.log('Processing widgets on page');
+            });
+        </script>
+        <script type="application/vnd.jupyter.widget-state+json">
+            {
+                "version_major": 2,
+                "version_minor": 0,
+                "state": {
+                    "1d915e54eff54fd89e505a46ccabdabd": {
+                        "model_name": "LayoutModel",
+                        "model_module": "@jupyter-widgets/base",
+                        "model_module_version": "2.0.0",
+                        "state": {}
+                    },
+                    "48a42260652f4b7eb7851c65cd155604": {
+                        "model_name": "SliderStyleModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "description_width": ""
+                        }
+                    },
+                    "105655a5e8dc4b7bb19d824cc3ff7770": {
+                        "model_name": "IntSliderModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "value": 100,
+                            "max": 200,
+                            "style": "IPY_MODEL_48a42260652f4b7eb7851c65cd155604",
+                            "behavior": "drag-tap",
+                            "layout": "IPY_MODEL_1d915e54eff54fd89e505a46ccabdabd"
+                        }
+                    },
+                    "cb13b25cf84542ba882ab2a9c6e57c6d": {
+                        "model_name": "LayoutModel",
+                        "model_module": "@jupyter-widgets/base",
+                        "model_module_version": "2.0.0",
+                        "state": {}
+                    },
+                    "f0479b348e2441cd87e1bd856fac5c22": {
+                        "model_name": "SliderStyleModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "description_width": ""
+                        }
+                    },
+                    "2182c1a3fe4a410f9b0a5306ae05c530": {
+                        "model_name": "IntSliderModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "value": 40,
+                            "style": "IPY_MODEL_f0479b348e2441cd87e1bd856fac5c22",
+                            "behavior": "drag-tap",
+                            "layout": "IPY_MODEL_cb13b25cf84542ba882ab2a9c6e57c6d"
+                        }
+                    },
+                    "5f2da4ad981b467cb2d4f07efe5141f4": {
+                        "model_name": "LayoutModel",
+                        "model_module": "@jupyter-widgets/base",
+                        "model_module_version": "2.0.0",
+                        "state": {}
+                    },
+                    "e5f63e1e06af400aac8135ff3394b856": {
+                        "model_name": "ButtonStyleModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "font_family": null,
+                            "font_size": null,
+                            "font_style": null,
+                            "font_variant": null,
+                            "font_weight": null,
+                            "text_color": null,
+                            "text_decoration": null
+                        }
+                    },
+                    "891a12a9856949b4be2e520f732dcca9": {
+                        "model_name": "ButtonModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "tooltip": null,
+                            "icon": "legal",
+                            "style": "IPY_MODEL_e5f63e1e06af400aac8135ff3394b856",
+                            "layout": "IPY_MODEL_5f2da4ad981b467cb2d4f07efe5141f4"
+                        }
+                    },
+                    "e8a6db8ff7bd4645b5b23ccb797dee9c": {
+                        "model_name": "DirectionalLinkModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "target": [
+                                "IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530",
+                                "max"
+                            ],
+                            "source": [
+                                "IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770",
+                                "value"
+                            ]
+                        }
+                    },
+                    "b9445ea442bc4a5aae73c1e2241c3922": {
+                        "model_name": "LayoutModel",
+                        "model_module": "@jupyter-widgets/base",
+                        "model_module_version": "2.0.0",
+                        "state": {}
+                    },
+                    "a08a1974ba01461c8d9b91b8bfa0f6ce": {
+                        "model_name": "VBoxModel",
+                        "model_module": "@jupyter-widgets/controls",
+                        "model_module_version": "2.0.0",
+                        "state": {
+                            "children": [
+                                "IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770",
+                                "IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530",
+                                "IPY_MODEL_891a12a9856949b4be2e520f732dcca9"
+                            ],
+                            "layout": "IPY_MODEL_b9445ea442bc4a5aae73c1e2241c3922"
+                        }
+                    }
+                }
+            }
+            </script>
+            <script type="application/vnd.jupyter.widget-view+json">
+            {
+                "version_major": 2,
+                "version_minor": 0,
+                "model_id": "a08a1974ba01461c8d9b91b8bfa0f6ce"
+            }
+            </script>
+    </body>
+</html>
diff --git a/packages/html-manager/amd-public-path.js b/packages/html-manager/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}`;
diff --git a/packages/html-manager/webpack.config.js b/packages/html-manager/webpack.config.js
@@ -5,12 +5,18 @@
 
 var path = require('path');
 
-var rules = [
-  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-  // required to load font-awesome
-  { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
-  { test: /\.svg$/i, type: 'asset' },
-];
+var options = {
+  devtool: 'source-map',
+  mode: 'production',
+  module: {
+    rules: [
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      // required to load font-awesome
+      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+      { test: /\.svg$/i, type: 'asset' },
+    ],
+  },
+};
 
 module.exports = [
   {
@@ -20,9 +26,7 @@ module.exports = [
       filename: 'embed.js',
       path: path.resolve(__dirname, 'dist'),
     },
-    devtool: 'source-map',
-    module: { rules: rules },
-    mode: 'production',
+    ...options,
   },
   {
     // script that renders widgets using the amd embedding and can render third-party custom widgets
@@ -31,57 +35,62 @@ module.exports = [
       filename: 'embed-amd-render.js',
       path: path.resolve(__dirname, 'dist', 'amd'),
     },
-    module: { rules: rules },
-    mode: 'production',
+    ...options,
   },
   {
     // embed library that depends on requirejs, and can load third-party widgets dynamically
-    entry: './lib/libembed-amd.js',
+    entry: ['./amd-public-path.js', './lib/libembed-amd.js'],
     output: {
       library: '@jupyter-widgets/html-manager/dist/libembed-amd',
       filename: 'libembed-amd.js',
       path: path.resolve(__dirname, 'dist', 'amd'),
       libraryTarget: 'amd',
+      publicPath: '', // Set in amd-public-path.js
     },
-    module: { rules: rules },
-    mode: 'production',
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ['module'],
+    ...options,
   },
   {
     // @jupyter-widgets/html-manager
-    entry: './lib/index.js',
+    entry: ['./amd-public-path.js', './lib/index.js'],
     output: {
       library: '@jupyter-widgets/html-manager',
       filename: 'index.js',
       path: path.resolve(__dirname, 'dist', 'amd'),
       libraryTarget: 'amd',
+      publicPath: '', // Set in amd-public-path.js
     },
-    module: { rules: rules },
-    externals: ['@jupyter-widgets/base', '@jupyter-widgets/controls'],
-    mode: 'production',
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ['@jupyter-widgets/base', '@jupyter-widgets/controls', 'module'],
+    ...options,
   },
   {
     // @jupyter-widgets/base
-    entry: '@jupyter-widgets/base/lib/index',
+    entry: ['./amd-public-path.js', '@jupyter-widgets/base/lib/index'],
     output: {
       library: '@jupyter-widgets/base',
       filename: 'base.js',
       path: path.resolve(__dirname, 'dist', 'amd'),
       libraryTarget: 'amd',
+      publicPath: '', // Set in amd-public-path.js
     },
-    module: { rules: rules },
-    mode: 'production',
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ['module'],
+    ...options,
   },
   {
     // @jupyter-widgets/controls
-    entry: '@jupyter-widgets/controls/lib/index',
+    entry: ['./amd-public-path.js', '@jupyter-widgets/controls/lib/index'],
     output: {
       library: '@jupyter-widgets/controls',
       filename: 'controls.js',
       path: path.resolve(__dirname, 'dist', 'amd'),
       libraryTarget: 'amd',
+      publicPath: '', // Set in amd-public-path.js
     },
-    module: { rules: rules },
-    externals: ['@jupyter-widgets/base'],
-    mode: 'production',
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ['@jupyter-widgets/base', 'module'],
+    ...options,
   },
 ];
diff --git a/python/widgetsnbextension/amd-public-path.js b/python/widgetsnbextension/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}`;
diff --git a/python/widgetsnbextension/webpack.config.js b/python/widgetsnbextension/webpack.config.js
@@ -1,10 +1,11 @@
 var path = require('path');
 module.exports = {
-  entry: './src/extension.js',
+  entry: ['./amd-public-path.js', './src/extension.js'],
   output: {
     filename: 'extension.js',
     path: path.resolve(__dirname, 'widgetsnbextension', 'static'),
     libraryTarget: 'amd',
+    publicPath: '', // Set in amd-public-path.js
   },
   devtool: 'source-map',
   module: {
@@ -15,4 +16,6 @@ module.exports = {
       { test: /\.svg$/i, type: 'asset' },
     ],
   },
+  // 'module' is the magic requirejs dependency used to set the publicPath
+  externals: ['module'],
 };
