facebookarchive/prepack
1
1
Fork 0
mirror of https://github.com/facebookarchive/prepack.git synced 2024-07-14 18:00:45 +03:00
Code Issues Projects Releases Wiki Activity
A JavaScript bundle optimizer.
538 Commits 71 Branches 48 Tags 36 MiB
JavaScript 98.4%
HTML 1%
CSS 0.4%
Shell 0.2%
810056d1ec
Go to file
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
bin Extract scripts from npm package (#463) 2017-04-26 12:26:18 -07:00
flow-libs Set up adapter communication channel with Prepack 2017-10-27 12:54:08 -07:00
flow-typed/npm Avoid duplicate nested function body(Part1) 2017-10-17 10:46:10 -07:00
scripts Add React functional component folding 2017-11-06 05:07:36 -08:00
src Add React functional component folding 2017-11-06 05:07:36 -08:00
test Add React functional component folding 2017-11-06 05:07:36 -08:00
.babelrc Use preset-env (#512) 2017-05-23 17:30:54 -04:00
.eslintignore Enable eslint prettier plugin 2017-07-18 14:09:05 -07:00
.eslintrc Enable eslint prettier plugin 2017-07-18 14:09:05 -07:00
.flowconfig Set up flow-libs 2017-10-19 17:12:49 -07:00
.gitignore Simplify path conditions 2017-09-20 15:18:49 -07:00
.gitmodules Initial commit 2017-03-28 20:52:41 -07:00
.watchmanconfig Add React functional component folding 2017-11-06 05:07:36 -08:00
circle.yml Fix flow errors 2017-11-03 00:10:03 -07:00
CONTRIBUTING.md Update CONTRIBUTING.md 2017-10-10 13:53:09 -07:00
LICENSE Initial commit 2017-03-28 20:52:41 -07:00
package.json Add React functional component folding 2017-11-06 05:07:36 -08:00
PATENTS Initial commit 2017-03-28 20:52:41 -07:00
README.md Change some http links to https 2017-09-30 14:08:44 -07:00
webpack.config.js Refactor the public API in a similar style to Babel API (#469) 2017-04-27 00:30:00 -07:00
yarn.lock Add React functional component folding 2017-11-06 05:07:36 -08:00

README.md

Prepack Circle CI

Prepack is a partial evaluator for JavaScript. Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently. For initialization-heavy code, Prepack works best in an environment where JavaScript parsing is effectively cached.

See the official prepack.io website for an introduction and an interactive REPL playground.

How to use Prepack

Install the CLI via npm,

$ npm install -g prepack

Or if you prefer yarn, make sure you get yarn first,

$ npm install -g yarn

and then install the Prepack CLI via yarn:

$ yarn global add prepack

You may need to prepend (pun intended!) the command with sudo in some cases.

Let the party begin

To compile a file and print the output to the console:

$ prepack script.js

If you want to compile a file and output to another file:

$ prepack script.js --out script-processed.js

Detailed instructions and the API can be found at Prepack CLI: Getting Started

Status

How to get the code

  1. Clone repository and make it your current directory.
  2. git submodule init
  3. git submodule update --init
  4. Get yarn and node, then do yarn

Note: For development work you really need yarn, as many scripts require it.

How to build, lint, type check

  1. Get the code
  2. yarn build
    You can later run yarn watch in the background to just compile changed files on the fly.
  3. yarn lint
  4. yarn flow

How to run tests

  1. Get the code
  2. Make sure the code is built, either by running yarn build or yarn watch
  3. yarn test

You can run individual test suites as follows:

  • yarn test-serializer
    This tests the interpreter and serializer. All tests should pass.
  • yarn test-test262
    This tests conformance against the test262 suite. Not all will pass, increasing conformance is work in progress.

How to run the interpreter

  1. Get the code
  2. Make sure the code is built, either by running yarn build or yarn watch
  3. yarn repl
    This starts an interactive interpreter session.

How to run Prepack

  1. Get the code

  2. Make sure the code is built, either by running yarn build or yarn watch.

  3. Have a JavaScript file handy that you want to prepack, for example:
    echo "function hello() { return 'hello'; } function world() { return 'world'; } s = hello() + ' ' + world();" >/tmp/sample.js

  4. cat /tmp/sample.js | yarn prepack
    Try --help for more options.

How to validate changes

Instead of building, linting, type checking, testing separately, the following does everything together:
yarn validate

How to edit the website

The content for prepack.io resides in the gh-pages branch of this repository. To make changes, submit a pull request, just like for any code changes. In order to run the website locally at localhost:8000, run python -m SimpleHTTPServer (Python 2) or python -m http.server (Python 3) from the cloned gh-pages branch.

At this time, a particular bundled version of Prepack is checked in to the gh-pages branch at js/prepack.min.js. To update the bundle, run yarn build-bundle from the master branch, and copy the resulting prepack.min.js file into the gh-pages branch into the js directory, and submit a pull request for that change.

How to contribute

For more information about contributing pull requests and issues, see our Contribution Guidelines.

License

Prepack is BSD-licensed. We also provide an additional patent grant.