├── .eslintignore
├── redux_time_travel.gif
├── components
├── Row.js
├── App.js
└── Cell.js
├── actions
└── index.js
├── index.html
├── dist
└── index.html
├── containers
├── DevTools.js
├── Grid.js
└── SetSize.js
├── .gitignore
├── LICENSE
├── README.md
├── reducers
└── grid.js
├── webpack.config.prod.js
├── webpack.config.js
├── package.json
├── index.js
└── .eslintrc.json
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 |
--------------------------------------------------------------------------------
/redux_time_travel.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/argelius/react-redux-timetravel/HEAD/redux_time_travel.gif
--------------------------------------------------------------------------------
/components/Row.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const style = {
4 | display: 'flex',
5 | flexDirection: 'row',
6 | flexWrap: 'nowrap'
7 | };
8 |
9 | const Row = ({children}) => {children}
;
10 |
11 | export default Row;
12 |
--------------------------------------------------------------------------------
/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Grid from '../containers/Grid';
4 | import SetSize from '../containers/SetSize';
5 |
6 | const App = () => (
7 |
8 |
9 |
10 |
11 | );
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/actions/index.js:
--------------------------------------------------------------------------------
1 | export const SET_GRID_SIZE = 'SET_GRID_SIZE';
2 | export const TOGGLE_CELL = 'TOGGLE_CELL';
3 |
4 | export const setGridSize = ({width, height}) => ({
5 | type: SET_GRID_SIZE,
6 | width,
7 | height
8 | });
9 |
10 | export const toggleCell = ({x, y}) => ({
11 | type: TOGGLE_CELL,
12 | x,
13 | y
14 | });
15 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Onsen UI React Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Onsen UI React Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/components/Cell.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const style = {
4 | width: '24px',
5 | height: '24px',
6 | border: '1px solid black'
7 | };
8 |
9 | const Cell = ({children, filled = false, onClick}) => (
10 |
17 | {children}
18 |
19 | );
20 |
21 | export default Cell;
22 |
--------------------------------------------------------------------------------
/containers/DevTools.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {createDevTools} from 'redux-devtools';
3 | import LogMonitor from 'redux-devtools-log-monitor';
4 | import DockMonitor from 'redux-devtools-dock-monitor';
5 |
6 | export default createDevTools(
7 |
12 |
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Andreas Argelius
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Redux with Time travel sample
2 |
3 | 
4 |
5 | This is a sample app using Redux and React. It is created as an example on how to the [Redux DevTools](https://github.com/gaearon/redux-devtools) work and how you can integrate them into your app to speed up development.
6 |
7 | You can check out the demo [here](http://argelius.github.io/react-redux-timetravel/)
8 |
9 | If you are interested in hybrid app development using React, check out the [Onsen UI React Components](https://onsen.io/v2/react.html). We would love to get your feedback. We love getting stars on [GitHub](https://github.com/OnsenUI/OnsenUI).
10 |
11 | For a more complete example using React and Redux with Onsen UI, please check out the [Weather app](http://argelius.github.io/react-onsenui-redux-weather/demo.html). Source code [here](https://github.com/argelius/react-onsenui-redux-weather).
12 |
13 | ## How to run it
14 |
15 | To run it simply do:
16 |
17 | ```bash
18 | npm install
19 | npm start
20 | ```
21 |
22 | The app will run at [http://localhost:9000](http://localhost:9000).
23 |
--------------------------------------------------------------------------------
/reducers/grid.js:
--------------------------------------------------------------------------------
1 | import {
2 | SET_GRID_SIZE,
3 | TOGGLE_CELL
4 | } from '../actions';
5 |
6 | const grid = (state, action) => {
7 | switch (action.type) {
8 | case SET_GRID_SIZE:
9 | /**
10 | * Create a new array.
11 | */
12 | const newCells = new Array(action.width * action.height).fill(0);
13 |
14 | /**
15 | * Copy previous picture.
16 | */
17 | for (let y = 0; y < state.height; y++) {
18 | for (let x = 0; x < state.width; x++) {
19 | newCells[y * action.width + x] = state.cells[y * state.width + x];
20 | }
21 | }
22 |
23 | /**
24 | * Return new state.
25 | */
26 | return {
27 | ...state,
28 | width: action.width,
29 | height: action.height,
30 | cells: newCells
31 | };
32 | case TOGGLE_CELL:
33 | /**
34 | * Copy cells.
35 | */
36 | const cells = [...state.cells];
37 | const {x, y} = action;
38 |
39 | const val = cells[y * state.width + x];
40 |
41 | /**
42 | * Toggle the value.
43 | */
44 | cells[y * state.width + x] = val === 1 ? 0 : 1;
45 |
46 | /**
47 | * Return the next state.
48 | */
49 | return {
50 | ...state,
51 | cells
52 | };
53 | default:
54 | return state;
55 | }
56 | };
57 |
58 | export default grid;
59 |
--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 | var autoprefixer = require('autoprefixer');
4 |
5 | module.exports = {
6 | devtool: 'source-map',
7 | context: __dirname,
8 | entry: [
9 | './index.js'
10 | ],
11 | output: {
12 | path: path.join(__dirname, 'dist'),
13 | filename: 'bundle.js'
14 | },
15 |
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
20 | loader: 'url-loader?limit=10000&minetype=application/font-woff'
21 | },
22 | { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
23 | loader: 'file-loader'
24 | },
25 | {
26 | test: /\.json$/,
27 | loader: 'json'
28 | },
29 | {
30 | test: /\.css$/,
31 | loader: 'style!css!postcss'
32 | },
33 | {
34 | test: /\.styl$/,
35 | loader: 'style!css!postcss!stylus?paths=node_modules'
36 | },
37 | { test: /\.js$|\.jsx$/,
38 | exclude: [/node_modules/],
39 | loaders: [
40 | 'babel?' + JSON.stringify({presets: ['stage-2', 'es2015', 'react']})
41 | ]
42 | }
43 | ]
44 | },
45 |
46 | postcss: function() {
47 | return [autoprefixer];
48 | },
49 |
50 | plugins: [
51 | new webpack.DefinePlugin({
52 | 'process.env': {
53 | 'NODE_ENV': JSON.stringify('production')
54 | }
55 | })
56 | ]
57 | };
58 |
59 |
--------------------------------------------------------------------------------
/containers/Grid.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux';
3 | import {bindActionCreators} from 'redux';
4 |
5 | import Row from '../components/Row';
6 | import Cell from '../components/Cell';
7 | import * as Actions from '../actions';
8 |
9 | const Grid = ({width, height, cells, actions}) => {
10 | let rows = [];
11 |
12 | /**
13 | * Loop through all the cells.
14 | */
15 | for (let y = 0; y < height; y++) {
16 | const row = [];
17 |
18 | for (let x = 0; x < width; x++) {
19 | /**
20 | * Add a `Cell` component for every
21 | * column in the row.
22 | */
23 | row.push(
24 | actions.toggleCell({x, y})}
31 | /**
32 | * Fill the cell if the value is 1.
33 | */
34 | filled={cells[y * width + x] === 1}
35 | />
36 | );
37 | }
38 |
39 | /**
40 | * Create a `Row` component for every
41 | * row in the grid.
42 | */
43 | rows.push({row} );
44 | }
45 |
46 | return {rows} ;
47 | };
48 |
49 | /**
50 | * Map the state to props.
51 | */
52 | const mapStateToProps = (state) => ({
53 | ...state
54 | });
55 |
56 | /**
57 | * Map the actions to props.
58 | */
59 | const mapDispatchToProps = (dispatch) => ({
60 | actions: bindActionCreators(Actions, dispatch)
61 | });
62 |
63 | /**
64 | * Connect the component to
65 | * the Redux store.
66 | */
67 | export default connect(
68 | mapStateToProps,
69 | mapDispatchToProps
70 | )(Grid);
71 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 | var autoprefixer = require('autoprefixer');
4 |
5 | module.exports = {
6 | devtool: 'eval-source-map',
7 | context: __dirname,
8 | entry: [
9 | 'react-hot-loader/patch',
10 | 'webpack-dev-server/client?http://0.0.0.0:9000',
11 | 'webpack/hot/only-dev-server',
12 | './index.js'
13 | ],
14 | output: {
15 | path: path.join(__dirname, 'dist'),
16 | filename: 'bundle.js'
17 | },
18 |
19 | devServer: {
20 | colors: true,
21 | historyApiFallback: true,
22 | inline: false,
23 | port: 9000,
24 | hot: true
25 | },
26 |
27 | module: {
28 | loaders: [
29 | {
30 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
31 | loader: 'url-loader?limit=10000&minetype=application/font-woff'
32 | },
33 | { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
34 | loader: 'file-loader'
35 | },
36 | {
37 | test: /\.json$/,
38 | loader: 'json'
39 | },
40 | {
41 | test: /\.css$/,
42 | loader: 'style!css!postcss'
43 | },
44 | {
45 | test: /\.styl$/,
46 | loader: 'style!css!postcss!stylus?paths=node_modules'
47 | },
48 | {
49 | test: /\.js$/,
50 | loader: 'babel',
51 | query: {
52 | 'presets': ['es2015', 'stage-2', 'react'],
53 | 'plugins': ['react-hot-loader/babel']
54 | },
55 | exclude: path.join(__dirname, 'node_modules')
56 | }
57 | ]
58 | },
59 |
60 | postcss: function() {
61 | return [autoprefixer];
62 | },
63 |
64 | plugins: [
65 | new webpack.HotModuleReplacementPlugin()
66 | ]
67 | };
68 |
69 |
--------------------------------------------------------------------------------
/containers/SetSize.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux';
3 | import {bindActionCreators} from 'redux';
4 |
5 | import * as Actions from '../actions';
6 |
7 | const style = {
8 | margin: '10px 0'
9 | };
10 |
11 | const SetSize = ({width, height, actions}) => {
12 | const handleWidthChange = (e) => {
13 | /**
14 | * Set a new grid size.
15 | */
16 | actions.setGridSize({
17 | width: parseInt(e.target.value),
18 | height
19 | });
20 | };
21 |
22 | const handleHeightChange = (e) => {
23 | actions.setGridSize({
24 | width,
25 | height: parseInt(e.target.value)
26 | });
27 | };
28 |
29 | return (
30 |
31 |
44 |
53 |
54 | );
55 | };
56 |
57 | /**
58 | * Map the state to props.
59 | */
60 | const mapStateToProps = (state) => ({
61 | ...state
62 | });
63 |
64 | /**
65 | * Map the actions to props.
66 | */
67 | const mapDispatchToProps = (dispatch) => ({
68 | actions: bindActionCreators(Actions, dispatch)
69 | });
70 |
71 | /**
72 | * Connect the component to
73 | * the Redux Store.
74 | */
75 | export default connect(
76 | mapStateToProps,
77 | mapDispatchToProps
78 | )(SetSize);
79 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-redux-timetravel",
3 | "version": "1.0.0",
4 | "description": "Simple React app using Redux",
5 | "main": "webpack.config.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --progress",
8 | "build": "npm run lint && cross-env NODE_ENV=production webpack --config webpack.config.prod.js && ncp index.html dist/index.html",
9 | "deploy": "npm run build && git commit dist -m \"Deploy\" && git push origin master && git subtree push --prefix dist origin gh-pages",
10 | "lint": "eslint ."
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/argelius/react-redux-timetravel.git"
15 | },
16 | "author": "Andreas Argelius ",
17 | "license": "MIT",
18 | "bugs": {
19 | "url": "https://github.com/argelius/react-redux-timetravel/issues"
20 | },
21 | "homepage": "https://github.com/argelius/react-redux-timetravel#readme",
22 | "devDependencies": {
23 | "autoprefixer": "^6.3.6",
24 | "babel-core": "^6.9.1",
25 | "babel-loader": "^6.2.4",
26 | "babel-preset-es2015": "^6.9.0",
27 | "babel-preset-react": "^6.5.0",
28 | "babel-preset-stage-2": "^6.5.0",
29 | "cross-env": "^1.0.8",
30 | "css-loader": "^0.23.1",
31 | "eslint": "^2.12.0",
32 | "eslint-plugin-promise": "^1.3.2",
33 | "eslint-plugin-react": "^5.1.1",
34 | "eslint-plugin-standard": "^1.3.2",
35 | "file-loader": "^0.8.5",
36 | "json-loader": "^0.5.4",
37 | "ncp": "^2.0.0",
38 | "postcss-loader": "^0.9.1",
39 | "promise": "^7.1.1",
40 | "react": "^15.1.0",
41 | "react-dom": "^15.1.0",
42 | "react-hot-loader": "^3.0.0-beta.2",
43 | "react-redux": "^4.4.5",
44 | "redux": "^3.5.2",
45 | "redux-devtools": "^3.3.1",
46 | "redux-devtools-dock-monitor": "^1.1.1",
47 | "redux-devtools-log-monitor": "^1.0.11",
48 | "redux-logger": "^2.6.1",
49 | "style-loader": "^0.13.1",
50 | "stylus": "^0.54.5",
51 | "stylus-loader": "^2.1.0",
52 | "url-loader": "^0.5.7",
53 | "webpack": "^1.13.1",
54 | "webpack-dev-server": "^1.14.1"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {render} from 'react-dom';
3 |
4 | /*
5 | * The Provider component provides
6 | * the React store to all its child
7 | * components so we don't need to pass
8 | * it explicitly to all the components.
9 | */
10 | import {Provider} from 'react-redux';
11 |
12 | import {createStore, applyMiddleware, compose} from 'redux';
13 | import createLogger from 'redux-logger';
14 | import {AppContainer} from 'react-hot-loader';
15 |
16 | import grid from './reducers/grid';
17 | import App from './components/App';
18 | import DevTools from './containers/DevTools';
19 |
20 | const logger = createLogger();
21 |
22 | /*
23 | * The initial state of the app.
24 | *
25 | * This describes a 10x10 picture
26 | * of a smiley face. :)
27 | */
28 | const initialState = {
29 | width: 10,
30 | height: 10,
31 | cells: [
32 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0,
33 | 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,
34 | 0, 1, 0, 0, 0, 0, 0, 0, 1, 0,
35 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
36 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
37 | 1, 0, 0, 0, 0, 0, 0, 0, 0, 1,
38 | 1, 0, 0, 1, 1, 1, 1, 0, 0, 1,
39 | 0, 1, 0, 0, 0, 0, 0, 0, 1, 0,
40 | 0, 0, 1, 0, 0, 0, 0, 1, 0, 0,
41 | 0, 0, 0, 1, 1, 1, 1, 0, 0, 0
42 | ]
43 | };
44 |
45 | /*
46 | * The enhancer are passed when
47 | * creating the Redux store to
48 | * add some extra functionality.
49 | *
50 | * In this case we add a logger
51 | * middleware that write some debug
52 | * information every time the
53 | * state is changed.
54 | *
55 | * We also add the Redux DevTools
56 | * so we can easily debug the state.
57 | */
58 | const enhancer = compose(
59 | applyMiddleware(logger),
60 | DevTools.instrument()
61 | );
62 |
63 | /*
64 | * This creates the store so we
65 | * can listen to changes and
66 | * dispatch actions.
67 | */
68 | const store = createStore(grid, initialState, enhancer);
69 |
70 | const rootElement = document.getElementById('root');
71 |
72 | render(
73 |
74 |
75 |
79 |
80 | ,
81 | rootElement
82 | );
83 |
84 | /**
85 | * This is for hot reloading so the
86 | * app updates every time the code of
87 | * the components change.
88 | */
89 | if (module.hot) {
90 | module.hot.accept('./components/App', () => {
91 | const NextApp = require('./components/App').default;
92 | render(
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | ,
101 | rootElement
102 | );
103 | });
104 | }
105 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parserOptions": {
3 | "ecmaVersion": 6,
4 | "ecmaFeatures": {
5 | "experimentalObjectRestSpread": true,
6 | "jsx": true
7 | },
8 | "sourceType": "module"
9 | },
10 |
11 | "env": {
12 | "es6": true,
13 | "node": true,
14 | "browser": true
15 | },
16 |
17 | "plugins": [
18 | "standard",
19 | "promise",
20 | "react"
21 | ],
22 |
23 | "globals": {
24 | "document": false,
25 | "navigator": false,
26 | "window": false
27 | },
28 |
29 | "rules": {
30 | "accessor-pairs": 2,
31 | "arrow-spacing": [2, { "before": true, "after": true }],
32 | "block-spacing": [2, "always"],
33 | "brace-style": [2, "1tbs", { "allowSingleLine": true }],
34 | "comma-dangle": [2, "never"],
35 | "comma-spacing": [2, { "before": false, "after": true }],
36 | "comma-style": [2, "last"],
37 | "constructor-super": 2,
38 | "curly": [2, "multi-line"],
39 | "dot-location": [2, "property"],
40 | "eol-last": 2,
41 | "eqeqeq": [2, "allow-null"],
42 | "generator-star-spacing": [2, { "before": true, "after": true }],
43 | "handle-callback-err": [2, "^(err|error)$" ],
44 | "indent": [2, 2, { "SwitchCase": 1 }],
45 | "jsx-quotes": [2, "prefer-single"],
46 | "react/jsx-uses-vars": 2,
47 | "react/react-in-jsx-scope": 2,
48 | "react/jsx-uses-react": 2,
49 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
50 | "keyword-spacing": [2, { "before": true, "after": true }],
51 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
52 | "new-parens": 2,
53 | "no-array-constructor": 2,
54 | "no-caller": 2,
55 | "no-class-assign": 2,
56 | "no-cond-assign": 2,
57 | "no-const-assign": 2,
58 | "no-control-regex": 2,
59 | "no-debugger": 2,
60 | "no-delete-var": 2,
61 | "no-dupe-args": 2,
62 | "no-dupe-class-members": 2,
63 | "no-dupe-keys": 2,
64 | "no-duplicate-case": 2,
65 | "no-empty-character-class": 2,
66 | "no-empty-pattern": 2,
67 | "no-eval": 2,
68 | "no-ex-assign": 2,
69 | "no-extend-native": 2,
70 | "no-extra-bind": 2,
71 | "no-extra-boolean-cast": 2,
72 | "no-extra-parens": [2, "functions"],
73 | "no-fallthrough": 2,
74 | "no-floating-decimal": 2,
75 | "no-func-assign": 2,
76 | "no-implied-eval": 2,
77 | "no-inner-declarations": [2, "functions"],
78 | "no-invalid-regexp": 2,
79 | "no-irregular-whitespace": 2,
80 | "no-iterator": 2,
81 | "no-label-var": 2,
82 | "no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
83 | "no-lone-blocks": 2,
84 | "no-mixed-spaces-and-tabs": 2,
85 | "no-multi-spaces": 2,
86 | "no-multi-str": 2,
87 | "no-multiple-empty-lines": [2, { "max": 1 }],
88 | "no-native-reassign": 2,
89 | "no-negated-in-lhs": 2,
90 | "no-new": 2,
91 | "no-new-func": 2,
92 | "no-new-object": 2,
93 | "no-new-require": 2,
94 | "no-new-symbol": 2,
95 | "no-new-wrappers": 2,
96 | "no-obj-calls": 2,
97 | "no-octal": 2,
98 | "no-octal-escape": 2,
99 | "no-path-concat": 2,
100 | "no-proto": 2,
101 | "no-redeclare": 2,
102 | "no-regex-spaces": 2,
103 | "no-return-assign": [2, "except-parens"],
104 | "no-self-assign": 2,
105 | "no-self-compare": 2,
106 | "no-sequences": 2,
107 | "no-shadow-restricted-names": 2,
108 | "no-spaced-func": 2,
109 | "no-sparse-arrays": 2,
110 | "no-this-before-super": 2,
111 | "no-throw-literal": 2,
112 | "no-trailing-spaces": 2,
113 | "no-undef": 2,
114 | "no-undef-init": 2,
115 | "no-unexpected-multiline": 2,
116 | "no-unneeded-ternary": [2, { "defaultAssignment": false }],
117 | "no-unreachable": 2,
118 | "no-unused-vars": [2, { "vars": "all", "args": "none" }],
119 | "no-useless-call": 2,
120 | "no-useless-constructor": 2,
121 | "no-with": 2,
122 | "one-var": [2, { "initialized": "never" }],
123 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
124 | "padded-blocks": [2, "never"],
125 | "quotes": [2, "single", "avoid-escape"],
126 | "semi": [2, "always"],
127 | "semi-spacing": [2, { "before": false, "after": true }],
128 | "space-before-blocks": [2, "always"],
129 | "space-before-function-paren": [2, "never"],
130 | "space-in-parens": [2, "never"],
131 | "space-infix-ops": 2,
132 | "space-unary-ops": [2, { "words": true, "nonwords": false }],
133 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
134 | "template-curly-spacing": [2, "never"],
135 | "use-isnan": 2,
136 | "valid-typeof": 2,
137 | "wrap-iife": [2, "any"],
138 | "yield-star-spacing": [2, "both"],
139 | "yoda": [2, "never"],
140 |
141 | "standard/object-curly-even-spacing": [2, "either"],
142 | "standard/array-bracket-even-spacing": [2, "either"],
143 | "standard/computed-property-even-spacing": [2, "even"],
144 |
145 | "promise/param-names": 2
146 | },
147 | "globals": {
148 | "CustomElements": false
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
|