Introducing WebAssembly, Specs, ReactApeTree and Platform module

[raphamorim]

Summary

This PR introduces:

• Specs
• WebAssembly rendering
• ReactApeTree
• Platform

Below the explanation/overview for each of the features

Specs

This pull request introduces specs. Specs are formal agreement and documentation regarding React Ape Elements behavior, example below:

Render with WASM/Canvas (fallback to JS/Canvas)

More information soon.

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'

Platform

When building a cross-platform app, you'll want to re-use as much code as possible. You'll probably have different scenarios where different code might be necessary. For instance, you may want to implement separated visual components for LG-webOS and Samsung-Tizen.

This PR also introduces the Platform module to easily organize your code and separate it by platform:

import { Platform } from 'react-ape';

console.log(Platform('webos')) // true
console.log(Platform('tizen')) // false
console.log(Platform('orsay')) // false