feat: working toJSON method

Author: mdjastrzebski

src/renderer/reconciler.ts

@@ -3,25 +3,24 @@ import { DefaultEventPriority } from 'react-reconciler/constants';
 
 export type Type = string;
 export type Props = object;
-export type HostContext = object;
 export type OpaqueHandle = Fiber;
 export type PublicInstance = unknown | TextInstance;
 export type SuspenseInstance = unknown;
 export type UpdatePayload = unknown;
 
 export type Container = {
   tag: 'CONTAINER';
-  children: Array<Instance | TextInstance | SuspenseInstance>; // Added SuspenseInstance
+  children: Array<Instance | TextInstance>; // Added SuspenseInstance
   createNodeMock: Function;
 };
 
 export type Instance = {
   tag: 'INSTANCE';
   type: string;
   props: object;
-  isHidden: boolean;
-  children: Array<Instance | TextInstance | SuspenseInstance>;
+  children: Array<Instance | TextInstance>;
   rootContainer: Container;
+  isHidden: boolean;
   internalHandle: OpaqueHandle;
 };
 
@@ -31,6 +30,10 @@ export type TextInstance = {
   isHidden: boolean;
 };
 
+type HostContext = {
+  isInsideText: boolean;
+};
+
 const NO_CONTEXT = {};
 const UPDATE_SIGNAL = {};
 const nodeToInstanceMap = new WeakMap<object, Instance>();
