Skip to content

Change CDN from unpkg to jsdelivr #3121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 17, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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