Use data-jupyter-widgets-cdn attribute to make the CDN configurable

This replaces jupyter-widgets#2185 which used a global variable.

Author: maartenbreddels

docs/source/embedding.md

@@ -122,7 +122,8 @@ html_template = """
     </script>
 
     <!-- Load IPywidgets bundle for embedding. -->
-    <script 
+    <script
+      data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
       src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" 
       crossorigin="anonymous">
     </script>
@@ -177,6 +178,9 @@ In this example, we used a Python string for the template, and used the
 documents, you may want to use a templating engine like
 [Jinja2](http://jinja.pocoo.org/).
 
+We also change the CDN from its default of unpkg to use jsdelivr by setting the
+`data-jupyter-widgets-cdn` attribute.
+
 In all embedding functions in `ipywidgets.embed`, the state of all widgets
 known to the widget manager is included by default. You can alternatively
 pass a reduced state to use instead. This can be particularly relevant if you
@@ -262,13 +266,17 @@ documentation. An illustration of this is the http://jupyter.org/widgets
 gallery.
 
 The widget embedder attempts to fetch the model and view implementation of the
-custom widget from the npm CDN https://unpkg.com. The URL that is requested
+custom widget from the npm CDN https://unpkg.com by default. The URL that is requested
 for, e.g. the `bqplot` module name, with the semver range `^2.0.0` is
 
 `https://unpkg.com/bqplot@^2.0.0/dist/index.js`
 
 which holds the webpack bundle for the bqplot library.
 
+While the default CDN is using https://unpkg.com it can be configured by
+setting the optional `data-jupyter-widgets-cdn` attribute for script tag which loads `embed-amd.js`,
+as shown in the example above.
+
 The [widget-cookiecutter](https://github.com/jupyter/widget-cookiecutter)
 template project contains a template project for a custom widget library
 following the best practices for authoring widgets, which ensure that your

packages/html-manager/src/libembed-amd.ts

@@ -1,10 +1,16 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const __jupyter_widgets_cdn__ = (window as any).__jupyter_widgets_cdn__ || 'https://unpkg.com';
-
 import * as libembed from './libembed';
 
+let cdn = 'https://unpkg.com/';
+
+// find the data-cdn for any script tag, assuming it is only used for embed-amd.js
+const scripts = document.getElementsByTagName('script');
+Array.prototype.forEach.call(scripts, (script) => {
+    cdn = script.getAttribute('data-jupyter-widgets-cdn') || cdn;
+});
+
 /**
  * Load a package using requirejs and return a promise
  *
@@ -37,15 +43,14 @@ function moduleNameToCDNUrl(moduleName: string, moduleVersion: string) {
         fileName = moduleName.substr(index+1);
         packageName = moduleName.substr(0, index);
     }
-    return `${__jupyter_widgets_cdn__}/${packageName}@${moduleVersion}/dist/${fileName}`;
+    return `${cdn}${packageName}@${moduleVersion}/dist/${fileName}`;
 }
 
 function requireLoader(moduleName: string, moduleVersion: string) {
     return requirePromise([`${moduleName}`]).catch((err) => {
         let failedId = err.requireModules && err.requireModules[0];
         if (failedId) {
-            console.log(`Falling back to ${__jupyter_widgets_cdn__} for ` +
-                        `${moduleName}@${moduleVersion}`);
+            console.log(`Falling back to ${cdn} for ${moduleName}@${moduleVersion}`);
             let require = (window as any).requirejs;
             if (require === undefined) {
                 throw new Error("Requirejs is needed, please ensure it is loaded on the page.");