feat: build custom toJSON

Author: Brandon Carroll

src/lib/__tests__/to-json.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { prettyPrint, render } from '../../';
+import { toJSON } from '../to-json';
+
+test('it converts to json', () => {
+  function ParentComponent({ children }) {
+    return <View>{children}</View>;
+  }
+
+  function MiddleComponent({ children }) {
+    return (
+      <View>
+        <Text>{children}</Text>
+      </View>
+    );
+  }
+
+  const { container } = render(
+    <ParentComponent>
+      <View>
+        <MiddleComponent>hello</MiddleComponent>
+        <View>
+          <Text>world</Text>
+        </View>
+      </View>
+    </ParentComponent>,
+  );
+
+  console.log(prettyPrint(toJSON(container)));
+});

src/lib/to-json.js

@@ -0,0 +1,93 @@
+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 (typeof node === 'string') {
+    return node;
+  }
+
+  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);
+
+  if (node.parent === null) {
+    return renderedChildren[0];
+  }
+
+  if (typeof node.type !== 'string') {
+    return renderedChildren;
+  }
+
+  const json = {
+    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 };