Miminize work taking place in 'render'

Author: Nicolas Gallagher

package.json

@@ -10,7 +10,9 @@
     "README.md",
     "src/"
   ],
-  "scripts": {},
+  "scripts": {
+    "test": "grunt test"
+  },
   "keywords": [
     "react",
     "globalize",

src/currency.js

@@ -2,4 +2,4 @@ import React from "react";
 import generator from "./generator";
 import "globalize/currency";
 
-export default React.createClass(generator("formatCurrency", ["value", "currency", "options"]));
+export default generator("formatCurrency", ["value", "currency", "options"]);

src/date.js

@@ -2,4 +2,4 @@ import React from "react";
 import generator from "./generator";
 import "globalize/date";
 
-export default React.createClass(generator("formatDate", ["value", "options"]));
+export default generator("formatDate", ["value", "options"]);

src/generator.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Globalize from "globalize";
 
-var commonProps = ["elements", "locale"];
+var commonPropNames = ["elements", "locale"];
 
 function capitalizeFirstLetter(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -13,42 +13,43 @@ function omit(set) {
     };
 }
 
-function generator(fn, argArray, options) {
-    var Fn = capitalizeFirstLetter(fn);
+function generator(fn, localPropNames, options) {
     options = options || {};
+    var Fn = capitalizeFirstLetter(fn);
     var beforeFormat = options.beforeFormat || function() {};
     var afterFormat = options.afterFormat || function(formattedValue) {
         return formattedValue;
     };
-    return {
+    var globalizePropNames = commonPropNames.concat(localPropNames);
+
+    return React.createClass({
         displayName: Fn,
-        format: function() {
-            return this.instance[fn].apply(this.instance, this.args);
+        componentWillMount: function() {
+            this.setup(this.props);
         },
-        render: function() {
-            var props = this.props;
-            this.instance = Globalize;
-            this.args = argArray.map(function(element) {
-                return props[element];
-            });
-
-            // otherProps = this.props - argArray - commonProps.
-            var otherProps = Object.keys(props).filter(omit(argArray)).filter(omit(commonProps)).reduce(function(memo, propKey) {
+        componentWillReceiveProps: function(nextProps) {
+            this.setup(nextProps);
+        },
+        setup: function(props) {
+            this.globalize = props.locale ? Globalize(props.locale) : Globalize;
+            this.domProps = Object.keys(props).filter(omit(globalizePropNames)).reduce(function(memo, propKey) {
                 memo[propKey] = props[propKey];
                 return memo;
             }, {});
 
-            // Get value from this.props.children.
-            this.args[0] = props.children;
-
-            if (props.locale) {
-                this.instance = Globalize(props.locale);
-            }
+            this.globalizePropValues = localPropNames.map(function(element) {
+                return props[element];
+            });
+            this.globalizePropValues[0] = props.children;
 
             beforeFormat.call(this);
-            return React.DOM.span(otherProps, afterFormat.call(this, this.format()));
+            const formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues);
+            this.value = afterFormat.call(this, formattedValue);
+        },
+        render: function() {
+            return React.DOM.span(this.domProps, this.value);
         }
-    };
+    });
 }
 
 export default generator;

src/message.js

@@ -4,7 +4,7 @@ import generator from "./generator";
 import "globalize/message";
 import "globalize/plural";
 
-function messageSetup(componentProps, instance, args) {
+function messageSetup(componentProps, globalize, args) {
     var defaultMessage, path;
     var children = componentProps.children;
     var scope = componentProps.scope;
@@ -19,7 +19,7 @@ function messageSetup(componentProps, instance, args) {
     }
 
     function getMessage() {
-        return instance.cldr.get(["globalize-messages/{bundle}"].concat(path));
+        return globalize.cldr.get(["globalize-messages/{bundle}"].concat(path));
     }
 
     function setMessage(message) {
@@ -37,7 +37,7 @@ function messageSetup(componentProps, instance, args) {
             }
             node[path[i]] = value;
         }
-        set(data, [instance.cldr.attributes.bundle].concat(path), message);
+        set(data, [globalize.cldr.attributes.bundle].concat(path), message);
         Globalize.loadMessages(data);
     }
 
@@ -65,7 +65,7 @@ function messageSetup(componentProps, instance, args) {
     }
 
     // Development mode only.
-    if (instance.cldr) {
+    if (globalize.cldr) {
         if (!getMessage()) {
             defaultMessage = defaultMessage || getDefaultMessage(children);
             setMessage(defaultMessage);
@@ -189,11 +189,11 @@ Globalize.prototype.messageFormatter = function(pathOrMessage) {
     return messageFormatterSuper.apply(this, arguments);
 };
 
-export default React.createClass(generator("formatMessage", ["path", "variables"], {
+export default generator("formatMessage", ["path", "variables"], {
     beforeFormat: function() {
-        messageSetup(this.props, this.instance, this.args);
+        messageSetup(this.props, this.globalize, this.globalizePropValues);
     },
     afterFormat: function(formattedValue) {
         return replaceElements(this.props, formattedValue);
     }
-}));
+});

src/number.js

@@ -2,4 +2,4 @@ import React from "react";
 import generator from "./generator";
 import "globalize/number";
 
-export default React.createClass(generator("formatNumber", ["value", "options"]));
+export default generator("formatNumber", ["value", "options"]);

src/relative-time.js

@@ -2,4 +2,4 @@ import React from "react";
 import generator from "./generator";
 import "globalize/relative-time";
 
-export default React.createClass(generator("formatRelativeTime", ["value", "unit", "options"]));
+export default generator("formatRelativeTime", ["value", "unit", "options"]);

test/general.spec.js

@@ -17,4 +17,11 @@ describe("Any Component", () => {
         const wrapper = shallow(<FormatCurrency locale="de" currency="EUR">{150}</FormatCurrency>);
         expect(wrapper.text()).to.equal("150,00 €");
     });
+
+    it("updates when props change", () => {
+        const wrapper = shallow(<FormatMessage className="a-class-name">Hello</FormatMessage>);
+        expect(wrapper.props().className).to.equal("a-class-name");
+        wrapper.setProps({ className: "b-class-name" });
+        expect(wrapper.props().className).to.equal("b-class-name");
+    });
 });