Fix backslash-escaping issues extracted messages

This fixes the backslash-escaping issues when extracting messages.
This also upgrades to intl-messageformat-parser@1.2.0 which has
support for escaping backslashes themselves.

One wrinkle is that strings declared in JSX are double-escaped like
XML/HTML. This means that if backslash-escaping is needed for a
message that will be extracted, it must be wrapped in `{}` to make
it an JSXExpression. A warning has been added when this pattern is
detected with a helpful message on how to resolve it.

See: http://facebook.github.io/react/docs/jsx-gotchas.html

Fixes #13

Author: ericf

package.json

@@ -11,7 +11,7 @@
   "author": "Eric Ferraiuolo <edf@ericf.me>",
   "dependencies": {
     "babel-runtime": "^5.8.20",
-    "intl-messageformat-parser": "^1.1.0",
+    "intl-messageformat-parser": "^1.2.0",
     "mkdirp": "^0.5.1"
   },
   "devDependencies": {

src/index.js

@@ -64,7 +64,9 @@ export default function ({Plugin, types: t}) {
         );
     }
 
-    function createMessageDescriptor(propPaths) {
+    function createMessageDescriptor(propPaths, options = {}) {
+        const {isJSXSource = false} = options;
+
         return propPaths.reduce((hash, [keyPath, valuePath]) => {
             let key = getMessageDescriptorKey(keyPath);
 
@@ -75,6 +77,19 @@ export default function ({Plugin, types: t}) {
                     try {
                         hash[key] = printICUMessage(value);
                     } catch (e) {
+                        if (isJSXSource &&
+                            valuePath.isLiteral() &&
+                            value.indexOf('\\\\') >= 0) {
+
+                            throw valuePath.errorWithNode(
+                                '[React Intl] Message failed to parse. ' +
+                                'It looks like `\\`s were used for escaping, ' +
+                                'this won\'t work with JSX string literals. ' +
+                                'Wrap with `{}`. ' +
+                                'See: http://facebook.github.io/react/docs/jsx-gotchas.html'
+                            );
+                        }
+
                         throw valuePath.errorWithNode(
                             `[React Intl] Message failed to parse: ${e} ` +
                             'See: http://formatjs.io/guides/message-syntax/'
@@ -203,7 +218,8 @@ export default function ({Plugin, types: t}) {
                         attributes.map((attr) => [
                             attr.get('name'),
                             attr.get('value'),
-                        ])
+                        ]),
+                        {isJSXSource: true}
                     );
 
                     // In order for a default message to be extracted when

src/print-icu-message.js

@@ -6,6 +6,15 @@
 
 import {parse} from 'intl-messageformat-parser';
 
+const ESCAPED_CHARS = {
+    '\\' : '\\\\',
+    '\\#': '\\#',
+    '{'  : '\\{',
+    '}'  : '\\}',
+};
+
+const ESAPE_CHARS_REGEXP = /\\#|[{}\\]/g;
+
 export default function (message) {
     let ast = parse(message);
     return printICUMessage(ast);
@@ -14,7 +23,7 @@ export default function (message) {
 function printICUMessage(ast) {
     let printedNodes = ast.elements.map((node) => {
         if (node.type === 'messageTextElement') {
-            return node.value;
+            return printMessageTextASTNode(node);
         }
 
         if (!node.format) {
@@ -41,16 +50,18 @@ function getArgumentType(astType) {
     return astType.replace(/Format$/, '').toLowerCase();
 }
 
-function printSimpleFormatASTNode(node) {
-    let {id, format} = node;
+function printMessageTextASTNode({value}) {
+    return value.replace(ESAPE_CHARS_REGEXP, (char) => ESCAPED_CHARS[char]);
+}
+
+function printSimpleFormatASTNode({id, format}) {
     let argumentType = getArgumentType(format.type);
     let style = format.style ? `, ${format.style}` : '';
 
     return `{${id}, ${argumentType}${style}}`;
 }
 
-function printOptionalFormatASTNode(node) {
-    let {id, format} = node;
+function printOptionalFormatASTNode({id, format}) {
     let argumentType = getArgumentType(format.type);
     let offset = format.offset ? `, offset:${format.offset}` : '';