Perform the merge + fixups.

Author: DanielRosenwasser

es6-babel-react-flux-karma/README.md

@@ -1,4 +1,4 @@
-# ES6 + TypeScript + Babel + React + Karma: The Secret Recipe
+# TypeScript, Babel, React, and Karma Sample
 
 ## Getting started
 
@@ -13,7 +13,7 @@ npm run serve
 This will:
 
 1. Download the npm packages you need
-2. Download the type definitions 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)
 
 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.

es6-babel-react-flux-karma/src/actions/GreetingActions.ts

@@ -1,23 +1,17 @@
-import AppDispatcher from '../dispatcher/AppDispatcher';
-import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
+import {TypedEvent, AppDispatcher} from '../dispatcher/AppDispatcher';
+
+export class AddGreetingEvent extends TypedEvent<string> {}
+export class NewGreetingChanged extends TypedEvent<string> {}
+export class RemoveGreeting extends TypedEvent<string> {}
 
 export function addGreeting(newGreeting: string) {
-  AppDispatcher.dispatch({
-    newGreeting,
-    type: GreetingActionTypes.ADD_GREETING
-  });
+  AppDispatcher.dispatch(new AddGreetingEvent(newGreeting));
 }
 
 export function newGreetingChanged(newGreeting: string) {
-  AppDispatcher.dispatch({
-    newGreeting,
-    type: GreetingActionTypes.NEW_GREETING_CHANGED
-  });
+  AppDispatcher.dispatch(new NewGreetingChanged(newGreeting));
 }
 
 export function removeGreeting(greetingToRemove: string) {
-  AppDispatcher.dispatch({
-    greetingToRemove,
-    type: GreetingActionTypes.REMOVE_GREETING
-  });
+  AppDispatcher.dispatch(new RemoveGreeting(greetingToRemove));
 }

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

@@ -5,18 +5,21 @@ import GreetingState from '../types/GreetingState';
 import WhoToGreet from './WhoToGreet';
 import Greeting from './Greeting';
 
