Separated bundled and unbundled components

Move Copy all modules in modules folder Test All3 bundles Add Highmaps Add Highmaps demo Generate contents for demos Clean up build scripts internal paths clean up
kirjs · Oct 17, 2015 · 965da2b · 965da2b
1 parent 14e3acf
commit 965da2b
Show file tree

Hide file tree

Showing 28 changed files with 323 additions and 87 deletions.
diff --git a/demo/deploy.sh b/demo/deploy.sh
@@ -1,16 +1,20 @@
 #!/bin/sh
-#clean up
+#
+# This script builds demo and pushes it to gh-pages branch
+#
+
+# clean up
 cd "$(git rev-parse --show-toplevel)"
 set -e
 rm -rf demo/dist || exit 0;
 mkdir demo/dist;
 
-#build
+# build
 cd demo
 webpack
 cd dist
 
-#deploy
+# deploy
 git init
 git remote add origin https://github.com/kirjs/react-highcharts.git
 git add .

diff --git a/demo/generate-contents.sh b/demo/generate-contents.sh
@@ -0,0 +1,24 @@
+#!/bin/sh
+#
+# This script generates list of all html pages, and creates an HTML
+# contents based on the titles of the documents
+#
+
+# Get all title lines from html
+titles="grep "\<title\>" ./dist/*.html";
+
+# Generate the menu
+pattern=".\/dist\/\(.*\)\:.*<title>\(.*\) |.*";
+replacement="<a href = \"\1\">\2<\/a>"
+# Transform all titles into links, e.g.
+# Input:  ./dist/highmaps.html: <title>Highmaps demo | react-highcharts</title>
+# Output: <a href = "highmaps.html">Highmaps demo </a>
+contents=`$titles | sed -e "s/$pattern/$replacement/" | tr "\\n" " "`
+
+# Put it in html files
+pattern="<div class = \"menu\">.*<\/div>"
+replacement="<div class = \"menu\">$contents<\/div>"
+# For all HTML files find the pattern, and add the contents
+sed -i '' -e  "s;$pattern;$replacement;" $(find ./dist -type f -name '*.html')
+
+echo 'done generating contents';
diff --git a/demo/src/highmaps.html b/demo/src/highmaps.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="tomorrow.css"/>
+  <link rel="stylesheet" href="style.css"/>
+  <title>Highmaps demo | react-highcharts</title>
+</head>
+<body>
+  <!-- THE LINE BELOW IS GENERATED, DON'T REMOVE OR MODIFY-->
+  <div class = "menu"><a href = "highmaps.html">Highmaps demo </a> <a href = "highstock.html">Highstock demo </a> <a href = "index.html">Highcharts demo </a> <a href = "more.html">Highcharts-more demo </a> </div>
+  <!-- END OF GENERATED CONTENT -->
+  <h1>Highmaps</h1>
+  <div id="test"></div>
+  <h2>Code</h2>
+  <h3>highmaps.jsx</h3>
+  <div id="code-js"></div>
+  <h3>highmaps.html</h3>
+  <div id="code-html"></div>
+  <script src="./highmaps.js"></script>
+</body>
+</html>
diff --git a/demo/src/highmaps.jsx b/demo/src/highmaps.jsx
@@ -0,0 +1,68 @@
+var React = require('react');
+var Highmaps = require('react-highcharts/bundle/highmaps');
+var Highlight = require('react-highlight');
+require('./mapdata/europe');
+
+
+var config = {
+  chart: {
+    spacingBottom: 20
+  },
+  title : {
+    text : 'Europe time zones'
+  },
+
+  legend: {
+    enabled: true
+  },
+
+  plotOptions: {
+    map: {
+      allAreas: false,
+      joinBy: ['iso-a2', 'code'],
+      dataLabels: {
+        enabled: true,
+        color: 'white',
+        style: {
+          fontWeight: 'bold'
+        }
+      },
+      mapData: Highcharts.maps['custom/europe'],
+      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 };
+    })
+  }  ]
+};
+
+React.render(
+  <Highmaps config={config}></Highmaps>,
+  document.getElementById('test')
+);
+
+React.render(
+  <Highlight className="jsx">{require("raw-loader!./highmaps.jsx")}</Highlight>,
+  document.getElementById('code-js')
+);
+
+React.render(
+  <Highlight className="html">{require("raw-loader!./highmaps.html")}</Highlight>,
+  document.getElementById('code-html')
+);
+
+require("file?name=[name].[ext]!./highmaps.html");
diff --git a/demo/src/highstock.html b/demo/src/highstock.html
@@ -4,9 +4,13 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="tomorrow.css"/>
   <link rel="stylesheet" href="style.css"/>
-  <title>Highstock.js demo</title>
+  <title>Highstock demo | react-highcharts</title>
 </head>
 <body>
