Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DevTools] Parse named source AST in a worker #21855

Closed
bvaughn opened this issue Jul 12, 2021 · 0 comments · Fixed by #21902
Closed

[DevTools] Parse named source AST in a worker #21855

bvaughn opened this issue Jul 12, 2021 · 0 comments · Fixed by #21902

Comments

@bvaughn
Copy link
Contributor

bvaughn commented Jul 12, 2021

Hooks are the preferred way for writing stateful React components, but there are a few things about them that still lag behind the class component API: inspecting state in DevTools (since hooks aren’t “named”). Even now that this feature has been released, it remains disabled by default because the size of DEV bundles in larger apps (e.g. Facebook) makes parsing the AST very slow.

To alleviate this, we plan to provide an additional compilation tool that adds hook names to an extended source map during build time (#21782). However not every application will use this and so DevTools will still need to fall back to parsing source into an AST.

Currently this is done using the '@babel/parser' package on the main thread:

// TODO (named hooks) Parsing should ideally be done off of the main thread.
const originalSourceAST = parse(originalSourceCode, {
sourceType: 'unambiguous',
plugins: ['jsx', plugin],
});

It would be nice to move this into a worker so that DevTools remains responsive even when parsing large sources.


One downside of using a worker for this is that serializing data to share between the worker and main thread (e.g. the source code string or the AST itself) could be expensive. This change will probably also require redesigning the boundaries a bit to reduce the number and size of things passed between boundaries. For example, the main thread could pass the URL of the source code to the worker, which could fetch and parse the file. Then the main thread could pass line/column information and the worker could return a hook name (or null). The goal would be to avoid having to serialize large AST structures.

bvaughn pushed a commit that referenced this issue Jul 21, 2021
Resolves #21855

Ended up using workerize in order to setup the worker once it allows easy imports (for babel's parse function) and exports.
zhengjitf pushed a commit to zhengjitf/react that referenced this issue Apr 15, 2022
Resolves facebook#21855

Ended up using workerize in order to setup the worker once it allows easy imports (for babel's parse function) and exports.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant