Universal React and Redux

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');

const path = require('path');
const production = process.env.NODE_ENV === 'production';

const config = {
  entry: {
    index: [
      './src/index.tsx',
    ],
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, '_client'),
    publicPath: 'assets',
  },

  // Enable source maps for debugging webpack's output.
  devtool: 'source-map',
  debug: !production,
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    root: path.join(__dirname, 'src'),
  },

  module: {
    loaders: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      { test: /\.tsx?$/, loader: 'ts-loader' },
    ],

    preLoaders: [
      // All output '.js' files will have any source maps re-processed by 'source-map-loader'.
      { test: /\.js$/, loader: 'source-map-loader' },
    ],
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
  },
};

module.exports = config;

import * as React from 'react';
import * as test from 'tape';
import { createRenderer } from 'react-addons-test-utils';

import { Hello } from './Hello';

test('Hello Test', (t: test.Test) : void => {
  t.equal(typeof Hello, 'function', 'Check if Hello is a function');

  const compiler = 'TypeScript';
  const framework = 'React';

  const test = <Hello compiler={compiler} framework={framework} />;
  t.deepEqual(test.props, { compiler: compiler, framework: framework }, 'Check is Hello returns correctly');

  const renderer = createRenderer();
  renderer.render(<Hello compiler={compiler} framework={framework} />);
  const result = renderer.getRenderOutput();
  t.equal(result.type, 'div', 'Check Hello returns div');

  t.end();
});

import * as React from 'react';

export interface HelloProps {
  compiler: string;
  framework: string;
}

export class Hello extends React.Component<HelloProps, {}> {
  render() {
    return (
      <div>
        <h1>This page uses {this.props.compiler} and {this.props.framework}!</h1>
      </div>
    );
  }
}

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');

const webpack = require('webpack');
const config = require('./webpack.config'); // Get main config

config.cache = true;
config.debug = true;
config.devtool = 'inline-source-map';

// This will compile and reload code changes
config.entry.index.unshift('webpack-dev-server/client?http://localhost:8080/');

config.plugins = [
  new webpack.HotModuleReplacementPlugin(),
];

config.devServer = {
  hot: true,
  inline: true,
};

module.exports = config;

import * as React from 'react';

export interface HelloProps {
  compiler: string;
  framework: string;
}

export class Hello extends React.Component<HelloProps, {}> {
  render() {
    <div>
      <h1>UPDATED!! This page uses {this.props.compiler} and {this.props.framework}!</h1>
    </div>
  }

}

import * as React from 'react';
import * as test from 'tape';
import { createRenderer } from 'react-addons-test-utils';

import { Hello } from './Hello';

test('Hello Test', (t: test.Test) : void => {
  t.equal(typeof Hello, 'function', 'Check if Hello is a function');

  const compiler = 'TypeScript';
  const framework = 'React';

  const test = <Hello compiler={compiler} framework={framework} />;
  t.deepEqual(test.props, { compiler: compiler, framework: framework }, 'Check is Hello returns correctly');

  const renderer = createRenderer();
  renderer.render(<Hello compiler={compiler} framework={framework} />);
  const result = renderer.getRenderOutput();
  t.equal(result.type, 'div', 'Check Hello returns div');

  t.end();
});

import * as React from 'react';

export class Home extends React.Component<any, any> {
  render() {
    return (
      <h1>Index</h1>
    );
  }
}

import * as React from 'react';

export class About extends React.Component<any, any> {
  render() {
    return (
      <h1>About</h1>
    );
  }
}

import * as React from 'react';

export function NotFound() {
  return (
    <h1>404</h1>
  );
};

import * as React from 'react';
import { Link } from 'react-router';

export function Layout(props: React.Props<any>) {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/hello">Hello</Link>
        </li>
      </ul>
      <div>
        {props.children}
      </div>
    </div>
  );
};

import * as React from 'react';
import * as test from 'tape';

import { render } from 'react-dom';
import { Router, createMemoryHistory } from 'react-router';
import Routes from '../routes';

require('jsdom-global')(); // Used to make available the DOM element document

const Routing = (
  <Router history={createMemoryHistory('/')}>
    {Routes}
  </Router>
);

