Merge pull request #4 from react-boilerplate/dev

Merge dev into master

Author: BenLorantfy

.eslintrc.js

@@ -0,0 +1,71 @@
+const fs = require('fs');
+const path = require('path');
+
+const prettierOptions = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
+);
+
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['prettier', 'redux-saga', 'react', 'react-hooks'],
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    'prettier/prettier': ['error', prettierOptions],
+    'arrow-body-style': [2, 'as-needed'],
+    'class-methods-use-this': 0,
+    'import/imports-first': 0,
+    'import/newline-after-import': 0,
+    'import/no-dynamic-require': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-named-as-default': 0,
+    'import/no-unresolved': 2,
+    'import/no-webpack-loader-syntax': 0,
+    'import/prefer-default-export': 0,
+    'indent': [
+      2,
+      2,
+      {
+        SwitchCase: 1,
+      },
+    ],
+    'max-len': 0,
+    'newline-per-chained-call': 0,
+    'no-confusing-arrow': 0,
+    'no-console': 1,
+    'no-unused-vars': 2,
+    'no-use-before-define': 0,
+    'prefer-template': 2,
+    'react/destructuring-assignment': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react/jsx-closing-tag-location': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-first-prop-new-line': [2, 'multiline'],
+    'react/jsx-filename-extension': 0,
+    'react/jsx-no-target-blank': 0,
+    'react/jsx-uses-vars': 2,
+    'react/require-default-props': 0,
+    'react/require-extension': 0,
+    'react/self-closing-comp': 0,
+    'react/sort-comp': 0,
+    'redux-saga/no-yield-in-race': 2,
+    'redux-saga/yield-effects': 2,
+    'require-yield': 0,
+
+    // Turning these off for now since enabling would cause different style then rbp
+    'react/static-property-placement': 0,
+    'react/jsx-props-no-spreading': 0,
+  }
+};

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+# Transpiled code
+dist

.prettierignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+package-lock.json
+yarn.lock
+package.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+
+node_js:
+  - 'node'
+  - 'lts/*'
+
+script:
+  - npm test -- --maxWorkers=4
+  - npm run build
+  - npm run lint
+
+cache:
+  directories:
+    - node_modules

CONTRIBUTING.md

@@ -0,0 +1,70 @@
+# Contributing
+
+## Pull requests
+
+Good pull requests - patches, improvements, new features - are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Please adhere to the coding conventions used throughout a project (indentation,
+accurate comments, etc.) and any other requirements (such as test coverage).
+
+Since the `master` branch is what people actually use in production, we have a
+`dev` branch that unstable changes get merged into first. Only when we
+consider that stable we merge it into the `master` branch and release the
+changes for real.
+
+Adhering to the following process is the best way to get your work
+included in the project:
+
+1.  [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork, and configure the remotes:
+
+    ```bash
+    # Clone your fork of the repo into the current directory
+    git clone https://github.com/<your-username>/react-boilerplate.git
+    # Navigate to the newly cloned directory
+    cd react-boilerplate
+    # Assign the original repo to a remote called "upstream"
+    git remote add upstream https://github.com/react-boilerplate/react-boilerplate.git
+    ```
+
+2.  If you cloned a while ago, get the latest changes from upstream:
+
+    ```bash
+    git checkout dev
+    git pull upstream dev
+    ```
+
+3.  Create a new topic branch (off the `dev` branch) to contain your feature, change, or fix:
+
+    ```bash
+    git checkout -b <topic-branch-name>
+    ```
+
+4.  Commit your changes in logical chunks. Please adhere to these [git commit message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your code is unlikely be merged into the main project. Use Git's [interactive rebase](https://help.github.com/articles/about-git-rebase/) feature to tidy up your commits before making them public.
+
+5.  Locally merge (or rebase) the upstream dev branch into your topic branch:
+
+    ```bash
+    git pull [--rebase] upstream dev
+    ```
+
+6.  Push your topic branch up to your fork:
+
+    ```bash
+    git push origin <topic-branch-name>
+    ```
+
+7.  [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project
+owners to license your work under the terms of the [MIT License](https://github.com/react-boilerplate/redux-injectors/blob/master/LICENSE.md).
+
+## Tips
+- When changing the API, including the jsdoc comments, please remember to update the typings file: [index.d.ts](index.d.ts)

README.md

@@ -1,2 +1,81 @@
-# injectors
-Asynchronous injectors for Redux reducers and sagas. As used by react-boilerplate.
+# redux-injectors
+Dynamically load [redux](https://redux.js.org/) reducers and [redux-saga](https://redux-saga.js.org/) sagas as needed, instead of loading them all upfront. This has some nice benefits, such as avoiding having to manage a big global list of reducers and sagas. It also allows more effective use of [code-splitting](https://webpack.js.org/guides/code-splitting/). See [motivation](#Motivation). As used by [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate).
+
+## Getting Started
+```bash
+npm install redux-injectors # (or yarn add redux-injectors)
+```
+
+### Setting up the redux store
+The redux store needs to be configured to allow this library to work. The library exports a store enhancer that can be passed to the `createStore` function.
+```js
+import { createStore } from "redux";
+import { createInjectorsEnhancer } from "redux-injectors";
+
+const store = createStore(
+ createReducer(),
+ initialState,
+ createInjectorsEnhancer({
+   createReducer,
+   runSaga,
+ })
+)
+```
+
+Note the `createInjectorsEnhancer` function takes two options. `createReducer` should be a function that when called will return the root reducer. It's passed the injected reducers as an object of key-reducer pairs.
+
+```js
+function createReducer(injectedReducers = {}) {
+ const rootReducer = combineReducers({
+   ...injectedReducers,
+   // other non-injected reducers can go here...
+ });
+
+ return rootReducer
+}
+```
+
+`runSaga` should usually be `sagaMiddleware.run`. 
+
+```js
+  const runSaga = sagaMiddleware.run;
+```
+
+### Injecting your first reducer and saga
+After setting up the store, you will be able to start injecting reducers and sagas.
+```js
+import { compose } from "redux";
+import { injectReducer, injectSaga } from "redux-injectors";
+
+class BooksManager extends React.PureComponent {
+ render() {
+   return null;
+ }
+}
+
+export default compose(
+  injectReducer({ key: "books", reducer: booksReducer }),
+  injectSaga({ key: "books", saga: booksSaga })
+)(BooksManager);
+
+```
+
+Or, using hooks:
+```js
+import { useInjectReducer, useInjectSaga } from "redux-injectors";
+
+export default function BooksManager() {
+  useInjectReducer({ key: "books", reducer: booksReducer });
+  useInjectSaga({ key: "books", saga: booksSaga });
+
+  return null;
+}
+```
+
+## Documentation
+See the [**API reference**](docs/api.md)
+
+## Motivation
+There's a few reasons why you might not want to load all your reducers and sagas upfront:
+1. You don't need all the reducers and sagas for every page. This library lets you only load the reducers/sagas that are needed for the page being viewed. This speeds up the page load time because you can take advantage of [code-splitting](https://webpack.js.org/guides/code-splitting/).  This is also good for performance after the page has loaded, because fewer reducers and sagas are running. 
+2. You don't want to have to manage a big list of reducers/sagas. This library lets components inject their own reducers/sagas, so you don't need to worry about adding reducers/sagas to a global list.

babel.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+  ],
+  env: {
+    production: {
+      plugins: [
+        '@babel/plugin-transform-react-inline-elements',
+        '@babel/plugin-transform-react-constant-elements',
+      ],
+    },
+    test: {
+      plugins: [
+        '@babel/plugin-transform-modules-commonjs',
+      ],
+    },
+  },
+};