In the beginning...

rjz · rjz · commit c75b9f2356be · 2016-08-17T11:19:08.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+dist
+node_modules
+typings
+*.swp
+npm-debug.log
+src/**/*.js
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,16 @@
+Contributing
+===============================================================================
+
+Have something to add? Feature requests, bug reports, and contributions are
+enormously welcome!
+
+  1. Fork this repo
+  2. Update the tests and implement the change
+  3. Submit a [pull request][github-pull-request]
+
+(hint: following the conventions in the [the code review
+checklist][code-review-checklist] will expedite review and merge)
+
+[github-pull-request]: help.github.com/pull-requests/
+[code-review-checklist]: https://github.com/rjz/code-review-checklist
+
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+// MIT License
+
+Copyright (C) RJ Zaworski <rj@rjzaworski.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Typescript + React + Redux
+
+A dead-simple counter to demonstrate structure of a TypeScript-enabled redux
+application.
+
+Install and build demo:
+
+    $ npm install
+    $ npm run build
+
+...now open "index.html" in your browser to see the counter in action!
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Counter Demo</title>
+  </head>
+  <body>
+    <div id="redux-app-root">
+      Try building the demo:
+      <pre>
+      </pre>
+      ...and refreshing this page!
+    </div>
+    <script src="node_modules/react/dist/react.js"></script>
+    <script src="node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,33 @@
+const webpack = require('webpack');
+
+const webpackConfig = Object.assign({}, require('./webpack.config'), {
+  entry: {},
+  output: {},
+  cache: true,
+  externals: {}
+});
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'sinon'],
+    files: [
+      'src/**/__tests__/*spec.ts',
+      'src/**/__tests__/*spec.tsx'
+    ],
+    preprocessors: {
+      'src/**/*spec.{ts,tsx}': ['webpack']
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    reporters: ['spec'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['PhantomJS'],
+    singleRun: false
+  })
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "typescript-react-redux",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "setup": "typings install",
+    "build": "npm run setup && npm run test && webpack",
+    "watch": "webpack --watch",
+    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
+    "pretest": "npm run lint",
+    "test": "karma start karma.conf --single-run=true"
+  },
+  "typings": "typings/index.d.ts",
+  "author": "RJ Zaworski <rj@rjzaworski.com> (http://rjzaworski.com)",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2"
+  },
+  "devDependencies": {
+    "jasmine-core": "2.4.1",
+    "karma": "^1.1.2",
+    "karma-jasmine": "1.0.2",
+    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-sinon": "1.0.5",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.7.0",
+    "phantomjs-prebuilt": "^2.1.10",
+    "react-addons-test-utils": "^15.3.0",
+    "sinon": "1.17.4",
+    "source-map-loader": "0.1.5",
+    "ts-loader": "^0.8.2",
+    "tslint": "^3.14.0",
+    "typescript": "^1.8.10",
+    "typings": "1.3.2",
+    "webpack": "^1.13.1"
+  }
+}
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -0,0 +1,24 @@
+export interface Action<T, P> {
+  type: T
+  payload?: P
+}
+
+type CounterActionTypes = 'INCREMENT_COUNTER' | 'DECREMENT_COUNTER'
+
+type IncrementCounterPayload = { delta: number }
+
+export type IncrementCounter = Action<CounterActionTypes, IncrementCounterPayload>
+
+export const incrementCounter = (delta: number): IncrementCounter => ({
+  type: 'INCREMENT_COUNTER',
+  payload: { delta },
+})
+
+type DecrementCounterPayload = { delta: number }
+
+export type DecrementCounter = Action<CounterActionTypes, DecrementCounterPayload>
+
+export const decrementCounter = (delta: number): DecrementCounter => ({
+  type: 'INCREMENT_COUNTER',
+  payload: { delta },
+})
diff --git a/src/components/__tests__/counter_spec.tsx b/src/components/__tests__/counter_spec.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react'
+import * as TestUtils from 'react-addons-test-utils'
+
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
+
+import { Counter } from '../counter'
+import { reducers } from '../../reducers'
+
+describe('components/Counter', () => {
+
+  function renderElement (el: React.ReactElement<{}>) {
+    return TestUtils.renderIntoDocument(el) as React.Component<{}, {}>
+  }
+
+  function findComponentByType(root: React.Component<{}, {}>, type: any): React.Component<{}, {}> {
+    return TestUtils.findRenderedComponentWithType(root, type)
+  }
+
+  function setup (): React.Component<{}, {}> {
+    const store = createStore(reducers)
+    const wrapper = renderElement(
+      <Provider store={store}>
+        <Counter label='a counter!' />
+      </Provider>)
+    const counter = findComponentByType(wrapper, Counter)
+    return counter
+  }
+
+  it('starts at 0', () => {
+    const counter = setup()
+    const pre = TestUtils.findRenderedDOMComponentWithTag(counter, 'pre')
+    expect(pre.textContent).toEqual('counter = 0')
+  })
+
+  it('shows a label', () => {
+    const counter = setup()
+    const label = TestUtils.findRenderedDOMComponentWithTag(counter, 'label')
+    expect(label.textContent).toEqual('a counter!')
+  })
+
+
+  describe('clicking "increment"', () => {
+    let counter: React.Component<{}, {}>
+
+    beforeEach(() => {
+      counter = setup()
+      const buttonEl = TestUtils.findRenderedDOMComponentWithTag(counter, 'button')
+      TestUtils.Simulate.click(buttonEl)
+      TestUtils.Simulate.click(buttonEl)
+      TestUtils.Simulate.click(buttonEl)
+    })
+
+    it('increments counter', () => {
+      const pre = TestUtils.findRenderedDOMComponentWithTag(counter, 'pre')
+      expect(pre.textContent).toEqual('counter = 3')
+    })
+  })
+})
diff --git a/src/components/counter.tsx b/src/components/counter.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react'
+import * as redux from 'redux'
+import { connect } from 'react-redux'
+
+import { incrementCounter } from '../actions'
+import { Store } from '../reducers'
+
+interface OwnProps {
+  label: string
+}
+
+interface ConnectedState {
+  counter: { value: number }
+}
+
+interface ConnectedDispatch {
+  increment: (n: number) => void
+}
+
+const mapStateToProps = (state: Store.All, ownProps: OwnProps): ConnectedState => ({
+  counter: state.counter,
+})
+
+const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): ConnectedDispatch => ({
+  increment: (n: number) => {
+    dispatch(incrementCounter(n))
+  },
+})
+
+class CounterComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps, {}> {
+
+  _onClickIncrement = () => {
+    this.props.increment(1)
+  }
+
+  render () {
+    const { counter, label } = this.props
+    return <div>
+      <label>{label}</label>
+      <pre>counter = {counter.value}</pre>
+      <button ref='increment' onClick={this._onClickIncrement}>click me!</button>
+    </div>
+  }
+}
+
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
+export const Counter: React.ComponentClass<OwnProps> = connect(mapStateToProps, mapDispatchToProps)(CounterComponent)
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react' // tslint:disable-line
+import * as ReactDOM from 'react-dom'
+import * as Redux from 'redux'
+import { Provider } from 'react-redux'
+
+import {
+  reducers,
+  Store,
+} from './reducers'
+
+import { Counter } from './components/counter'
+
+let store: Redux.Store<Store.All> = Redux.createStore(reducers)
+
+// Commented out ("let HTML app be HTML app!")
+window.addEventListener('DOMContentLoaded', () => {
+  const rootEl = document.getElementById('redux-app-root')
+  if (rootEl) ReactDOM.render(
+    <Provider store={store}>
+      <Counter label='who\'s counting?' />
+    </Provider>
+  , rootEl)
+})
diff --git a/src/reducers/__tests__/index_spec.ts b/src/reducers/__tests__/index_spec.ts
@@ -0,0 +1,22 @@
+import { createStore } from 'redux'
+
+import { reducers } from '../index'
+import { incrementCounter } from '../../actions'
+
+describe('reducers/counter', () => {
+  it('starts at 0', () => {
+    const store = createStore(reducers)
+    const { counter } = store.getState()
+    expect(counter.value).toEqual(0)
+  })
+
+  it('increments', (done) => {
+    const store = createStore(reducers)
+    store.subscribe(() => {
+      const { counter } = store.getState()
+      expect(counter.value).toEqual(3)
+      done()
+    })
+    store.dispatch(incrementCounter(3))
+  })
+})
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
@@ -0,0 +1,35 @@
+import { combineReducers } from 'redux'
+
+import {
+  IncrementCounter,
+  DecrementCounter,
+} from '../actions'
+
+export namespace Store {
+
+  export type Counter = { value: number }
+
+  export type All = {
+    counter: Counter
+  }
+}
+
+const initialState: Store.Counter = {
+  value: 0,
+}
+
+function counter (state: Store.Counter = initialState, action: IncrementCounter | DecrementCounter): Store.Counter {
+  const { value } = state
+  switch (action.type) {
+    case 'INCREMENT_COUNTER': // not checked, pending Microsoft/TypeScript#9407
+      const { payload } = action as IncrementCounter
+      const newValue = value + payload.delta
+      return { value: newValue }
+  }
+
+  return state
+}
+
+export const reducers = combineReducers<Store.All>({
+  counter,
+})
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "ES5",
+    "jsx": "react"
+  },
+  "files": [
+    "typings/index.d.ts"
+  ],
+  "exclude": []
+}
diff --git a/tslint.json b/tslint.json
diff --git a/typings.json b/typings.json
diff --git a/webpack.config.js b/webpack.config.js
