merge and fix demo add react-prism lib

Author: ilyjs

demo/src/highmaps.jsx

@@ -1,9 +1,16 @@
 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: {
@@ -57,12 +64,12 @@ ReactDOM.render(
 );
 
 ReactDOM.render(
-    <Highlight className="jsx">{require("raw-loader!./highmaps.jsx")}</Highlight>,
+    <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>,
+    <PrismCode component="pre" className="language-markup">{require("raw-loader!./highmaps.html")}</PrismCode>,
     document.getElementById('code-html')
 );
 

demo/src/highstock.jsx

@@ -1,8 +1,14 @@
 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]
@@ -30,12 +36,12 @@ ReactDOM.render(
 );
 
 ReactDOM.render(
-    <Highlight className="jsx">{require("raw-loader!./highstock.jsx")}</Highlight>,
+    <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>,
+    <PrismCode component="pre" className="language-markup">{require("raw-loader!./highstock.html")}</PrismCode>,
     document.getElementById('code-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: {
@@ -18,16 +24,14 @@ ReactDOM.render(
   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,31 +10,37 @@ 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
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-  },
-  series: [{
-    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
-  }]
+    chart: {
+        polar: true
+    },
+    xAxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    },
+    series: [{
+        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+    }]
 };
 
 ReactDOM.render(
-  <ReactHighcharts config={config}></ReactHighcharts>,
-  document.getElementById('test')
+    <ReactHighcharts config={config}> </ReactHighcharts>,
+    document.getElementById('test')
 );
 ReactDOM.render(
-  <Highlight className="jsx">{require("raw-loader!./more.jsx")}</Highlight>,
-  document.getElementById('code-js')
+    <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>,
-  document.getElementById('code-html')
+    <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,7 +35,7 @@
     "graph"
   ],
   "devDependencies": {
-    "babel-cli": "^6.18.0",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.24.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -44,25 +44,31 @@
     "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": "^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"
   }
 }

test/unit/simulateDOM.js

@@ -13,13 +13,13 @@
  */
 
 var jsdom = require('jsdom');
-
-global.document = jsdom.jsdom('<!doctype html><html><body><div id="test"></div></body></html>');
-var win = global.document.defaultView;
+const {JSDOM} = jsdom;
+const {document} = (new JSDOM('<!doctype html><html><body><div id="test"></div></body></html>')).window;
+var win = document.defaultView;
 global.window = global;
 for( var i in win ){
-  if( i !== 'window' && win.hasOwnProperty(i)){
-    global.window[i] = win[i];
-  }
+    if( i !== 'window' && win.hasOwnProperty(i)){
+        global.window[i] = win[i];
+    }
 }
 

webpack.config.js

@@ -87,6 +87,7 @@ module.exports = function (env) {
                         loader: 'babel-loader',
                         options: {
                             presets: ['env', 'react', 'stage-2'],
+                            plugins: ["add-module-exports"]
                         }
                     }
                 }