-class App extends React.Component<any, GreetingState> {
-  constructor(props) {
+class App extends React.Component<{}, GreetingState> {
+  constructor(props: {}) {
     super(props);
-    this.state = this._getStateFromStores();
+    this.state = this.getStateFromStores();
+  }
+  private onChange = () => {
+    this.setState(this.getStateFromStores());
   }
 
-  componentWillMount() {
-    GreetingStore.addChangeListener(this._onChange);
+  public componentWillMount() {
+    GreetingStore.addChangeListener(this.onChange);
   }
 
-  componentWillUnmount() {
-    GreetingStore.removeChangeListener(this._onChange);
+  public componentWillUnmount() {
+    GreetingStore.removeChangeListener(this.onChange);
   }
 
   render() {
@@ -32,11 +35,7 @@ class App extends React.Component<any, GreetingState> {
     );
   }
 
-  _onChange = () => {
-    this.setState(this._getStateFromStores());
-  }
-
-  _getStateFromStores() {
+  private getStateFromStores() {
     return GreetingStore.getState();
   }
 }

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

@@ -7,7 +7,7 @@ interface Props {
 }
 
 class Greeting extends React.Component<Props, any> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
@@ -28,7 +28,7 @@ class Greeting extends React.Component<Props, any> {
     );
   }
 
-  _onClick = (event) => {
+  _onClick = (event: React.MouseEvent) => {
     GreetingActions.removeGreeting(this.props.targetOfGreeting);
   }
 }

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

@@ -6,7 +6,7 @@ interface Props {
 }
 
 class WhoToGreet extends React.Component<Props, any> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
@@ -35,12 +35,12 @@ class WhoToGreet extends React.Component<Props, any> {
     return !this.props.newGreeting;
   }
 
-  _handleNewGreetingChange = (event) => {
-    const { target: { value: newGreeting } } = event;
+  _handleNewGreetingChange = (event: React.FormEvent) => {
+    const newGreeting = (event.target as HTMLInputElement).value;
     GreetingActions.newGreetingChanged(newGreeting);
   }
 
-  _onSubmit = (event) => {
+  _onSubmit = (event: React.FormEvent) => {
     event.preventDefault();
 
     if (!this._preventSubmission) {

es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts

@@ -1,5 +1,11 @@
 import { Dispatcher } from 'flux';
 
-const dispatcherInstance = new Dispatcher();
+export class TypedEvent<P> {
+  constructor(public payload: P) {}
+}
 
-export default dispatcherInstance;
+export type Event = TypedEvent<any>;
+
+const dispatcherInstance: Flux.Dispatcher<Event> = new Dispatcher();
+
+export { dispatcherInstance as AppDispatcher };

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

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>ES6 + Babel + React + Flux + Karma: The Secret Recipe</title>
+    <title>TypeScript, Babel, React, Flux, and Karma</title>
 
     <!-- inject:css -->
     <!-- endinject -->

es6-babel-react-flux-karma/src/index.html

@@ -1,60 +1,56 @@
 import { EventEmitter } from 'events';
+import { Event } from '../dispatcher/AppDispatcher';
+import * as Flux from "flux";
 
 const CHANGE_EVENT = 'change';
 
 class FluxStore<TState> {
-  _changed: boolean;
-  _emitter: EventEmitter;
-  dispatchToken: string;
-  _dispatcher: Flux.Dispatcher<any>;
-  _cleanStateFn: () => TState;
-  _state: TState;
-
-  constructor(dispatcher, cleanStateFn) {
-    this._emitter = new EventEmitter();
-    this._changed = false;
-    this._dispatcher = dispatcher;
+  private changed: boolean;
+  private emitter: EventEmitter;
+  private dispatchToken: string;
+  private dispatcher: Flux.Dispatcher<Event>;
+  private cleanStateFn: () => TState;
+  protected state: TState;
+
+  constructor(dispatcher: Flux.Dispatcher<Event>, public onDispatch: (action: Event) => void, cleanStateFn: () => TState) {
+    this.emitter = new EventEmitter();
+    this.changed = false;
+    this.dispatcher = dispatcher;
     this.dispatchToken = dispatcher.register(payload => {
-      this._invokeOnDispatch(payload);
+      this.invokeOnDispatch(payload);
     });
 
-    this._cleanStateFn = cleanStateFn;
-    this._state = this._cleanStateFn();
+    this.cleanStateFn = cleanStateFn;
+    this.state = this.cleanStateFn();
   }
 
   /**
    * Is idempotent per dispatched event
    */
   emitChange() {
-    this._changed = true;
+    this.changed = true;
   }
 
-  hasChanged() { return this._changed; }
+  hasChanged() { return this.changed; }
 
-  addChangeListener(callback) {
-    this._emitter.on(CHANGE_EVENT, callback);
+  addChangeListener(callback: () => void) {
+    this.emitter.on(CHANGE_EVENT, callback);
   }
 
-  removeChangeListener(callback) {
-    this._emitter.removeListener(CHANGE_EVENT, callback);
+  removeChangeListener(callback: () => void) {
+    this.emitter.removeListener(CHANGE_EVENT, callback);
   }
 
-  _cleanState() {
-    this._changed = false;
-    this._state = this._cleanStateFn();
+  protected cleanState() {
+    this.changed = false;
+    this.state = this.cleanStateFn();
   }
 
-  _invokeOnDispatch(payload) {
-    this._changed = false;
-    this._onDispatch(payload);
-    if (this._changed) {
-      this._emitter.emit(CHANGE_EVENT);
-    }
-  }
-
-  _onDispatch(payload) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.error(`${this.constructor.name} has not overridden FluxStore.__onDispatch(), which is required`); // eslint-disable-line no-console
+  private invokeOnDispatch(payload: Event) {
+    this.changed = false;
+    this.onDispatch(payload);
+    if (this.changed) {
+      this.emitter.emit(CHANGE_EVENT);
     }
   }
 }

es6-babel-react-flux-karma/src/stores/FluxStore.ts

@@ -1,36 +1,36 @@
 import FluxStore from './FluxStore';
-import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
-import AppDispatcher from '../dispatcher/AppDispatcher';
+import {Event, AppDispatcher} from '../dispatcher/AppDispatcher';
 import GreetingState from '../types/GreetingState';
+import { AddGreetingEvent, RemoveGreeting, NewGreetingChanged } from '../actions/GreetingActions';
 
 class GreeterStore extends FluxStore<GreetingState> {
-  constructor(dispatcher) {
-    super(dispatcher, () => ({
+  constructor(dispatcher: Flux.Dispatcher<Event>) {
+    const onDispatch = (action: Event) => {
+      if (action instanceof AddGreetingEvent) {
+        const { payload } = action;
+        this.state.newGreeting = '';
+        this.state.greetings = this.state.greetings.concat(payload);
+        this.emitChange();
+      }
+      else if (action instanceof RemoveGreeting) {
+        const {payload} = action;
+        this.state.greetings = this.state.greetings.filter(g => g !== payload);
+        this.emitChange();
+      }
+      else if (action instanceof NewGreetingChanged) {
+        const {payload} = action;
+        this.state.newGreeting = payload;
+        this.emitChange();
+      }
+    }
+    super(dispatcher, onDispatch, () => ({
       greetings: [],
       newGreeting: ''
     }));
   }
 
   getState() {
-    return this._state
-  }
-
-  _onDispatch(action) {
-    switch(action.type) {
-      case GreetingActionTypes.ADD_GREETING:
-        this._state.newGreeting = '';
-        this._state.greetings = this._state.greetings.concat(action.newGreeting);
-        this.emitChange();
-        break;
-      case GreetingActionTypes.REMOVE_GREETING:
-        this._state.greetings = this._state.greetings.filter(g => g !== action.greetingToRemove);
-        this.emitChange();
-        break;
-      case GreetingActionTypes.NEW_GREETING_CHANGED:
-        this._state.newGreeting = action.newGreeting;
-        this.emitChange();
-        break;
-    }
+    return this.state
   }
 }