How to use appendInitialChild method in Playwright Internal

1const Reconciler = require("react-reconciler");
2const { createElement, getHostContextNode } = require("../utils/createElement");
3
4const noop = () => {};
5
6const SlackRenderer = Reconciler({
7  appendInitialChild: function appendInitialChild(parentInstance, child) {
8    parentInstance.appendChild(child);
9    child.parent = parentInstance;
10  },
11
12  createInstance: function createInstance(type, props) {
13    return createElement(type, props);
14  },
15
16  createTextInstance: function createTextInstance(
17    text,
18    rootContainerInstance,
19    internalInstanceHandle
20  ) {
21    return text;
22  },
23
24  finalizeInitialChildren: function finalizeInitialChildren(element, type, props) {
25    return false;
26  },
27
28  getPublicInstance: function getPublicInstance(instance) {
29    return instance;
30  },
31
32  prepareForCommit: noop,
33
34  prepareUpdate: function prepareUpdate(element, type, oldProps, newProps) {
35    return true;
36  },
37
38  resetAfterCommit: noop,
39  resetTextContent: noop,
40
41  getRootHostContext: function getRootHostContext(rootInstance) {
42    return getHostContextNode(rootInstance);
43  },
44
45  getChildHostContext: function getChildHostContext() {
46    return {};
47  },
48
49  shouldSetTextContent: function shouldSetTextContent(type, props) {
50    return false;
51  },
52
53  now: Date.now,
54
55  useSyncScheduling: true,
56
57  mutation: {
58    appendChild: function appendChild(parentInstance, child) {
59      parentInstance.appendChild(child);
60      child.parent = parentInstance;
61    },
62
63    appendChildToContainer: function appendChildToContainer(parentInstance, child) {
64      parentInstance.appendChild(child);
65      child.parent = parentInstance;
66    },
67
68    removeChild: noop,
69    removeChildFromContainer: noop,
70    insertBefore: noop,
71    commitUpdate: noop,
72    commitMount: noop,
73    commitTextUpdate: noop
74  }
75});
76
77module.exports = {
78  /**
79   * @param  {ReactElement} element
80   * @return {Object}
81   */
82  render: function render(element) {
83    const container = createElement("ROOT");
84
85    const node = SlackRenderer.createContainer(container);
86    SlackRenderer.updateContainer(element, node, null);
87
88    return container.render();
89  }
90};
91

Source: SlackRenderer.js

const Reconciler = require("react-reconciler");
const { createElement, getHostContextNode } = require("../utils/createElement");

const noop = () => {};

const SlackRenderer = Reconciler({
  appendInitialChild: function appendInitialChild(parentInstance, child) {
    parentInstance.appendChild(child);
    child.parent = parentInstance;
  },

  createInstance: function createInstance(type, props) {
    return createElement(type, props);
  },

  createTextInstance: function createTextInstance(
    text,
    rootContainerInstance,
    internalInstanceHandle
  ) {
    return text;
  },

  finalizeInitialChildren: function finalizeInitialChildren(element, type, props) {
    return false;
  },

  getPublicInstance: function getPublicInstance(instance) {
    return instance;
  },

  prepareForCommit: noop,

  prepareUpdate: function prepareUpdate(element, type, oldProps, newProps) {
    return true;
  },

  resetAfterCommit: noop,
  resetTextContent: noop,

  getRootHostContext: function getRootHostContext(rootInstance) {
    return getHostContextNode(rootInstance);
  },

  getChildHostContext: function getChildHostContext() {
    return {};
  },

  shouldSetTextContent: function shouldSetTextContent(type, props) {
    return false;
  },

  now: Date.now,

  useSyncScheduling: true,

  mutation: {
    appendChild: function appendChild(parentInstance, child) {
      parentInstance.appendChild(child);
      child.parent = parentInstance;
    },

    appendChildToContainer: function appendChildToContainer(parentInstance, child) {
      parentInstance.appendChild(child);
      child.parent = parentInstance;
    },

    removeChild: noop,
    removeChildFromContainer: noop,
    insertBefore: noop,
    commitUpdate: noop,
    commitMount: noop,
    commitTextUpdate: noop
  }
});

module.exports = {
  /**
   * @param  {ReactElement} element
   * @return {Object}
   */
  render: function render(element) {
    const container = createElement("ROOT");

    const node = SlackRenderer.createContainer(container);
    SlackRenderer.updateContainer(element, node, null);

    return container.render();
  }
};

