change create-react-class to javascript class for to reduce the size …

demo/src/highmaps.jsx

@@ -1,69 +1,75 @@
 const React = require('react');
 // Note that HighMaps has to be in the codebase already
 const ReactHighmaps = require('react-highcharts/ReactHighmaps.src');
-const Highlight = require('react-highlight');
 const ReactDOM = require('react-dom');
 const maps = require('./mapdata/europe');
+require('prismjs');
+require('prismjs/themes/prism.css');
+import PrismCode from 'react-prism'
+
+import './style.css'
+import './tomorrow.css'
 
-const config = {
-    chart: {
-        spacingBottom: 20
-    },
-    title: {
-        text: 'Europe time zones'
-    },
 
-    legend: {
-        enabled: true
-    },
+const config = {
+  chart: {
+    spacingBottom: 20
+  },
+  title: {
+    text: 'Europe time zones'
+  },
 
-    plotOptions: {
-        map: {
-            allAreas: false,
-            joinBy: ['iso-a2', 'code'],
-            dataLabels: {
-                enabled: true,
-                color: 'white',
-                style: {
-                    fontWeight: 'bold'
-                }
-            },
-            mapData: maps,
-            tooltip: {
-                headerFormat: '',
-                pointFormat: '{point.name}: <b>{series.name}</b>'
-            }
+  legend: {
+    enabled: true
+  },
 
+  plotOptions: {
+    map: {
+      allAreas: false,
+      joinBy: ['iso-a2', 'code'],
+      dataLabels: {
+        enabled: true,
+        color: 'white',
+        style: {
+          fontWeight: 'bold'
         }
-    },
+      },
+      mapData: maps,
+      tooltip: {
+        headerFormat: '',
+        pointFormat: '{point.name}: <b>{series.name}</b>'
+      }
+
+    }
+  },
 
-    series: [{
-        name: 'UTC',
-        data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
-            return {code: code};
-        })
-    }, {
-        name: 'UTC + 1',
-        data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
-            'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
-            return {code: code};
-        })
-    }]
+  series: [{
+    name: 'UTC',
+    data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
+      return {code: code};
+    })
+  }, {
+    name: 'UTC + 1',
+    data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
+      'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
+      return {code: code};
+    })
+  }]
 };
 
 ReactDOM.render(
-    <ReactHighmaps config={config} />,
-    document.getElementById('test')
+  <ReactHighmaps config={config}/>,
+  document.getElementById('test')
 );
 
 ReactDOM.render(
-    <Highlight className="jsx">{require("raw-loader!./highmaps.jsx")}</Highlight>,
-    document.getElementById('code-js')
+  <PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./highmaps.jsx")}</PrismCode>,
+  document.getElementById('code-js')
 );
 
 ReactDOM.render(
-    <Highlight className="html">{require("raw-loader!./highmaps.html")}</Highlight>,
-    document.getElementById('code-html')
+  <PrismCode component="pre" className="language-markup">{require("raw-loader!./highmaps.html")}</PrismCode>,
+  document.getElementById('code-html')
 );
 
 require("file-loader?name=[name].[ext]!./highmaps.html");

demo/src/highstock.jsx

@@ -1,42 +1,48 @@
 const React = require('react');
 // Note that HighMaps has to be in the codebase already
 const ReactHighstock = require('react-highcharts/ReactHighstock.src');
-const Highlight = require('react-highlight');
 const ReactDOM = require('react-dom');
+require('prismjs');
+require('prismjs/themes/prism.css');
+import PrismCode from 'react-prism'
+
+import './style.css'
+import './tomorrow.css'
+
 
 const data = [
-    [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]
+  [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]
 ];
 
 const config = {
-    rangeSelector: {
-        selected: 1
-    },
-    title: {
-        text: 'AAPL Stock Price'
-    },
-    series: [{
-        name: 'AAPL',
-        data: data,
-        tooltip: {
-            valueDecimals: 2
-        }
-    }]
+  rangeSelector: {
+    selected: 1
+  },
+  title: {
+    text: 'AAPL Stock Price'
+  },
+  series: [{
+    name: 'AAPL',
+    data: data,
+    tooltip: {
+      valueDecimals: 2
+    }
+  }]
 };
 
 ReactDOM.render(
-    <ReactHighstock config={config} />,
-    document.getElementById('test')
+  <ReactHighstock config={config}/>,
+  document.getElementById('test')
 );
 
 ReactDOM.render(
-    <Highlight className="jsx">{require("raw-loader!./highstock.jsx")}</Highlight>,
-    document.getElementById('code-js')
+  <PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./highstock.jsx")}</PrismCode>,
+  document.getElementById('code-js')
 );
 
 ReactDOM.render(
-    <Highlight className="html">{require("raw-loader!./highstock.html")}</Highlight>,
-    document.getElementById('code-html')
+  <PrismCode component="pre" className="language-markup">{require("raw-loader!./highstock.html")}</PrismCode>,
+  document.getElementById('code-html')
 );
 
 require("file-loader?name=[name].[ext]!./highstock.html");

demo/src/index.jsx

@@ -3,6 +3,12 @@ const React = require('react');
 const ReactHighcharts = require('react-highcharts');
 const Highlight = require('react-highlight');
 const ReactDOM = require('react-dom');
