A JavaScript bundle optimizer.
Go to file
Dominic Gannaway 5a5a100483 Provide a basic recovery mechanism for for and while loops (#2118)
Summary:
Release notes: standard for loops and while loops have a recovery mechanism in pure scope

This PR provides a bail-out recovery mechanism in pure scope for FatalErrors thrown and caught from for/while loops. Until now, if a FatalError occurs from trying to evaluate abstract for/while loops, we'd have to recover at a higher point in the callstack, which wasn't always possible (the loop may be at the root of a function/component).

The ideal long-term strategy is to properly model out the different cases for loops, but this is a complex and time-consuming process. This PR adds a recovery mechanism that serializes out the original for loop, but within a newly created wrapper function containing the loop logic and a function call to that newly created function wrapper. This allows us to still run the same code at runtime, where we were unable to evaluate and optimize it at build time.

For now, this PR only adds recovery support for standard `for` and `while` loops (as they go through the same code path). We already have some basic evaluation for `do while` loops, but trying to adapt that code to work with the failing test case (https://github.com/facebook/prepack/issues/2055) didn't work for me – we have so many strange problems to deal with first before we can properly handle that issue.

In cases where the loop uses `this`, the context is found and correctly called with the wrapper function. In cases of usage of `return`, `arguments` and labelled `break/continue` we bail out again as this is not currently supported in the scope of this PR (can be added in a follow up PR, but I wanted to keep the scope of this PR limited).

For example, take this failing case on master:

```js
function fn(props, splitPoint) {
  var text = props.text || "";

  text = text.replace(/\s*$/, "");

  if (splitPoint !== null) {
    while (text[splitPoint - 1] === "\n") {
      splitPoint--;
    }
  }
  return splitPoint;
}
```

This serializes out to:

```js
  var _0 = function (props, splitPoint) {
    var __scope_0 = new Array(1);

    var __get_scope_binding_0 = function (__selector) {
      var __captured;

      switch (__selector) {
        case 0:
          __captured = [_G, _E];
          break;
      }

      __scope_0[__selector] = __captured;
      return __captured;
    };

    var _C = function () {
      var __captured__scope_1 = __scope_0[0] || __get_scope_binding_0(0);

      for (; __captured__scope_1[1][__captured__scope_1[0] - 1] === "\n";) {
        __captured__scope_1[0]--;
      }
    };

    var _$0 = props.text;

    var _$2 = (_$0 || "").replace(/\s*$/, "");

    var _6 = splitPoint !== null;

    var _G = _6 ? void 0 : splitPoint;

    var _E = _6 ? void 0 : _$2;

    if (_6) {
      (__scope_0[0] || __get_scope_binding_0(0))[0] = splitPoint;
      (__scope_0[0] || __get_scope_binding_0(0))[1] = _$2;

      var _$5 = _C();
    }

    var _$6 = (__scope_0[0] || __get_scope_binding_0(0))[0];

    return _$6;
  };
```

Furthermore, an idea that might be a good follow up PR would be to break the wrapper function into two functions, depending on some heuristics. If we can detect that the loop body does not have any unsupported side-effects like writing to variables that are havoced etc, we can then tell Prepack to optimize the inner function wrapper for the loop body. That way, at least some parts of the loop get optimized (the outer bindings will be havoced before this point, so it should work okay). I think I suggested this in person with hermanventer and sebmarkbage in Seattle as a potential way to optimize complex loops that we can't compute the fixed point for right now.

Fixes #2055
Closes https://github.com/facebook/prepack/pull/2118

Differential Revision: D8410341

Pulled By: trueadm

fbshipit-source-id: ee7e6b1bc1feadf0c924e4f82506ca32ca1dadc9
2018-06-25 11:09:37 -07:00
.circleci Switch to CircleCI 2.0. (#2094) 2018-06-07 16:35:09 -07:00
bin Cleanup files 2017-12-12 11:12:24 -08:00
fb-www Add a guide for debugging React Compiler 2018-04-27 13:54:47 -07:00
flow-libs Set up adapter communication channel with Prepack 2017-10-27 12:54:08 -07:00
flow-typed/npm Remove kcheck and dedupe yarn.lock deps 2018-06-08 07:39:42 -07:00
scripts Update Flow version and fix newly reported Flow errors. (#2150) 2018-06-22 11:25:50 -07:00
src Provide a basic recovery mechanism for for and while loops (#2118) 2018-06-25 11:09:37 -07:00
test Provide a basic recovery mechanism for for and while loops (#2118) 2018-06-25 11:09:37 -07:00
website Link to Prepack introduction from website (#2147) 2018-06-21 13:12:22 -07:00
.babelrc Update webpack and change Babel settings 2018-03-05 20:54:26 -08:00
.eslintignore Tidies up the React mock logic + ReactDOM mocks + few tweaks 2018-05-02 09:08:00 -07:00
.eslintrc Prettier 1.13.4 fixes 2018-06-06 12:49:59 -07:00
.flowconfig Upgrading to Flow .69, starting @flow strict annotations 2018-04-02 22:28:33 -07:00
.gitignore Ignore .idea folder used by IntelliJ IDE 2018-05-28 15:22:30 -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
CODE_OF_CONDUCT.md Add COC to Prepack 2017-11-20 21:33:13 -08:00
CONTRIBUTING.md add reading wiki link to places 2018-05-13 09:25:59 -07:00
LICENSE Initial commit 2017-03-28 20:52:41 -07:00
package.json Update Flow version and fix newly reported Flow errors. (#2150) 2018-06-22 11:25:50 -07:00
PATENTS Initial commit 2017-03-28 20:52:41 -07:00
README.md Add parcel plugin to readme 2018-06-02 12:46:36 -07:00
webpack.config.js Update webpack and change Babel settings 2018-03-05 20:54:26 -08:00
yarn.lock Update Flow version and fix newly reported Flow errors. (#2150) 2018-06-22 11:25:50 -07:00

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

Plugins to other tools

The following are a few plugins to other tools. They have been created and are maintained separately from Prepack itself. If you run into any issues with those plugins, please ask the plugin maintainers for support.

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-cli
    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 website directory 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:

  1. Build prepack into the website: yarn build-bundle && mv prepack.min.js website/js
  2. Run python -m SimpleHTTPServer (Python 2) or python -m http.server (Python 3) from the website/ directory

How to contribute

To read more about the project, check out this suggested reading wiki

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.