👍🎉 First off, thanks for taking the time to contribute! 🎉👍
MapFilter v1.x is built with React and Redux. Please make yourself familiar with these libraries by reading the docs. This video series is an excellent intro to Redux.
Mapfilter follows JavaScript Standard Style, to keep things consistent and avoid arguments. It is written in ES2015, including a couple of useful experimental features that are not part of ES2015: class-properties and object-rest-spread. These two experimental features make coding with React easier e.g. allowing us to automatically bind instance methods by combining arrow functions and class properties.
We don't (yet) use ES2015 module syntax because the standard for module loading was not included in ES2015 and is not yet finalized, and ES2015 module syntax was giving some headaches with certain build and testing tools. Instead we use CommonJS module syntax throughout.
Check the standard docs for how to set up linting in your favourite text editor.
Once installed you should see live linting errors in your text editor, or you can npm run lint to lint all files with standard.
Unfortunately configuring linting with Babel and React is a big pain right now. You don't have to worry about this, since everything is already configured, but here are details about the setup we use:
We configure standard in package.json to use babel-eslint as a parser. We use Babel v6 to transpile code into ES5 Javascript that is compatible with most modern browsers. Babel v6 needs to be explicitly configured with plugins for each feature you want to transpile, or use presets to include shareable collections of plugins. We configure babel in .babelrc to use presets es2015 and react. We add two additional plugins for experimental features class-properties and object-rest-spread.
Mapfilter is built using the excellent Browserify which bundles modular code into a single code bundle that works in the browser. We use the browserify transform babelify to use babel to transform bundled code.
Hot Module Reloading allows live code editing without reloading the browser or loosing state. Changes are automatically injected into the open page as you save your code.
MapFilter uses LiveReactload to implement hot reloading with Browserify. This uses babel-plugin-react-transform and react-proxy@1.x. It is configured in .babelrc as a plugin (see docs).
We use budo as a dev server (budo defaults to the --debug option for Browserify, which enables source maps).
All you need to do is npm start which will use budo to start a server with bundled code and hot loading enabled.
Redux DevTools allows you to inspect actions and state and playback actions. If you install the Redux DevTools Chrome Extension you will be able to use the Redux DevTools as you develop MapFilter.
Make sure you are not forgetting any dependencies, or including unnecessary dependencies, but running:
npm run dependency-check