Skip to content

Commit 95fa787

Browse files
committed
Update to es6 modules and more modern js syntax
Fixes #104
1 parent 6134771 commit 95fa787

File tree

6 files changed

+33
-42
lines changed

6 files changed

+33
-42
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// In an AMD module, we set the public path using the magic requirejs 'module' dependency
22
// See https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
33
// Since 'module' is a requirejs magic module, we must include 'module' in the webpack externals configuration.
4-
var module = require('module');
5-
var url = new URL(module.uri, document.location)
4+
import * as module from 'module';
5+
const url = new URL(module.uri, document.location)
66
// Using lastIndexOf('/')+1 gives us the empty string if there is no '/', so pathname becomes '/'
77
url.pathname = url.pathname.slice(0,url.pathname.lastIndexOf('/')+1);
88
__webpack_public_path__ = `${url.origin}${url.pathname}`;
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
var widgets = require('@jupyter-widgets/base');
2-
var _ = require('lodash');
1+
import { DOMWidgetModel, DOMWidgetView } from '@jupyter-widgets/base';
32

43
// See example.py for the kernel counterpart to this file.
54

6-
75
// Custom Model. Custom widgets models must at least provide default values
86
// for model attributes, including
97
//
@@ -18,38 +16,32 @@ var _ = require('lodash');
1816
// when different from the base class.
1917

2018
// When serialiazing the entire widget state for embedding, only values that
21-
// differ from the defaults will be specified.
22-
var HelloModel = widgets.DOMWidgetModel.extend({
23-
defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
19+
// differ from the defaults will be serialized.
20+
21+
export class HelloModel extends DOMWidgetModel {
22+
defaults() {
23+
return {
24+
...super.defaults(),
2425
_model_name : 'HelloModel',
2526
_view_name : 'HelloView',
2627
_model_module : '{{ cookiecutter.npm_package_name }}',
2728
_view_module : '{{ cookiecutter.npm_package_name }}',
2829
_model_module_version : '{{ cookiecutter.npm_package_version }}',
2930
_view_module_version : '{{ cookiecutter.npm_package_version }}',
3031
value : 'Hello World!'
31-
})
32-
});
33-
32+
};
33+
}
34+
}
3435

35-
// Custom View. Renders the widget model.
36-
var HelloView = widgets.DOMWidgetView.extend({
37-
// Defines how the widget gets rendered into the DOM
38-
render: function() {
36+
export class HelloView extends DOMWidgetView {
37+
render() {
3938
this.value_changed();
4039

41-
// Observe changes in the value traitlet in Python, and define
42-
// a custom callback.
40+
// Observe and act on future changes to the value attribute
4341
this.model.on('change:value', this.value_changed, this);
44-
},
42+
}
4543

46-
value_changed: function() {
44+
value_changed() {
4745
this.el.textContent = this.model.get('value');
4846
}
49-
});
50-
51-
52-
module.exports = {
53-
HelloModel: HelloModel,
54-
HelloView: HelloView
55-
};
47+
}

{{cookiecutter.github_project_name}}/js/lib/extension.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,4 @@ if (window.require) {
1313
});
1414
}
1515

16-
// Export the required load_ipython_extension
17-
module.exports = {
18-
load_ipython_extension: function() {}
19-
};
16+
export function load_ipython_extension() { };
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
// Export widget models and views, and the npm package version number.
2-
module.exports = require('./example.js');
3-
module.exports['version'] = require('../package.json').version;
2+
3+
export {HelloModel, HelloView} from './example';
4+
export {version} from '../package.json';
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
var plugin = require('./index');
2-
var base = require('@jupyter-widgets/base');
1+
import {HelloModel, HelloView, version} from './index';
2+
import {IJupyterWidgetRegistry} from '@jupyter-widgets/base';
33

4-
module.exports = {
4+
export const helloWidgetPlugin = {
55
id: '{{ cookiecutter.npm_package_name }}:plugin',
6-
requires: [base.IJupyterWidgetRegistry],
6+
requires: [IJupyterWidgetRegistry],
77
activate: function(app, widgets) {
88
widgets.registerWidget({
99
name: '{{ cookiecutter.npm_package_name }}',
10-
version: plugin.version,
11-
exports: plugin
10+
version: version,
11+
exports: { HelloModel, HelloView }
1212
});
1313
},
1414
autoStart: true
1515
};
1616

17+
export default helloWidgetPlugin;

{{cookiecutter.github_project_name}}/js/webpack.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
var path = require('path');
2-
var version = require('./package.json').version;
1+
const path = require('path');
2+
const version = require('./package.json').version;
33

44
// Custom webpack rules are generally the same for all webpack bundles, hence
55
// stored in a separate local variable.
6-
var rules = [
6+
const rules = [
77
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
88
]
99

1010

1111
module.exports = (env, argv) => {
12-
var devtool = argv.mode === 'development' ? 'source-map' : false;
12+
const devtool = argv.mode === 'development' ? 'source-map' : false;
1313
return [
1414
{// Notebook extension
1515
//

0 commit comments

Comments
 (0)