feat(contributor-workflow): improve contributor workflow for react co…

…mponents

- No longer need to publish to npm to see changes in styleguide or in
tests
- Speed up monolith recompile time
- Replace browserify with webpack
- Modify vendored modernizr to work with webpack

[Finishes #95551542]

config/webpack/development.js

@@ -1,4 +1,24 @@
-module.exports = {
+import puiAliases from '../../helpers/pui-aliases';
+
+export default {
   devtool: 'inline-source-map',
-  watch: true
-};
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader?stage=0'
+      },
+      {
+        test: /bootstrap/,
+        loader: 'imports?jQuery=jquery'
+      }
+    ]
+  },
+  resolve: {
+    alias: Object.assign({
+      bootstrap: `${__dirname}/../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js`,
+      modernizr: `${__dirname}/../../src/modernizr/modernizr.min.js`
+    }, puiAliases)
+  }
+};

config/webpack/test.js

@@ -1,15 +1,23 @@
-module.exports = {
+import puiAliases from '../../helpers/pui-aliases';
+
+export default {
   devtool: 'eval',
-  entry: null,
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader?stage=0'
+      }
+    ]
+  },
   output: {filename: 'spec.js' },
   quiet: true,
   resolve: {
-    alias: {
+    alias: Object.assign({
       'raf': `${__dirname}/../../spec/pivotal-ui-react/support/mock_raf.js`,
       'performance-now': `${__dirname}/../../spec/pivotal-ui-react/support/mock_performance_now.js`,
       'lodash.throttle': `${__dirname}/../../spec/pivotal-ui-react/support/mock_throttle.js`
-    }
-  },
-  watch: true,
-  externals: null
-};
+    }, puiAliases)
+  }
+};

gulpfile.js

@@ -5,8 +5,4 @@ requireDir('./tasks');
 
 var gulp = require('gulp');
 
-gulp.task('default', [
-  'monolith-serve',
-  'monolith-watch'
-]);
-
+gulp.task('default', ['dev']);

helpers/pui-aliases.js

@@ -0,0 +1,11 @@
+import glob from 'glob';
+import path from 'path';
+
+const reactPackageDirs = glob.sync('src/pivotal-ui-react/*', {realpath: true});
+
+export default reactPackageDirs.reduce((memo, packageDir) => {
+  const componentName = path.basename(packageDir);
+  memo[`pui-react-${componentName}\$`] = path.join(packageDir, `${componentName}.js`);
+  memo[`pui-react-${componentName}`] = packageDir;
+  return memo;
+}, {});

package.json

@@ -4,31 +4,12 @@
   "description": "***",
   "version": "1.8.0",
   "main": "gulpfile.js",
-  "browser": {
-    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
-    "modernizr": "./src/modernizr/modernizr.min.js"
-  },
-  "browserify": {
-    "transform": [
-      "browserify-shim"
-    ]
-  },
-  "browserify-shim": {
-    "bootstrap": {
-      "depends": [
-        "jquery:jQuery"
-      ]
-    },
-    "modernizr": "Modernizr"
-  },
   "devDependencies": {
     "babel": "^5.0.9",
     "babel-core": "^5.4.7",
     "babel-eslint": "^3.1.10",
     "babel-loader": "^5.1.3",
     "bootstrap-sass": "3.3.1",
-    "browserify": "^5.12.0",
-    "browserify-shim": "^3.7.0",
     "classnames": "^2.1.2",
     "conventional-changelog": "^0.0.11",
     "cssnext": "^1.5.2",
@@ -39,6 +20,7 @@
     "eslint-plugin-react": "^2.5.0",
     "event-stream": "^3.3.1",
     "font-awesome": "^4.2.0",
+    "glob": "^5.0.10",
     "gulp": "^3.8.8",
     "gulp-babel": "^5.1.0",
     "gulp-bump": "^0.1.11",
@@ -58,9 +40,9 @@
     "gulp-sass": "^1.3.3",
     "gulp-uglify": "^1.0.1",
     "gulp-util": "^3.0.4",
-    "gulp-webpack": "^1.4.0",
     "gulp-zip": "^2.0.2",
     "highland": "^2.5.1",
+    "imports-loader": "^0.6.4",
     "jasmine_dom_matchers": "^0.2.1",
     "jquery": "^2.1.1",
     "lodash": "^2.4.1",
@@ -87,8 +69,8 @@
     "through2": "^0.6.3",
     "vinyl": "^0.4.6",
     "vinyl-file": "^1.1.1",
-    "vinyl-source-stream": "^1.0.0",
     "webpack": "^1.9.10",
+    "webpack-stream": "^2.0.0",
     "yargs": "^1.3.2",
     "zeroclipboard": "^2.1.6"
   },

