Skip to content

Commit d983e1e

Browse files
kirjskirjs
authored
Merge pull request #360 from ilyjs/ilyjs_15_02
change create-react-class to javascript class for to reduce the size …
2 parents e9c8743 + eb115a1 commit d983e1e

File tree

12 files changed

+249
-186
lines changed

12 files changed

+249
-186
lines changed

‎demo/src/highmaps.jsx‎

Lines changed: 52 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,75 @@
11
const React = require('react');
22
// Note that HighMaps has to be in the codebase already
33
const ReactHighmaps = require('react-highcharts/ReactHighmaps.src');
4-
const Highlight = require('react-highlight');
54
const ReactDOM = require('react-dom');
65
const maps = require('./mapdata/europe');
6+
require('prismjs');
7+
require('prismjs/themes/prism.css');
8+
import PrismCode from 'react-prism'
9+
10+
import './style.css'
11+
import './tomorrow.css'
712

8-
const config = {
9-
chart: {
10-
spacingBottom: 20
11-
},
12-
title: {
13-
text: 'Europe time zones'
14-
},
1513

16-
legend: {
17-
enabled: true
18-
},
14+
const config = {
15+
chart: {
16+
spacingBottom: 20
17+
},
18+
title: {
19+
text: 'Europe time zones'
20+
},
1921

20-
plotOptions: {
21-
map: {
22-
allAreas: false,
23-
joinBy: ['iso-a2', 'code'],
24-
dataLabels: {
25-
enabled: true,
26-
color: 'white',
27-
style: {
28-
fontWeight: 'bold'
29-
}
30-
},
31-
mapData: maps,
32-
tooltip: {
33-
headerFormat: '',
34-
pointFormat: '{point.name}: <b>{series.name}</b>'
35-
}
22+
legend: {
23+
enabled: true
24+
},
3625

26+
plotOptions: {
27+
map: {
28+
allAreas: false,
29+
joinBy: ['iso-a2', 'code'],
30+
dataLabels: {
31+
enabled: true,
32+
color: 'white',
33+
style: {
34+
fontWeight: 'bold'
3735
}
38-
},
36+
},
37+
mapData: maps,
38+
tooltip: {
39+
headerFormat: '',
40+
pointFormat: '{point.name}: <b>{series.name}</b>'
41+
}
42+
43+
}
44+
},
3945

40-
series: [{
41-
name: 'UTC',
42-
data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
43-
return {code: code};
44-
})
45-
}, {
46-
name: 'UTC + 1',
47-
data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
48-
'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
49-
return {code: code};
50-
})
51-
}]
46+
series: [{
47+
name: 'UTC',
48+
data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
49+
return {code: code};
50+
})
51+
}, {
52+
name: 'UTC + 1',
53+
data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
54+
'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
55+
return {code: code};
56+
})
57+
}]
5258
};
5359

5460
ReactDOM.render(
55-
<ReactHighmaps config={config} />,
56-
document.getElementById('test')
61+
<ReactHighmaps config={config}/>,
62+
document.getElementById('test')
5763
);
5864

5965
ReactDOM.render(
60-
<Highlight className="jsx">{require("raw-loader!./highmaps.jsx")}</Highlight>,
61-
document.getElementById('code-js')
66+
<PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./highmaps.jsx")}</PrismCode>,
67+
document.getElementById('code-js')
6268
);
6369

6470
ReactDOM.render(
65-
<Highlight className="html">{require("raw-loader!./highmaps.html")}</Highlight>,
66-
document.getElementById('code-html')
71+
<PrismCode component="pre" className="language-markup">{require("raw-loader!./highmaps.html")}</PrismCode>,
72+
document.getElementById('code-html')
6773
);
6874

6975
require("file-loader?name=[name].[ext]!./highmaps.html");

‎demo/src/highstock.jsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,48 @@
11
const React = require('react');
22
// Note that HighMaps has to be in the codebase already
33
const ReactHighstock = require('react-highcharts/ReactHighstock.src');
4-
const Highlight = require('react-highlight');
54
const ReactDOM = require('react-dom');
5+
require('prismjs');
6+
require('prismjs/themes/prism.css');
7+
import PrismCode from 'react-prism'
8+
9+
import './style.css'
10+
import './tomorrow.css'
11+
612

713
const data = [
8-
[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54]
14+
[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54]
915
];
1016

1117
const config = {
12-
rangeSelector: {
13-
selected: 1
14-
},
15-
title: {
16-
text: 'AAPL Stock Price'
17-
},
18-
series: [{
19-
name: 'AAPL',
20-
data: data,
21-
tooltip: {
22-
valueDecimals: 2
23-
}
24-
}]
18+
rangeSelector: {
19+
selected: 1
20+
},
21+
title: {
22+
text: 'AAPL Stock Price'
23+
},
24+
series: [{
25+
name: 'AAPL',
26+
data: data,
27+
tooltip: {
28+
valueDecimals: 2
29+
}
30+
}]
2531
};
2632

2733
ReactDOM.render(
28-
<ReactHighstock config={config} />,
29-
document.getElementById('test')
34+
<ReactHighstock config={config}/>,
35+
document.getElementById('test')
3036
);
3137

3238
ReactDOM.render(
33-
<Highlight className="jsx">{require("raw-loader!./highstock.jsx")}</Highlight>,
34-
document.getElementById('code-js')
39+
<PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./highstock.jsx")}</PrismCode>,
40+
document.getElementById('code-js')
3541
);
3642

