Skip to content

Commit

Permalink
(feat): support SSR out-of-the-box by no-op'ing in Node
Browse files Browse the repository at this point in the history
- add a `nodeNoop` option that is `true` by default
  - generally folks do not want to hydrate their store during SSR, so
    no-op by default and require explicit opt-in to Node hydration
  - see #6 for discussion
- also throw an Error if localStorage isn't supported and no
  alternative storage provider has been given

(docs): add `nodeNoop` option and section on Node and SSR usage to
give more details and note possible gotchas
  • Loading branch information
agilgur5 committed Jul 10, 2019
1 parent 17a5b7a commit c141d03
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 3 deletions.
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,17 @@ persist('some', someStore, {
- **jsonify** *bool* Enables serialization as JSON (default: `true`).
- **whitelist** *Array\<string\>* Only these keys will be persisted (defaults to all keys).
- **blacklist** *Array\<string\>* These keys will not be persisted (defaults to all keys).
- **nodeNoop** *bool* Whether this should no-op in a Node environment (default: `true`). See below for more details.

- returns a void Promise

### Node and SSR Usage

To support Server-Side Rendering (SSR) out-of-the-box, `persist` will no-op in a Node environment by default.<br>
Please note that it uses `typeof window === 'undefined'` to check. [`window` is defined in React Native](https://stackoverflow.com/questions/49911424/what-does-the-variable-window-represent-in-react-native), but may not be in test runners and other simulated environments.

If you'd like to hydrate your store in Node (vs. in the browser, which is the standard usage), set `nodeNoop` to `false` and `storage` to a supported provider for Node.

## Examples

None yet, but can take a look at [agilgur5/react-native-manga-reader-app](https://github.com/agilgur5/react-native-manga-reader-app) which uses it in production.
Expand Down
22 changes: 19 additions & 3 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,32 @@ export interface IOptions {
storage?: any,
jsonify?: boolean,
readonly whitelist?: Array<string>,
readonly blacklist?: Array<string>
readonly blacklist?: Array<string>,
nodeNoop?: boolean
}
type StrToAnyMap = {[key: string]: any}

export const persist: IArgs = (name, store, options = {}) => {
let {storage, jsonify, whitelist, blacklist} = options
let {storage, jsonify, whitelist, blacklist, nodeNoop} = options

if (typeof window.localStorage !== 'undefined' && (!storage || storage === window.localStorage)) {
// no-op in node by default to support SSR out-of-the-box
// require explicit opt-in to hydrate server-side
if (!nodeNoop) { nodeNoop = true }
if (nodeNoop && typeof window === 'undefined') { return Promise.resolve() }

// use AsyncLocalStorage by default or if window.localStorage was passed in
if (
typeof window !== 'undefined' &&
typeof window.localStorage !== 'undefined' &&
(!storage || storage === window.localStorage)
) {
storage = AsyncLocalStorage
}
if (!storage) {
return Promise.reject('localStorage (the default) is not supported in ' +
'this environment, please configure a supported storage provider')
}

if (!jsonify) { jsonify = true } // default to true like mobx-persist
const whitelistDict = arrToDict(whitelist)
const blacklistDict = arrToDict(blacklist)
Expand Down

0 comments on commit c141d03

Please sign in to comment.