test('Test Routes', (t: test.Test) : void => {
  let node = document.createElement('div');

  render((Routing), node, () => {
    t.notEqual(node.textContent.indexOf('Index'), -1, 'Index page found');
  });

  Routing.props.history.push('/hello');
  render((Routing), node, () => {
    t.notEqual(node.textContent.indexOf('This page uses TypeScript and React!'), -1, 'Hello page found');
  });

  Routing.props.history.push('/about');
  render((Routing), node, () => {
    t.notEqual(node.textContent.indexOf('About'), -1, 'About page found');
  });

  Routing.props.history.push('/doesnotexist');
  render((Routing), node, () => {
    t.notEqual(node.textContent.indexOf('404'), -1, '404 page found');
  });

  t.end();
});

import * as React from 'react';
import { IndexRoute, Route } from 'react-router';

import {Hello} from '../components/Hello';
import {Layout} from '../layout';
import {About} from '../views/about';
import {Home} from '../views';
import {NotFound} from '../views/404';

const Component = (compiler: string, framework: string) => {
  return <Hello compiler={compiler} framework={framework} />;
};

export default (
  <Route path="/" component={Layout}>
    <IndexRoute component={Home} />

    <Route path="/about" component={About} />
    <Route path="/hello" component={Component.bind(this, 'TypeScript', 'React')} />

    <Route path="*" component={NotFound} />
  </Route>
);

import * as React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import Routes from './routes';

const component = (
  <Router history={browserHistory}>
    {Routes}
  </Router>
);

render(component, document.getElementById('example'));

import * as test from 'tape';
import * as counter from './counter';

test('Counter Actions Test', (t: test.Test) : void => {
  const increment = counter.increment();
  const decrement = counter.decrement();

  t.equal(increment.type, counter.INCREMENT, 'Test increment action');
  t.equal(decrement.type, counter.DECREMENT, 'Test decrement action');
  t.end();
});

export const DECREMENT = 'DECREMENT';
export const INCREMENT = 'INCREMENT';

export interface Actions extends Object {
  type: string;
}

export function decrement() : Actions {
  return {
    type: DECREMENT,
  };
}

export function increment() : Actions {
  return {
    type: INCREMENT,
  };
}

import * as test from 'tape';
import {increment, decrement} from '../actions/counter';
import {counterReducer} from './counter';

test('Reducers Test', (t: test.Test) : void => {
  t.equal(counterReducer(0, increment()), 1, 'Test increment');
  t.equal(counterReducer(1, decrement()), 0, 'Test decrement');
  t.equal(counterReducer(null, increment()), 1, 'Test null state');
  t.equal(counterReducer(undefined, increment()), 1, 'Test undefined state');
  t.equal(counterReducer(0, { type: 'unknown' }), 0, 'Test unknown action type');
  t.equal(counterReducer(), 0, 'Test missing action type');
  t.end();
});

import {DECREMENT, INCREMENT, Actions} from '../actions/counter';

export function counterReducer(state: number = 0, action: Actions = { type: '' }) {
  switch (action.type) {
    case DECREMENT:
      return state - 1;
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
}

import * as React from 'react';
import * as test from 'tape';
import { createRenderer } from 'react-addons-test-utils';

import * as Actions from './actions/counter';
import {CounterComponent, mapDispatchToProps, getActions, mapStateToProps} from './Counter';

test('Counter Presentation Tests', (t: test.Test) : void => {
  const increment = (a: number) => { return a + 1; };
  const decrement = (a: number) => { return a - 1; };

  const test1 = <CounterComponent counter={0} decrement={decrement} increment={increment} />;
  t.deepEqual(test1.props,
    { counter: 0, decrement, increment }, 'Check Counter props');

  const renderer = createRenderer();
  renderer.render(<CounterComponent counter={0} decrement={increment} increment={decrement} />);
  const result = renderer.getRenderOutput();
  t.equal(result.type, 'div', 'Check Counter returns div');

  t.end();
});

test('Counter Tests', (t: test.Test) : void => {
  let actions: any = {
    a: 1,
    b: 2,
    method1: (a: number) => (a + 1),
    method2: (a: number) => (a - 1),
  };
  let test: any = getActions(actions);
  let expected: any = {method1: actions.method1, method2: actions.method2};

  t.deepEqual(test, expected, 'Check getActions method');

  const state = {
    counterReducer: 1
  };

  t.deepEqual(mapStateToProps(state), {counter: 1}, 'Check mapStateToProps method');

  actions = Actions;
  test = Object.keys(mapDispatchToProps(''));
  expected = Object.keys(Actions).filter(a => (typeof actions[a] === 'function'));
  t.deepEqual(test, expected, 'Check mapDispatchToProps method');

  t.end();
});

import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import * as Actions from './actions/counter';

export interface CounterProps {
  counter: number;
  increment: Function;
  decrement: Function;
}

export class CounterComponent extends React.Component<CounterProps, any>  {
  static propTypes = {
    counter: React.PropTypes.number.isRequired,
    increment: React.PropTypes.func.isRequired,
    decrement: React.PropTypes.func.isRequired,
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.props.counter}</h2>
        <div>
          <button onClick={this.props.increment}>Increment</button>
          <button onClick={this.props.decrement}>Decrement</button>
        </div>
      </div>
    );
  }
}