+  <!-- THE LINE BELOW IS GENERATED, DON'T REMOVE OR MODIFY-->
+  <div class = "menu"><a href = "highmaps.html">Highmaps demo </a> <a href = "highstock.html">Highstock demo </a> <a href = "index.html">Highcharts demo </a> <a href = "more.html">Highcharts-more demo </a> </div>
+  <!-- END OF GENERATED CONTENT -->
+  <h1>Highstock</h1>
   <div id="test"></div>
   <h2>Code</h2>
   <h3>highstock.jsx</h3>
@@ -15,4 +19,4 @@ <h3>highstock.html</h3>
   <div id="code-html"></div>
   <script src="./highstock.js"></script>
 </body>
-</html>
+</html>
diff --git a/demo/src/highstock.jsx b/demo/src/highstock.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var Highstock = require('react-highcharts/highstock');
+var Highstock = require('react-highcharts/bundle/highstock');
 var Highlight = require('react-highlight');
 
 var data = [

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -4,9 +4,13 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="tomorrow.css"/>
   <link rel="stylesheet" href="style.css"/>
-  <title></title>
+  <title>Highcharts demo | react-highcharts</title>
 </head>
 <body>
+  <!-- THE LINE BELOW IS GENERATED, DON'T REMOVE OR MODIFY-->
+  <div class = "menu"><a href = "highmaps.html">Highmaps demo </a> <a href = "highstock.html">Highstock demo </a> <a href = "index.html">Highcharts demo </a> <a href = "more.html">Highcharts-more demo </a> </div>
+  <!-- END OF GENERATED CONTENT -->
+  <h1>Highcharts</h1>
   <div id="test"></div>
   <h2>Code</h2>
   <h3>index.jsx</h3>
@@ -15,4 +19,4 @@ <h3>index.html</h3>
   <div id="code-html"></div>
   <script src="./index.js"></script>
 </body>
-</html>
+</html>
diff --git a/demo/src/index.jsx b/demo/src/index.jsx
@@ -1,5 +1,8 @@
 var React = require('react');
-var Highcharts = require('react-highcharts');
+global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
+var Highcharts = require("highcharts");
+
+var ReactHighcharts = require('react-highcharts');
 var Highlight = require('react-highlight');
 
 var config = {
@@ -12,7 +15,7 @@ var config = {
 };
 
 React.render(
-  <Highcharts config={config}></Highcharts>,
+  <ReactHighcharts config={config}></ReactHighcharts>,
   document.getElementById('test')
 );
 React.render(

diff --git a/demo/src/mapdata/europe.js b/demo/src/mapdata/europe.js
diff --git a/demo/src/more.html b/demo/src/more.html
@@ -4,9 +4,13 @@
   <meta charset="UTF-8">
   <link rel="stylesheet" href="tomorrow.css"/>
   <link rel="stylesheet" href="style.css"/>
-  <title></title>
+  <title>Highcharts-more demo | react-highcharts</title>
 </head>
 <body>
+  <!-- THE LINE BELOW IS GENERATED, DON'T REMOVE OR MODIFY-->
+  <div class = "menu"><a href = "highmaps.html">Highmaps demo </a> <a href = "highstock.html">Highstock demo </a> <a href = "index.html">Highcharts demo </a> <a href = "more.html">Highcharts-more demo </a> </div>
+  <!-- END OF GENERATED CONTENT -->
+  <h1>Highcharts-more</h1>
   <div id="test"></div>
   <h2>Code</h2>
   <h3>more.jsx</h3>
@@ -15,4 +19,4 @@ <h3>more.html</h3>
   <div id="code-html"></div>
   <script src="./more.js"></script>
 </body>
-</html>
+</html>
diff --git a/demo/src/more.jsx b/demo/src/more.jsx
@@ -1,5 +1,6 @@
 var React = require('react');
-var Highcharts = require('react-highcharts/more');
+var Highcharts = require('react-highcharts/bundle/highcharts');
+require('react-highcharts/modules/more');
 var Highlight = require('react-highlight');
 
 var config = {

diff --git a/demo/src/style.css b/demo/src/style.css
@@ -1,3 +1,23 @@
 body {
     font-family: sans-serif;
-}
+}
+
+.menu:before {
+    content: "All demos:";
+}
+.menu a {
+    margin-left: 10px;
+    color: #f00;
+    text-decoration: none;
+    border-left: 1px #ddd solid;
+    padding-left: 10px;
+}
+
+.menu a:first-child {
+    border:none;
+}
+
+.menu a:visited {
+    color: #777;
+}
+
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -2,7 +2,8 @@ module.exports = {
   entry: {
     index: './src/index.jsx',
     more: './src/more.jsx',
-    highstock: './src/highstock.jsx'
+    highstock: './src/highstock.jsx',
+    highmaps: './src/highmaps.jsx'
   },
   module: {
     loaders: [
@@ -18,9 +19,7 @@ module.exports = {
       "highcharts" : "highcharts-release/highcharts.src.js",
       "highcharts-more" : "highcharts-release/highcharts-more.src.js",
       "highcharts-standalone-adapter" : "highcharts-release/adapters/standalone-framework.src.js",
-      "react-highcharts/more": '../../src/More.jsx',
-      "react-highcharts/highstock": '../../src/Highstock.jsx',
-      "react-highcharts": '../../src/Highcharts.jsx'
+      "react-highcharts": '../../dist'
     },
     modulesDirectories: ['node_modules']
   },
@@ -29,4 +28,4 @@ module.exports = {
     filename: '[name].js',
     publicPath: '/'
   }
-};
+};
diff --git a/highstock.js b/highstock.js
diff --git a/index.js b/index.js
diff --git a/more.js b/more.js
diff --git a/package.json b/package.json
@@ -2,12 +2,13 @@
   "name": "react-highcharts",
   "version": "2.1.0",
   "description": "React wrapper for highcharts",
-  "main": "index.js",
+  "main": "dist/highcharts.js",
   "scripts": {
     "test": "webpack && mocha",
-    "demo": "cd demo && webpack && ../node_modules/.bin/webpack-dev-server --content-base dist/",
+    "demo": "cd demo && webpack &&  sh generate-contents.sh && ../node_modules/.bin/webpack-dev-server --content-base dist/",
     "prepublish": "webpack",
-    "deploy-demo": "./demo/deploy.sh"
+    "deploy-demo": "./demo/deploy.sh",
+    "generate-modules": "(cd src; sh ./generate-modules.sh)"
   },
   "author": "Kirill Cherkashin",
   "license": "MIT",
@@ -16,7 +17,7 @@
     "url": "https://github.com/kirjs/react-highcharts"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "0.13.*"
   },
   "bugs": "https://github.com/kirjs/react-highcharts/issues",
   "keywords": [
@@ -30,9 +31,7 @@
     "babel-loader": "^5.3.2",
     "exports-loader": "^0.6.2",
     "file-loader": "^0.8.4",
-    "highcharts-release": "^4.1.7",
     "highlight.js": "^8.5.0",
-    "highstock-release": "^2.1.8",
     "imports-loader": "^0.6.4",
     "jsdom": "^6.3.0",
     "mocha": "^2.3.0",
@@ -41,5 +40,10 @@
     "react-highlight": "^0.4.1",
     "webpack": "^1.5.3",
     "webpack-dev-server": "^1.10.1"
+  },
+  "dependencies": {
+    "highcharts-release": "^4.1.7",
+    "highmaps-release": "^1.1.9",
+    "highstock-release": "^2.1.8"
   }
 }
diff --git a/src/Highcharts.jsx b/src/Highcharts.jsx
@@ -1,4 +1,2 @@
-global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
-var Highcharts = require("exports?Highcharts!highcharts");
 var chartFactory = require('./chartsFactory.jsx');
-module.exports = chartFactory(Highcharts, 'Chart');
+module.exports = chartFactory(Highcharts, 'Chart');
diff --git a/src/Highmaps.jsx b/src/Highmaps.jsx
@@ -0,0 +1,5 @@
+if( Highcharts && !Highcharts.Map){
+  throw Error('');
+}
+var chartFactory = require('./chartsFactory.jsx');
+module.exports = chartFactory(Highcharts, 'Map');
diff --git a/src/Highstock.jsx b/src/Highstock.jsx
@@ -1,4 +1,2 @@
-global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
-var Highcharts = require("exports?Highcharts!highstock");
 var chartFactory = require('./chartsFactory.jsx');
-module.exports = chartFactory(Highcharts, 'StockChart');
+module.exports = chartFactory(Highcharts, 'StockChart');
diff --git a/src/bundle/Highcharts.jsx b/src/bundle/Highcharts.jsx
@@ -0,0 +1,5 @@
+if(!Highcharts) {
+  global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
+  var Highcharts = require("highcharts");
+}
+module.exports = require('../Highcharts.jsx');
diff --git a/src/bundle/Highmaps.jsx b/src/bundle/Highmaps.jsx
@@ -0,0 +1,9 @@
+if( Highcharts && !Highcharts.Map){
+  throw Error('React-highcharts Highmaps module expects Highmaps to be loaded, ' +
+    'but looks like a different copy of Highcharts was loaded before that');
+}
+if(!Highcharts) {
+  global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
+  var Highcharts = require("exports?Highcharts!highmaps");
+}
+module.exports = require('../Highmaps.jsx');
diff --git a/src/bundle/Highstock.jsx b/src/bundle/Highstock.jsx
@@ -0,0 +1,10 @@
+if( Highcharts && !Highcharts.Map){
+  throw Error('React-highcharts Highstock module expects Highstock to be loaded, ' +
+    'but looks like a different copy of Highcharts was loaded before that');
+}
+if( !Highcharts ){
+  global.HighchartsAdapter = require('exports?HighchartsAdapter!highcharts-standalone-adapter');
+  var Highcharts = require("exports?Highcharts!highstock");
+}
+
+module.exports = require('../Highstock.jsx');