diff --git a/README.md b/README.md
index f001673..0d48610 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-# electrode-react-ssr-profiler
+# electrode-react-ssr-caching
-Support React Server Side Rendering profiling to inspect the time each component took to render and provide component caching to help you speed up SSR.
+Support profiling React Server Side Rendering time and component caching to help you speed up SSR.
# Installing
```
-npm i electrode-react-ssr-profiler
+npm i electrode-react-ssr-caching
```
# Usage
@@ -15,7 +15,7 @@ npm i electrode-react-ssr-profiler
You can use this module to inspect the time each component took to render.
```js
-import SSRProfiler from "electrode-react-ssr-profiler";
+import SSRCaching from "electrode-react-ssr-caching";
import { renderToString } from "react-dom/server";
import MyComponent from "mycomponent";
@@ -24,11 +24,11 @@ for( let i = 0; i < 10; i ++ ) {
renderToString();
}
-SSRProfiler.clearProfileData();
-SSRProfiler.enableProfiling();
+SSRCaching.clearProfileData();
+SSRCaching.enableProfiling();
const html = renderToString();
-SSRProfiler.enableProfiling(false);
-console.log(JSON.stringify(SSRProfiler.profileData, null, 2));
+SSRCaching.enableProfiling(false);
+console.log(JSON.stringify(SSRCaching.profileData, null, 2));
```
## Caching
@@ -38,10 +38,10 @@ Once you determined the most expensive components with profiling, you can enable
The basic steps to enabling caching are:
```js
-import SSRProfiler from "electrode-react-ssr-profiler";
+import SSRCaching from "electrode-react-ssr-caching";
-SSRProfiler.enableCaching();
-SSRProfiler.setCachingConfig(cacheConfig);
+SSRCaching.enableCaching();
+SSRCaching.setCachingConfig(cacheConfig);
```
Where `cacheConfig` contains information on what component to apply caching. See below for details.
@@ -72,7 +72,7 @@ const cacheConfig = {
}
}
-SSRProfiler.setCachingConfig(cacheConfig);
+SSRCaching.setCachingConfig(cacheConfig);
```
### Caching Strategies
diff --git a/docs/art-of-optimizing-ssr.md b/docs/art-of-optimizing-ssr.md
index ca94506..31525b8 100644
--- a/docs/art-of-optimizing-ssr.md
+++ b/docs/art-of-optimizing-ssr.md
@@ -51,7 +51,7 @@ After you've written profiling code to manually render your component with stati
The first thing you want to do now is run profiling for a single rendering pass to find how long each individual component take.
-Here is an example to use electrode-react-ssr-profiler to profile a component using Redux:
+Here is an example to use electrode-react-ssr-caching to profile a component using Redux:
```js
const data = {
@@ -73,11 +73,11 @@ for( let i = 0; i < 10; i ++ ) {
// Now profile and save the data for a single rendering pass
promise.then( () => {
- SSRProfiler.enableProfiling();
- SSRProfiler.clearProfileData();
+ SSRCaching.enableProfiling();
+ SSRCaching.clearProfileData();
return renderComponent()
.then( () => {
- console.log( SSRProfiler.data, null, 2 );
+ console.log( SSRCaching.data, null, 2 );
});
});
```
diff --git a/lib/ssr-profiler.js b/lib/ssr-caching.js
similarity index 100%
rename from lib/ssr-profiler.js
rename to lib/ssr-caching.js
diff --git a/package.json b/package.json
index 212cb78..b4f22e4 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
- "name": "electrode-react-ssr-profiler",
+ "name": "electrode-react-ssr-caching",
"version": "0.1.3",
"description": "Optimize React SSR with profiling and component caching",
- "main": "lib/ssr-profiler.js",
+ "main": "lib/ssr-caching.js",
"scripts": {
"test": "npm run build-test && gulp check",
"build-test": "rm -f test/gen-lib/* && babel test/src -d test/gen-lib",
@@ -10,7 +10,7 @@
},
"repository": {
"type": "git",
- "url": "git@github.com:electrode-io/electrode-react-ssr-profiler.git"
+ "url": "git@github.com:electrode-io/electrode-react-ssr-caching.git"
},
"keywords": [],
"author": "Joel Chen ",
diff --git a/test/spec/caching.simple.spec.js b/test/spec/caching.simple.spec.js
index 1bfc013..b4d69e6 100644
--- a/test/spec/caching.simple.spec.js
+++ b/test/spec/caching.simple.spec.js
@@ -2,18 +2,18 @@
// test simple caching feature
-const SSRProfiler = require("../..");
+const SSRCaching = require("../..");
const renderGreeting = require("../gen-lib/render-greeting").default;
const chai = require("chai");
const expect = chai.expect;
process.env.NODE_ENV = "production";
-describe("SSRProfiler simple caching", function () {
+describe("SSRCaching simple caching", function () {
afterEach(() => {
- SSRProfiler.setCachingConfig({});
- SSRProfiler.clearCache();
- SSRProfiler.clearProfileData();
+ SSRCaching.setCachingConfig({});
+ SSRCaching.clearCache();
+ SSRCaching.clearProfileData();
});
const verifyRenderResults = (r1, r2, r3) => {
@@ -32,8 +32,8 @@ describe("SSRProfiler simple caching", function () {
const r1 = renderGreeting("test", message);
const r1Time = Date.now() - start;
- SSRProfiler.enableCaching();
- SSRProfiler.setCachingConfig({
+ SSRCaching.enableCaching();
+ SSRCaching.setCachingConfig({
components: {
"Hello": {
strategy: "simple",
@@ -45,17 +45,17 @@ describe("SSRProfiler simple caching", function () {
// should add an entry to cache with key-simple
- SSRProfiler.shouldHashKeys(false);
+ SSRCaching.shouldHashKeys(false);
renderGreeting("test", message);
- expect(SSRProfiler.cacheStore.getEntry("Hello", "key-simple").hits).to.equal(1);
+ expect(SSRCaching.cacheStore.getEntry("Hello", "key-simple").hits).to.equal(1);
// should add an entry to cache with hashed key from key-simple
- SSRProfiler.shouldHashKeys(true);
+ SSRCaching.shouldHashKeys(true);
start = Date.now();
const r2 = renderGreeting("test", message);
const r2Time = Date.now() - start;
- const entry = SSRProfiler.cacheStore.getEntry("Hello", "1357465574333202611");
+ const entry = SSRCaching.cacheStore.getEntry("Hello", "1357465574333202611");
expect(entry.hits).to.equal(1);
// now render should use result from cache
@@ -78,17 +78,17 @@ describe("SSRProfiler simple caching", function () {
it("should cache component with simple strategy and stringify", function () {
const message = "good morning";
- SSRProfiler.enableProfiling(true);
+ SSRCaching.enableProfiling(true);
const r1 = renderGreeting("test", message);
- const data = SSRProfiler.profileData;
+ const data = SSRCaching.profileData;
expect(data.Greeting[0].Hello[0].time).to.be.above(0);
- SSRProfiler.enableProfiling(false);
- SSRProfiler.clearProfileData();
+ SSRCaching.enableProfiling(false);
+ SSRCaching.clearProfileData();
expect(data).to.deep.equal({});
- SSRProfiler.enableCaching();
- SSRProfiler.setCachingConfig({
+ SSRCaching.enableCaching();
+ SSRCaching.setCachingConfig({
components: {
"Hello": {
strategy: "simple",
@@ -99,20 +99,20 @@ describe("SSRProfiler simple caching", function () {
// should add an entry to cache with stringified props as cache key
- SSRProfiler.shouldHashKeys(false);
+ SSRCaching.shouldHashKeys(false);
renderGreeting("test", message);
- expect(SSRProfiler.cacheStore.getEntry("Hello", JSON.stringify({name: "test", message})).hits).to.equal(1);
+ expect(SSRCaching.cacheStore.getEntry("Hello", JSON.stringify({name: "test", message})).hits).to.equal(1);
// should add an entry to cache with hashed value of key
- SSRProfiler.shouldHashKeys(true);
+ SSRCaching.shouldHashKeys(true);
const r2 = renderGreeting("test", message);
- const entry = SSRProfiler.cacheStore.getEntry("Hello", "2422985312975527455");
+ const entry = SSRCaching.cacheStore.getEntry("Hello", "2422985312975527455");
expect(entry.hits).to.equal(1);
// now render should use result from cache
- SSRProfiler.enableProfiling(true);
+ SSRCaching.enableProfiling(true);
const r3 = renderGreeting("test", message);
expect(data.Greeting[0].Hello[0].time).to.be.above(0);
expect(entry.hits).to.equal(2);
diff --git a/test/spec/caching.template.spec.js b/test/spec/caching.template.spec.js
index d3fda9a..c73314c 100644
--- a/test/spec/caching.template.spec.js
+++ b/test/spec/caching.template.spec.js
@@ -2,7 +2,7 @@
// test template caching feature
-const SSRProfiler = require("../..");
+const SSRCaching = require("../..");
const renderGreeting = require("../gen-lib/render-greeting").default;
const renderBoard = require("../gen-lib/render-board").default;
const renderHello = require("../gen-lib/render-hello").default;
@@ -10,14 +10,14 @@ const chai = require("chai");
const expect = chai.expect;
process.env.NODE_ENV = "production";
-describe("SSRProfiler template caching", function () {
+describe("SSRCaching template caching", function () {
beforeEach(() => {
- SSRProfiler.setCachingConfig({});
- SSRProfiler.clearCache();
- SSRProfiler.clearProfileData();
- SSRProfiler.enableCaching(false);
- SSRProfiler.enableProfiling(false);
+ SSRCaching.setCachingConfig({});
+ SSRCaching.clearCache();
+ SSRCaching.clearProfileData();
+ SSRCaching.enableCaching(false);
+ SSRCaching.enableProfiling(false);
});
function removeReactChecksum(html) {
@@ -49,8 +49,8 @@ describe("SSRProfiler template caching", function () {
// Enable caching and test
- SSRProfiler.enableCaching();
- SSRProfiler.setCachingConfig({
+ SSRCaching.enableCaching();
+ SSRCaching.setCachingConfig({
components: {
"Hello": {
strategy: "template",
@@ -61,15 +61,15 @@ describe("SSRProfiler template caching", function () {
// should add an entry to cache with template key
- SSRProfiler.stripUrlProtocol(true);
- SSRProfiler.shouldHashKeys(false);
+ SSRCaching.stripUrlProtocol(true);
+ SSRCaching.shouldHashKeys(false);
// first just render Hello by itself to create a cache with diff react-id's
renderHello("test", message); // eslint-disable-line
- const key1 = Object.keys(SSRProfiler.cacheStore.cache)[0];
+ const key1 = Object.keys(SSRCaching.cacheStore.cache)[0];
const keyTmpl = key1.substr(6);
- const entry1 = SSRProfiler.cacheStore.getEntry("Hello", keyTmpl);
+ const entry1 = SSRCaching.cacheStore.getEntry("Hello", keyTmpl);
expect(entry1.hits).to.equal(1);
// render hello again and verify cache
@@ -86,10 +86,10 @@ describe("SSRProfiler template caching", function () {
// should add an entry to cache with hashed key from template key
- SSRProfiler.shouldHashKeys(true);
- const hashKey = SSRProfiler.hashKeyFn(keyTmpl);
+ SSRCaching.shouldHashKeys(true);
+ const hashKey = SSRCaching.hashKeyFn(keyTmpl);
const r2 = renderGreeting("test", message);
- const entry = SSRProfiler.cacheStore.getEntry("Hello", hashKey);
+ const entry = SSRCaching.cacheStore.getEntry("Hello", hashKey);
expect(entry.hits).to.equal(1);
// now render should use result from cache
@@ -98,9 +98,9 @@ describe("SSRProfiler template caching", function () {
expect(entry.hits).to.equal(2);
expect(r2).includes(message);
verifyRenderResults(r1, r2, r3);
- SSRProfiler.cacheHitReport();
- expect(SSRProfiler.cacheEntries()).to.equal(2);
- expect(SSRProfiler.cacheSize()).to.be.above(0);
+ SSRCaching.cacheHitReport();
+ expect(SSRCaching.cacheEntries()).to.equal(2);
+ expect(SSRCaching.cacheSize()).to.be.above(0);
});
const users = [
@@ -196,44 +196,44 @@ describe("SSRProfiler template caching", function () {
};
const testTemplate = (stripUrlProtocol, hashKeys, profiling) => {
- SSRProfiler.enableProfiling(profiling);
+ SSRCaching.enableProfiling(profiling);
let start = Date.now();
const r1 = renderBoard(users);
const r1Time = Date.now() - start;
if (profiling) {
- const data = SSRProfiler.profileData;
+ const data = SSRCaching.profileData;
expect(data.Board[0].InfoCard[0].time).to.be.above(0);
- SSRProfiler.clearProfileData();
- SSRProfiler.enableProfiling(false);
+ SSRCaching.clearProfileData();
+ SSRCaching.enableProfiling(false);
}
- SSRProfiler.enableCaching();
- SSRProfiler.setCachingConfig(cacheConfig);
- SSRProfiler.shouldHashKeys(hashKeys);
- SSRProfiler.stripUrlProtocol(stripUrlProtocol);
+ SSRCaching.enableCaching();
+ SSRCaching.setCachingConfig(cacheConfig);
+ SSRCaching.shouldHashKeys(hashKeys);
+ SSRCaching.stripUrlProtocol(stripUrlProtocol);
start = Date.now();
let r2 = renderBoard(users);
const r2Time = Date.now() - start;
- const cache = SSRProfiler.cacheStore.cache;
+ const cache = SSRCaching.cacheStore.cache;
const keys = Object.keys(cache);
keys.forEach((x) => {
expect(cache[x].hits).to.equal(0);
});
- SSRProfiler.enableProfiling(profiling);
+ SSRCaching.enableProfiling(profiling);
start = Date.now();
let r3 = renderBoard(users);
const r3Time = Date.now() - start;
if (profiling) {
- const data = SSRProfiler.profileData;
+ const data = SSRCaching.profileData;
expect(data.Board[0].InfoCard[0].time).to.be.above(0);
- SSRProfiler.clearProfileData();
+ SSRCaching.clearProfileData();
}
console.log(`rendering time r1 ${r1Time}ms r2 ${r2Time}ms r3 (cached) ${r3Time}ms`);
@@ -267,15 +267,15 @@ describe("SSRProfiler template caching", function () {
it("should support debug caching", function () {
renderBoard(users);
- SSRProfiler.enableCaching();
- SSRProfiler.enableCachingDebug();
- expect(SSRProfiler.config.debug).to.equal(true);
- SSRProfiler.enableCachingDebug(false);
- expect(SSRProfiler.config.debug).to.equal(false);
- SSRProfiler.enableCachingDebug(true);
- expect(SSRProfiler.config.debug).to.equal(true);
- SSRProfiler.setCachingConfig(cacheConfig);
- SSRProfiler.shouldHashKeys(false);
+ SSRCaching.enableCaching();
+ SSRCaching.enableCachingDebug();
+ expect(SSRCaching.config.debug).to.equal(true);
+ SSRCaching.enableCachingDebug(false);
+ expect(SSRCaching.config.debug).to.equal(false);
+ SSRCaching.enableCachingDebug(true);
+ expect(SSRCaching.config.debug).to.equal(true);
+ SSRCaching.setCachingConfig(cacheConfig);
+ SSRCaching.shouldHashKeys(false);
const r2 = renderBoard(users);
expect(r2).includes("