export const getActions = (actions: any) : any => {
  const obj: any = {};
  const filter: any = Object.keys(actions).filter(a => (typeof actions[a] === 'function'));

  filter.forEach((item: any) => {
    obj[item] = actions[item];
  });

  return obj;
};

export const mapStateToProps = (state: any) => ({
    counter: state.counterReducer
});

export const mapDispatchToProps = (dispatch: any) => {
  return bindActionCreators(getActions(Actions), dispatch);
};

const Counter = connect(
  mapStateToProps,
  mapDispatchToProps
)(CounterComponent as any);

export {
  Counter
};

import {combineReducers} from 'redux';
import {routerReducer} from 'react-router-redux';
import {counterReducer} from './components/reducers/counter';

export default combineReducers({
  counterReducer,
  routing: routerReducer
});

import * as React from 'react';
import * as test from 'tape';

import configureStore from './store';
declare const module: { hot: any };

test('Test Store', (t: test.Test) : void => {
  let store = configureStore();
  t.equal(store.getState().counterReducer, 0, 'Check default store data');

  store = configureStore({ counterReducer: 1 });
  t.equal(store.getState().counterReducer, 1, 'Check store data');


  module.hot = {
    accept: (dep: any, callback: Function) => {
      callback();
    }
  };
  store = configureStore({ counterReducer: 0 }, module);
  t.equal(store.getState().counterReducer, 0, 'Check hot module replacement');

  t.end();
});

const thunk = require('redux-thunk').default;
import {applyMiddleware, createStore} from 'redux';
import rootReducer from './rootReducer';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
declare const module: { hot: any };

export default function configureStore(initialState: any = { counterReducer: 0 }, mod: any = module) : any {
  const store: any = createStoreWithMiddleware(rootReducer, initialState);

  if (mod.hot && typeof mod.hot.accept === 'function') {
    mod.hot.accept('./reducer', () => {
      const nextReducer = rootReducer;
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

import * as React from 'react';
import {Counter} from '../components/Counter';

export class Home extends React.Component<any, any> {
  render() {
    return (
      <div>
        <h1>Index</h1>
        <Counter />
      </div>
    );
  }
}

import * as React from 'react';
import {Provider} from 'react-redux';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';

import configureStore from './store';
import Routes from './routes';

const store = configureStore();

const Component = (
  <Provider store={store} key="provider">
    <Router history={browserHistory} routes={Routes} />
  </Provider>
);

render(Component, document.getElementById('example'));

import * as React from 'react';
import * as test from 'tape';
import {Provider} from 'react-redux';
import { render } from 'react-dom';
import { Router, createMemoryHistory } from 'react-router';
import Routes from '../routes';
import configureStore from '../store';

require('jsdom-global')(); // Used to make available the DOM element document

const store = configureStore();

const Routing = (
  <Provider store={store} key="provider">
    <Router history={createMemoryHistory('/')}>
      {Routes}
    </Router>
  </Provider>
);

test('Test Routes', (t: test.Test) : void => {
  let node = document.createElement('div');

  render(Routing, node, () => {
    t.notEqual(node.textContent.indexOf('Index'), -1, 'Index page found');
  });

  Routing.props.children.props.history.push('/hello');
  render(Routing, node, () => {
    t.notEqual(node.textContent.indexOf('This page uses TypeScript and React!'), -1, 'Hello page found');
  });

  Routing.props.children.props.history.push('/about');
  render(Routing, node, () => {
    t.notEqual(node.textContent.indexOf('About'), -1, 'About page found');
  });

  Routing.props.children.props.history.push('/doesnotexist');
  render(Routing, node, () => {
    t.notEqual(node.textContent.indexOf('404'), -1, '404 page found');
  });

  t.end();
});

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const config = require('./webpack.config');

config.target = 'node';

config.entry = {
  index: [
    './src/server.tsx',
  ],
};

config.output = {
  filename: '[name].js',
  path: path.join(__dirname, '_server'),
};

config.plugins = [
  new webpack.DefinePlugin({
    __CLIENT__: false,
    __SERVER__: true,
    __PRODUCTION__: true,
    __DEV__: false,
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
    },
  }),

  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
    },
  }),
];

