chore: clean up toJSON

Author: Brandon Carroll

src/lib/__tests__/to-json.js

@@ -23,7 +23,9 @@ test('it converts to json', () => {
         <MiddleComponent>hello</MiddleComponent>
         <View>
           <Text>world</Text>
+          <Text>foo bar</Text>
         </View>
+        <View />
       </View>
     </ParentComponent>,
   );

src/lib/to-json.js

@@ -1,93 +1,39 @@
-const tree = {
-  type: 'View',
-  props: {},
-  children: [
-    {
-      type: function ParentComponent() {},
-      props: {},
-      children: [
-        {
-          type: 'View',
-          props: {},
-          children: [
-            {
-              type: function MiddleComponent() {},
-              props: {},
-              children: [
-                {
-                  type: 'View',
-                  props: {},
-                  children: [
-                    {
-                      type: 'Text',
-                      props: {},
-                      children: ['hello'],
-                    },
-                  ],
-                },
-                {
-                  type: 'Text',
-                  props: {},
-                  children: ['world'],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'Text',
-          props: {},
-          children: ['hello', ' ', 'world'],
-        },
-      ],
-    },
-  ],
-};
-
 function flat(arr) {
   return arr.reduce((arr, toFlatten) => {
     return arr.concat(Array.isArray(toFlatten) ? flat(toFlatten) : toFlatten);
   }, []);
 }
 
 function toJSON(node) {
+  // If the node is a string return it
   if (typeof node === 'string') {
     return node;
   }
 
+  // We don't want children being included in the props
   const { children, ...props } = node.props;
 
-  let renderedChildren = [];
-  if (node.children && node.children.length) {
-    for (let i = 0; i < node.children.length; i++) {
-      const renderedChild = toJSON(node.children[i]);
-
-      renderedChildren.push(renderedChild);
-    }
-  }
-
-  renderedChildren = flat(renderedChildren);
+  // Convert all children to the JSON format
+  const renderedChildren = flat(node.children.map(child => toJSON(child)));
 
+  // If there's no parent, return the base element not in an array
   if (node.parent === null) {
     return renderedChildren[0];
   }
 
+  // Hoist children so that only "native elements" are in the output
   if (typeof node.type !== 'string') {
     return renderedChildren;
   }
 
-  const json = {
+  // Finally, create the JSON object
+  return {
+    $$typeof: Symbol.for('react.test.json'),
+    parent: node.parent,
     type: node.type,
     props,
     children: renderedChildren,
   };
-  Object.defineProperty(json, '$$typeof', {
-    value: Symbol.for('react.test.json'),
-  });
-  Object.defineProperty(json, 'parent', {
-    value: node.parent,
-  });
-  return json;
 }
 
-export { toJSON };
+export { flat, toJSON };