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

Implement react-hot-loader transform #376

Merged
merged 1 commit into from
Dec 29, 2018
Merged

Conversation

alangpierce
Copy link
Owner

Fixes #228

Some details:

  • An eval snippet needed to be added to each class, which I decided to do
    unconditionally for simplicity.
  • A previous change already comptued the top-level declared variables, so I
    could just use those.
  • There was a bug where parameters in arrow function types were seen as
    top-level variables, so I changed it so types are never considered variable
    declarations.
  • In order to register the default export, we need to extract it to a variable,
    which required modifying both import transformers to handle that as a special
    case.
  • The ReactHotLoaderTransformer doesn't actually participate in normal
    transform, it just adds the snippets to the start and end.

Cases not handled yet that could be handled in the future:

  • Avoid treating require statements as top-level declarations.
  • Skip react and react-hot-loader files themselves (Sucrase shouldn't be running
    on them anyway).

I tested this end-to-end on a small app to make sure hot reloading works,
including for bound methods.

Fixes #228

Some details:
* An eval snippet needed to be added to each class, which I decided to do
  unconditionally for simplicity.
* A previous change already comptued the top-level declared variables, so I
  could just use those.
* There was a bug where parameters in arrow function types were seen as
  top-level variables, so I changed it so types are never considered variable
  declarations.
* In order to register the default export, we need to extract it to a variable,
  which required modifying both import transformers to handle that as a special
  case.
* The ReactHotLoaderTransformer doesn't actually participate in normal
  transform, it just adds the snippets to the start and end.

Cases not handled yet that could be handled in the future:
* Avoid treating `require` statements as top-level declarations.
* Skip react and react-hot-loader files themselves (Sucrase shouldn't be running
  on them anyway).

I tested this end-to-end on a small app to make sure hot reloading works,
including for bound methods.
@alangpierce alangpierce mentioned this pull request Dec 29, 2018
@codecov-io
Copy link

Codecov Report

Merging #376 into master will increase coverage by 0.21%.
The diff coverage is 95.83%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #376      +/-   ##
==========================================
+ Coverage   79.51%   79.73%   +0.21%     
==========================================
  Files          44       45       +1     
  Lines        4877     5147     +270     
  Branches     1133     1144      +11     
==========================================
+ Hits         3878     4104     +226     
- Misses        702      743      +41     
- Partials      297      300       +3
Impacted Files Coverage Δ
src/index.ts 89.36% <ø> (+6.5%) ⬆️
src/transformers/ESMImportTransformer.ts 77.67% <100%> (+2.67%) ⬆️
src/transformers/CJSImportTransformer.ts 92.18% <100%> (+0.15%) ⬆️
src/transformers/ReactHotLoaderTransformer.ts 100% <100%> (ø)
src/parser/traverser/lval.ts 97.56% <100%> (+0.63%) ⬆️
src/transformers/RootTransformer.ts 91.97% <80%> (-0.79%) ⬇️
src/util/formatTokens.ts 70.58% <0%> (-10.06%) ⬇️
src/parser/util/identifier.ts 90.9% <0%> (-4.1%) ⬇️
src/parser/plugins/jsx/index.ts 87.33% <0%> (-1.88%) ⬇️
src/parser/plugins/flow.ts 62.21% <0%> (-1.59%) ⬇️
... and 20 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5f9f5e0...99fad8d. Read the comment docs.

@alangpierce alangpierce merged commit 72bc666 into master Dec 29, 2018
@alangpierce alangpierce deleted the add-react-hot-loader branch December 29, 2018 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants