Upgrade to TypeScript 2.1

Use @types to acquire type definitions
Upgrade emit to ES2016
Upgrade React to 15
Switch to using fbemitter

Author: johnnyreilly

react-flux-babel-karma/README.md

@@ -2,19 +2,17 @@
 
 ## Getting started
 
-You'll need [node / npm](https://nodejs.org/) and [Typings](https://github.com/typings/typings) installed globally.  To get up and running just enter:
+You'll need [node / npm](https://nodejs.org/) installed.  To get up and running just enter:
 
 ```
 npm install
-typings install
 npm run serve
 ```
 
 This will:
 
-1. Download the npm packages you need
-2. Download the type definitions from DefinitelyTyped that you need.
-3. Compile the code and serve it up at [http://localhost:8080](http://localhost:8080)
+1. Download the npm packages you need (including the type definitions from DefinitelyTyped)
+2. Compile the code and serve it up at [http://localhost:8080](http://localhost:8080)
 
 Now you need dev tools.  There's a world of choice out there; there's [Atom](https://atom.io/), there's [VS Code](https://www.visualstudio.com/en-us/products/code-vs.aspx), there's [Sublime](http://www.sublimetext.com/).  There's even something called [Visual Studio](http://www.visualstudio.com).  It's all your choice really.
 

react-flux-babel-karma/gulp/webpack.js

@@ -3,91 +3,96 @@
 var gulp = require('gulp');
 var gutil = require('gulp-util');
 var webpack = require('webpack');
-var failPlugin = require('webpack-fail-plugin');
 var WebpackNotifierPlugin = require('webpack-notifier');
+var failPlugin = require('webpack-fail-plugin');
 var webpackConfig = require('../webpack.config.js');
+var packageJson = require('../package.json');
 
 function buildProduction(done) {
-  // modify some webpack config options
-  var myProdConfig = Object.create(webpackConfig);
-  myProdConfig.output.filename = '[name].[hash].js';
-
-  myProdConfig.plugins = myProdConfig.plugins.concat(
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.[hash].js' }),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin(),
-    failPlugin
-  );
-
-  // run webpack
-  webpack(myProdConfig, function(err, stats) {
-    if (err) { throw new gutil.PluginError('webpack:build', err); }
-    gutil.log('[webpack:build]', stats.toString({
-      colors: true
-    }));
-
-    if (done) { done(); }
-  });
+   // modify some webpack config options
+   var myProdConfig = Object.create(webpackConfig);
+   myProdConfig.output.filename = '[name].[hash].js';
+
+   myProdConfig.plugins = myProdConfig.plugins.concat(
+      new webpack.DefinePlugin({
+          'process.env': {
+              'NODE_ENV': JSON.stringify('production')
+         }
+      }),
+      new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.[hash].js' }),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin(),
+      failPlugin
+   );
+
+   // run webpack
+   webpack(myProdConfig, function (err, stats) {
+      if (err) { throw new gutil.PluginError('webpack:build', err); }
+      gutil.log('[webpack:build]', stats.toString({
+         colors: true
+      }));
+
+      if (done) { done(); }
+   });
 }
 
 function createDevCompiler() {
-  // modify some webpack config options
-  var myDevConfig = Object.create(webpackConfig);
-  myDevConfig.devtool = 'inline-source-map';
-  myDevConfig.debug = true;
-
-  myDevConfig.plugins = myDevConfig.plugins.concat(
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }),
-    new WebpackNotifierPlugin({ title: 'Webpack build', excludeWarnings: true })
-  );
-
-  // create a single instance of the compiler to allow caching
-  return webpack(myDevConfig);
+   // modify some webpack config options
+   var myDevConfig = Object.create(webpackConfig);
+   myDevConfig.devtool = 'inline-source-map';
+   myDevConfig.debug = true;
+
+   myDevConfig.plugins = myDevConfig.plugins.concat(
+      new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }),
+      new WebpackNotifierPlugin({ title: 'Webpack build', excludeWarnings: true })
+   );
+
+   // create a single instance of the compiler to allow caching
+   return webpack(myDevConfig);
 }
 
-function buildDevelopment(done, devCompiler) {
-  // run webpack
-  devCompiler.run(function(err, stats) {
-    if (err) { throw new gutil.PluginError('webpack:build-dev', err); }
-    gutil.log('[webpack:build-dev]', stats.toString({
-      chunks: false,
-      colors: true
-    }));
-
-    if (done) { done(); }
-  });
+function build() {
+   return new Promise(function (resolve, reject) {
+      buildProduction(function (err) {
+         if (err) {
+            reject(err);
+         } else {
+            resolve('webpack built');
+         }
+      });
+   });
 }
 
-
-function bundle(options) {
-  var devCompiler;
-
-  function build(done) {
-    if (options.shouldWatch) {
-      buildDevelopment(done, devCompiler);
-    } else {
-      buildProduction(done);
-    }
-  }
-
-  if (options.shouldWatch) {
-    devCompiler = createDevCompiler();
-
-    gulp.watch('src/**/*', function() { build(); });
-  }
-
-  return new Promise(function(resolve, reject) {
-    build(function (err) {
-      if (err) {
-        reject(err);
-      } else {
-        resolve('webpack built');
-      }
-    });
-  });
+function watch() {
+   var firstBuildDone = false;
+
+   return new Promise(function (resolve, reject) {
+      var devCompiler = createDevCompiler();
+      devCompiler.watch({ // watch options:
+         aggregateTimeout: 300 // wait so long for more changes
+      }, function (err, stats) {
+         if (err) {
+            if (!firstBuildDone) {
+               firstBuildDone = true; 
+               reject(err);
+            }
+            throw new gutil.PluginError('webpack:build-dev', err);
+         } else {
+            if (!firstBuildDone) {
+               firstBuildDone = true; 
+               resolve('webpack built');
+            }
+         }
+
+         gutil.log('[webpack:build-dev]', stats.toString({
+            chunks: false,
+            colors: true
+         }));
+      });
+   });
 }
 
 module.exports = {
-  build: function() { return bundle({ shouldWatch: false }); },
-  watch: function() { return bundle({ shouldWatch: true  }); }
-};
+   build: function () { return build(); },
+   watch: function () { return watch(); }
+};

react-flux-babel-karma/karma.conf.js

@@ -9,9 +9,9 @@ module.exports = function(config) {
     browsers: [ 'PhantomJS' ],
 
     files: [
-      'test/import-babel-polyfill.js', // This ensures we have the es6 shims in place from babel
-      'test/**/*.tests.ts',
-      'test/**/*.tests.tsx'
+      // This ensures we have the es6 shims in place from babel and that angular and angular-mocks are loaded
+      // and then loads all the tests
+      'test/main.js'
     ],
 
     port: 9876,
@@ -21,13 +21,11 @@ module.exports = function(config) {
     logLevel: config.LOG_INFO, //config.LOG_DEBUG
 
     preprocessors: {
-      'test/import-babel-polyfill.js': [ 'webpack', 'sourcemap' ],
-      'src/**/*.{ts,tsx}': [ 'webpack', 'sourcemap' ],
-      'test/**/*.tests.{ts,tsx}': [ 'webpack', 'sourcemap' ]
+      'test/main.js': [ 'webpack', 'sourcemap' ]
     },
 
     webpack: {
-      devtool: 'eval-source-map', //'inline-source-map',
+      devtool: 'inline-source-map',
       debug: true,
       module: webpackConfig.module,
       resolve: webpackConfig.resolve

react-flux-babel-karma/package.json

@@ -16,7 +16,7 @@
   "keywords": [
     "React",
     "Flux",
-    "ES6",
+    "ES2016",
     "typescript"
   ],
   "author": "John Reilly",
@@ -26,16 +26,22 @@
   },
   "homepage": "https://github.com/Microsoft/TypeScriptSamples/tree/master/es6-babel-react-flux-karma#readme",
   "devDependencies": {
+    "@types/fbemitter": "^2.0.32",
+    "@types/flux": "0.0.32",
+    "@types/jasmine": "^2.5.35",
+    "@types/react": "^0.14.41",
+    "@types/react-addons-test-utils": "^0.14.15",
+    "@types/react-bootstrap": "0.0.33",
+    "@types/react-dom": "^0.14.18",
     "babel": "^6.0.0",
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
-    "babel-polyfill": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
+    "babel-preset-es2016": "^6.16.0",
     "babel-preset-react": "^6.0.0",
     "del": "^2.0.2",
     "eslint": "^2.0.0",
     "express": "^4.13.3",
-    "flux": "^2.0.3",
     "glob": "^7.0.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
@@ -50,23 +56,28 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.6",
     "jasmine-core": "^2.3.4",
-    "karma": "^0.13.10",
-    "karma-coverage": "^0.5.2",
-    "karma-jasmine": "^0.3.6",
-    "karma-junit-reporter": "^0.3.7",
+    "karma": "^1.2.0",
+    "karma-coverage": "^1.0.0",
+    "karma-jasmine": "^1.0.0",
+    "karma-junit-reporter": "^1.0.0",
     "karma-mocha-reporter": "^2.0.0",
-    "karma-notify-reporter": "^0.1.1",
+    "karma-notify-reporter": "^1.0.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.6",
     "karma-webpack": "^1.7.0",
     "phantomjs-prebuilt": "^2.1.4",
-    "react": "^0.14.3",
-    "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "ts-loader": "^0.8.1",
-    "typescript": "^1.8.0",
+    "ts-loader": "^1.3.1",
+    "typescript": "^2.1.4",
     "webpack": "^1.12.2",
     "webpack-fail-plugin": "^1.0.4",
     "webpack-notifier": "^1.2.1"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.0.0",
+    "flux": "^2.0.3",
+    "fbemitter": "^2.0.2",
+    "react": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1"
   }
 }

react-flux-babel-karma/src/components/App.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
+import React from 'react';
+import FBEmitter from "fbemitter";
+
 import GreetingStore from '../stores/GreetingStore';
-import * as GreetingActions from '../actions/GreetingActions';
 import GreetingState from '../types/GreetingState';
 import WhoToGreet from './WhoToGreet';
 import Greeting from './Greeting';
 
 class App extends React.Component<{}, GreetingState> {
+  eventSubscription: FBEmitter.EventSubscription;
   constructor(props: {}) {
     super(props);
     this.state = this.getStateFromStores();
@@ -15,11 +17,11 @@ class App extends React.Component<{}, GreetingState> {
   }
 
   public componentWillMount() {
-    GreetingStore.addChangeListener(this.onChange);
+    this.eventSubscription = GreetingStore.addChangeListener(this.onChange);
   }
 
   public componentWillUnmount() {
-    GreetingStore.removeChangeListener(this.onChange);
+    this.eventSubscription.remove();
   }
 
   render() {

react-flux-babel-karma/src/components/Greeting.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+
 import * as GreetingActions from '../actions/GreetingActions';
 
 interface Props {
@@ -28,7 +29,7 @@ class Greeting extends React.Component<Props, any> {
     );
   }
 
-  _onClick = (event: React.MouseEvent) => {
+  _onClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
     GreetingActions.removeGreeting(this.props.targetOfGreeting);
   }
 }

react-flux-babel-karma/src/components/WhoToGreet.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+
 import * as GreetingActions from '../actions/GreetingActions';
 
 interface Props {
@@ -35,12 +36,12 @@ class WhoToGreet extends React.Component<Props, any> {
     return !this.props.newGreeting;
   }
 
-  _handleNewGreetingChange = (event: React.FormEvent) => {
+  _handleNewGreetingChange = (event: React.FormEvent<HTMLInputElement>) => {
     const newGreeting = (event.target as HTMLInputElement).value;
     GreetingActions.newGreetingChanged(newGreeting);
   }
 
-  _onSubmit = (event: React.FormEvent) => {
+  _onSubmit = (event: React.FormEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
     if (!this._preventSubmission) {

react-flux-babel-karma/src/dispatcher/AppDispatcher.ts

@@ -6,6 +6,6 @@ export class TypedEvent<P> {
 
 export type Event = TypedEvent<any>;
 
-const dispatcherInstance: Flux.Dispatcher<Event> = new Dispatcher();
+const dispatcherInstance: Dispatcher<Event> = new Dispatcher();
 
 export { dispatcherInstance as AppDispatcher };

react-flux-babel-karma/src/main.tsx

@@ -1,6 +1,7 @@
 import 'babel-polyfill';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 import App from './components/App';
 
 ReactDOM.render(<App />, document.getElementById('content'));