fix: Rework the propNameSorter to be less dependents of node sort internals

Author: armandabric

src/formatter/formatReactElementNode.js

@@ -4,7 +4,7 @@ import spacer from './spacer';
 import formatTreeNode from './formatTreeNode';
 import formatProp from './formatProp';
 import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
-import propNameSorter from './propNameSorter';
+import sortPropsByNames from './sortPropsByNames';
 import type { Options } from './../options';
 import type { ReactElementTreeNode } from './../tree';
 
@@ -137,7 +137,7 @@ export default (
     .filter(defaultPropName => !visibleAttributeNames.includes(defaultPropName))
     .forEach(defaultPropName => visibleAttributeNames.push(defaultPropName));
 
-  const attributes = visibleAttributeNames.sort(propNameSorter(sortProps));
+  const attributes = sortPropsByNames(sortProps)(visibleAttributeNames);
 
   attributes.forEach(attributeName => {
     const {

src/formatter/propNameSorter.js

@@ -0,0 +1,26 @@
+/* @flow */
+
+const isKeyOrRefProps = (propName: string) => ['key', 'ref'].includes(propName);
+
+export default (shouldSortUserProps: boolean) => (
+  props: string[]
+): string[] => {
+  const haveKeyProp = props.includes('key');
+  const haveRefProp = props.includes('ref');
+
+  const userPropsOnly = props.filter(oneProp => !isKeyOrRefProps(oneProp));
+
+  const sortedProps = shouldSortUserProps
+    ? [...userPropsOnly.sort()] // We use basic lexical order
+    : [...userPropsOnly];
+
+  if (haveRefProp) {
+    sortedProps.unshift('ref');
+  }
+
+  if (haveKeyProp) {
+    sortedProps.unshift('key');
+  }
+
+  return sortedProps;
+};

src/formatter/propNameSorter.spec.js

@@ -0,0 +1,27 @@
+/* @flow */
+
+import sortPropsByNames from './sortPropsByNames';
+
+test('sortPropsByNames should always move the `key` and `ref` keys first', () => {
+  const fixtures = ['c', 'key', 'a', 'ref', 'b'];
+
+  expect(sortPropsByNames(false)(fixtures)).toEqual([
+    'key',
+    'ref',
+    'c',
+    'a',
+    'b',
+  ]);
+});
+
+test('sortPropsByNames should always sort the props and keep `key` and `ref` keys first', () => {
+  const fixtures = ['c', 'key', 'a', 'ref', 'b'];
+
+  expect(sortPropsByNames(true)(fixtures)).toEqual([
+    'key',
+    'ref',
+    'a',
+    'b',
+    'c',
+  ]);
+});