-
Notifications
You must be signed in to change notification settings - Fork 31
Setup tooling and add docs #2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
6969657
Add travis file
BenLorantfy 77b99fb
Setup linting and prettier
BenLorantfy 24736ad
Pin depends, add prepublish, add files
BenLorantfy 74295ad
Add lint to travis
BenLorantfy 1e32bbe
Add docs
BenLorantfy d2aca41
Add CONTRIBUTING.md, misc cleanup
BenLorantfy a6cfe06
Update README.md
BenLorantfy 1fba4ab
Fixes
BenLorantfy dc41f04
Organize dosc
BenLorantfy 96bd56d
Fix
BenLorantfy 59f2a02
Update api.md
BenLorantfy 0592334
Fix
BenLorantfy 406945b
Fixes
BenLorantfy 30798ce
Fix spelling and misc
BenLorantfy 0125f7a
re-word README beginning
BenLorantfy b6073e1
README improvements
BenLorantfy 6d7de7b
misc fixes
BenLorantfy 4ecaeff
bulid docs
BenLorantfy File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| dist/ | ||
| node_modules/ | ||
| package-lock.json | ||
| yarn.lock | ||
| package.json |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "printWidth": 80, | ||
| "tabWidth": 2, | ||
| "useTabs": false, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "all" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,81 @@ | ||
| # injectors | ||
| Asynchronous injectors for Redux reducers and sagas. As used by react-boilerplate. | ||
| 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 injectors # (or yarn add 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 "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 "injectors"; | ||
|
|
||
| class BooksManager extends React.PureComponent { | ||
| render() { | ||
| return null; | ||
| } | ||
| } | ||
|
|
||
| export default compose( | ||
| injectReducer({ key: "books", reducer: booksReducer }), | ||
| injectSaga({ key: "books", saga: booksSaga }) | ||
| )(BooksManager); | ||
julienben marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ``` | ||
|
|
||
| Or, using hooks: | ||
| ```js | ||
| import { useInjectReducer, useInjectSaga } from "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. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here's where the explanation could be clearer IMO. Instead of simply "the store needs to be configured for the library to work", something more explicit like:
We take advantage of the redux store being a simple POJO to add to it several keys:
injectedReducers: A registry of all the reducers injected into the app to ensure we don't overwrite an existing reducer.store.replaceReducer, we need to addstore.runSagato enable the dynamic injection mechanism.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's kind of getting into implementation details. Do we need to explain that in the "Setting up the redux store" section? It's meant to be a quick start so I kind of wanted to be brief.
I understand it's helpful to explain this so developers don't think it's magic, but I wonder if this could go in a different section? i.e. "How does it work?"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good!