Merge pull request #2792 from Bobgy/load_cdn_directly

Use data-jupyter-widgets-cdn-only attribute to load modules only from CDN

Author: jasongrout

docs/source/embedding.md

@@ -124,6 +124,7 @@ html_template = """
     <!-- Load IPywidgets bundle for embedding. -->
     <script
       data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
+      data-jupyter-widgets-cdn-only
       src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" 
       crossorigin="anonymous">
     </script>
@@ -181,6 +182,9 @@ documents, you may want to use a templating engine like
 We also change the CDN from its default of unpkg to use jsdelivr by setting the
 `data-jupyter-widgets-cdn` attribute.
 
+What's more, we only load modules from the CDN by setting the
+`data-jupyter-widgets-cdn-only` 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
@@ -270,6 +274,11 @@ 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.
 
+While the default strategy is loading modules from the same site, and then
+falling back to CDN. This can be configured by setting the optional
+`data-jupyter-widgets-cdn-only` attribute for script tag which loads `embed-amd.js`
+as shown in the example above too.
+
 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

@@ -4,11 +4,14 @@
 import * as libembed from './libembed';
 
 let cdn = 'https://unpkg.com/';
+let onlyCDN = false;
 
 // 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: HTMLScriptElement) => {
   cdn = script.getAttribute('data-jupyter-widgets-cdn') || cdn;
+  onlyCDN =
+    onlyCDN || script.hasAttribute('data-jupyter-widgets-cdn-only');
 });
 
 /**
@@ -62,22 +65,28 @@ export function requireLoader(
   moduleName: string,
   moduleVersion: string
 ): Promise<any> {
+  const require = (window as any).requirejs;
+  if (require === undefined) {
+    throw new Error(
+      'Requirejs is needed, please ensure it is loaded on the page.'
+    );
+  }
+  function loadFromCDN(): Promise<any> {
+    const conf: { paths: { [key: string]: string } } = { paths: {} };
+    conf.paths[moduleName] = moduleNameToCDNUrl(moduleName, moduleVersion);
+    require.config(conf);
+    return requirePromise([`${moduleName}`]);
+  }
+  if (onlyCDN) {
+    console.log(`Loading from ${cdn} for ${moduleName}@${moduleVersion}`);
+    return loadFromCDN();
+  }
   return requirePromise([`${moduleName}`]).catch(err => {
     const failedId = err.requireModules && err.requireModules[0];
     if (failedId) {
-      console.log(`Falling back to ${cdn} for ${moduleName}@${moduleVersion}`);
-      const require = (window as any).requirejs;
-      if (require === undefined) {
-        throw new Error(
-          'Requirejs is needed, please ensure it is loaded on the page.'
-        );
-      }
-      const conf: { paths: { [key: string]: string } } = { paths: {} };
-      conf.paths[moduleName] = moduleNameToCDNUrl(moduleName, moduleVersion);
       require.undef(failedId);
-      require.config(conf);
-
-      return requirePromise([`${moduleName}`]);
+      console.log(`Falling back to ${cdn} for ${moduleName}@${moduleVersion}`);
+      loadFromCDN();
     }
   });
 }