Merge pull request #11 from mnaga/master

Added support for templating objects and arrays recursively

Author: maximenajim

lib/index.js

@@ -4,7 +4,10 @@ const get = require("lodash/get");
 const set = require("lodash/set");
 const wrap = require("lodash/wrap");
 const template = require("lodash/template");
+const mapKeys = require("lodash/mapKeys");
+const isArray = require("lodash/isArray");
 const isObject = require("lodash/isObject");
+const isPlainObject = require("lodash/isPlainObject");
 const Module = require("module");
 const InstantiateReactComponent = require("react-dom/lib/instantiateReactComponent");
 const escapeTextContentForBrowser = require("react-dom/lib/escapeTextContentForBrowser");
@@ -82,12 +85,50 @@ class InstantiateReactComponentOptimizer {
       }
     }
 
-    /* eslint-disable max-params, no-console*/
+    /* eslint-disable max-params, no-console, prefer-template*/
+
+    const restoreAttr = (origProps, lookupPropTable, propKey, arrNotaKey, propValue) => {
+      if (isPlainObject(propValue)) {
+        mapKeys(propValue, (value, key) => {
+          restoreAttr(origProps, lookupPropTable, `${propKey}.${key}`,
+           `${propKey}["${key}"]`, value);
+        });
+      } else if (isArray(propValue)) {
+        for (let i = 0; i < propValue.length; i++) {
+          restoreAttr(origProps, lookupPropTable, `${propKey}.${i}`, `${propKey}[${i}]`,
+            propValue[i]);
+        }
+      } else {
+        const _attrKey = propKey.replace(/_/gi, "__").replace(/\./gi, "_");
+        set(origProps, arrNotaKey, lookupPropTable[_attrKey]);
+      }
+    };
+
+    const templatizeAttr = (origProps, lookupPropTable, propKey, arrNotaKey,
+     propValue, addlCacheForArr) => {
+      if (isPlainObject(propValue)) {
+        mapKeys(propValue, (value, key) => {
+          templatizeAttr(origProps, lookupPropTable, `${propKey}.${key}`, `${propKey}["${key}"]`,
+           value, addlCacheForArr);
+        });
+      } else if (isArray(propValue)) {
+        addlCacheForArr.push(propKey + "_" + propValue.length);
+        for (let i = 0; i < propValue.length; i++) {
+          templatizeAttr(origProps, lookupPropTable, `${propKey}.${i}`, `${propKey}[${i}]`,
+            propValue[i], addlCacheForArr);
+        }
+      } else {
+        const _attrKey = propKey.replace(/_/gi, "__").replace(/\./gi, "_");
+        lookupPropTable[_attrKey] = escapeTextContentForBrowser(propValue);
+        set(origProps, arrNotaKey, "${" + _attrKey + "}");
+      }
+    };
+
     const restorePropsAndProcessTemplate = (compiled, templateAttrs, templateAttrValues, curEl) => {
       templateAttrs.forEach((attrKey) => {
-        const _attrKey = attrKey.replace(".", "__");
-        set(curEl.props, attrKey, templateAttrValues[_attrKey]);
-        templateAttrValues[_attrKey] = escapeTextContentForBrowser(templateAttrValues[_attrKey]);
+        const value = get(curEl.props, attrKey);
+        restoreAttr({a: curEl.props}, templateAttrValues, `a.${attrKey}`, `a.${attrKey}`,
+         value);
       });
       return compiled(templateAttrValues);
     };
@@ -99,19 +140,6 @@ class InstantiateReactComponentOptimizer {
         self.componentsToCache.indexOf(curEl.type.name) > EMPTY_ID);
     };
 
