feat(transformer): support react fast refresh

[Dunqing]

close: #3943

Further improvements

There is a double visit here. We need to collect all react hooks calling in Function and ArrowFunctionExpression. If we want to remove this implementation, we may wait for #4188.

https://github.com/oxc-project/oxc/blob/d797e595d286c613848b773c256bd43124ad1981/crates/oxc_transformer/src/react/refresh.rs#L744-L947

Tests

All tests copy from https://github.com/facebook/react/blob/main/packages/react-refresh/src/tests/ReactFresh-test.js

There are still 4 tests that have not been passed

1. refresh/can-handle-implicit-arrow-returns/input.jsx

Related to #4767. transform correct, just output doesn't match the expected output

2. refresh/registers-identifiers-used-in-jsx-at-definition-site/input.jsx 3. refresh/registers-identifiers-used-in-react-create-element-at-definition-site/input.jsx

Blocked by #4746

4. refresh/supports-typescript-namespace-syntax/input.tsx

oxc transforms ts to js first, so probably we can ignore this case. If we really want to pass this test, we also need to turn off TypeScript plugin.

What's next?

Options:

1. Support transform refresh_reg and refresh_sig options to MemberExpression. Currently import.meta.xxxx still is an Identifier
2. Support emit_full_signatures option

Other

NAPI, testing in monitor-oxc, etc..

[Dunqing]

• #4587 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @Dunqing and the rest of your teammates on Graphite

[graphite-app[bot]]

Your org has enabled the Graphite merge queue for merging into main

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #4587 will not alter performance

_{Comparing 07-31-feat_transformer_support_react_fast_refresh (f1fcdde) with main (b3ec9e5)}

Summary

✅ 29 untouched benchmarks

[overlookmotel]

Is this ready for review? Or blocked on #4746 and #4767?

[Boshen]

Is this ready for review? Or blocked on #4746 and #4767?

Ready for review. Can be merged before fixing these.

[Dunqing]

Wider point: I think we need a better naming convention to make it easier to recognise which functions are "entry points" from the visitor, and which are functions which are only called by those entry points. I think if we call the entry points transform_* and transform_on_exit, we should use different names for the internal methods. When everything is called transform, it makes it quite hard to follow the logic.

Yes! I agree, I'll try to rename these methods

[Dunqing]

@overlookmotel Please take a look again, once this is merged, I will start to refactor it according to #4881 and try to resolve the remaining tests

[graphite-app[bot]]

Merge activity

• Aug 15, 12:38 PM EDT: Dunqing added this pull request to the Graphite merge queue.
• Aug 15, 12:45 PM EDT: Dunqing merged this pull request with the Graphite merge queue.