fix(formatting): Fix JSX delimiters escaping in string

BREAKING CHANGE: Improve string escaping of string that contains JSX delimiters (`{`,`}`,`<`,`>`) Before: ``` console.log(reactElementToJsxString(<div>{`Mustache :{`}</div>); // <div>Mustache :{</div> ``` Now: ``` console.log(reactElementToJsxString(<div>{`Mustache :{`}</div>); // <div>{`Mustache :{`}</div> ```
algolia · Aug 3, 2017 · 6e0eea3 · 6e0eea3
1 parent d18809e
commit 6e0eea3
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 35 deletions.
diff --git a/src/formatter/formatTreeNode.js b/src/formatter/formatTreeNode.js
@@ -4,17 +4,30 @@ import formatReactElementNode from './formatReactElementNode';
 import type { Options } from './../options';
 import type { TreeNode } from './../tree';
 
-const escape = (s: string): string =>
-  s.replace(/{/g, '&lbrace;').replace(/}/g, '&rbrace;');
+const jsxStopChars = ['<', '>', '{', '}'];
+const shouldBeEscaped = (s: string) =>
+  jsxStopChars.some(jsxStopChar => s.includes(jsxStopChar));
+
+const escape = (s: string) => {
+  if (!shouldBeEscaped(s)) {
+    return s;
+  }
+
+  return `{\`${s}\`}`;
+};
 
 export default (
   node: TreeNode,
   inline: boolean,
   lvl: number,
   options: Options
 ): string => {
-  if (node.type === 'string' || node.type === 'number') {
-    return node.value ? escape(node.value.toString()) : '';
+  if (node.type === 'number') {
+    return String(node.value);
+  }
+
+  if (node.type === 'string') {
+    return node.value ? escape(String(node.value)) : '';
   }
 
   if (node.type === 'ReactElement') {

diff --git a/src/formatter/formatTreeNode.spec.js b/src/formatter/formatTreeNode.spec.js
@@ -2,10 +2,70 @@
 
 import formatTreeNode from './formatTreeNode';
 
+jest.mock('./formatReactElementNode', () => () =>
+  '<MockedFormatReactElementNodeResult />'
+);
+
 describe('formatTreeNode', () => {
-  it('should escape JSX entity on string node', () => {
+  it('should format number tree node', () => {
+    expect(formatTreeNode({ type: 'number', value: 42 }, true, 0, {})).toBe(
+      '42'
+    );
+  });
+
+  it('should format string tree node', () => {
+    expect(formatTreeNode({ type: 'string', value: 'foo' }, true, 0, {})).toBe(
+      'foo'
+    );
+  });
+
+  it('should format react element tree node', () => {
+    expect(
+      formatTreeNode(
+        {
+          type: 'ReactElement',
+          displayName: 'Foo',
+        },
+        true,
+        0,
+        {}
+      )
+    ).toBe('<MockedFormatReactElementNodeResult />');
+  });
+
+  const jsxDelimiters = ['<', '>', '{', '}'];
+  jsxDelimiters.forEach(char => {
+    it(`should escape string that contains the JSX delimiter "${char}"`, () => {
+      expect(
+        formatTreeNode(
+          { type: 'string', value: `I contain ${char}, is will be escaped` },
+          true,
+          0,
+          {}
+        )
+      ).toBe(`{\`I contain ${char}, is will be escaped\`}`);
+    });
+  });
+
+  it('should preserve the format of string', () => {
+    expect(formatTreeNode({ type: 'string', value: 'foo\nbar' }, true, 0, {}))
+      .toBe(`foo
+bar`);
+
     expect(
-      formatTreeNode({ type: 'string', value: '{ foo: "bar" }' }, true, 0, {})
-    ).toBe('&lbrace; foo: "bar" &rbrace;');
+      formatTreeNode(
+        {
+          type: 'string',
+          value: JSON.stringify({ foo: 'bar' }, null, 2),
+        },
+        false,
+        0,
+        {
+          tabStop: 2,
+        }
+      )
+    ).toBe(`{\`{
+  "foo": "bar"
+}\`}`);
   });
 });
diff --git a/src/index.spec.js b/src/index.spec.js
@@ -206,16 +206,16 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
-  it('reactElementToJSXString(<script type="application/json+ld">&lbrace; hello: \'world\' &rbrace;</script>)', () => {
+  it('reactElementToJSXString(<script type="application/json+ld">{`{ hello: \'world\' }`}</script>)', () => {
     expect(
       reactElementToJSXString(
         <script type="application/json+ld">
-          &lbrace; hello: 'world' &rbrace;
+          {`{ hello: 'world' }`}
         </script>
       )
     ).toEqual(
       `<script type="application/json+ld">
-  &lbrace; hello: 'world' &rbrace;
+  {\`{ hello: 'world' }\`}
 </script>`
     );
   });
@@ -227,31 +227,7 @@ describe('reactElementToJSXString(ReactElement)', () => {
       )
     ).toEqual(
       `<script type="application/json+ld">
-  &lbrace; hello: 'world' &rbrace;
-</script>`
-    );
-  });
-
-  it('reactElementToJSXString(<script type="application/json+ld">\\u007B hello: \'world\' \\u007D</script>)', () => {
-    expect(
-      reactElementToJSXString(
-        <script type="application/json+ld">\u007B hello: 'world' \u007D</script>
-      )
-    ).toEqual(
-      `<script type="application/json+ld">
-  \\u007B hello: 'world' \\u007D
-</script>`
-    );
-  });
-
-  it('reactElementToJSXString(<script type="application/json+ld">{ hello: \'world\' }</script>)', () => {
-    expect(
-      reactElementToJSXString(
-        <script type="application/json+ld">{`{ hello: 'world' }`}</script>
-      )
-    ).toEqual(
-      `<script type="application/json+ld">
-  &lbrace; hello: 'world' &rbrace;
+  {\`{ hello: 'world' }\`}
 </script>`
     );
   });