jupyter-widgets · ibdafna · Jul 6, 2022 · Jul 3, 2022
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'],
 };