Introducting WebAssembly rendering and ReactApeTree

[raphamorim]

Summary

This PR introduces two new features to the React Ape render:

• WASM render
• ReactApeTree

Below the explanation/overview for each of the features

ReactApeTree Overview

Since React Ape render using canvas, it can't properly read parent styles correctly. The idea behind this PR is to reduce issues regarding hierarchy, those problems makes the App looks super weird unless you rule/specify intentionally in every View which style it should carry (it's how Ape works nowaday unfortanelly).

This PR introduces a tree that contains the layout and style property for each node, so can easily propagate it between children

Related #67

Known issues:

• Text style hierarchy doesn't work (it should render in orange)
• View positions aren't correctly geometrically
• View backgroundColor isn't correct, 2nd View should have same bgc as 1st and also 4th should have same as 3rd

Demo

return (
  <View style={{width: 80, height: 80, backgroundColor: 'grey', color: 'orange'}}>
    <View>
      <View style={{width: 80, height: 80, backgroundColor: 'powderblue'}}>
        <View
          style={{
            width: 30,
            height: 30
          }}>
          <Text>should be in orange</Text>
        </View>
      </View>
    </View>
  </View>
);

Before

After

Usage of _reactApeTree when process.env.NODE_ENV !== 'production'