facebookarchive/prepack
1
1
Fork 0
mirror of https://github.com/facebookarchive/prepack.git synced 2024-08-17 10:30:32 +03:00
Code Issues Projects Releases Wiki Activity
A JavaScript bundle optimizer.
1,392 Commits 71 Branches 48 Tags 36 MiB
JavaScript 98.4%
HTML 1%
CSS 0.4%
Shell 0.2%
2810294260
Go to file
Caleb Meredith 2810294260 Fix React branch serialization issues (#2318) 
Summary:
After adding classes to my fuzzer (which does not use first render mode) I found #2316. This PR fixes #2316 and a related issue I found while working on that. (Each fix is in a separate commit.) The second issue I found is scarier since the compiler passes but we get invalid output.

In the following example I observed an invariant violation:

```js
const React = require("react");

__evaluatePureFunction(() => {
  function Tau(props) {
    return React.createElement(
      "div",
      null,
      React.createElement(Epsilon, {
        a: props.z,
      }),
      React.createElement(Zeta, {
        p: props.h,
      })
    );
  }

  class Epsilon extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      return React.createElement(Zeta, { p: this.props.a });
    }
  }

  function Zeta(props) {
    return props.p ? null : React.createElement("foobar", null);
  }

  __optimizeReactComponentTree(Tau);

  module.exports = Tau;
});
```

```
=== serialized but not visited values
=== visited but not serialized values
undefined, hash: 792057514635681
  referenced by 1 scopes
      =>_resolveAbstractConditionalValue alternate(#75)=>ReactAdditionalFunctionEffects(#80)

Invariant Violation: serialized 26 of 27
This is likely a bug in Prepack, not your code. Feel free to open an issue on GitHub.
    at invariant (/Users/calebmer/prepack/src/invariant.js:18:15)
    at ResidualHeapSerializer.serialize (/Users/calebmer/prepack/src/serializer/ResidualHeapSerializer.js:2465:17)
    at statistics.referenceCounts.measure (/Users/calebmer/prepack/src/serializer/serializer.js:259:15)
    at PerformanceTracker.measure (/Users/calebmer/prepack/src/statistics.js💯14)
    at ast (/Users/calebmer/prepack/src/serializer/serializer.js:238:38)
    at statistics.total.measure (/Users/calebmer/prepack/src/serializer/serializer.js:169:17)
    at PerformanceTracker.measure (/Users/calebmer/prepack/src/statistics.js💯14)
    at Serializer.init (/Users/calebmer/prepack/src/serializer/serializer.js:136:35)
    at prepackSources (/Users/calebmer/prepack/src/prepack-standalone.js:66:33)
    at compileSource (/Users/calebmer/prepack/scripts/debug-fb-www.js:92:18)
```

Somehow we were visiting `undefined`, but clearly we weren’t serializing it given the source code. Here’s what was happening:

- We’d visit an additional function calling `withCleanEquivalenceSet`.
- The additional function would enqueue an action which visited `<foobar>`.
- Later, we’d execute the `<foobar>` visiting action outside our `withCleanEquivalenceSet` with our default equivalence set.
- The same thing happens with our new root from our `Epsilon` class.
- Except now some effects have been applied that set the `type` for our `<foobar>` React element in our React equivalence set to `undefined`. Since when we created `<foobar>` we modified its `type` property. (Recorded in `modifiedProperties`.)
- Now our `<Zeta>` in `<Tau>` and our `<Zeta>` in `<Epsilon>` share the _exact same_ `<foobar>` thanks to our equivalence set.
- But `<foobar>` has a `type` of `undefined` thanks to the effects we applied. We should be creating a new `<foobar>` since we are in a new optimized function.
- ***Boom!*** We visit `undefined`, but don’t serialize it since the same effects aren’t applied when we serialize.

This test case caught an important flaw in our visiting logic, but it only manifested as an invariant under these very specific conditions. Which is a little scary. In a large example, like our internal bundle, we would of course serialize some `undefined` value but we would have still visited `undefined` instead of the proper type, _and_ we may consider two elements to be equivalent when we shouldn’t since their components may render independently. This issue (I presume) can also affect we bail out on since they create new trees inside the root tree.

While debugging and fixing this issue, I found another with incorrect/suboptimal output that passes Prepack and passes eslint. Given the following input:

```js
require("react");

__evaluatePureFunction(() => {
  const React = require("react");

  function Tau(props) {
    return React.createElement(
      "a",
      null,
      React.createElement("b", null),
      React.createElement(Epsilon, null),
      React.createElement("c", null)
    );
  }

  class Epsilon extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      return React.createElement("d", null);
    }
  }

  __optimizeReactComponentTree(Tau);

  module.exports = { Tau, Epsilon };
});
```

We get this output:

```js
(function () {
  var _$0 = require("react").Component;

  var _3 = function (props, context) {
    _6 === void 0 && $f_0();
    _9 === void 0 && $f_1();

    var _8 = <_B />;

    var _4 = <a>{_6}{_8}{_9}</a>;

    return _4;
  };

  var _B = class extends _$0 {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      return _E; // <--------------------------- Incorrect. `_B` may be rendered outside of `_3`.
    }
  };

  var $f_0 = function () {
    _6 = <b />;
    _E = <d />;
  };

  var _6;

  var _E;

  var $f_1 = function () {
    _9 = <c />;
  };

  var _9;

  var _0 = {
    Tau: _3,
    Epsilon: _B
  };
  module.exports = _0;
})();
```

This happened because the React serializer’s `_lazilyHoistedNodes` logic was implemented in a way that doesn’t play well with the interleaving almost random order of the serializer invocation of React lazily hoisted nodes logic.
Pull Request resolved: https://github.com/facebook/prepack/pull/2318

Differential Revision: D8992253

Pulled By: calebmer

fbshipit-source-id: 4a75e5768ffb7887c3a8afa2a0f3f59e7eac266d
2018-07-25 09:55:21 -07:00
.circleci Use Flow server for local development (#2245) 2018-07-18 06:40:25 -07:00
assets Adding raw Prepack Logo assets (#2189) 2018-07-03 12:45:47 -07:00
bin Cleanup files 2017-12-12 11:12:24 -08:00
fb-www Make React tests fast (#2187) 2018-07-02 11:25:58 -07:00
flow-libs Set up adapter communication channel with Prepack 2017-10-27 12:54:08 -07:00
flow-typed/npm Upgrade Prepack to Babel 7 (#2256) 2018-07-14 09:55:18 -07:00
scripts Cleanup of generator.js and moves out Babel serialization logic (#2306) 2018-07-23 17:46:33 -07:00
src Fix React branch serialization issues (#2318) 2018-07-25 09:55:21 -07:00
test Fix React branch serialization issues (#2318) 2018-07-25 09:55:21 -07:00
website Delete node-cli Option and all the Node.js intrinsics (#2267) 2018-07-16 13:09:59 -07:00
.eslintignore Upgrade Prepack to Babel 7 (#2256) 2018-07-14 09:55:18 -07:00
.eslintrc Prettier 1.13.4 fixes 2018-06-06 12:49:59 -07:00
.flowconfig Use Flow server for local development (#2245) 2018-07-18 06:40:25 -07:00
.gitignore Optimize ReactEquivalenceSet (#2243) 2018-07-13 13:40:00 -07:00
.gitmodules Initial commit 2017-03-28 20:52:41 -07:00
.prettierrc Run Prettier checks on CI (#2212) 2018-07-10 09:55:23 -07:00
.watchmanconfig Add React functional component folding 2017-11-06 05:07:36 -08:00
babel.config.js Add serializer mode for test262 execution (#2290) 2018-07-18 18:54:51 -07:00
CODE_OF_CONDUCT.md Updated the code of conduct links. (#2284) 2018-07-18 10:39:53 -07:00
CONTRIBUTING.md Updated the code of conduct links. (#2284) 2018-07-18 10:39:53 -07:00
LICENSE Initial commit 2017-03-28 20:52:41 -07:00
package.json Bump version for next alpha 2018-07-18 07:24:17 -07:00
PATENTS Initial commit 2017-03-28 20:52:41 -07:00
README.md Adding raw Prepack Logo assets (#2189) 2018-07-03 12:45:47 -07:00
webpack.config.js Upgrade Prepack to Babel 7 (#2256) 2018-07-14 09:55:18 -07:00
yarn.lock Upgrade Prepack to Babel 7 (#2256) 2018-07-14 09:55:18 -07: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

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 && 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.