@@ -98,6 +101,10 @@ const hostConfig = {
     _hostContext: HostContext,
     internalHandle: OpaqueHandle,
   ): Instance {
+    console.log('createInstance', type, props);
+    console.log('- RootContainer:', rootContainer);
+    console.log('- HostContext:', _hostContext);
+    console.log('- InternalHandle:', internalHandle);
     return {
       tag: 'INSTANCE',
       type,
@@ -115,9 +122,13 @@ const hostConfig = {
   createTextInstance(
     text: string,
     _rootContainer: Container,
-    _hostContext: HostContext,
+    hostContext: HostContext,
     _internalHandle: OpaqueHandle,
   ): TextInstance {
+    if (!hostContext.isInsideText) {
+      throw new Error(`Text string "${text}" must be rendered inside <Text> component`);
+    }
+
     return {
       tag: 'TEXT',
       text,
@@ -193,7 +204,7 @@ const hostConfig = {
    * This method happens **in the render phase**. Do not mutate the tree from it.
    */
   getRootHostContext(_rootContainer: Container): HostContext | null {
-    return NO_CONTEXT;
+    return { isInsideText: false };
   },
 
   /**
@@ -206,11 +217,18 @@ const hostConfig = {
    * This method happens **in the render phase**. Do not mutate the tree from it.
    */
   getChildHostContext(
-    _parentHostContext: HostContext,
-    _type: Type,
+    parentHostContext: HostContext,
+    type: Type,
     _rootContainer: Container,
   ): HostContext {
-    return NO_CONTEXT;
+    const previousIsInsideText = parentHostContext.isInsideText;
+    const isInsideText = type === 'Text';
+
+    if (previousIsInsideText === isInsideText) {
+      return parentHostContext;
+    }
+
+    return { isInsideText };
   },
 
   /**

src/renderer/renderer.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { render } from './renderer';
+
+test('renders View', () => {
+  render(<View />);
+  expect(true).toBe(true);
+});
+
+test('renders Text', () => {
+  render(<Text>Hello world</Text>);
+  expect(true).toBe(true);
+});
+
+test('throws when rendering string inside View', () => {
+  expect(() => render(<View>Hello</View>)).toThrowErrorMatchingInlineSnapshot(
+    `"Text string "Hello" must be rendered inside <Text> component"`,
+  );
+});
+
+test('implements toJSON()', () => {
+  const result = render(
+    <View testID="view">
+      <Text style={{ color: 'blue' }}>Hello</Text>
+    </View>,
+  );
+  expect(result.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="view"
+    >
+      <Text
+        style={
+          {
+            "color": "blue",
+          }
+        }
+      >
+        Hello
+      </Text>
+    </View>
+  `);
+});

src/renderer/renderer.ts

@@ -0,0 +1,133 @@
+import { ReactElement } from 'react';
+import { Container, Instance, TestReconciler, TextInstance } from './reconciler';
+
+export function render(element: ReactElement) {
+  const container: Container = {
+    tag: 'CONTAINER',
+    children: [],
+    createNodeMock: () => null,
+  };
+
+  const root = TestReconciler.createContainer(
+    container,
+    0, // 0 = LegacyRoot, 1 = ConcurrentRoot
+    null, // no hydration callback
+    false, // isStrictMode
+    null, // concurrentUpdatesByDefaultOverride
+    'id', // identifierPrefix
+    (error) => {
+      // eslint-disable-next-line no-console
+      console.log('Recoverable Error', error);
+    }, // onRecoverableError
+    null, // transitionCallbacks
+  );
+
+  TestReconciler.updateContainer(element, root, null, () => {
+    // eslint-disable-next-line no-console
+    console.log('Rendered', container.children);
+  });
+
+  const toJSON = () => {
+    if (root?.current == null || container == null) {
+      return null;
+    }
+
+    if (container.children.length === 0) {
+      return null;
+    }
+
+    if (container.children.length === 1) {
+      return toJson(container.children[0]);
+    }
+
+    if (
+      container.children.length === 2 &&
+      container.children[0].isHidden === true &&
+      container.children[1].isHidden === false
+    ) {
+      // Omit timed out children from output entirely, including the fact that we
+      // temporarily wrap fallback and timed out children in an array.
+      return toJson(container.children[1]);
+    }
+
+    let renderedChildren = null;
+    if (container.children?.length) {
+      for (let i = 0; i < container.children.length; i++) {
+        const renderedChild = toJson(container.children[i]);
+        if (renderedChild !== null) {
+          if (renderedChildren === null) {
+            renderedChildren = [renderedChild];
+          } else {
+            renderedChildren.push(renderedChild);
+          }
+        }
+      }
+    }
+
+    return renderedChildren;
+  };
+
+  return {
+    toJSON,
+  };
+}
+
+type ToJsonNode = ToJsonInstance | string;
+
+type ToJsonInstance = {
+  type: string;
+  props: object;
+  children: Array<ToJsonNode> | null;
+  $$typeof: Symbol;
+};
+
+function toJson(instance: Instance | TextInstance): ToJsonNode | null {
+  if (instance.isHidden) {
+    // Omit timed out children from output entirely. This seems like the least
+    // surprising behavior. We could perhaps add a separate API that includes
+    // them, if it turns out people need it.
+    return null;
+  }
+
+  switch (instance.tag) {
+    case 'TEXT':
+      return instance.text;
+
+    case 'INSTANCE': {
+      // We don't include the `children` prop in JSON.
+      // Instead, we will include the actual rendered children.
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { children, ...props } = instance.props;
+
+      let renderedChildren = null;
+      if (instance.children?.length) {
+        for (let i = 0; i < instance.children.length; i++) {
+          const renderedChild = toJson(instance.children[i]);
+          if (renderedChild !== null) {
+            if (renderedChildren === null) {
+              renderedChildren = [renderedChild];
+            } else {
+              renderedChildren.push(renderedChild);
+            }
+          }
+        }
+      }
+
+      const result = {
+        type: instance.type,
+        props: props,
+        children: renderedChildren,
+        $$typeof: Symbol.for('react.test.json'),
+      };
+      Object.defineProperty(result, '$$typeof', {
+        value: Symbol.for('react.test.json'),
+      });
+      return result;
+    }
+
+    default:
+      // @ts-expect-error
+      throw new Error(`Unexpected node type in toJSON: ${inst.tag}`);
+  }
+}