├── .babelrc
├── .flowconfig
├── .gitignore
├── README.md
├── assets
└── waiting.gif
├── index.html
├── package.json
├── src
├── boilerplate.js
├── hello-world
│ ├── updater.js
│ └── view.js
└── main.js
├── test
└── hello-world
│ └── updater.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-2", "react"]
3 | }
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | .*/fbjs/.*
3 |
4 | [include]
5 |
6 | [libs]
7 |
8 | [options]
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redux-elm-skeleton
2 |
3 | Simple [redux-elm](https://github.com/salsita/redux-elm) skeleton which facilitates starting with redux-elm while avoiding [JavaScript fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4).
4 |
5 | ## Usage
6 |
7 | ```
8 | npm install
9 | npm start
10 | open http://localhost:3000
11 | ```
--------------------------------------------------------------------------------
/assets/waiting.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/salsita/redux-elm-skeleton/af16d07f92874e495e8cec6e2a699071092cf520/assets/waiting.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | redux-elm-skeleton
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux-elm-skeleton",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.js --port 3000 --hot --content-base ./",
6 | "flow": "flow; test $? -eq 0 -o $? -eq 2",
7 | "test": "./node_modules/.bin/mocha --require babel-core/register --recursive --require babel-polyfill",
8 | "test:watch": "npm test -- --watch"
9 | },
10 | "devDependencies": {
11 | "babel-cli": "^6.5.1",
12 | "babel-core": "^6.5.2",
13 | "babel-loader": "^6.2.2",
14 | "babel-preset-es2015": "^6.13.2",
15 | "babel-preset-react": "^6.11.1",
16 | "babel-preset-stage-2": "^6.13.0",
17 | "chai": "^3.4.1",
18 | "flow-bin": "^0.30.0",
19 | "mocha": "^3.0.2",
20 | "webpack": "^1.13.1",
21 | "webpack-dev-server": "^1.12.1"
22 | },
23 | "dependencies": {
24 | "babel-polyfill": "^6.8.0",
25 | "react": "^15.3.0",
26 | "react-dom": "^15.3.0",
27 | "react-redux": "^4.0.0",
28 | "redux": "^3.3.1",
29 | "redux-elm": "^3.0.0",
30 | "redux-saga": "^0.11.0",
31 | "rxjs": "^5.0.0-beta.10"
32 | },
33 | "author": "Tomas Weiss ",
34 | "license": "MIT"
35 | }
36 |
--------------------------------------------------------------------------------
/src/boilerplate.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { createStore, compose } from 'redux';
4 | import { Provider, connect } from 'react-redux';
5 | import reduxElm from 'redux-elm';
6 |
7 | export default (containerDomId, View, updater) => {
8 | const storeFactory = compose(
9 | reduxElm,
10 | window.devToolsExtension ? window.devToolsExtension() : f => f
11 | )(createStore);
12 |
13 | const store = storeFactory(updater);
14 |
15 | const ConnectedView = connect(appState => ({
16 | model: appState
17 | }))(View);
18 |
19 | render((
20 |
21 |
22 |
23 | ), document.getElementById(containerDomId));
24 | }
--------------------------------------------------------------------------------
/src/hello-world/updater.js:
--------------------------------------------------------------------------------
1 | import { Updater } from 'redux-elm';
2 |
3 | const initialModel = {
4 | greeted: false
5 | };
6 |
7 | export default new Updater(initialModel)
8 | .case('SayHi', model => ({ ...model, greeted :true }))
9 | .toReducer();
10 |
--------------------------------------------------------------------------------
/src/hello-world/view.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { view } from 'redux-elm';
3 |
4 | export default view(({ model, dispatch }) => {
5 | if (model.greeted) {
6 | return Hello World!
;
7 | } else {
8 | return ;
9 | }
10 | });
11 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import run from './boilerplate';
2 |
3 | import view from './hello-world/view';
4 | import updater from './hello-world/updater';
5 |
6 | run('app', view, updater);
7 |
--------------------------------------------------------------------------------
/test/hello-world/updater.js:
--------------------------------------------------------------------------------
1 | import { assert } from 'chai';
2 |
3 | import updater from '../../src/hello-world/updater';
4 |
5 | describe('Hello World Updater', () => {
6 | it('should return appropriate initialModel with falsy greeted flag', () => {
7 | assert.deepEqual(updater(), { greeted: false });
8 | });
9 |
10 | it('should set greeted flag when clicking SayHi', () => {
11 | let model = undefined;
12 | model = updater();
13 | model = updater(model, { type: 'SayHi' });
14 | assert.deepEqual(model, { greeted: true });
15 | });
16 | });
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | debug: true,
6 | target: 'web',
7 | devtool: 'sourcemap',
8 | plugins: [
9 | new webpack.NoErrorsPlugin()
10 | ],
11 | entry: [
12 | 'babel-polyfill',
13 | 'webpack-dev-server/client?http://localhost:3000',
14 | 'webpack/hot/only-dev-server',
15 | './src/main.js'
16 | ],
17 | output: {
18 | path: path.resolve(__dirname, 'dev'),
19 | filename: 'app.bundle.js'
20 | },
21 | module: {
22 | loaders: [{
23 | test: /\.jsx$|\.js$/,
24 | loaders: ['babel-loader'],
25 | include: path.resolve(__dirname, 'src')
26 | }]
27 | },
28 | resolve: {
29 | extensions: ['', '.js', '.jsx']
30 | }
31 | };
32 |
--------------------------------------------------------------------------------