feat: handle ref="manual-ref"

Author: vvo

index-test.js

@@ -295,6 +295,37 @@ describe(`reactElementToJSXString(ReactElement)`, () => {
       .toEqual(
 `<div>
   Hello John
+</div>`);
+  });
+
+  it(`reactElementToJSXString(<div a={[<div><span /></div>]} />`, () => {
+    expect(
+      reactElementToJSXString(<div a={[<div><span /></div>]} />)
+    ).toEqual(`<div a={[<div><span /></div>]} />`);
+  });
+
+  it(`reactElementToJSXString(<div aprop="test" ref="yes" />`, () => {
+    expect(
+      reactElementToJSXString(<div aprop="test" ref="yes" />)
+    ).toEqual(
+`<div
+  ref="yes"
+  aprop="test"
+/>`);
+  });
+
+  it(`reactElementToJSXString(<div aprop="a" ref="yes"><span ref="wee" zprop="z"/></div>`, () => {
+    expect(
+      reactElementToJSXString(<div aprop="a" ref="yes"><span ref="wee" zprop="z"/></div>)
+    ).toEqual(
+`<div
+  ref="yes"
+  aprop="a"
+>
+  <span
+    ref="wee"
+    zprop="z"
+  />
 </div>`);
   });
 });

index.js

@@ -31,19 +31,26 @@ function toJSXString({ReactElement = null, lvl = 0, inline = false}) {
 
   let out = `<${tagName}`;
   let props = formatProps(ReactElement.props);
+  let attributes = [];
   let children = ReactElement.props.children;
 
-  props.forEach(prop => {
-    if (props.length === 1 || inline) {
+  if (ReactElement.ref !== null) {
+    attributes.push(getJSXAttribute('ref', ReactElement.ref));
+  }
+
+  attributes = attributes.concat(props);
+
+  attributes.forEach(attribute => {
+    if (attributes.length === 1 || inline) {
       out += ` `;
     } else {
       out += `\n${spacer(lvl + 1)}`;
     }
 
-    out += `${prop.name}=${prop.value}`;
+    out += `${attribute.name}=${attribute.value}`;
   });
 
-  if (props.length > 1 && !inline) {
+  if (attributes.length > 1 && !inline) {
     out += `\n${spacer(lvl)}`;
   }
 
@@ -71,7 +78,7 @@ function toJSXString({ReactElement = null, lvl = 0, inline = false}) {
     }
     out += `</${tagName}>`;
   } else {
-    if (props.length <= 1) {
+    if (attributes.length <= 1) {
       out += ` `;
     }
 
@@ -99,16 +106,20 @@ function formatProps(props) {
     .filter(noChildren)
     .sort()
     .map(propName => {
-      return {
-        name: propName,
-        value: formatPropValue(props[propName])
-          .replace(/'?<__reactElementToJSXString__Wrapper__>/g, '')
-          .replace(/<\/__reactElementToJSXString__Wrapper__>'?/g, '')
-      };
+      return getJSXAttribute(propName, props[propName]);
     });
 }
 
-function formatPropValue(propValue) {
+function getJSXAttribute(name, value) {
+  return {
+    name,
+    value: formatJSXAttribute(value)
+      .replace(/'?<__reactElementToJSXString__Wrapper__>/g, '')
+      .replace(/<\/__reactElementToJSXString__Wrapper__>'?/g, '')
+  };
+}
+
+function formatJSXAttribute(propValue) {
   if (typeof propValue === 'string') {
     return `"${propValue}"`;
   }