Merge branch 'master' of https://github.com/rookLab/react-component-caching

Author: Tim

README.md

@@ -1,30 +1,30 @@
-# ReactCC
+# React Component Caching
 
 ## Overview
-ReactCC is a component-level caching library for rendering React components on the server.
+React Component Caching is a component-level caching library for faster server-side rendering with React 16. 
 - Use any of React's four server-side rendering methods
-- Cache simple components or templates
+- Cache components using a simple or template strategy
 - Choose from three cache implementations (LRU, Redis, or Memcached)
 
 ## Installation
 Using npm:
 ```shell
-$ npm install reactcc
+$ npm install react-component-caching
 ```
 
 ## Usage
 ### In Node rendering server:
-Instantiate a cache and pass it into any rendering method as a second argument. Wherever you would use ReactDOM.renderToString, use ReactCC.renderToString.
+Instantiate a cache and pass it to any rendering method (`renderToString`, `renderToStaticMarkup`, `renderToNodeStream`, or `renderToStaticNodeStream`) as a second argument. Wherever you would use `ReactDOM.renderToString`, use `ReactCC.renderToString`.
 ```javascript
-const ReactCC = require("reactcc");
+const ReactCC = require("react-component-caching");
 const cache = ReactCC.ComponentCache();
 ReactCC.renderToString(<App />, cache>)
 
 // ...
 ```
 
 ### In React app:
-To flag a component for caching, simply add a 'cache' property to it. To create a cache template, add both 'cache' and 'templatized', along with an array of props to templatize.
+To flag a component for caching, simply add a `cache` property to it. 
 
 ```javascript
 export default class App extends Component {
@@ -33,7 +33,26 @@ export default class App extends Component {
  <div>
  <ComponentNotToBeCached />
  <ComponentToCache cache />
- <ComponentToTemplatize cache templatized='props to templatize' />
+ </div>
+ );
+ }
+}
+// ...
+```
+
+## Templatizing Cached Components
+The example above employs a simple caching strategy: a rendered component is saved with its prop values. Each time the component is rendered with different prop values, a separate copy is saved to the cache. If a component is frequently rendered with different prop values, you may prefer to cache a template of the component to save space in the cache. The template strategy stores a version of the component with placeholders (e.g. `{{0}}`, `{{1}}`) in place of actual prop values. 
+
+To create a cache template, add both `cache` and `templatized` to the component along with an array of props to templatize. Templatized props should have **string** or **number** values. **Be aware that templates are not currently supported with the `renderToNodeStream` or `renderToStaticNodeStream` methods.**
+
+```javascript
+export default class App extends Component {
+ render() {
+ return (
+ <div>
+ <ComponentNotToBeCached />
+ <ComponentToCache cache />
+ <ComponentToTemplatize templatizedProp1="value" templatizedProp2="value2" nonTemplatizedProp="anotherValue" cache templatized={["templatizedProp1", "templatizedProp2"]} />
  </div>
  );
  }
@@ -42,12 +61,12 @@ export default class App extends Component {
 ```
 
 ## Cache Options
-ReactCC provides its own cache implementation as well as support for Redis and Memcached. Simply create your preferred cache and pass it into one of the rendering methods.
+React Component Caching provides its own cache implementation as well as support for Redis and Memcached. Simply create your preferred cache and pass it into one of the rendering methods.
 
-**ReactCC LRU Cache Example:**
+**Standard (LRU) Cache Example:**
 
 ```javascript
-const ReactCC = require("reactcc");
+const ReactCC = require("react-component-caching");
 
 const cache = ReactCC.ComponentCache();
 
@@ -57,7 +76,7 @@ ReactCC.renderToString(<App />, cache);
 **Redis Example:**
 
 ```javascript
-const ReactCC = require("reactcc");
+const ReactCC = require("react-component-caching");
 const redis = require("redis");
 
 const cache = redis.createClient();
@@ -68,7 +87,7 @@ ReactCC.renderToString(<App />, cache);
 **Memcached Example:**
 
 ```javascript
-const ReactCC = require("reactcc");
+const ReactCC = require("react-component-caching");
 const Memcached = require("memcached");
 
 const cache = new Memcached(server location, options);
@@ -77,13 +96,10 @@ const cache = new Memcached(server location, options);
 ReactCC.renderToString(<App />, cache, 1000);
 ```
 
-## Templatizing Cached Components
-Insert description and implementation here
-
 ## API
 
 ### ReactCC
-ReactCC gives you access to all four of React 16's server-side rendering methods, as well as additional functionality. ReactCC methods are described below.
+React Component Caching gives you access to all four of React 16's server-side rendering methods, as well as additional functionality. Available methods are described below.
 
 ### ComponentCache
 - `size`: (*Optional*) An integer representing the maximum size (in characters) of the cache. Defaults to 1 million.
@@ -94,7 +110,7 @@ const cache = new ReactCC.ComponentCache();
 ```
 
 ### renderToString
-- `component`: The React component being rendered.
+- `component`: The React component being rendered
 - `cache`: The component cache
 - `memLife`: (*Only if using Memcached*) A number representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
@@ -104,7 +120,7 @@ ReactCC.renderToString(<App />, cache);
 ```
 
 ### renderToStaticMarkup
-- `component`: The React component being rendered.
+- `component`: The React component being rendered
 - `cache`: The component cache
 - `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
@@ -114,7 +130,7 @@ ReactCC.renderToStaticMarkup(<App />, cache);
 ```
 
 ### renderToNodeStream
-- `component`: The React component being rendered.
+- `component`: The React component being rendered
 - `cache`: The component cache
 - `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
@@ -124,7 +140,7 @@ ReactCC.renderToNodeStream(<App />, cache);
 ```
 
 ### renderToStaticNodeStream
-- `component`: The React component being rendered.
+- `component`: The React component being rendered
 - `cache`: The component cache
 - `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.