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 |
||
---|---|---|
.circleci | ||
assets | ||
bin | ||
fb-www | ||
flow-libs | ||
flow-typed/npm | ||
scripts | ||
src | ||
test | ||
website | ||
.eslintignore | ||
.eslintrc | ||
.flowconfig | ||
.gitignore | ||
.gitmodules | ||
.prettierrc | ||
.watchmanconfig | ||
babel.config.js | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
LICENSE | ||
package.json | ||
PATENTS | ||
README.md | ||
webpack.config.js | ||
yarn.lock |
Prepack ![Circle CI](https://circleci.com/gh/facebook/prepack.png?style=shield&circle-token=1109197a81e634fd06e162c25d309a420585acd5)
![](/facebookarchive/prepack/media/commit/2810294260c9cdfd44daf69b509442213f207f65/assets/PrepackLogo.png)
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.
- A Rollup plugin for Prepack
- A Webpack plugin for Prepack
- A Parcel plugin for Prepack
- A Visual Studio code plugin for Prepack
- A babel plugin which transforms Flow annotations into prepack model declarations.
Status
- test262 status on master branch
- code coverage report for serialization tests
- To see the status for a pull request, look for the message All checks have passed or All checks have failed. Click on Show all checks, Details, Artifacts, and then test262-status.txt or coverage-report-sourcemapped/index.html.
How to get the code
- Clone repository and make it your current directory.
git submodule init
git submodule update --init
- 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
- Get the code
yarn build
You can later runyarn watch
in the background to just compile changed files on the fly.yarn lint
yarn flow
How to run tests
- Get the code
- Make sure the code is built, either by running
yarn build
oryarn watch
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
- Get the code
- Make sure the code is built, either by running
yarn build
oryarn watch
yarn repl
This starts an interactive interpreter session.
How to run Prepack
-
Get the code
-
Make sure the code is built, either by running
yarn build
oryarn watch
. -
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
-
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:
- Build prepack into the website:
yarn build && mv prepack.min.js website/js
- Run
python -m SimpleHTTPServer
(Python 2) orpython -m http.server
(Python 3) from thewebsite/
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.