Dominic Gannaway 810056d1ec Add React functional component folding ...

Summary:
Release note: Adds experimental React functional component folding optimizations

This PR is stacked upon PRs #1118 and #1117. Thus, those PRs should be merged before this PR is merged to reduce noise in the diff.

This PR adds a new React Reconciler into Prepack's serialization process, so that React components trees can be folded/inlined into a single component at build time. To fold a component tree, it must be explicitly done via `__registerReactComponentRoot(nameOfComponent)`.

This PR only attempts to fold React functional components, not React ES2015 class components (that will come in another PR at a later date). Furthermore, the `props` parameter on a root component must contain Flow type annotations (otherwise we will have no idea what the values might be). Support flow `propTypes` might also be an addition, but not for this PR.

If the reconciler comes across a component that it cannot fold/inline, it will "bail-out" and try and continue the process without that particular component being folded into the tree.

An example of how this all works (input):

```jsx
function App(props: {title: string}) {
  return (
    <div>
      <ChildComponent title={props.title} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <span>
      <SubChildComponent {...props} />
    </span>
  );
}

function SubChildComponent(props) {
  return <span>{props.title.toString()}</span>
}

__registerReactComponentRoot(App);

global.App = App;
```

Output:
```jsx
(function () {
  "use strict";

  var _$1 = this;

  var _0 = function (props) {
    var _$0 = props.title;
    return <div><span><span>{_$0}</span></span></div>;
  };

  _$1.App = _0;
}).call(this);
```
Closes https://github.com/facebook/prepack/pull/1120

Differential Revision: D6237333

Pulled By: trueadm

fbshipit-source-id: b58c7d8979ca79a766bb2ee2eb01a380d37c3101

2017-11-06 05:07:36 -08:00

0 lines

JSON

Raw Blame History