Skip to content

Commit

Permalink
Merge pull request #3121 from davidbrochart/jsdelivr_cdn
Browse files Browse the repository at this point in the history
Change CDN from unpkg to jsdelivr
  • Loading branch information
jasongrout authored Feb 17, 2021
2 parents 5de5abe + ccfff33 commit 0e1a2c7
Show file tree
Hide file tree
Showing 9 changed files with 25 additions and 23 deletions.
12 changes: 6 additions & 6 deletions docs/source/embedding.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,9 @@ html_template = """
<!-- Load IPywidgets bundle for embedding. -->
<script
data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
data-jupyter-widgets-cdn="https://unpkg.com/"
data-jupyter-widgets-cdn-only
src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js"
src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed-amd.js"
crossorigin="anonymous">
</script>
Expand Down Expand Up @@ -179,7 +179,7 @@ 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
We also change the CDN from its default of jsdelivr to use unpkg by setting the
`data-jupyter-widgets-cdn` attribute.

What's more, we only load modules from the CDN by setting the
Expand Down Expand Up @@ -263,14 +263,14 @@ 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 by default. The URL that is requested
custom widget from the npm CDN https://cdn.jsdelivr.net/npm 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`
`https://cdn.jsdelivr.net/npm/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
While the default CDN is using https://cdn.jsdelivr.net/npm 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.

Expand Down
6 changes: 3 additions & 3 deletions docs/source/migration_guides.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ values of the `version` field in your `package.json`).

The `_model_module_version` and `_view_module_version` are used to find your
JavaScript bundle when embedding widgets. The embed manager will look for the
bundle at `https://unpkg.com/<module-name>@<module-version>/dist/index.js`
bundle at `https://cdn.jsdelivr.net/npm/<module-name>@<module-version>/dist/index.js`
when it finds a widget.

### Updating embedded widgets
Expand All @@ -159,7 +159,7 @@ There are now two options for embedding widgets in an HTML page outside of the n
If you are just embedding the standard widgets that come with ipywidgets, then you can simply include the following script tag:

```html
<script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed.js" crossorigin="anonymous"></script>
```

If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.9.0`
Expand All @@ -175,7 +175,7 @@ In order to embed third-party widgets, you can use the RequireJS-based embedding

Then include the following script, which defines the embedding libraries and runs the function to render widgets:
```html
<script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>
```
If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.9.0`

Expand Down
4 changes: 2 additions & 2 deletions examples/web1/manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ class WidgetManager extends ManagerBase {
let failedId = err.requireModules && err.requireModules[0];
if (failedId) {
console.log(
`Falling back to unpkg.com for ${moduleName}@${moduleVersion}`
`Falling back to jsDelivr for ${moduleName}@${moduleVersion}`
);
window.require(
[
`https://unpkg.com/${moduleName}@${moduleVersion}/dist/index.js`
`https://cdn.jsdelivr.net/npm/${moduleName}@${moduleVersion}/dist/index.js`
],
resolve,
reject
Expand Down
4 changes: 2 additions & 2 deletions examples/web2/manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ class WidgetManager extends ManagerBase {
let failedId = err.requireModules && err.requireModules[0];
if (failedId) {
console.log(
`Falling back to unpkg.com for ${moduleName}@${moduleVersion}`
`Falling back to jsDelivr for ${moduleName}@${moduleVersion}`
);
window.require(
[
`https://unpkg.com/${moduleName}@${moduleVersion}/dist/index.js`
`https://cdn.jsdelivr.net/npm/${moduleName}@${moduleVersion}/dist/index.js`
],
resolve,
reject
Expand Down
4 changes: 2 additions & 2 deletions examples/web4/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ replace

with

`<script src="https://unpkg.com/@jupyter-widgets/html-manager/dist/embed.js" crossorigin="anonymous"></script>`
`<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager/dist/embed.js" crossorigin="anonymous"></script>`

If you need a specific version of the HTML widget manager, you can include a
semver range. For example:

`<script src="https://unpkg.com/@jupyter-widgets/html-manager@^0.8.0/dist/embed.js" crossorigin="anonymous"></script>`
`<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@^0.8.0/dist/embed.js" crossorigin="anonymous"></script>`

## Try it

Expand Down
6 changes: 3 additions & 3 deletions ipywidgets/embed.py
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
{view_spec}
</script>"""

DEFAULT_EMBED_SCRIPT_URL = 'https://unpkg.com/@jupyter-widgets/html-manager@%s/dist/embed.js'%__html_manager_version__
DEFAULT_EMBED_REQUIREJS_URL = 'https://unpkg.com/@jupyter-widgets/html-manager@%s/dist/embed-amd.js'%__html_manager_version__
DEFAULT_EMBED_SCRIPT_URL = 'https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@%s/dist/embed.js'%__html_manager_version__
DEFAULT_EMBED_REQUIREJS_URL = 'https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@%s/dist/embed-amd.js'%__html_manager_version__

_doc_snippets = {}
_doc_snippets['views_attribute'] = """
Expand All @@ -81,7 +81,7 @@
full description.
embed_url: string or None
Allows for overriding the URL used to fetch the widget manager
for the embedded code. This defaults (None) to an `unpkg` CDN url.
for the embedded code. This defaults (None) to a `jsDelivr` CDN url.
requirejs: boolean (True)
Enables the requirejs-based embedding, which allows for custom widgets.
If True, the embed_url should point to an AMD module.
Expand Down
6 changes: 3 additions & 3 deletions packages/html-manager/src/libembed-amd.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import * as libembed from './libembed';

let cdn = 'https://unpkg.com/';
let cdn = 'https://cdn.jsdelivr.net/npm/';
let onlyCDN = false;

// find the data-cdn for any script tag, assuming it is only used for embed-amd.js
Expand Down Expand Up @@ -54,7 +54,7 @@ function moduleNameToCDNUrl(moduleName: string, moduleVersion: string): string {
* @param moduleName The name of the module to load..
* @param version The semver range for the module, if loaded from a CDN.
*
* By default, the CDN service used is unpkg.com. However, this default can be
* By default, the CDN service used is jsDelivr. However, this default can be
* overriden by specifying another URL via the HTML attribute
* "data-jupyter-widgets-cdn" on a script tag of the page.
*
Expand Down Expand Up @@ -95,7 +95,7 @@ export function requireLoader(
*
* @param element (default document.documentElement) The element containing widget state and views.
* @param loader (default requireLoader) The function used to look up the modules containing
* the widgets' models and views classes. (The default loader looks them up on unpkg.com)
* the widgets' models and views classes. (The default loader looks them up on jsDelivr)
*/
export function renderWidgets(
element = document.documentElement,
Expand Down
4 changes: 3 additions & 1 deletion packages/html-manager/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ var rules = [
];

var publicPath =
'https://unpkg.com/@jupyter-widgets/html-manager@' + version + '/dist/';
'https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@' +
version +
'/dist/';

module.exports = [
{
Expand Down
2 changes: 1 addition & 1 deletion widgetsnbextension/src/embed_widgets.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ var embed_widgets = function() {
'',
'<!-- Load require.js. Delete this if your page already loads require.js -->',
'<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>',
'<script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>',
'<script src="https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>',
'<script type="application/vnd.jupyter.widget-state+json">',
data,
'</script>',
Expand Down

0 comments on commit 0e1a2c7

Please sign in to comment.