1import { HOST_COMPONENT, HOST_TEXT, FundamentalComponent, HOST_PORTAL } from '../../shared/workTags';
2import appendInitialChild from './appendInitialChild';
3
4export default function appendAllChildren (
5  instance,
6  workInProgress
7) {
8  let node = workInProgress.child;
9
10  while (node !== null) {
11    if (node.tag === HOST_COMPONENT || node.tag === HOST_TEXT) {
12      appendInitialChild(instance, node.stateNode);
13    } else if (node.tag === FundamentalComponent) {
14      appendInitialChild(instance, node.stateNode.instance);
15    } else if (node.tag === HOST_PORTAL) {
16      // If we have a portal child, then we don't want to traverse
17      // down its children. Instead, we'll get insertions from each child in
18      // the portal directly.
19    } else if (node.child !== null) {
20      node.child.return = node;
21      node = node.child;
22      continue;
23    }
24    if (node === workInProgress) {
25      return;
26    }
27    while (node.sibling === null) {
28      if (node.return === null || node.return === workInProgress) {
29        return;
30      }
31      node = node.return;
32    }
33    node.sibling.return = node.return;
34    node = node.sibling;
35  }
36}

Source: appendAllChildren.js

import { HOST_COMPONENT, HOST_TEXT, FundamentalComponent, HOST_PORTAL } from '../../shared/workTags';
import appendInitialChild from './appendInitialChild';

export default function appendAllChildren (
  instance,
  workInProgress
) {
  let node = workInProgress.child;

  while (node !== null) {
    if (node.tag === HOST_COMPONENT || node.tag === HOST_TEXT) {
      appendInitialChild(instance, node.stateNode);
    } else if (node.tag === FundamentalComponent) {
      appendInitialChild(instance, node.stateNode.instance);
    } else if (node.tag === HOST_PORTAL) {
      // If we have a portal child, then we don't want to traverse
      // down its children. Instead, we'll get insertions from each child in
      // the portal directly.
    } else if (node.child !== null) {
      node.child.return = node;
      node = node.child;
      continue;
    }
    if (node === workInProgress) {
      return;
    }
    while (node.sibling === null) {
      if (node.return === null || node.return === workInProgress) {
        return;
      }
      node = node.return;
    }
    node.sibling.return = node.return;
    node = node.sibling;
  }
}

1import Reconciler from "react-reconciler";
2
3const log = (...args) => {
4  // console.log(...args);
5};
6
7const FunnyRenderer = Reconciler({
8  createInstance(type, props) {
9    log("createInstance", { type, props });
10    return {
11      type,
12      props,
13      children: [],
14    };
15  },
16  prepareForCommit() {},
17  getRootHostContext(rootInstance) {},
18  resetAfterCommit() {},
19  getChildHostContext() {},
20  shouldSetTextContent(type, props) {
21    return false;
22  },
23  createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
24    return text;
25  },
26  appendInitialChild: (parent, child) => {
27    parent.children.push(child);
28    log("appendInitialChild", { parent, child });
29  },
30  appendChild(parent, child) {
31    parent.children.push(child);
32    log("appendChild", { parent, child });
33  },
34  finalizeInitialChildren(wordElement, type, props) {
35    return false;
36  },
37  appendChildToContainer: (container, child) => {
38    if (!container.children) {
39      container.children = [];
40    }
41    container.children.push(child);
42    log("appendChildToContainer", { container, child });
43  },
44  clearContainer: () => {},
45  supportsMutation: true,
46});
47
48const RendererPublicAPI = {
49  render(element, container, callback) {
50    log({ element, container, callback });
51    // Call MyRenderer.updateContainer() to schedule changes on the roots.
52    // See ReactDOM, React Native, or React ART for practical examples.
53
54    if (!container.__rootContainer) {
55      log("creating container");
56      container.__rootContainer = FunnyRenderer.createContainer(container, false);
57    }
58    FunnyRenderer.updateContainer(element, container.__rootContainer);
59  },
60};
61
62export default RendererPublicAPI;
63

Source: index.js

import Reconciler from "react-reconciler";

const log = (...args) => {
  // console.log(...args);
};

const FunnyRenderer = Reconciler({
  createInstance(type, props) {
    log("createInstance", { type, props });
    return {
      type,
      props,
      children: [],
    };
  },
  prepareForCommit() {},
  getRootHostContext(rootInstance) {},
  resetAfterCommit() {},
  getChildHostContext() {},
  shouldSetTextContent(type, props) {
    return false;
  },
  createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
    return text;
  },
  appendInitialChild: (parent, child) => {
    parent.children.push(child);
    log("appendInitialChild", { parent, child });
  },
  appendChild(parent, child) {
    parent.children.push(child);
    log("appendChild", { parent, child });
  },
  finalizeInitialChildren(wordElement, type, props) {
    return false;
  },
  appendChildToContainer: (container, child) => {
    if (!container.children) {
      container.children = [];
    }
    container.children.push(child);
    log("appendChildToContainer", { container, child });
  },
  clearContainer: () => {},
  supportsMutation: true,
});

const RendererPublicAPI = {
  render(element, container, callback) {
    log({ element, container, callback });
    // Call MyRenderer.updateContainer() to schedule changes on the roots.
    // See ReactDOM, React Native, or React ART for practical examples.

    if (!container.__rootContainer) {
      log("creating container");
      container.__rootContainer = FunnyRenderer.createContainer(container, false);
    }
    FunnyRenderer.updateContainer(element, container.__rootContainer);
  },
};

export default RendererPublicAPI;