+require('prismjs');
+require('prismjs/themes/prism.css');
+import PrismCode from 'react-prism'
+
+import './style.css'
+import './tomorrow.css'
 
 const config = {
   xAxis: {
@@ -14,20 +20,18 @@ const config = {
 };
 
 ReactDOM.render(
-  <ReactHighcharts config={config} />,
+  <ReactHighcharts config={config}/>,
   document.getElementById('test')
 );
 ReactDOM.render(
-  <Highlight className="jsx">{require("raw-loader!./index.jsx")}</Highlight>,
+  <PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./index.jsx")}</PrismCode>,
   document.getElementById('code-js')
 );
 ReactDOM.render(
-  <Highlight className="html">{require("raw-loader!./index.html")}</Highlight>,
+  <PrismCode component="pre" className="language-markup">{require("raw-loader!./index.html")}</PrismCode>,
   document.getElementById('code-html')
 );
 
 require("file-loader?name=[name].[ext]!./index.html");
 require("file-loader?name=[name].[ext]!./more.html");
-require("file-loader?name=[name].[ext]!./style.css");
-require("file-loader?name=[name].[ext]!./tomorrow.css");
 

demo/src/more.jsx

@@ -2,7 +2,6 @@ var React = require('react');
 // Note that Highcharts has to be required separately
 var ReactHighcharts = require('react-highcharts');
 
-
 // Note that Highcharts has to be in the codebase already
 // Highcharts more
 var HighchartsMore = require('highcharts-more');
@@ -11,10 +10,16 @@ HighchartsMore(ReactHighcharts.Highcharts);
 // Highcharts exporting
 var HighchartsExporting = require('highcharts-exporting');
 HighchartsExporting(ReactHighcharts.Highcharts);
-
-var Highlight = require('react-highlight');
 var ReactDOM = require('react-dom');
 
+require('prismjs');
+require('prismjs/themes/prism.css');
+import PrismCode from 'react-prism'
+
+import './style.css'
+import './tomorrow.css'
+
+
 var config = {
   chart: {
     polar: true
@@ -28,14 +33,14 @@ var config = {
 };
 
 ReactDOM.render(
-  <ReactHighcharts config={config}></ReactHighcharts>,
+  <ReactHighcharts config={config}> </ReactHighcharts>,
   document.getElementById('test')
 );
 ReactDOM.render(
-  <Highlight className="jsx">{require("raw-loader!./more.jsx")}</Highlight>,
+  <PrismCode component="pre" className="language-javascript">{require("!!raw-loader!./more.jsx")}</PrismCode>,
   document.getElementById('code-js')
 );
 ReactDOM.render(
-  <Highlight className="html">{require("raw-loader!./more.html")}</Highlight>,
+  <PrismCode component="pre" className="language-markup">{require("raw-loader!./more.html")}</PrismCode>,
   document.getElementById('code-html')
 );

demo/webpack.config.js

@@ -17,7 +17,12 @@ module.exports = {
                     }
 
                 }]
+            },
+            {
+                test: /\.css$/,
+                use: [ 'style-loader', 'css-loader' ]
             }
+
         ]
     },
     resolve: {

package.json

@@ -35,31 +35,40 @@
     "graph"
   ],
   "devDependencies": {
-    "babel-cli": "^6.18.0",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.24.0",
-    "babel-loader": "^6.2.10",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-2": "^6.18.0",
-    "create-react-class": "^15.5.2",
-    "exports-loader": "^0.6.2",
-    "file-loader": "^0.10.1",
-    "highlight.js": "^9.10.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-export-default": "^7.0.0-alpha.20",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "create-react-class": "^15.6.2",
+    "css-loader": "^0.28.8",
+    "exports-loader": "^0.6.4",
+    "file-loader": "^1.1.6",
+    "highlight.js": "^9.12.0",
     "imports-loader": "^0.7.1",
-    "jsdom": "^9.9.1",
-    "mocha": "^3.2.0",
-    "mock-require": "^2.0.1",
-    "nightwatch": "^0.9.6",
-    "prop-types": "^15.5.8",
+    "jsdom": "^11.5.1",
+    "mocha": "^4.1.0",
+    "mock-require": "^2.0.2",
+    "nightwatch": "^0.9.19",
+    "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-highlight": "^0.9.0",
-    "sinon": "^2.0.0",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.2"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-highlight": "^0.10.0",
+    "sinon": "^4.1.3",
+    "style-loader": "^0.19.1",
+    "uglifyjs-webpack-plugin": "^1.1.6",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.6"
   },
   "dependencies": {
-    "highcharts": "^6.0.0"
+    "highcharts": "^6.0.4",
+    "prismjs": "^1.9.0",
+    "react-highlight": "briancappello/react-highlight#react-v16-compiled",
+    "react-prism": "^4.3.2",
+    "refractor": "^2.2.0"
   }
 }

src/Highmaps.jsx

@@ -1 +1,4 @@
-module.exports = require('./chartsFactory.jsx')('Map', require("highcharts/highmaps"));
+import chartsFactory from './chartsFactory.jsx';
+import highmaps from 'highcharts/highmaps';
+
+export default chartsFactory('Map', highmaps);

src/Highstock.jsx

@@ -1 +1,4 @@
-module.exports = require('./chartsFactory.jsx')('StockChart', require("highcharts/highstock"));
+import chartsFactory from './chartsFactory.jsx';
+import highstock from 'highcharts/highstock';
+
+export default chartsFactory('StockChart', highstock);

src/ReactHighcharts.jsx

@@ -1 +1,4 @@
-module.exports = require('./chartsFactory.jsx')('Chart', require("highcharts"));
+import chartsFactory from './chartsFactory.jsx';
+import highcharts from 'highcharts';
+
+export default chartsFactory('Chart', highcharts);