tasks/dev.js

@@ -0,0 +1,15 @@
+import gulp from 'gulp';
+const runSequence = require('run-sequence').use(gulp);
+
+gulp.task('setup-watchers', (callback) => {
+  process.env.WEBPACK_WATCH = true;
+  gulp.watch(['src/pivotal-ui/components/**/*.scss'], ['monolith-hologram', 'monolith-build-css-from-cache']);
+  gulp.watch(['src/styleguide/**/*.scss'], ['monolith-styleguide-css']);
+  callback();
+});
+
+gulp.task('dev', (callback) => runSequence(
+  'setup-watchers',
+  'monolith-serve',
+  callback
+));

tasks/jasmine.js

@@ -1,11 +1,11 @@
-var gulp = require('gulp');
+import gulp from 'gulp';
+import webpack from 'webpack-stream';
 var plugins = require('gulp-load-plugins')();
 
 function testAssets(options = {}) {
-  var webpackConfig = Object.assign(require('../config/webpack/config')('test'), options);
   return gulp.src('spec/pivotal-ui-react/**/*_spec.js')
     .pipe(plugins.plumber())
-    .pipe(plugins.webpack(webpackConfig));
+    .pipe(webpack(Object.assign(require('../config/webpack/test'), options)));
 }
 
 gulp.task('jasmine-ci', function() {
@@ -16,7 +16,7 @@ gulp.task('jasmine-ci', function() {
 
 gulp.task('jasmine', function() {
   var plugin = new (require('gulp-jasmine-browser/webpack/jasmine-plugin'))();
-  return testAssets({plugins: [plugin]})
+  return testAssets({watch: true, plugins: [plugin]})
     .pipe(plugins.jasmineBrowser.specRunner())
     .pipe(plugins.jasmineBrowser.server({whenReady: plugin.whenReady}));
 });

tasks/monolith.js

@@ -1,17 +1,16 @@
 import {exec} from 'child_process';
 import gulp from 'gulp';
 import del from 'del';
-import source from 'vinyl-source-stream';
-import browserify from 'browserify';
-import runSequence from 'run-sequence';
 import loadPlugins from 'gulp-load-plugins';
 import {map, pipeline} from 'event-stream';
 import {setup as setupDrF, copyAssets, generateCss} from 'dr-frankenstyle/dev';
 import {railsUrls} from 'dr-frankenstyle';
 import path from 'path';
 import {read} from 'vinyl-file';
+import webpack from 'webpack-stream';
 
 const plugins = loadPlugins();
+const runSequence = require('run-sequence').use(gulp);
 
 gulp.task('monolith-clean', callback => del(['build'], callback));
 
@@ -71,18 +70,24 @@ gulp.task('monolith-styleguide-css', () =>
 );
 
 gulp.task('monolith-build-js', () =>
-  browserify('./src/pivotal-ui/javascripts/pivotal-ui.js')
-    .bundle()
-    .pipe(source('pivotal-ui.js'))
+  gulp.src('./src/pivotal-ui/javascripts/pivotal-ui.js')
+    .pipe(webpack(require('../config/webpack/development')))
+    .pipe(plugins.rename('pivotal-ui.js'))
     .pipe(gulp.dest('build'))
 );
 
-gulp.task('monolith-build-react-js', () =>
-  browserify('./src/pivotal-ui/javascripts/pivotal-ui-react.js')
-    .bundle()
-    .pipe(source('pivotal-ui-react.js'))
-    .pipe(gulp.dest('build'))
-);
+gulp.task('monolith-build-react-js', () => {
+  const watch = Boolean(process.env.WEBPACK_WATCH);
+
+  const task = gulp.src('./src/pivotal-ui/javascripts/pivotal-ui-react.js')
+    .pipe(webpack(Object.assign({}, require('../config/webpack/development'), {watch: watch})))
+    .pipe(plugins.rename('pivotal-ui-react.js'))
+    .pipe(gulp.dest('build'));
+
+  if (!watch) {
+    return task;
+  }
+});
 
 gulp.task('monolith-prism-assets', () =>
   gulp.src('node_modules/prismjs/themes/{prism,prism-okaidia}.css')
@@ -120,11 +125,6 @@ gulp.task('monolith', callback => runSequence('monolith-clean', [
   'monolith-app-config'
 ], callback));
 
-gulp.task('monolith-watch', ['monolith'], () => {
-  gulp.watch(['src/pivotal-ui/components/**/*.scss'], ['monolith-hologram', 'monolith-build-css-from-cache']);
-  gulp.watch(['src/styleguide/**/*.scss'], ['monolith-styleguide-css']);
-});
-
 gulp.task('monolith-serve', ['monolith'], () => {
   plugins.connect.server({
     root: ['build'],