Messages: Support React elements in the message (empty tags)

Author: rxaviers

src/generator.js

@@ -9,6 +9,9 @@ function generator(fn, argArray, options) {
     var Fn = capitalizeFirstLetter(fn);
     options = options || {};
     var beforeFormat = options.beforeFormat || function() {};
+    var afterFormat = options.afterFormat || function(formattedValue) {
+        return formattedValue;
+    }
     return {
         displayName: Fn,
         format: function() {
@@ -30,7 +33,7 @@ function generator(fn, argArray, options) {
             }
 
             beforeFormat.call(this);
-            return React.DOM.span(null, this.format());
+            return React.DOM.span(null, afterFormat.call(this, this.format()));
         }
     }
 };

src/message.js

@@ -71,6 +71,69 @@ function messageSetup(componentProps, instance, args) {
 
 }
 
+function replaceElements(componentProps, formatted) {
+    var elements = componentProps.elements;
+
+    function _replaceElements(string, elements) {
+        if (typeof string !== "string") {
+            throw new Error("missing or invalid string `" + string + "` (" + typeof string + ")");
+        }
+        if (typeof elements !== "object") {
+            throw new Error("missing or invalid elements `" + elements + "` (" + typeof elements + ")");
+        }
+
+        // Given [x, y, z], it returns [x, element, y, element, z].
+        function spreadElementsInBetweenItems(array, element) {
+            var getElement = typeof element === "function" ? element : function() {
+                return element;
+            };
+            return array.slice(1).reduce(function(ret, item, i) {
+                ret.push(getElement(i), item);
+                return ret;
+            }, [array[0]]);
+        }
+
+        function splice(sourceArray, start, deleteCount, itemsArray) {
+            [].splice.apply(sourceArray, [start, deleteCount].concat(itemsArray));
+        }
+
+        return Object.keys(elements).reduce(function(ret, key) {
+            var element = elements[key];
+
+            ret.forEach(function(string, i) {
+                var aux;
+
+                // Insert array into the correct ret position.
+                function replaceRetItem(array) {
+                    splice(ret, i, 1, array);
+                }
+
+                if (typeof string !== "string") {
+                    return; // continue;
+                }
+
+                // Empty tags, e.g., `[foo/]`.
+                aux = string.split("[" + key + "/]");
+                if (aux.length > 1) {
+                    aux = spreadElementsInBetweenItems(aux, element);
+                    replaceRetItem(aux);
+                    return; // continue;
+                }
+            });
+
+            return ret;
+        }, [string]);
+    }
+
+
+    // Elements replacement.
+    if (elements) {
+        formatted = React.DOM.span.apply(React.DOM.span, [{}].concat(_replaceElements(formatted, elements)));
+    }
+
+    return formatted;
+}
+
 function sanitizePath(pathString) {
     return pathString.trim().replace(/\{/g, "(").replace(/\}/g, ")").replace(/\//g, "|").replace(/\n/g, " ").replace(/ +/g, " ").replace(/"/g, "'");
 }
@@ -93,5 +156,8 @@ Globalize.prototype.messageFormatter = function(pathOrMessage) {
 export default React.createClass(generator("formatMessage", ["path", "variables"], {
     beforeFormat: function() {
         messageSetup(this.props, this.instance, this.args);
+    },
+    afterFormat: function(formattedValue) {
+        return replaceElements(this.props, formattedValue);
     }
 }));