Merge pull request #35 from onefinestay/development

Development
onefinestay · May 11, 2015 · 1fdee6d · 1fdee6d
2 parents 654c221 + 3352fe4
commit 1fdee6d
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 133 deletions.
diff --git a/README.md b/README.md
@@ -23,9 +23,9 @@ Once you have the repository cloned run the following commands to get started:
 
 ```shell
 npm install
-npm install -g webpack // we use webpack to build the js for the example page
+gulp develop
 ```
 
-Then in one shell run `gulp develop` and in another `webpack -w --colors --progress`.
 This will start a local server at `http://localhost:9989` where you can see the
 example page. It will also watch for any files changes and rebuild.
+To update the compiled files in dist run `gulp build-dist-js`.
diff --git a/example/base.jsx b/example/base.jsx
@@ -0,0 +1,23 @@
+import React from 'react/addons';
+
+export default class Base extends React.Component {
+  render() {
+    return (
+      <html>
+        <head>
+          <title>React Daterange Picker Demo</title>
+          <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/docco.min.css' rel='stylesheet' type='text/css'></link>
+          <link href="css/react-calendar.css" rel="stylesheet"></link>
+          <link href="css/example.css" rel="stylesheet"></link>
+          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+        </head>
+        <body>
+          <div id="app"></div>
+          <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js" charSet="utf-8"></script>
+          <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/languages/javascript.min.js" charSet="utf-8"></script>
+          <script src="build/index.js"></script>
+        </body>
+      </html>
+    );
+  }
+}
diff --git a/example/index.jsx b/example/index.jsx
@@ -4,7 +4,7 @@ var React = require('react/addons');
 var moment = require('moment-range');
 var fs = require('fs');
 var timekeeper = require('timekeeper');
-var RangePicker = require('..');
+var RangePicker = require('../src');
 
 var Header = require('./components/header.jsx');
 var Footer = require('./components/footer.jsx');
@@ -41,7 +41,7 @@ var DatePickerRange = React.createClass({
         <RangePicker {...this.props} onSelect={this.handleSelect} value={this.state.value} />
         <div>
           <input type="text"
-            value={this.state.value ?  this.state.value.start.format('LL') : null}
+            value={this.state.value ? this.state.value.start.format('LL') : null}
             readOnly={true}
             placeholder="Start date"/>
           <input type="text"
@@ -130,72 +130,57 @@ var Index = React.createClass({
     var initialEnd = moment().add(1, 'weeks').add(3, 'days').startOf('day');
 
     return (
-      <html>
-        <head>
-          <title>React Daterange Picker Demo</title>
-          <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/docco.min.css' rel='stylesheet' type='text/css'></link>
-          <link href="css/react-calendar.css" rel="stylesheet"></link>
-          <link href="css/example.css" rel="stylesheet"></link>
-          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
-          <script src="https://cdn.polyfill.io/v1/polyfill.min.js" />
-        </head>
-        <body>
-          <Header />
-          <GithubRibbon />
-
-          <div className="content">
+      <main>
+        <Header />
+        <GithubRibbon />
+
+        <div className="content">
+          <div className="example">
+            <DatePickerRange
+              firstOfWeek={1}
+              numberOfCalendars={2}
+              selectionType='range'
+              minimumDate={new Date()}
+              maximumDate={moment().add(2, 'years').toDate()}
+              stateDefinitions={stateDefinitions}
+              dateStates={dateRanges}
+              defaultState="available"
+              value={moment().range(initialStart, initialEnd)}
+              showLegend={true}
+              />
+            <CodeSnippet language="javascript">
+              {processCodeSnippet(mainCodeSnippet)}
+            </CodeSnippet>
+          </div>
+
+          <Features />
+          <Install />
+
+          <div className="examples">
+            <h2>Examples</h2>
+
             <div className="example">
+              <h4>Range with no date states</h4>
               <DatePickerRange
-                firstOfWeek={1}
                 numberOfCalendars={2}
-                selectionType='range'
-                minimumDate={new Date()}
-                maximumDate={moment().add(2, 'years').toDate()}
-                stateDefinitions={stateDefinitions}
-                dateStates={dateRanges}
-                defaultState="available"
-                value={moment().range(initialStart, initialEnd)}
-                showLegend={true}
-                />
-              <CodeSnippet language="javascript">
-                {processCodeSnippet(mainCodeSnippet)}
-              </CodeSnippet>
+                selectionType="range"
+                minimumDate={new Date()} />
             </div>
 
-            <Features />
-            <Install />
-
-            <div className="examples">
-              <h2>Examples</h2>
-
-              <div className="example">
-                <h4>Range with no date states</h4>
-                <DatePickerRange
-                  numberOfCalendars={2}
-                  selectionType="range"
-                  minimumDate={new Date()} />
-              </div>
-
-              <div className="example">
-                <h4>Single with no date states</h4>
-                <DatePickerSingle
-                  numberOfCalendars={2}
-                  selectionType="single"
-                  minimumDate={new Date()} />
-              </div>
+            <div className="example">
+              <h4>Single with no date states</h4>
+              <DatePickerSingle
+                numberOfCalendars={2}
+                selectionType="single"
+                minimumDate={new Date()} />
             </div>
           </div>
+        </div>
 
-          <Footer />
-
-          <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js" charSet="utf-8"></script>
-          <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/languages/javascript.min.js" charSet="utf-8"></script>
-          <script src="build/index.js"></script>
-        </body>
-      </html>
+        <Footer />
+      </main>
     );
   }
 });
 
 module.exports = Index;
-
diff --git a/example/js/index.js b/example/js/index.js
@@ -1,4 +1,3 @@
-/* global hljs */
 "use strict";
 
 var React = require('react/addons');
@@ -8,5 +7,5 @@ window.React = React;
 
 React.render(
   Index(),
-  document
+  document.getElementById('app')
 );
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,6 +3,7 @@
 Object.assign = require('object.assign');
 
 var fs = require('fs');
+var path = require('path');
 var gulp = require('gulp');
 var autoprefixer = require('gulp-autoprefixer');
 var extReplace = require('gulp-ext-replace');
@@ -12,8 +13,63 @@ var connect = require('gulp-connect');
 var sass = require('gulp-sass');
 var deploy = require('gulp-gh-pages');
 var React = require('react');
+var webpack = require('webpack');
+var gulpWebpack = require('gulp-webpack');
 
-gulp.task('build-js', function() {
+var PRODUCTION = (process.env.NODE_ENV === 'production');
+
+var gulpPlugins = [
+  // Fix for moment including all locales
+  // Ref: http://stackoverflow.com/a/25426019
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+];
+
+if (PRODUCTION) {
+  gulpPlugins.push(new webpack.DefinePlugin({
+    "process.env": {
+      NODE_ENV: JSON.stringify("production")
+    }
+  }));
+  gulpPlugins.push(new webpack.optimize.DedupePlugin());
+  gulpPlugins.push(new webpack.optimize.UglifyJsPlugin({
+    compress: true,
+    mangle: true,
+    sourceMap: true
+  }));
+}
+
+var webpackConfig = {
+  cache: true,
+  debug: !PRODUCTION,
+  devtool: PRODUCTION ? 'source-map' : 'eval-source-map',
+  context: __dirname,
+  output: {
+    path: path.resolve('./example/build/'),
+    filename: 'index.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx|.js$/,
+        exclude: /node_modules\//,
+        loaders: [
+          'babel-loader?stage=1&plugins[]=object-assign'
+        ]
+      },
+    ],
+    postLoaders: [
+      {
+        loader: "transform/cacheable?brfs"
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  plugins: gulpPlugins
+};
+
+gulp.task('build-dist-js', function() {
   // build javascript files
   return gulp.src('src/**/*.{js,jsx}')
     .pipe(babel({
@@ -24,21 +80,29 @@ gulp.task('build-js', function() {
     .pipe(gulp.dest('dist'));
 });
 
-gulp.task('watch-js', function() {
-  // watch js files
-  watch('./src/*{js,jsx}', function(files, cb) {
-    gulp.start('build-js', cb);
-  });
+gulp.task('build-example-js', function() {
+  var compiler = gulpWebpack(webpackConfig, webpack);
+
+  return gulp.src('./example/js/index.js')
+    .pipe(compiler)
+    .pipe(gulp.dest('./example/build'));
+});
+
+gulp.task('watch-example-js', function() {
+  var compiler = gulpWebpack(Object.assign({}, {watch: true}, webpackConfig), webpack);
+  return gulp.src('./example/js/index.js')
+    .pipe(compiler)
+    .pipe(gulp.dest('./example/build'));
 });
 
-gulp.task('build-example', ['build-js'], function() {
+gulp.task('build-example', function() {
   // setup babel hook
   require("babel/register")({
     stage: 1,
     plugins: ['object-assign']
   });
 
-  var Index = React.createFactory(require('./example/index.jsx'));
+  var Index = React.createFactory(require('./example/base.jsx'));
   var markup = '<!document html>' + React.renderToString(Index());
 
   // write file
@@ -52,22 +116,6 @@ gulp.task('build-example-scss', function() {
     .pipe(gulp.dest('./example/css'));
 });
 
-gulp.task('watch-example', ['build-js', 'build-example'], function() {
-  watch(
-    ['./example/**/*.{js,jsx}', './src/*.{js,jsx}', '!./example/build/*.js', '!./example/js/*.js'],
-    function(files, cb) {
-      // delete all files in require cache
-      for (var i in require.cache) {
-        if (!i.match(/node_modules/) && !i.match(/gulpfile/)) {
-          delete require.cache[i];
-        }
-      }
-
-      gulp.start('build-example', cb);
-    }
-  );
-});
-
 gulp.task('watch-example-scss', ['build-example-scss'], function() {
   watch('./example/**/*.scss', function(files, cb) {
     gulp.start('build-example-scss', cb);
@@ -81,11 +129,8 @@ gulp.task('example-server', function() {
   });
 });
 
-gulp.task('build', ['build-js', 'build-example', 'build-example-scss']);
-
-gulp.task('develop-example', ['build-example', 'build-example-scss', 'watch-example', 'watch-example-scss', 'example-server']);
-
-gulp.task('develop', ['watch-js', 'watch-example', 'watch-example-scss', 'example-server']);
+gulp.task('build', ['build-dist-js', 'build-example', 'build-example-js', 'build-example-scss']);
+gulp.task('develop', ['build-example', 'watch-example-js', 'watch-example-scss', 'example-server']);
 
 gulp.task('deploy-example', ['build'], function() {
   return gulp.src('./example/**/*')

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "gulp-sourcemaps": "^1.2.4",
     "gulp-util": "^3.0.4",
     "gulp-watch": "^1.1.0",
+    "gulp-webpack": "^1.4.0",
     "object.assign": "^1.1.1",
     "timekeeper": "0.0.5",
     "transform-loader": "^0.2.1",

diff --git a/webpack.config.js b/webpack.config.js