Skip to content

Commit a4efd83

Browse files
jasongroutjasongrout
committed
Fix examples
This also updates the examples to use the new webpack asset modules.
1 parent 16dd7f6 commit a4efd83

File tree

8 files changed

+154
-220
lines changed

8 files changed

+154
-220
lines changed

‎examples/web1/webpack.config.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,15 @@ var webpack = require('webpack');
33

44
module.exports = {
55
mode: 'development',
6+
devtool: 'source-map',
67
entry: './index.js',
78
output: {
89
filename: 'index.built.js',
910
path: path.resolve(__dirname, 'built')
1011
},
1112
module: {
1213
rules: [
13-
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
14-
// jquery-ui loads some images
15-
{ test: /\.(jpg|png|gif)$/, use: 'file-loader' },
14+
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] },
1615
],
1716
},
1817
plugins: [

‎examples/web2/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ require('@jupyter-widgets/controls/css/widgets.css');
77
require('font-awesome/css/font-awesome.css');
88

99
document.addEventListener('DOMContentLoaded', function (event) {
10-
var code = require('./widget_code.py').default;
10+
var code = require('./widget_code.py');
1111
var inputarea = document.getElementsByClassName('inputarea')[0];
1212
new CodeMirror(inputarea, {
1313
value: code,

‎examples/web2/webpack.config.js‎

Lines changed: 6 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,19 @@ var webpack = require('webpack');
33

44
module.exports = {
55
mode: 'development',
6+
devtool: 'source-map',
67
entry: './index.js',
78
output: {
89
filename: 'index.built.js',
9-
path: path.resolve(__dirname, 'built')
10+
path: path.resolve(__dirname, 'built'),
1011
},
1112
module: {
1213
rules: [
13-
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
14-
{ test: /\.py$/, use: 'raw-loader' },
15-
// jquery-ui loads some images
16-
{ test: /\.(jpg|png|gif)$/, use: 'file-loader' },
14+
{ test: /\.css$/i, use: ['style-loader', 'css-loader'] },
15+
{ test: /\.py$/i, type: 'asset/source' },
1716
// required to load font-awesome
18-
{
19-
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
20-
use: {
21-
loader: 'url-loader',
22-
options: {
23-
limit: 10000,
24-
mimetype: 'application/font-woff',
25-
},
26-
},
27-
},
28-
{
29-
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
30-
use: {
31-
loader: 'url-loader',
32-
options: {
33-
limit: 10000,
34-
mimetype: 'application/font-woff',
35-
},
36-
},
37-
},
38-
{
39-
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
40-
use: {
41-
loader: 'url-loader',
42-
options: {
43-
limit: 10000,
44-
mimetype: 'application/octet-stream',
45-
},
46-
},
47-
},
48-
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
49-
{
50-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
51-
use: {
52-
loader: 'url-loader',
53-
options: {
54-
limit: 10000,
55-
mimetype: 'image/svg+xml',
56-
},
57-
},
58-
},
17+
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
18+
{ test: /\.svg$/i, type: 'asset' },
5919
],
6020
},
6121
plugins: [

‎examples/web3/webpack.config.js‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const webpack = require('webpack');
44

55
module.exports = {
66
mode: 'development',
7+
devtool: 'source-map',
78
entry: './lib/index.js',
89
output: {
910
filename: 'index.built.js',
@@ -43,50 +44,9 @@ module.exports = {
4344
},
4445
],
4546
},
46-
// jquery-ui loads some images
47-
{ test: /\.(jpg|png|gif)$/, use: 'file-loader' },
4847
// required to load font-awesome
49-
{
50-
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
51-
use: {
52-
loader: 'url-loader',
53-
options: {
54-
limit: 10000,
55-
mimetype: 'application/font-woff',
56-
},
57-
},
58-
},
59-
{
60-
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
61-
use: {
62-
loader: 'url-loader',
63-
options: {
64-
limit: 10000,
65-
mimetype: 'application/font-woff',
66-
},
67-
},
68-
},
69-
{
70-
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
71-
use: {
72-
loader: 'url-loader',
73-
options: {
74-
limit: 10000,
75-
mimetype: 'application/octet-stream',
76-
},
77-
},
78-
},
79-
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
80-
{
81-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
82-
use: {
83-
loader: 'url-loader',
84-
options: {
85-
limit: 10000,
86-
mimetype: 'image/svg+xml',
87-
},
88-
},
89-
},
48+
{ test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
49+
{ test: /\.svg$/i, type: 'asset' },
9050
],
9151
},
9252
plugins: [

‎examples/web4/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ semver range. For example:
2020

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

23+
The widget data in this example was generated from the following code:
24+
25+
```python
26+
from ipywidgets import VBox, jsdlink, IntSlider, Button
27+
28+
s1, s2 = IntSlider(max=200, value=100), IntSlider(value=40)
29+
b = Button(icon='legal')
30+
jsdlink((s1, 'value'), (s2, 'max'))
31+
VBox([s1, s2, b])
32+
```
33+
2334
## Try it
2435

2536
1. Start with a repository checkout, and run `yarn install` in the root directory.

‎examples/web4/index.html‎

Lines changed: 127 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -13,91 +13,135 @@
1313
<body>
1414
<script src="./built/index.built.js"></script>
1515
<script type="application/vnd.jupyter.widget-state+json">
16-
{
17-
"version_major": 1,
18-
"version_minor": 0,
19-
"state": {
20-
"79c5cde32c044e4d95cfa27a54982bde": {
21-
"model_name": "LayoutModel",
22-
"model_module": "@jupyter-widgets/base",
23-
"state": {}
24-
},
25-
"7687c2dd3f344143ae1e87ee9704c774": {
26-
"model_name": "IntSliderModel",
27-
"model_module": "@jupyter-widgets/controls",
28-
"state": {
29-
"layout": "IPY_MODEL_79c5cde32c044e4d95cfa27a54982bde",
30-
"max": 200,
31-
"value": 100
32-
}
33-
},
34-
"06ad7ea9cf7b4029b312e8fc012c3294": {
35-
"model_name": "LayoutModel",
36-
"model_module": "@jupyter-widgets/base",
37-
"state": {}
38-
},
39-
"0c3957dbb4734762a84ad924f77197b3": {
40-
"model_name": "IntSliderModel",
41-
"model_module": "@jupyter-widgets/controls",
42-
"state": {
43-
"layout": "IPY_MODEL_06ad7ea9cf7b4029b312e8fc012c3294",
44-
"value": 40
45-
}
46-
},
47-
"f326c34c26034acdbab8ca4610d49bae": {
48-
"model_name": "LayoutModel",
49-
"model_module": "@jupyter-widgets/base",
50-
"state": {}
51-
},
52-
"2e4ca159b05a4f3295c8b59695359428": {
53-
"model_name": "ButtonModel",
54-
"model_module": "@jupyter-widgets/controls",
55-
"state": {
56-
"layout": "IPY_MODEL_f326c34c26034acdbab8ca4610d49bae",
57-
"icon": "legal"
58-
}
59-
},
60-
"e7c5849fbfe7415ab5896fc749d71164": {
61-
"model_name": "DirectionalLinkModel",
62-
"model_module": "@jupyter-widgets/controls",
63-
"state": {
64-
"target": [
65-
"IPY_MODEL_0c3957dbb4734762a84ad924f77197b3",
66-
"max"
67-
],
68-
"source": [
69-
"IPY_MODEL_7687c2dd3f344143ae1e87ee9704c774",
70-
"value"
71-
]
72-
}
73-
},
74-
"4e6ee45ef7c64f0f953c79150d4ae0ca": {
75-
"model_name": "LayoutModel",
76-
"model_module": "@jupyter-widgets/base",
77-
"state": {
78-
"flex_flow": "column",
79-
"display": "flex"
80-
}
81-
},
82-
"4c5a49e52ae54ad5bdbe973353a58931": {
83-
"model_name": "BoxModel",
84-
"model_module": "@jupyter-widgets/controls",
85-
"state": {
86-
"children": [
87-
"IPY_MODEL_7687c2dd3f344143ae1e87ee9704c774",
88-
"IPY_MODEL_0c3957dbb4734762a84ad924f77197b3",
89-
"IPY_MODEL_2e4ca159b05a4f3295c8b59695359428"
90-
],
91-
"layout": "IPY_MODEL_4e6ee45ef7c64f0f953c79150d4ae0ca"
16+
{
17+
"version_major": 2,
18+
"version_minor": 0,
19+
"state": {
20+
"1d915e54eff54fd89e505a46ccabdabd": {
21+
"model_name": "LayoutModel",
22+
"model_module": "@jupyter-widgets/base",
23+
"model_module_version": "2.0.0",
24+
"state": {}
25+
},
26+
"48a42260652f4b7eb7851c65cd155604": {
27+
"model_name": "SliderStyleModel",
28+
"model_module": "@jupyter-widgets/controls",
29+
"model_module_version": "2.0.0",
30+
"state": {
31+
"description_width": ""
32+
}
33+
},
34+
"105655a5e8dc4b7bb19d824cc3ff7770": {
35+
"model_name": "IntSliderModel",
36+
"model_module": "@jupyter-widgets/controls",
37+
"model_module_version": "2.0.0",
38+
"state": {
39+
"value": 100,
40+
"max": 200,
41+
"style": "IPY_MODEL_48a42260652f4b7eb7851c65cd155604",
42+
"behavior": "drag-tap",
43+
"layout": "IPY_MODEL_1d915e54eff54fd89e505a46ccabdabd"
44+
}
45+
},
46+
"cb13b25cf84542ba882ab2a9c6e57c6d": {
47+
"model_name": "LayoutModel",
48+
"model_module": "@jupyter-widgets/base",
49+
"model_module_version": "2.0.0",
50+
"state": {}
51+
},
52+
"f0479b348e2441cd87e1bd856fac5c22": {
53+
"model_name": "SliderStyleModel",
54+
"model_module": "@jupyter-widgets/controls",
55+
"model_module_version": "2.0.0",
56+
"state": {
57+
"description_width": ""
58+
}
59+
},
60+
"2182c1a3fe4a410f9b0a5306ae05c530": {
61+
"model_name": "IntSliderModel",
62+
"model_module": "@jupyter-widgets/controls",
63+
"model_module_version": "2.0.0",
64+
"state": {
65+
"value": 40,
66+
"style": "IPY_MODEL_f0479b348e2441cd87e1bd856fac5c22",
67+
"behavior": "drag-tap",
68+
"layout": "IPY_MODEL_cb13b25cf84542ba882ab2a9c6e57c6d"
69+
}
70+
},
71+
"5f2da4ad981b467cb2d4f07efe5141f4": {
72+
"model_name": "LayoutModel",
73+
"model_module": "@jupyter-widgets/base",
74+
"model_module_version": "2.0.0",
75+
"state": {}
76+
},
77+
"e5f63e1e06af400aac8135ff3394b856": {
78+
"model_name": "ButtonStyleModel",
79+
"model_module": "@jupyter-widgets/controls",
80+
"model_module_version": "2.0.0",
81+
"state": {
82+
"font_family": null,
83+
"font_size": null,
84+
"font_style": null,
85+
"font_variant": null,
86+
"font_weight": null,
87+
"text_color": null,
88+
"text_decoration": null
89+
}
90+
},
91+
"891a12a9856949b4be2e520f732dcca9": {
92+
"model_name": "ButtonModel",
93+
"model_module": "@jupyter-widgets/controls",
94+
"model_module_version": "2.0.0",
95+
"state": {
96+
"tooltip": null,
97+
"icon": "legal",
98+
"style": "IPY_MODEL_e5f63e1e06af400aac8135ff3394b856",
99+
"layout": "IPY_MODEL_5f2da4ad981b467cb2d4f07efe5141f4"
100+
}
101+
},
102+
"e8a6db8ff7bd4645b5b23ccb797dee9c": {
103+
"model_name": "DirectionalLinkModel",
104+
"model_module": "@jupyter-widgets/controls",
105+
"model_module_version": "2.0.0",
106+
"state": {
107+
"target": [
108+
"IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530",
109+
"max"
110+
],
111+
"source": [
112+
"IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770",
113+
"value"
114+
]
115+
}
116+
},
117+
"b9445ea442bc4a5aae73c1e2241c3922": {
118+
"model_name": "LayoutModel",
119+
"model_module": "@jupyter-widgets/base",
120+
"model_module_version": "2.0.0",
121+
"state": {}
122+
},
123+
"a08a1974ba01461c8d9b91b8bfa0f6ce": {
124+
"model_name": "VBoxModel",
125+
"model_module": "@jupyter-widgets/controls",
126+
"model_module_version": "2.0.0",
127+
"state": {
128+
"children": [
129+
"IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770",
130+
"IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530",
131+
"IPY_MODEL_891a12a9856949b4be2e520f732dcca9"
132+
],
133+
"layout": "IPY_MODEL_b9445ea442bc4a5aae73c1e2241c3922"
134+
}
92135
}
93136
}
94137
}
95-
}
96-
</script>
97-
<script type="application/vnd.jupyter.widget-view+json">
98-
{
99-
"model_id": "4c5a49e52ae54ad5bdbe973353a58931"
100-
}
101-
</script>
138+
</script>
139+
<script type="application/vnd.jupyter.widget-view+json">
140+
{
141+
"version_major": 2,
142+
"version_minor": 0,
143+
"model_id": "a08a1974ba01461c8d9b91b8bfa0f6ce"
144+
}
145+
</script>
102146
</body>
103147
</html>

‎examples/web4/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
require('@jupyter-widgets/html-manager/dist/embed');
1+
require('@jupyter-widgets/html-manager/lib/embed');

0 commit comments

Comments
 (0)