feat: sort object keys in a deterministic way

Again easier when testing

Author: vvo

README.md

@@ -19,6 +19,7 @@ Features:
 - supports nesting
 - props: supports string, number, function (inlined as `prop={function () {code;}}`), object, ReactElement (inlined), regex..
 - order props alphabetically
+- sort object keys in a deterministic order (`o={{a: 1, b:2}} === o={{b:2, a:1}}`)
 - React's documentation indent style for JSX
 
 ## Setup

index-test.js

@@ -151,4 +151,12 @@ describe(`reactElementToJSXString(ReactElement)`, () => {
       reactElementToJSXString(null);
     }).toThrow('react-element-to-jsx-string: Expected a ReactElement');
   });
+
+  it('ignores object keys order (sortobject)', () => {
+    expect(
+      reactElementToJSXString(<div o={{a: 1, b: 2}}/>)
+    ).toEqual(
+      reactElementToJSXString(<div o={{b: 2, a: 1}}/>)
+    );
+  });
 });

index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import stringify from 'stringify-object';
 import collapse from 'collapse-white-space';
 import {isElement} from 'react-addons-test-utils';
+import stringify from 'stringify-object';
+import sortobject from 'sortobject';
 
 export default function reactElementToJSXString(ReactElement) {
   return toJSXString({ReactElement});
@@ -115,6 +116,11 @@ function recurse({lvl, inline}) {
 }
 
 function stringifyObject(obj) {
+  // sortobject fails on some types, like regex
+  if (Object.keys(obj).length > 0) {
+    obj = sortobject(obj);
+  }
+
   return collapse(stringify(obj))
     .replace(/{ /g, '{')
     .replace(/ }/g, '}')

npm-shrinkwrap.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "collapse-white-space": "^1.0.0",
     "react-addons-test-utils": "^0.14.0",
+    "sortobject": "^1.0.0",
     "stringify-object": "^2.3.0"
   }
 }