3743
ReactDOM.render(
38-
<Highlight className="html">{require("raw-loader!./highstock.html")}</Highlight>,
39-
document.getElementById('code-html')
44+
<PrismCode component="pre" className="language-markup">{require("raw-loader!./highstock.html")}</PrismCode>,
45+
document.getElementById('code-html')
4046
);
4147

4248
require("file-loader?name=[name].[ext]!./highstock.html");

‎demo/src/index.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ const React = require('react');
33
const ReactHighcharts = require('react-highcharts');
44
const Highlight = require('react-highlight');
55
const ReactDOM = require('react-dom');
6+
require('prismjs');
7+
require('prismjs/themes/prism.css');
8+
import PrismCode from 'react-prism'
9+
10+
import './style.css'
11+
import './tomorrow.css'
612

713
const config = {
814
xAxis: {
@@ -14,20 +20,18 @@ const config = {
1420
};
1521

1622
ReactDOM.render(
17-
<ReactHighcharts config={config} />,
23+
<ReactHighcharts config={config}/>,
1824
document.getElementById('test')
1925
);
2026
ReactDOM.render(
21-
<Highlight className="jsx">{require("raw-loader!./index.jsx")}</Highlight>,
27+
<PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./index.jsx")}</PrismCode>,
2228
document.getElementById('code-js')
2329
);
2430
ReactDOM.render(
25-
<Highlight className="html">{require("raw-loader!./index.html")}</Highlight>,
31+
<PrismCode component="pre" className="language-markup">{require("raw-loader!./index.html")}</PrismCode>,
2632
document.getElementById('code-html')
2733
);
2834

2935
require("file-loader?name=[name].[ext]!./index.html");
3036
require("file-loader?name=[name].[ext]!./more.html");
31-
require("file-loader?name=[name].[ext]!./style.css");
32-
require("file-loader?name=[name].[ext]!./tomorrow.css");
3337

‎demo/src/more.jsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ var React = require('react');
22
// Note that Highcharts has to be required separately
33
var ReactHighcharts = require('react-highcharts');
44

5-
65
// Note that Highcharts has to be in the codebase already
76
// Highcharts more
87
var HighchartsMore = require('highcharts-more');
@@ -11,10 +10,16 @@ HighchartsMore(ReactHighcharts.Highcharts);
1110
// Highcharts exporting
1211
var HighchartsExporting = require('highcharts-exporting');
1312
HighchartsExporting(ReactHighcharts.Highcharts);
14-
15-
var Highlight = require('react-highlight');
1613
var ReactDOM = require('react-dom');
1714

15+
require('prismjs');
16+
require('prismjs/themes/prism.css');
17+
import PrismCode from 'react-prism'
18+
19+
import './style.css'
20+
import './tomorrow.css'
21+
22+
1823
var config = {
1924
chart: {
2025
polar: true
@@ -28,14 +33,14 @@ var config = {
2833
};
2934

3035
ReactDOM.render(
31-
<ReactHighcharts config={config}></ReactHighcharts>,
36+
<ReactHighcharts config={config}> </ReactHighcharts>,
3237
document.getElementById('test')
3338
);
3439
ReactDOM.render(
35-
<Highlight className="jsx">{require("raw-loader!./more.jsx")}</Highlight>,
40+
<PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./more.jsx")}</PrismCode>,
3641
document.getElementById('code-js')
3742
);
3843
ReactDOM.render(
39-
<Highlight className="html">{require("raw-loader!./more.html")}</Highlight>,
44+
<PrismCode component="pre" className="language-markup">{require("raw-loader!./more.html")}</PrismCode>,
4045
document.getElementById('code-html')
4146
);

‎demo/webpack.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ module.exports = {
1717
}
1818

1919
}]
20+
},
21+
{
22+
test: /\.css$/,
23+
use: [ 'style-loader', 'css-loader' ]
2024
}
25+
2126
]
2227
},
2328
resolve: {

‎package.json‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -35,31 +35,40 @@
3535
"graph"
3636
],
3737
"devDependencies": {
38-
"babel-cli": "^6.18.0",
38+
"babel-cli": "^6.26.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+
"css-loader": "^0.28.8",
48+
"exports-loader": "^0.6.4",
49+
"file-loader": "^1.1.6",
50+
"highlight.js": "^9.12.0",
4851
"imports-loader": "^0.7.1",
49-
"jsdom": "^9.9.1",
50-
"mocha": "^3.2.0",
51-
"mock-require": "^2.0.1",
52-
"nightwatch": "^0.9.6",
53-
"prop-types": "^15.5.8",
52+
"jsdom": "^11.5.1",
53+
"mocha": "^4.1.0",
54+
"mock-require": "^2.0.2",
55+
"nightwatch": "^0.9.19",
56+
"prop-types": "^15.6.0",
5457
"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"
58+
"react": "^16.2.0",
59+
"react-dom": "^16.2.0",
60+
"react-highlight": "^0.10.0",
61+
"sinon": "^4.1.3",
62+
"style-loader": "^0.19.1",
63+
"uglifyjs-webpack-plugin": "^1.1.6",
64+
"webpack": "^3.10.0",
65+
"webpack-dev-server": "^2.9.6"
6166
},
6267
"dependencies": {
63-
"highcharts": "^6.0.0"
68+
"highcharts": "^6.0.4",
69+
"prismjs": "^1.9.0",
70+
"react-highlight": "briancappello/react-highlight#react-v16-compiled",
71+
"react-prism": "^4.3.2",
72+
"refractor": "^2.2.0"
6473
}
6574
}

‎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);

0 commit comments

Comments
 (0)