config.externals = fs.readdirSync('node_modules').reduce((accumulator, module) => {
  accumulator[module] = 'commonjs ' + module;
  return accumulator;
}, {});

module.exports = config;

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');

const webpack = require('webpack');
const config = require('./webpack.config.server');

config.cache = true;
config.debug = true;
config.devtool = 'source-map';
config.watch = true;

config.entry.index.unshift(
  'webpack/hot/poll?1000'
);

config.plugins = [
  new webpack.DefinePlugin({
    __CLIENT__: false,
    __SERVER__: true,
    __PRODUCTION__: false,
    __DEV__: true,
    'process.env': {
      NODE_ENV: JSON.stringify('development'),
    },
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
];

module.exports = config;

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');


const path = require('path');
const webpack = require('webpack');
const config = require('./webpack.config');

config.entry = {
  index: [
    './src/index.tsx',
  ],
};

config.output = {
  filename: '[name].js',
  path: path.join(__dirname, '_client'),
  publicPath: 'assets',
};

config.plugins = [
  new webpack.DefinePlugin({
    __CLIENT__: true,
    __SERVER__: false,
    __PRODUCTION__: true,
    __DEV__: false,
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
    },
  }),

  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
    },
  }),
];

module.exports = config;

// Used for on-the-fly transpilation. This is only needed in the
// webpack config file to use ES6
require('babel-register');

const webpack = require('webpack');
const config = require('./webpack.config.client');

const hostname = 'localhost';
const port = '3000';

config.cache = true;
config.debug = true;
config.devtool = 'inline-source-map';

config.entry.index.unshift(
  `webpack-dev-server/client?http://${hostname}:${port}/`,
  'webpack/hot/only-dev-server'
);

config.output.publicPath = 'http://' + hostname + ':' + port + '/client';

config.plugins = [
  new webpack.DefinePlugin({
    __CLIENT__: true,
    __SERVER__: false,
    __PRODUCTION__: false,
    __DEV__: true,
    'process.env': {
      NODE_ENV: JSON.stringify('development'),
    },
  }),

  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
];

config.devServer = {
  hot: true,
  https: false,
  inline: true,
  noInfo: true,
  port: port,
};

module.exports = config;

import * as express from 'express';
import * as React from 'react';

import {match, RouterContext} from 'react-router';
import {Provider} from 'react-redux';
import {renderToString} from 'react-dom/server';

import configureStore from './store';
import HtmlContainer from './layout/html';
import RouteContainer from './routes';

let Html = HtmlContainer;
let Route = RouteContainer;

const app = express();
const hostname = 'localhost';
const port = 8080;
const sitePort = 3000;

function getMarkup(store: any, render_props: any) {
  const uri = `http://${hostname}:${sitePort}`;

  const component = (
    <Provider store = {store} key = "provider">
      <RouterContext {...render_props} />
    </Provider>
);

  return '<!doctype html>' + renderToString(
      <Html
        component = {component}
        script = {`${uri}/client/index.js`}
        state = {store.getState()}
/>
);
}

app.use(function (req: any, res: any) {
  match({
    location: req.url,
    routes: Route
  }, function (error, redirectionLocation, render_props) {
    if (error) {
      console.error('Router error:', error);

      res.status(500).send(error.message);
    } else if (redirectionLocation) {
      res.redirect(302, redirectionLocation.pathname + redirectionLocation.search);
    } else if (render_props) {
      const store = configureStore({});

      res.status(200).send(getMarkup(store, render_props));
    } else {
      res.status(400).send('Not Found');
    }
  });
});

declare const module: { hot: any };

app.listen(port, function (error: any) {
    if (error) {
      console.error(error);
    } else {
      console.info(`==> Open up http://${hostname}:${port}/ in your browser.`);
    }
  });

if (module.hot) {
  console.info('[HMR] Server is listening…');

  module.hot.accept('./layout/html', function () {
    console.info('[HMR] Patching Html');

    Html = require('./layout/html').default;
  });

  module.hot.accept('./routes', function () {
    console.info('[HMR] Patching Route');

    Route = require('./routes').default;
  });
}