Skip to content

Commit 49a8641

Browse files
ilyjsilyjs
committed
Upgrade to ES6
1 parent e9c8743 commit 49a8641

File tree

6 files changed

+125
-95
lines changed

6 files changed

+125
-95
lines changed

‎package.json‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,30 @@
3737
"devDependencies": {
3838
"babel-cli": "^6.18.0",
3939
"babel-core": "^6.24.0",
40-
"babel-loader": "^6.2.10",
41-
"babel-preset-es2015": "^6.18.0",
42-
"babel-preset-react": "^6.16.0",
43-
"babel-preset-stage-2": "^6.18.0",
44-
"create-react-class": "^15.5.2",
45-
"exports-loader": "^0.6.2",
46-
"file-loader": "^0.10.1",
47-
"highlight.js": "^9.10.0",
40+
"babel-loader": "^7.1.2",
41+
"babel-plugin-add-module-exports": "^0.2.1",
42+
"babel-plugin-transform-export-default": "^7.0.0-alpha.20",
43+
"babel-preset-env": "^1.6.1",
44+
"babel-preset-react": "^6.24.1",
45+
"babel-preset-stage-2": "^6.24.1",
46+
"create-react-class": "^15.6.2",
47+
"exports-loader": "^0.6.4",
48+
"file-loader": "^1.1.6",
49+
"highlight.js": "^9.12.0",
4850
"imports-loader": "^0.7.1",
4951
"jsdom": "^9.9.1",
5052
"mocha": "^3.2.0",
5153
"mock-require": "^2.0.1",
5254
"nightwatch": "^0.9.6",
5355
"prop-types": "^15.5.8",
5456
"raw-loader": "^0.5.1",
55-
"react": "^15.5.4",
56-
"react-dom": "^15.5.4",
57-
"react-highlight": "^0.9.0",
58-
"sinon": "^2.0.0",
59-
"webpack": "^2.2.1",
60-
"webpack-dev-server": "^2.4.2"
57+
"react": "^16.2.0",
58+
"react-dom": "^16.2.0",
59+
"react-highlight": "^0.10.0",
60+
"sinon": "^4.1.3",
61+
"uglifyjs-webpack-plugin": "^1.1.6",
62+
"webpack": "^3.10.0",
63+
"webpack-dev-server": "^2.9.6"
6164
},
6265
"dependencies": {
6366
"highcharts": "^6.0.0"

‎src/Highmaps.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
module.exports = require('./chartsFactory.jsx')('Map', require("highcharts/highmaps"));
1+
import chartsFactory from './chartsFactory.jsx';
2+
import highmaps from 'highcharts/highmaps';
3+
4+
export default chartsFactory('Map', highmaps);

‎src/Highstock.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
module.exports = require('./chartsFactory.jsx')('StockChart', require("highcharts/highstock"));
1+
import chartsFactory from './chartsFactory.jsx';
2+
import highstock from 'highcharts/highstock';
3+
4+
export default chartsFactory('StockChart', highstock);

‎src/ReactHighcharts.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
module.exports = require('./chartsFactory.jsx')('Chart', require("highcharts"));
1+
import chartsFactory from './chartsFactory.jsx';
2+
import highcharts from 'highcharts';
3+
4+
export default chartsFactory('Chart', highcharts);

‎src/chartsFactory.jsx‎

Lines changed: 78 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,90 @@
1-
var React = require('react');
2-
var createReactClass = require('create-react-class');
3-
var PropTypes = require('prop-types');
4-
var win = typeof global === 'undefined' ? window : global;
1+
import React, {Component} from 'react';
52

6-
module.exports = function (chartType, Highcharts){
7-
var displayName = 'Highcharts' + chartType;
8-
var result = createReactClass({
9-
displayName: displayName,
3+
const win = typeof global === 'undefined' ? window : global;
104

11-
propTypes: {
12-
config: PropTypes.object,
13-
isPureConfig: PropTypes.bool,
14-
neverReflow: PropTypes.bool,
15-
callback: PropTypes.func,
16-
domProps: PropTypes.object
17-
},
18-
defaultProps: {
19-
callback: () =>{},
20-
domProps: {}
21-
},
22-
setChartRef: function(chartRef) {
23-
this.chartRef = chartRef;
24-
},
25-
renderChart: function (config){
26-
if (!config) {
27-
throw new Error('Config must be specified for the ' + displayName + ' component');
28-
}
29-
let chartConfig = config.chart;
30-
this.chart = new Highcharts[chartType]({
31-
...config,
32-
chart: {
33-
...chartConfig,
34-
renderTo: this.chartRef
5+
function chartsFactory(chartType, Highcharts) {
6+
7+
class Chart extends Component {
8+
constructor() {
9+
super()
10+
this.chartType = chartType;
11+
this.Highcharts = Highcharts;
12+
this.displayName = 'Highcharts' + chartType;
13+
}
14+
15+
setChartRef(chartRef) {
16+
this.chartRef = chartRef;
3517
}
36-
}, this.props.callback);
3718

38-
if (!this.props.neverReflow) {
39-
win && win.requestAnimationFrame && requestAnimationFrame(()=>{
40-
this.chart && this.chart.options && this.chart.reflow();
41-
});
42-
}
43-
},
19+
renderChart(config) {
20+
if (!config) {
21+
throw new Error('Config must be specified for the ' + this.displayName + ' component');
22+
}
23+
const chartConfig = config.chart;
24+
this.chart = new this.Highcharts[this.chartType]({
25+
...config,
26+
chart: {
27+
...chartConfig,
28+
renderTo: this.chartRef
29+
}
30+
}, this.props.callback);
4431

45-
shouldComponentUpdate(nextProps) {
46-
if (nextProps.neverReflow || (nextProps.isPureConfig && this.props.config === nextProps.config)) {
47-
return true;
48-
}
49-
this.renderChart(nextProps.config);
50-
return false;
51-
},
32+
if (!this.props.neverReflow) {
33+
win && win.requestAnimationFrame && requestAnimationFrame(() => {
34+
this.chart && this.chart.options && this.chart.reflow();
35+
});
36+
}
37+
}
5238

53-
getChart: function (){
54-
if (!this.chart) {
55-
throw new Error('getChart() should not be called before the component is mounted');
56-
}
57-
return this.chart;
58-
},
39+
shouldComponentUpdate(nextProps) {
40+
if (nextProps.neverReflow || (nextProps.isPureConfig && this.props.config === nextProps.config)) {
41+
return true;
42+
}
43+
this.renderChart(nextProps.config);
44+
return false;
45+
}
5946

60-
componentDidMount: function (){
61-
this.renderChart(this.props.config);
62-
},
47+
getChart() {
48+
if (!this.chart) {
49+
throw new Error('getChart() should not be called before the component is mounted');
50+
}
51+
return this.chart;
52+
}
6353

64-
componentWillUnmount() {
65-
this.chart.destroy();
66-
},
54+
componentDidMount() {
55+
this.renderChart(this.props.config);
56+
}
6757

68-
render: function (){
69-
return <div ref={this.setChartRef} {...this.props.domProps} />;
58+
componentWillUnmount() {
59+
this.chart.destroy();
60+
}
61+
62+
render() {
63+
return <div ref={this.setChartRef.bind(this)} {...this.props.domProps} />;
64+
}
65+
}
66+
67+
if (isProdMode) {
68+
let PropTypes = require('prop-types')
69+
70+
Chart.propTypes = {
71+
config: PropTypes.object,
72+
isPureConfig: PropTypes.bool,
73+
neverReflow: PropTypes.bool,
74+
callback: PropTypes.func,
75+
domProps: PropTypes.object
76+
}
77+
}
78+
Chart.defaultProps = {
79+
callback: () => {
80+
},
81+
domProps: {}
7082
}
71-
});
83+
let result = Chart;
84+
result.Highcharts = Highcharts;
85+
result.withHighcharts = Highcharts => module.exports(chartType, Highcharts);
7286

73-
result.Highcharts = Highcharts;
74-
result.withHighcharts = (Highcharts) =>{
75-
return module.exports(chartType, Highcharts);
76-
};
77-
return result;
78-
};
87+
return result
88+
}
7989

90+
export default chartsFactory;

‎webpack.config.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
11
const path = require('path');
2-
2+
const webpack = require('webpack')
3+
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
34

45
module.exports = function (env) {
56
env = env || {};
6-
7+
let plugins = [];
78

89
/**
910
* If -p flag is set, minify the files
1011
* @type {boolean}
1112
*/
1213
const src = !env.p;
14+
plugins.push(new webpack.DefinePlugin({
15+
isProdMode: JSON.stringify(src)
16+
})
17+
);
18+
1319
const filenamePostfix = src ? '.src' : '';
1420

21+
if (!src) {
22+
plugins.push(new UglifyJsPlugin())
23+
}
24+
1525
/**
1626
* If -b flag is set, build bundles, and not exclude highcharts from the build
1727
* @type {boolean}
1828
*/
1929
const bundles = env.b;
2030
const bundlePrefix = (bundles ? 'bundle/' : '');
2131

22-
2332
const highchartsExternals = {
2433
'highcharts/highmaps': {
2534
root: 'Highcharts',
@@ -60,7 +69,6 @@ module.exports = function (env) {
6069

6170
externals.push(highchartsExternals);
6271

63-
6472
return {
6573
entry: {
6674
// Array syntax to workaround https://github.com/webpack/webpack/issues/300
@@ -74,18 +82,17 @@ module.exports = function (env) {
7482
rules: [
7583
{
7684
test: /\.jsx$/,
77-
use: [{
85+
86+
use: {
7887
loader: 'babel-loader',
79-
query: {
80-
cacheDirectory: true,
81-
presets: ['react', 'es2015', 'stage-2']
88+
options: {
89+
presets: ['env', 'react', 'stage-2'],
8290
}
83-
}],
84-
85-
91+
}
8692
}
8793
]
8894
},
95+
plugins: plugins,
8996
externals: externals,
9097
resolve: {
9198
modules: [

0 commit comments

Comments
 (0)