chore: implement root, update & unmount

Author: mdjastrzebski

src/renderer/host-element.ts

@@ -0,0 +1,61 @@
+import { Container, Instance, TextInstance } from './reconciler';
+
+export type HostNode = HostElement | string;
+export type HostElementProps = Record<string, unknown>;
+
+const instanceToHostElementMap = new WeakMap<Container | Instance, HostElement>();
+
+export class HostElement {
+  public type: string;
+  public props: HostElementProps;
+  public children: HostNode[];
+
+  constructor(type: string, props: HostElementProps, children: HostNode[]) {
+    this.type = type;
+    this.props = props;
+    this.children = children;
+  }
+
+  static fromContainer(container: Container): HostElement {
+    const hostElement = instanceToHostElementMap.get(container);
+    if (hostElement) {
+      return hostElement;
+    }
+
+    const result = new HostElement(
+      'ROOT',
+      {},
+      container.children.map((child) => HostElement.fromInstance(child)),
+    );
+
+    instanceToHostElementMap.set(container, result);
+    return result;
+  }
+
+  static fromInstance(instance: Instance | TextInstance): HostNode {
+    switch (instance.tag) {
+      case 'TEXT':
+        return instance.text;
+
+      case 'INSTANCE': {
+        const hostElement = instanceToHostElementMap.get(instance);
+        if (hostElement) {
+          return hostElement;
+        }
+
+        const result = new HostElement(
+          instance.type,
+          instance.props,
+          instance.children.map((child) => HostElement.fromInstance(child)),
+        );
+
+        instanceToHostElementMap.set(instance, result);
+        return result;
+      }
+
+      default:
+        // @ts-expect-error
+        throw new Error(`Unexpected node type in toJSON: ${instance.tag}`);
+    }
+  }
+}

src/renderer/reconciler.ts

@@ -2,7 +2,7 @@ import createReconciler, { Fiber } from 'react-reconciler';
 import { DefaultEventPriority } from 'react-reconciler/constants';
 
 export type Type = string;
-export type Props = object;
+export type Props = Record<string, unknown>;
 export type OpaqueHandle = Fiber;
 export type PublicInstance = unknown | TextInstance;
 export type SuspenseInstance = unknown;
@@ -17,7 +17,7 @@ export type Container = {
 export type Instance = {
   tag: 'INSTANCE';
   type: string;
-  props: object;
+  props: Props;
   children: Array<Instance | TextInstance>;
   rootContainer: Container;
   isHidden: boolean;
@@ -426,7 +426,7 @@ const hostConfig = {
   insertBefore(
     parentInstance: Instance,
     child: Instance | TextInstance,
-    beforeChild: Instance | TextInstance | SuspenseInstance,
+    beforeChild: Instance | TextInstance,
   ): void {
     const index = parentInstance.children.indexOf(child);
     if (index !== -1) {
@@ -443,7 +443,7 @@ const hostConfig = {
   insertInContainerBefore(
     container: Container,
     child: Instance | TextInstance,
-    beforeChild: Instance | TextInstance | SuspenseInstance,
+    beforeChild: Instance | TextInstance,
   ): void {
     const index = container.children.indexOf(child);
     if (index !== -1) {
@@ -459,18 +459,15 @@ const hostConfig = {
    *
    * React will only call it for the top-level node that is being removed. It is expected that garbage collection would take care of the whole subtree. You are not expected to traverse the child tree in it.
    */
-  removeChild(parentInstance: Instance, child: Instance | TextInstance | SuspenseInstance): void {
+  removeChild(parentInstance: Instance, child: Instance | TextInstance): void {
     const index = parentInstance.children.indexOf(child);
     parentInstance.children.splice(index, 1);
   },
 
   /**
    * Same as `removeChild`, but for when a node is detached from the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.
    */
-  removeChildFromContainer(
-    container: Container,
-    child: Instance | TextInstance | SuspenseInstance,
-  ): void {
+  removeChildFromContainer(container: Container, child: Instance | TextInstance): void {
     const index = container.children.indexOf(child);
     container.children.splice(index, 1);
   },

src/renderer/render-to-json.ts

@@ -0,0 +1,61 @@
+import { Instance, TextInstance } from './reconciler';
+
+export type JsonNode = JsonInstance | string;
+
+export type JsonInstance = {
+  type: string;
+  props: object;
+  children: Array<JsonNode> | null;
+  $$typeof: Symbol;
+};
+
+export function renderToJson(instance: Instance | TextInstance): JsonNode | 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.
+      // 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 = renderToJson(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'),
+      };
+      // This is needed for JEST to format snapshot as JSX.
+      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}`);
+  }
+}

src/renderer/renderer.test.tsx

@@ -18,6 +18,62 @@ test('throws when rendering string inside View', () => {
   );
 });
 
+test('implements update()', () => {
+  const result = render(<View testID="view" />);
+  expect(result.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="view"
+    />
+  `);
+
+  result.update(
+    <View testID="view">
+      <Text>Hello</Text>
+    </View>,
+  );
+  expect(result.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="view"
+    >
+      <Text>
+        Hello
+      </Text>
+    </View>
+  `);
+});
+
+test('implements unmount()', () => {
+  const result = render(<View testID="view" />);
+  expect(result.toJSON()).toMatchInlineSnapshot(`
+    <View
+      testID="view"
+    />
+  `);
+
+  result.unmount();
+  expect(result.toJSON()).toBeNull();
+});
+
+test('implements get root()', () => {
+  const result = render(<View testID="view" />);
+  expect(result.root).toMatchInlineSnapshot(`
+    HostElement {
+      "children": [
+        HostElement {
+          "children": [],
+          "props": {
+            "children": undefined,
+            "testID": "view",
+          },
+          "type": "View",
+        },
+      ],
+      "props": {},
+      "type": "ROOT",
+    }
+  `);
+});
+
 test('implements toJSON()', () => {
   const result = render(
     <View testID="view">