-    /* eslint-disable max-params */
-    const templatizeProps = function (attrKey, templateAttrValues, curEl, cmpName) {
-      const _attrKey = attrKey.replace(".", "__");
-      templateAttrValues[_attrKey] = get(curEl.props, attrKey);
-      if (isObject(templateAttrValues[_attrKey])) {
-        throw new Error(
-          `Cannot templatize Object at ${attrKey} for component ${cmpName}`
-        );
-      }
-      /* eslint-disable prefer-template */
-      set(curEl.props, attrKey, "${" + _attrKey + "}");
-    };
-
     const WrappedInstantiateReactComponent = wrap(InstantiateReactComponent,
       function (instantiate) {
         const component = instantiate.apply(
@@ -132,13 +160,16 @@ class InstantiateReactComponentOptimizer {
                 if (generatedKey === null) {
                   return mount.apply(component, [].slice.call(arguments, 1));
                 }
-                const cacheKey = `${cmpName}:${generatedKey}`;
+                const addlCacheForArr = [];
                 const rootID = arguments[1];
                 const templateAttrs = self.config.components[cmpName].templateAttrs || [];
                 const templateAttrValues = {};
                 templateAttrs.forEach((attrKey) => {
-                  templatizeProps(attrKey, templateAttrValues, curEl, cmpName);
+                  const value = get(curEl.props, attrKey);
+                  templatizeAttr({a: curEl.props}, templateAttrValues, `a.${attrKey}`,
+                   `a.${attrKey}`, value, addlCacheForArr);
                 });
+                const cacheKey = `${cmpName}:${generatedKey}:${addlCacheForArr}`;
                 const cachedObj = self.lruCache.get(cacheKey);
                 if (cachedObj) {
                   eventCallback({type: "cache", event: "hit", cmpName: cmpName});

test/spec/index.spec.js

@@ -344,15 +344,15 @@ describe("react-component-cache", function () {
     /*eslint-enable camelcase*/
   });
 
-  it("should should throw error when templateAttr is function or object", () => {
+  it("should accept object attributes for templating", () => {
     clearRequireCache();
 
     let renderCount = 0;
     /* eslint-disable max-params, no-console*/
     reactComponentCache({
       components: {
         "HelloWorld": {
-          templateAttrs: ["text"]
+          templateAttrs: ["data"]
         }
       }
     });
@@ -362,16 +362,57 @@ describe("react-component-cache", function () {
     class HelloWorld extends React.Component {
       render() {
         renderCount++;
-        return React.DOM.div(null, this.props.text);
+        return React.DOM.div(null, this.props.data.text);
       }
     }
-    const renderFn = () => {
-      ReactDomServer.renderToString(React.createFactory(HelloWorld)({text: {a: "Hello World X!"}}));
-    };
-    expect(renderFn).to.throw(
-      /Cannot templatize Object at text for component HelloWorld/);
 
-    expect(renderCount).to.equal(0);
+    // Cache Miss
+    let props = {data: { text: "Hello World X!"}};
+    expect(ReactDomServer.renderToString(React.createFactory(HelloWorld)(props))).to.contains("Hello World X!");
+    expect(props.data.text).to.equal("Hello World X!");
+    expect(renderCount).to.equal(1);
+
+    // Cache Hit
+    props = {data: { text: "Hello World Y!"}};
+    expect(ReactDomServer.renderToString(React.createFactory(HelloWorld)(props))).to.contains("Hello World Y!");
+    expect(props.data.text).to.equal("Hello World Y!");
+    expect(renderCount).to.equal(1);
+  });
+
+  it("should accept array ref for templating", () => {
+    clearRequireCache();
+
+    let renderCount = 0;
+    /* eslint-disable max-params, no-console*/
+    reactComponentCache({
+      components: {
+        "HelloWorld": {
+          templateAttrs: ["data"]
+        }
+      }
+    });
+    /* eslint-enable max-params, no-console*/
+    const React = require("react");
+    const ReactDomServer = require("react-dom/server");
+    class HelloWorld extends React.Component {
+      render() {
+        renderCount++;
+        const str = `${this.props.data[0]} ${this.props.data[1]}`;
+        return React.DOM.div(null, str);
+      }
+    }
+
+    // Cache Miss
+    let props = {data: ["Hello World", "X!"]};
+    expect(ReactDomServer.renderToString(React.createFactory(HelloWorld)(props))).to.contains("Hello World X!");
+    expect(props.data.length).to.equal(2);
+    expect(renderCount).to.equal(1);
+
+    // Cache Hit
+    props = {data: ["Hello World", "Y!"]};
+    expect(ReactDomServer.renderToString(React.createFactory(HelloWorld)(props))).to.contains("Hello World Y!");
+    expect(props.data.length).to.equal(2);
+    expect(renderCount).to.equal(1);
   });
 
   it("should accept a custom cache implementation", () => {