Feat: Atomic Render Nodes

[barelyhuman]

An attempt at getting rid of the dependency on React for building the tree

[barelyhuman]

change of plan, we're building a Mutable DOM for base set of nodes for ReactNative first

[barelyhuman]

This is now valid code

import {Document, render} from './src/lib/dom';

function App() {
  const document = new Document();
  const textElm = document.createElement('Text');

  let count = 0;

  const text = document.createTextNode(count);
  const safeAreaView = document.createElement('SafeAreaView');

  textElm.appendChild(text);

  setInterval(() => {
    text.data = ++count;
  }, 1000);

  safeAreaView.appendChild(textElm);
  const tree = render(safeAreaView);

  return tree;
}

export default App;

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4bbae96:

Sandbox	Source
Vanilla	Configuration

[barelyhuman]

Close to a full DOM
the above commits add the ability to do the following

• add Press event handlers (proxies the addition to the host component's props)
• add style updates via Object.assign or using style[property] format on the node
• add prop updates for any other attributes that might be added

Example of the above changes

import {Document, render} from './src/lib/dom';

const document = new Document();

function App() {
  let count = 0;
  const safeAreaView = document.createElement('SafeAreaView');
  const countTextNode = document.createTextNode(count);
  const countText = document.createElement('Text');
  countText.appendChild(countTextNode);

  // set the isHighlighted prop on the react native host component Text
  countText.setAttribute('isHighlighted', true);

  safeAreaView.style.marginTop = 100;

  Object.assign(countText.style, {
    fontSize: 52,
    textAlign: 'center',
  });

  const buttonNode = createButton();

  buttonNode.addEventListener('onPress', () => {
    const childText = buttonNode.children[0];
    const buttonTNode = childText.children[0];
    countTextNode.data = ++count;
    const isEven = count % 2 === 0;
    buttonTNode.data = isEven ? 'Even' : 'Odd';
    Object.assign(childText.style, {
      color: count % 2 === 0 ? 'green' : 'red',
    });
  });

  safeAreaView.appendChild(countText);
  safeAreaView.appendChild(buttonNode);

  let tree = render(safeAreaView);
  return tree;
}

function createButton() {
  const touchable = document.createElement('TouchableOpacity');
  const text = document.createElement('Text');
  const textNode = document.createTextNode('Press Me');

  Object.assign(touchable.style, {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 6,
    margin: 12,
  });

  Object.assign(text.style, {
    color: 'black',
    fontSize: 45,
  });

  text.appendChild(textNode);
  touchable.appendChild(text);
  return touchable;
}

export default App;

[barelyhuman]

Checkpoint:
Preact can render and update text nodes and native view components to the DOM

Merging.