Set public path for amd modules.

It seems that the auto public path logic in webpack does not work for AMD modules, since document.currentScript only works when the script is initially executed, not in a callback. In the cases where we know we are compiling to an AMD module, we can use the requirejs magic 'module' dependency to get the url of the file, and from that do our own auto public path magic.

We encapsulate this auto public path setting into its own file so that it does not intrude on user code, and is only used when we know in the webpack config that we are compiling to an AMD module.

See also jupyter-widgets/widget-cookiecutter#103

Author: jasongrout

js/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/webpack.config.js

@@ -22,6 +22,12 @@ var resolve = {
 module.exports = [
   {
     // Notebook extension
+    //
+    // This bundle only contains the part of the JavaScript that is run on
+    // load of the notebook. This section generally only performs
+    // some configuration for requirejs, and provides the legacy
+    // "load_ipython_extension" function which is required for any notebook
+    // extension.
     entry: "./src/extension.js",
     output: {
       filename: "extension.js",
@@ -31,33 +37,49 @@ module.exports = [
     resolve: resolve,
   },
   {
-    // jupyter-leaflet bundle for the classic notebook
-    entry: "./src/notebook.js",
+    // Bundle for the notebook containing the custom widget views and models
+    //
+    // This bundle contains the implementation for the custom widget views and
+    // custom widget.
+    // It must be an amd module
+    entry: ["./amd-public-path.js", "./src/notebook.js"],
     output: {
       filename: "index.js",
       path: path.resolve(__dirname, "..", "ipyleaflet", "nbextension"),
       libraryTarget: "amd",
+      publicPath: "", // Set in amd-public-path.js
     },
     devtool: "source-map",
     module: {
       rules: rules,
     },
-    externals: ["@jupyter-widgets/base"],
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ["@jupyter-widgets/base", "module"],
     resolve: resolve,
   },
   {
-    // jupyter-leaflet bundle for CDN
-    entry: "./src/embed.js",
+    // Embeddable {{ cookiecutter.npm_package_name }} bundle
+    //
+    // This bundle is identical to the notebook bundle containing the custom
+    // widget views and models. The only difference is it is placed in the
+    // dist/ directory and shipped with the npm package for use from a CDN
+    // like jsdelivr.
+    //
+    // The target bundle is always `dist/index.js`, which is the path
+    // required by the custom widget embedder.
+    entry: ["./amd-public-path.js", "./src/embed.js"],
     output: {
       filename: "index.js",
       path: path.resolve(__dirname, "dist"),
       libraryTarget: "amd",
+      publicPath: "", // Set in amd-public-path.js
     },
     devtool: "source-map",
     module: {
       rules: rules,
     },
-    externals: ["@jupyter-widgets/base"],
+    // 'module' is the magic requirejs dependency used to set the publicPath
+    externals: ["@jupyter-widgets/base", "module"],
     resolve: resolve,
   },
 ];