Bundle size stats + Misc changes

examples/draft-0-10-0/playground/src/App.js

@@ -153,7 +153,6 @@ class DraftJsPlaygroundContainer extends Component {
 
   render() {
     const {editorState, mode, codeMirrorValue} = this.state;
-    const lang = mode === 'html' ? mode : 'json';
 
     return (
       <PanelGroup borderColor="grey">

gulpfile.js

@@ -16,12 +16,15 @@ var concatCSS = require('gulp-concat-css');
 var derequire = require('gulp-derequire');
 var flatten = require('gulp-flatten');
 var gulp = require('gulp');
+var gulpif = require('gulp-if');
 var gulpUtil = require('gulp-util');
 var header = require('gulp-header');
 var packageData = require('./package.json');
 var rename = require('gulp-rename');
 var runSequence = require('run-sequence');
+var StatsPlugin = require('stats-webpack-plugin');
 var through = require('through2');
+var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var webpackStream = require('webpack-stream');
 
 var fbjsConfigurePreset = require('babel-preset-fbjs/configure');
@@ -37,9 +40,7 @@ var paths = {
     '!src/**/__tests__/**/*.js',
     '!src/**/__mocks__/**/*.js',
   ],
-  css: [
-    'src/**/*.css',
-  ],
+  css: ['src/**/*.css'],
 };
 
 var babelOptsJS = {
@@ -74,7 +75,6 @@ var COPYRIGHT_HEADER = `/**
 
 var buildDist = function(opts) {
   var webpackOpts = {
-    debug: opts.debug,
     externals: {
       immutable: {
         root: 'Immutable',
@@ -103,23 +103,22 @@ var buildDist = function(opts) {
     plugins: [
       new webpackStream.webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(
-          opts.debug ? 'development' : 'production'
+          opts.debug ? 'development' : 'production',
         ),
       }),
-      new webpackStream.webpack.optimize.OccurenceOrderPlugin(),
-      new webpackStream.webpack.optimize.DedupePlugin(),
+      new webpackStream.webpack.LoaderOptionsPlugin({
+        debug: true,
+      }),
+      new StatsPlugin(
+        '../meta/bundle-size-stats/version-' + packageData.version + '.json',
+        {
+          chunkModules: true,
+        },
+      ),
     ],
   };
   if (!opts.debug) {
-    webpackOpts.plugins.push(
-      new webpackStream.webpack.optimize.UglifyJsPlugin({
-        compress: {
-          hoist_vars: true,
-          screw_ie8: true,
-          warnings: false,
-        },
-      })
-    );
+    webpackOpts.plugins.push(new UglifyJsPlugin());
   }
   return webpackStream(webpackOpts, null, function(err, stats) {
     if (err) {
@@ -153,56 +152,61 @@ gulp.task('flow', function() {
 });
 
 gulp.task('css', function() {
-  return gulp
-    .src(paths.css)
-    .pipe(through.obj(function(file, encoding, callback) {
-      var contents = file.contents.toString();
-      var replaced = contents.replace(
-        // Regex based on MakeHasteCssModuleTransform: ignores comments,
-        // strings, and URLs
-        /\/\*.*?\*\/|'(?:\\.|[^'])*'|"(?:\\.|[^"])*"|url\([^)]*\)|(\.(?:public\/)?[\w-]*\/{1,2}[\w-]+)/g,
-        function(match, cls) {
-          if (cls) {
-            return cls.replace(/\//g, '-');
-          } else {
-            return match;
-          }
-        }
-      );
-      replaced = replaced.replace(
-        // MakeHasteCssVariablesTransform
-        /\bvar\(([\w-]+)\)/g,
-        function(match, name) {
-          var vars = {
-            'fig-secondary-text': '#9197a3',
-            'fig-light-20': '#bdc1c9',
-          };
-          if (vars[name]) {
-            return vars[name];
-          } else {
-            throw new Error('Unknown CSS variable ' + name);
-          }
-        }
-      );
-      file.contents = new Buffer(replaced);
-      callback(null, file);
-    }))
-    .pipe(concatCSS('Draft.css'))
-    // Avoid rewriting rules *just in case*, just compress
-    .pipe(cleanCSS({advanced: false}))
-    .pipe(header(COPYRIGHT_HEADER, {version: packageData.version}))
-    .pipe(gulp.dest(paths.dist));
+  return (gulp
+      .src(paths.css)
+      .pipe(
+        through.obj(function(file, encoding, callback) {
+          var contents = file.contents.toString();
+          var replaced = contents.replace(
+            // Regex based on MakeHasteCssModuleTransform: ignores comments,
+            // strings, and URLs
+            /\/\*.*?\*\/|'(?:\\.|[^'])*'|"(?:\\.|[^"])*"|url\([^)]*\)|(\.(?:public\/)?[\w-]*\/{1,2}[\w-]+)/g,
+            function(match, cls) {
+              if (cls) {
+                return cls.replace(/\//g, '-');
+              } else {
+                return match;
+              }
+            },
+          );
+          replaced = replaced.replace(
+            // MakeHasteCssVariablesTransform
+            /\bvar\(([\w-]+)\)/g,
+            function(match, name) {
+              var vars = {
+                'fig-secondary-text': '#9197a3',
+                'fig-light-20': '#bdc1c9',
+              };
+              if (vars[name]) {
+                return vars[name];
+              } else {
+                throw new Error('Unknown CSS variable ' + name);
+              }
+            },
+          );
+          file.contents = new Buffer(replaced);
+          callback(null, file);
+        }),
+      )
+      .pipe(concatCSS('Draft.css'))
+      // Avoid rewriting rules *just in case*, just compress
+      .pipe(cleanCSS({advanced: false}))
+      .pipe(header(COPYRIGHT_HEADER, {version: packageData.version}))
+      .pipe(gulp.dest(paths.dist)) );
 });
 
 gulp.task('dist', ['modules', 'css'], function() {
   var opts = {
     debug: true,
     output: 'Draft.js',
   };
-  return gulp.src('./lib/Draft.js')
+  return gulp
+    .src('./lib/Draft.js')
     .pipe(buildDist(opts))
     .pipe(derequire())
-    .pipe(header(COPYRIGHT_HEADER, {version: packageData.version}))
+    .pipe(
+      gulpif('*.js', header(COPYRIGHT_HEADER, {version: packageData.version})),
+    )
     .pipe(gulp.dest(paths.dist));
 });
 
@@ -211,16 +215,17 @@ gulp.task('dist:min', ['modules'], function() {
     debug: false,
     output: 'Draft.min.js',
   };
-  return gulp.src('./lib/Draft.js')
+  return gulp
+    .src('./lib/Draft.js')
     .pipe(buildDist(opts))
-    .pipe(header(COPYRIGHT_HEADER, {version: packageData.version}))
+    .pipe(
+      gulpif('*.js', header(COPYRIGHT_HEADER, {version: packageData.version})),
+    )
     .pipe(gulp.dest(paths.dist));
 });
 
 gulp.task('check-dependencies', function() {
-  return gulp
-    .src('package.json')
-    .pipe(gulpCheckDependencies());
+  return gulp.src('package.json').pipe(gulpCheckDependencies());
 });
 
 gulp.task('watch', function() {
@@ -232,5 +237,11 @@ gulp.task('dev', function() {
 });
 
 gulp.task('default', function(cb) {
-  runSequence('check-dependencies', 'clean', ['modules', 'flow'], ['dist', 'dist:min'], cb);
+  runSequence(
+    'check-dependencies',
+    'clean',
+    ['modules', 'flow'],
+    ['dist', 'dist:min'],
+    cb,
+  );
 });

package.json

@@ -29,13 +29,14 @@
     "lint": "eslint .",
     "format": "eslint . --fix",
     "flow": "flow src",
-    "test": "NODE_ENV=test jest",
-    "test-ci": "NODE_ENV=test npm run lint && npm run flow && npm run test"
+    "test": "cross-env NODE_ENV=test jest",
+    "test-ci": "cross-env NODE_ENV=test npm run lint && npm run flow && npm run test"
   },
   "dependencies": {
     "fbjs": "^0.8.15",
     "immutable": "~3.7.4",
-    "object-assign": "^4.1.0"
+    "object-assign": "^4.1.0",
+    "uglifyjs-webpack-plugin": "^1.1.6"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0",
@@ -45,6 +46,7 @@
     "babel-core": "^6.8.0",
     "babel-eslint": "^7.2.3",
     "babel-preset-fbjs": "^2.1.0",
+    "cross-env": "^5.1.3",
     "del": "^2.2.0",
     "envify": "^3.4.0",
     "es6-shim": "^0.34.4",
@@ -67,6 +69,7 @@
     "gulp-derequire": "^2.1.0",
     "gulp-flatten": "^0.2.0",
     "gulp-header": "1.8.2",
+    "gulp-if": "^2.0.2",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.6",
@@ -76,12 +79,13 @@
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
     "run-sequence": "^1.1.2",
+    "stats-webpack-plugin": "^0.6.2",
     "through2": "^2.0.1",
     "vinyl-buffer": "^1.0.0",
-    "webpack-stream": "^3.0.0"
+    "webpack-stream": "^4.0.0"
   },
   "devEngines": {
-    "node": "6.x || 8.x",
+    "node": "6.x || 8.x || 9.x",
     "npm": "2.x || 3.x || 5.x"
   },
   "jest": {