Skip to content

Commit

Permalink
docs: Update readme and changelog script (#9)
Browse files Browse the repository at this point in the history
* Update readme

* Update scripts

* Bump version
  • Loading branch information
spautz authored Jun 27, 2020
1 parent e546585 commit c8a59a9
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 40 deletions.
76 changes: 43 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,58 +1,68 @@
# Hibernating Components for React Router
# Hibernating Components for React & React Router

**These packages are in active development. Things will change rapidly, and it is not yet production-ready. Feedback is welcome.**
Bring back previously-unmounted components and subtrees -- state and all -- when they remount.

Detach a subtree when it unmounts, and bring it back -- state and all -- when it remounts.
**These packages are in active development. Things will change rapidly, and it is not yet production-ready. Feedback is welcome.**

[![build status](https://img.shields.io/travis/com/spautz/react-hibernate/master.svg)](https://travis-ci.com/spautz/react-hibernate/branches)
[![test coverage](https://img.shields.io/coveralls/github/spautz/react-hibernate/master.svg)](https://coveralls.io/github/spautz/react-hibernate?branch=master)
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-router-hibernate)](https://bundlephobia.com/result?p=react-router-hibernate@latest)

## Overview

By defaut, navigating from one `<Route>` to another in react-router will unmount the old route's tree.
If you return to it, it will be recreated from scratch.
When a React component stops being rendered, it's gone: local state, dom state, etc are removed. If you want to keep
that prior state around you must store it elsewhere.

This library adds `<HibernatingSwitch>` and `<HibernatingRoute>`: drop-in replacements for `<Switch>` and `<Route>`
which do not immediately unmount components when you navigate away. If you return, the prior tree will be restored,
local state and all.
This repo provides libraries which can keep the old subtree around for a while, when desired.

## Packages
Instead of unmounting, the subtree goes into "hibernation". It will "wake up" when you return, including all internal
state, as if you never left.

**[react-hibernate](./packages/react-hibernate-core/)** [![npm version](https://img.shields.io/npm/v/react-hibernate.svg)](https://www.npmjs.com/package/react-hibernate)
- [React Router Hibernate](./packages/react-router-hibernate/) works per-route, if you're using
[React Router](https://reacttraining.com/react-router/) (v5)
- [React Hibernate](./packages/react-hibernate-core/) works for any React subtree
- [React Pauseable Containers](./packages/react-pauseable-containers/) improve performances by freezing all updates
to hibernated subtrees

Restore previously-unmounted subtrees -- state and all -- on remount.
[Cache options are available](https://github.com/spautz/limited-cache/#options) to control how many subtrees may be
hibernated at a time, and for how long.

**[react-router-hibernate](./packages/react-router-hibernate/)** [![npm version](https://img.shields.io/npm/v/react-router-hibernate.svg)](https://www.npmjs.com/package/react-router-hibernate)
## Some Use Cases

A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back.
- Screens which are slow to initialize: avoid initializing a second time
- Form values: restore half-completed form fields if the user leaves and come back later
- Background tasks like file uploads: dispatch actions from unmounted components
- Accordion panels, steps in a wizard, or other temporarily-hidden content

**[react-pauseable-containers](./packages/react-pauseable-containers/)** [![npm version](https://img.shields.io/npm/v/react-pauseable-containers.svg)](https://www.npmjs.com/package/react-pauseable-containers)
In general, this is a "good enough" alternative to storing component state in Redux or an external cache: you _could_
build a powerful system to track partially-completed forms, it would just take time and engineering. React Hibernate is
just a quick, easy way to get "good enough" coverage for the common cases.

Prevent subtrees from rerendering when their parent changes, or when certain context values change.
## Packages

**[redux-pauseable-store](./packages/redux-pauseable-store/)** [![npm version](https://img.shields.io/npm/v/redux-pauseable-store.svg)](https://www.npmjs.com/package/redux-pauseable-store)
**[react-hibernate](./packages/react-hibernate-core/)**

Derive one redux store from another, then pause it.
[![npm version](https://img.shields.io/npm/v/react-hibernate.svg)](https://www.npmjs.com/package/react-hibernate)
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-hibernate)](https://bundlephobia.com/result?p=react-hibernate@latest)

## Example
Restore previously-unmounted subtrees -- state and all -- on remount.

**[react-router-hibernate](./packages/react-router-hibernate/)**

[![npm version](https://img.shields.io/npm/v/react-router-hibernate.svg)](https://www.npmjs.com/package/react-router-hibernate)
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-router-hibernate)](https://bundlephobia.com/result?p=react-router-hibernate@latest)

A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back.

```javascript
import { HibernatingSwitch, HibernatingRoute } from 'react-router-hibernate';
**[react-pauseable-containers](./packages/react-pauseable-containers/)**

// then render:
<HibernatingSwitch maxCacheTime={60000}>
[![npm version](https://img.shields.io/npm/v/react-pauseable-containers.svg)](https://www.npmjs.com/package/react-pauseable-containers)
[![gzip size](https://img.shields.io/bundlephobia/minzip/react-pauseable-containers)](https://bundlephobia.com/result?p=react-pauseable-containers@latest)

{/* Use the "Hibernating" variants exactly like the standard ones */}
<HibernatingRoute path="/foo" component={...} />
<HibernatingRoute path="/bar" render={...} />
Prevent subtrees from rerendering when their parent changes, or when values from context change.

{/* You can mix and match: use them alongside the normal react-router components */}
<Route path="/baz" component={...} />
<Redirect from="/something-else" to="/foo" />
**[redux-pauseable-store](./packages/redux-pauseable-store/)**

{/* If you have your own custom components, you can add an isHibernatingRoute prop */}
<MyPrivateRoute path="/secret" component={...} isHibernatingRoute />
[![npm version](https://img.shields.io/npm/v/redux-pauseable-store.svg)](https://www.npmjs.com/package/redux-pauseable-store)
[![gzip size](https://img.shields.io/bundlephobia/minzip/redux-pauseable-store)](https://bundlephobia.com/result?p=redux-pauseable-store@latest)

</HibernatingSwitch>
```
Derive one redux store from another, then pause its state and/or actions. This is used by react-pauseable-containers.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "react-hibernate-workspace",
"private": true,
"version": "0.0.3",
"license": "MIT",
"homepage": "https://github.com/spautz/react-hibernate#readme",
"repository": {
Expand All @@ -18,14 +19,15 @@
"clean": "rimraf storybook-static/ && rimraf node_modules/.cache/ && yon test:clean",
"clean:all": "yon clean && lerna exec yon clean",
"prepare:all": "lerna exec yon prepare",
"release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
"release:tag": "standard-version --sign --skip.changelog --release-as ",
"test": "jest --coverage",
"test:clean": "rimraf coverage/ && lerna exec yon test:clean",
"test:watch": "jest --coverage --watch",
"test:report": "jest --coverage --coverageReporters=text-lcov | coveralls",
"format": "prettier --write \"**/*.*\"",
"format:checkup": "prettier --list-different \"**/*.*\"",
"lint": "eslint \"**/*.{js,jsx,json,ts,tsx}\"",
"release": "standard-version --sign --release-as ",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"types": "tsc --noEmit --p tsconfig.json --jsx react",
Expand Down
2 changes: 1 addition & 1 deletion packages/dev-helpers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"____ INTEGRATION ___________________________________________________": "",
"dev": "yon run format && yon run types && yon run lint",
"checkup": "yon format:checkup && yon run types && yon run lint",
"all": "yon run dev && yon run test:coverage && yon run build"
"all": "yon run dev && yon run test && yon run build"
},
"dependencies": {
"@material-ui/core": "^4.9.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-hibernate/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"____ INTEGRATION ___________________________________________________": "",
"dev": "yon run format && yon run types && yon run lint",
"checkup": "yon format:checkup && yon run types && yon run lint",
"all": "yon run dev && yon run test:coverage && yon run build"
"all": "yon run dev && yon run test && yon run build"
},
"dependencies": {
"limited-cache": "^0.5.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-pauseable-containers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"____ INTEGRATION ___________________________________________________": "",
"dev": "yon run format && yon run types && yon run lint",
"checkup": "yon format:checkup && yon run types && yon run lint",
"all": "yon run dev && yon run test:coverage && yon run build"
"all": "yon run dev && yon run test && yon run build"
},
"dependencies": {},
"devDependencies": {
Expand Down
4 changes: 3 additions & 1 deletion packages/react-router-hibernate/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
"format": "prettier --write \"**/*.*\"",
"format:checkup": "prettier --list-different \"**/*.*\"",
"lint": "eslint \"**/*.{js,jsx,json,ts,tsx}\"",
"release:changelog": "standard-version --skip.commit",
"release:tag": "standard-version --sign --skip.changelog --release-as ",
"test": "jest --coverage",
"test:clean": "rimraf coverage-local/",
"test:watch": "jest --coverage --watch",
Expand All @@ -46,7 +48,7 @@
"____ INTEGRATION ___________________________________________________": "",
"dev": "yon run format && yon run types && yon run lint",
"checkup": "yon format:checkup && yon run types && yon run lint",
"all": "yon run dev && yon run test:coverage && yon run build"
"all": "yon run dev && yon run test && yon run build"
},
"dependencies": {
"limited-cache": "^0.5.0",
Expand Down
6 changes: 4 additions & 2 deletions packages/redux-pauseable-store/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "redux-pauseable-store",
"version": "0.0.2",
"version": "0.0.3",
"description": "Derive one redux store from another, then pause it",
"keywords": [],
"license": "MIT",
Expand Down Expand Up @@ -33,6 +33,8 @@
"format": "prettier --write \"**/*.*\"",
"format:checkup": "prettier --list-different \"**/*.*\"",
"lint": "eslint \"**/*.{js,jsx,json,ts,tsx}\"",
"release:changelog": "standard-version --skip.commit --skip.tag --release-as ",
"release:tag": "standard-version --sign --skip.changelog --release-as ",
"test": "jest --coverage",
"test:clean": "rimraf coverage-local/",
"test:watch": "jest --coverage --watch",
Expand All @@ -46,7 +48,7 @@
"____ INTEGRATION ___________________________________________________": "",
"dev": "yon run format && yon run types && yon run lint",
"checkup": "yon format:checkup && yon run types && yon run lint",
"all": "yon run dev && yon run test:coverage && yon run build"
"all": "yon run dev && yon run test && yon run build"
},
"dependencies": {},
"devDependencies": {},
Expand Down

0 comments on commit c8a59a9

Please sign in to comment.