diff --git a/docs/source/embedding.md b/docs/source/embedding.md
index c2fbf0c677..b3b369f02e 100644
--- a/docs/source/embedding.md
+++ b/docs/source/embedding.md
@@ -6,11 +6,11 @@ Jupyter interactive widgets can be serialized and embedded into
- sphinx documentation
- html-converted notebooks on nbviewer
-## RequireJS
+Here, we discuss embedding widgets using the custom widget manager in the `@jupyter-widgets/html-manager` npm package. Two embedders are provided:
-This page talks about embedding widgets using the custom widget manager in the `@jupyter-widgets/html-manager` npm package. This can be done in two basic ways:
+1. A basic embedder that only embeds standard controls, but can be used on any web page
+2. An embedder that uses RequireJS, and can embed standard and custom widgets.
-1.
## Embedding Widgets in HTML Web Pages
@@ -28,27 +28,29 @@ The context menu provides three actions
### Embeddable HTML Snippet
The last option, `Embed widgets`, provides a dialog containing an HTML page
-which embeds Jupyter interactive widgets.
+which embeds Jupyter interactive widgets. In order to support custom widgets, this exposes the RequireJS embedder.
-This HTML snippet is composed of multiple sections containing `
```
-If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.7.0`
+If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.9.0`
-#### Embedding with require.js and third-party widgets
+#### Embedding custom widgets with RequireJS
-In order to embed third-party widgets, you can use the require.js-based embedding. First, make sure that require.js is loaded on the page, for example:
+In order to embed third-party widgets, you can use the RequireJS-based embedding. First, make sure that RequireJS is loaded on the page, for example:
```html
```
-Then require the embedder and run the `renderWidgets` function:
+Then define the embedding libraries and run the rendering function by including the following scripts
```html
-
+
```
-If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.7.0`
+If you want to use a specific version of the embedder, you replace the `@*` with a semver range, such as `@^0.9.0`
+
+If you need to embed custom widgets without using RequireJS, you'll need to compile your own embedding javascript that includes the third-party libraries.
\ No newline at end of file
diff --git a/ipywidgets/embed.py b/ipywidgets/embed.py
index 4da7996fe3..8de17f7691 100644
--- a/ipywidgets/embed.py
+++ b/ipywidgets/embed.py
@@ -28,17 +28,7 @@
load_requirejs_template = u"""
-
-
-
+
"""
requirejs_snippet_template = u"""
@@ -67,7 +57,7 @@
"""
DEFAULT_EMBED_SCRIPT_URL = u'https://unpkg.com/@jupyter-widgets/html-manager@%s/dist/embed.js'%__html_manager_version__
-DEFAULT_EMBED_REQUIREJS_URL = u'https://unpkg.com/@jupyter-widgets/html-manager@%s/dist/embed-requirejs'%__html_manager_version__
+DEFAULT_EMBED_REQUIREJS_URL = u'https://unpkg.com/@jupyter-widgets/html-manager@%s/dist/embed-amd'%__html_manager_version__
def _find_widget_refs_by_state(widget, state):
"""Find references to other widgets in a widget's state"""
diff --git a/packages/html-manager/package.json b/packages/html-manager/package.json
index e0b707dcb4..42d5b59a86 100644
--- a/packages/html-manager/package.json
+++ b/packages/html-manager/package.json
@@ -17,8 +17,9 @@
"scripts": {
"clean": "rimraf lib && rimraf dist",
"build:src": "tsc --project src",
+ "build:embed-amd": "node scripts/concat-amd-build.js && rimraf dist/amd",
"build:test": "tsc --project test/src && webpack --config test/webpack.conf.js",
- "build": "npm run build:src && webpack",
+ "build": "npm run build:src && webpack && npm run build:embed-amd",
"test": "npm run test:unit",
"test:unit": "npm run test:unit:firefox && npm run test:unit:chrome",
"test:unit:default": "npm run build:test && karma start test/karma.conf.js --log-level debug --browsers=Firefox",
diff --git a/packages/html-manager/scripts/concat-amd-build.js b/packages/html-manager/scripts/concat-amd-build.js
new file mode 100755
index 0000000000..d7d1ced716
--- /dev/null
+++ b/packages/html-manager/scripts/concat-amd-build.js
@@ -0,0 +1,19 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+var fs = require('fs');
+
+// Make a script file that defines all of the relevant AMD modules
+var files = ['base.js', 'controls.js', 'index.js', 'libembed-amd.js'];
+var output = files.map((f)=>{
+ return fs.readFileSync('./dist/amd/'+f).toString();
+ }).join(';\n\n');
+fs.writeFileSync('./dist/libembed-amd.js', output)
+
+// Make a script that has all of the above AMD modules and runs a function which
+// renders all of the widgets on page load automatically.
+files = ['base.js', 'controls.js', 'index.js', 'libembed-amd.js', 'embed-amd-render.js'];
+var output = files.map((f)=>{
+ return fs.readFileSync('./dist/amd/'+f).toString();
+ }).join(';\n\n');
+fs.writeFileSync('./dist/embed-amd.js', output)
diff --git a/packages/html-manager/src/embed-amd.ts b/packages/html-manager/src/embed-amd-render.ts
similarity index 100%
rename from packages/html-manager/src/embed-amd.ts
rename to packages/html-manager/src/embed-amd-render.ts
diff --git a/packages/html-manager/src/libembed-amd.ts b/packages/html-manager/src/libembed-amd.ts
index e0b9ab30bc..a0ab201d85 100644
--- a/packages/html-manager/src/libembed-amd.ts
+++ b/packages/html-manager/src/libembed-amd.ts
@@ -3,13 +3,6 @@
import * as libembed from './libembed';
-// Populate the requirejs cache with local versions of @jupyter-widgets/base,
-// @jupyter-widgets/controls, @jupyter-widgets/html-manager. These are externals
-// when compiled with webpack.
-require('./base');
-require('./controls');
-require('./index');
-
/**
* Load a package using requirejs and return a promise
*
diff --git a/packages/html-manager/webpack.config.js b/packages/html-manager/webpack.config.js
index bd983664f5..66fa1edeb2 100644
--- a/packages/html-manager/webpack.config.js
+++ b/packages/html-manager/webpack.config.js
@@ -54,13 +54,12 @@ module.exports = [
postcss: postcssHandler
},
{// script that renders widgets using the amd embedding and can render third-party custom widgets
- entry: './lib/embed-amd.js',
+ entry: './lib/embed-amd-render.js',
output: {
- filename : 'embed-amd.js',
- path: './dist',
+ filename : 'embed-amd-render.js',
+ path: './dist/amd',
publicPath: publicPath,
},
- devtool: 'source-map',
module: { loaders: loaders },
postcss: postcssHandler
},
@@ -69,25 +68,22 @@ module.exports = [
output: {
library: '@jupyter-widgets/html-manager/dist/libembed-amd',
filename : 'libembed-amd.js',
- path: './dist',
+ path: './dist/amd',
publicPath: publicPath,
libraryTarget: 'amd'
},
- devtool: 'source-map',
module: { loaders: loaders },
- postcss: postcssHandler,
- externals: ['./base', './controls', './index']
+ postcss: postcssHandler
},
{// @jupyter-widgets/html-manager
entry: './lib/index.js',
output: {
library: '@jupyter-widgets/html-manager',
filename : 'index.js',
- path: './dist',
+ path: './dist/amd',
publicPath: publicPath,
libraryTarget: 'amd',
},
- devtool: 'source-map',
module: { loaders: loaders },
postcss: postcssHandler,
externals: ['@jupyter-widgets/base', '@jupyter-widgets/controls']
@@ -97,11 +93,10 @@ module.exports = [
output: {
library: '@jupyter-widgets/base',
filename : 'base.js',
- path: './dist',
+ path: './dist/amd',
publicPath: publicPath,
libraryTarget: 'amd',
},
- devtool: 'source-map',
module: { loaders: loaders },
postcss: postcssHandler
},
@@ -110,11 +105,10 @@ module.exports = [
output: {
library: '@jupyter-widgets/controls',
filename : 'controls.js',
- path: './dist',
+ path: './dist/amd',
publicPath: publicPath,
libraryTarget: 'amd'
},
- devtool: 'source-map',
module: { loaders: loaders },
postcss: postcssHandler,
externals: ['@jupyter-widgets/base']
diff --git a/widgetsnbextension/src/embed_widgets.js b/widgetsnbextension/src/embed_widgets.js
index 3f8d491273..300322207f 100644
--- a/widgetsnbextension/src/embed_widgets.js
+++ b/widgetsnbextension/src/embed_widgets.js
@@ -21,15 +21,7 @@ var embed_widgets = function() {
'',
'',
'',
-'',
+'',
'',