Use SWC loader #29

tomdracz · 2022-01-24T11:09:03Z

Investigates how can we use swc-loader as a replacement for babel-loader

So far, works fairly well but need to figure out configuration layer. Things like React support, TS, fast refresh where previously enabled by a check whether the relevant plugin is installed. With swc, they come built in but need to be enabled in the config so might need to use additional configuration layer or settle on some defaults

To explore/to decide/To do:

Configuration - inline with loader setup or using .swcrc file?
Configuring features - allow running React, TS, fast refresh by default or make user configurable? Is there a reason why we would not enable all of those?
Installing peer dependencies, no point in installing everything so might need to rejig how we install peer dependencies. For now could maybe leave swc out of peer dependencies and have manual install instructions
Explore how swc env matches up with @babel/preset-env - some options map one to one, but others are absent (works but browserslist is not processed, see Browserslist not being applied from .browserslistrc or package.json swc-project/swc#3365)
Untested, need to see how it behaves with .erb or .coffee files
Cleanup duplication and streamline swc loader rules
What tests would we cover this with?

tomdracz · 2022-01-25T18:25:42Z

Progress so far, tried hooking this up to https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh and got it to work nicely after some hurdles with server rendering.

Browserlists doesn't seem to be correctly applied unless specified directly in swc config. Opened swc-project/swc#3365 to in swc repo.

justin808 · 2022-01-25T23:52:18Z

@tomdracz please make a PR for https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh!

EXCITING!

package/rules/swc.js

package/utils/helpers.js

package/rules/index.js

justin808 · 2022-01-27T03:24:26Z

@tomdracz let me know when you think this is ready!

tomdracz · 2022-01-27T11:11:12Z

@justin808 Think this one is good to go.

I've added configuration layer using config/swc.config.js file. This is similar to how you would configure babel although bit more opinionated and specific to us. Still probably best of the options to allow customisation.

shakacode/react_on_rails_demo_ssr_hmr#30 also updated to show the migration to swc-loader

it will still be experimental until we get more usage (tested on the example app and our current prod app) but it's a start.

Will be good to add generator option to install that would set correct webpack_loader option, install the dependencies and maybe set some example config/swc.config.js but we can bring this in later when we move this out of "experimental" phase.

justin808 · 2022-01-28T00:21:45Z

@tomdracz I will check this out next week for sure, at the latest. Very exciting!

In terms of

What tests would we cover this with?

I think the gem should 2 big improvements to CI:

A sample app, like /spec/dummy https://github.com/shakacode/react_on_rails/tree/master/spec/dummy
CI steps that run rails new and the webpacker generator, and then a test, like those here in React on Rails

Take a look at https://github.com/shakacode/react_on_rails/blob/master/Rakefile and https://github.com/shakacode/react_on_rails/blob/master/.github/workflows/main.yml.

justin808 · 2022-01-28T07:06:21Z

@tomdracz Let me know if you'd like me to push out a pre-release 6.1 with support for this feature.

justin808

Looks GREAT!

Just some grammar and spelling is all that I can see without trying this out.

docs/using_swc_loader.md

justin808 · 2022-01-28T07:16:20Z

docs/using_swc_loader.md

+module.exports = customConfig
+```
+
+### Example: Enabling React Fast Refresh


We can either change this package or make a new one that makes this integration super easy.

https://github.com/shakacode/react-on-webpacker/

package/utils/helpers.js

justin808 · 2022-01-28T07:27:30Z

package/swc/index.js

+          syntax: isTypescriptFile(filenameToProcess)
+            ? 'typescript'
+            : 'ecmascript',
+          [isTypescriptFile(filenameToProcess) ? 'tsx' : 'jsx']:


Should we move React support back into Shakapacker? Seems that we should keep it the same for both babel and swc? However, now that I'm maintaining shakapacker, I don't mind having React support being supported by default.

rails/webpacker#3224

@justin808 there's two parts to it - understanding jsx syntax and React transform. I think we can move the latter to a config but with the former relying on the filename it might need to stay.

I'll see how it handles non-React jsx files and adjust accordingly.

@justin808 There's some weirdness with passing options to swc inline, for more details swc-project/swc#3374

This setup will work though regardless and I see no real reason not to support basic React config out of the box if we're not requiring any specific presets or plugins like @babel/preset-react. It "just" works so we might as well embrace it. We could drop the tsx/jsx setting here and move to the custom config but that will probably need to become a function that takes a filename to allow dynamic setting of jsx/tsx value (no idea why SWC just didn't settle for one setting 🤷 ).

Still, I've removed the transform setting from the default config and added section to the docs on how might one add settings to match any settings they have in preset-react if they wish to do so.

We'll iterate on this after the first release.

Maybe we can just be clear that SWC is experimental and the final API might change by the time 6.1.0 is released.

README.md

justin808 · 2022-01-28T07:32:08Z

@tomdracz once I merge, I'll push a 6.0.0.beta.1 with this change.

justin808

Thanks for cleaning up the grammar!

justin808 · 2022-01-28T21:43:26Z

package/swc/index.js

+          syntax: isTypescriptFile(filenameToProcess)
+            ? 'typescript'
+            : 'ecmascript',
+          [isTypescriptFile(filenameToProcess) ? 'tsx' : 'jsx']:


We'll iterate on this after the first release.

Maybe we can just be clear that SWC is experimental and the final API might change by the time 6.1.0 is released.

justin808 · 2022-01-28T22:01:03Z

@tomdracz shakapacker-6.1.0.beta.0.gem and npm pushed.

Can you please update the changelog?

💥

Tom Dracz added 5 commits January 23, 2022 12:05

SWC config spike

0963dbf

Stray console.log

4c682e8

Use webpack config to determine loader to use

0a17f28

Try and match babel preset env configurations

bdeddc2

Add development check for refresh and add dynamic imports

90d49e7

This was referenced Jan 24, 2022

ENHANCEMENT: Support or switch to SWC #27

Closed

Update README.md rails/webpacker#3266

Merged

Tom Dracz added 2 commits January 25, 2022 16:06

Use correct object shape for the SWC rules

68c5126

Only run refresh if running webpack dev server

658cb86

Merge master branch and streamline configs

7ab6fb7

tomdracz mentioned this pull request Jan 26, 2022

[On Hold] Demonstrate usage of SWC loader shakacode/react_on_rails_demo_ssr_hmr#30

Closed

Tom Dracz added 2 commits January 26, 2022 16:46

Add SWC loader usage doc

05051fb

Update docs

a38fbcc

tomdracz marked this pull request as ready for review January 26, 2022 16:53

tomdracz commented Jan 26, 2022

View reviewed changes

package/rules/swc.js Outdated Show resolved Hide resolved

tomdracz commented Jan 26, 2022

View reviewed changes

package/utils/helpers.js Show resolved Hide resolved

tomdracz commented Jan 26, 2022

View reviewed changes

package/rules/index.js Outdated Show resolved Hide resolved

tomdracz changed the title ~~WIP: Use SWC loader as an options~~ WIP: Use SWC loader Jan 26, 2022

Switch back to using map for gathering rules

aa37020

Tom Dracz added 4 commits January 27, 2022 09:24

Don't install swc libs by default from peer dependencies

4302084

Allow customisation of SWC config

747092d

Document SWC loader customisation

be1282b

Add another example showcasing browserslist config

62febd2

tomdracz changed the title ~~WIP: Use SWC loader~~ Use SWC loader Jan 27, 2022

justin808 requested changes Jan 28, 2022

View reviewed changes

Tom Dracz added 3 commits January 28, 2022 13:21

Don't define React transform

23f9457

Update docs

959ec56

Clarify fast refresh usage

571baa6

tomdracz requested a review from justin808 January 28, 2022 13:57

justin808 mentioned this pull request Jan 28, 2022

Is this project abandoned? reactjs/react-rails#1129

Closed

justin808 approved these changes Jan 28, 2022

View reviewed changes

justin808 merged commit 40218f2 into shakacode:master Jan 28, 2022

This was referenced Feb 4, 2022

Replace Webpacker with jsbundling-rails + Webpack 18F/identity-idp#5746

Merged

Add support for https://github.com/privatenumber/esbuild-loader like SWC #49

Closed

tomdracz mentioned this pull request Feb 5, 2022

Enable esbuild-loader support #53

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use SWC loader #29

Use SWC loader #29

tomdracz commented Jan 24, 2022 •

edited

tomdracz commented Jan 25, 2022

justin808 commented Jan 25, 2022

justin808 commented Jan 27, 2022

tomdracz commented Jan 27, 2022

justin808 commented Jan 28, 2022

justin808 commented Jan 28, 2022

justin808 left a comment

justin808 Jan 28, 2022

justin808 Jan 28, 2022

tomdracz Jan 28, 2022

tomdracz Jan 28, 2022

justin808 Jan 28, 2022

justin808 commented Jan 28, 2022

justin808 left a comment

justin808 Jan 28, 2022

justin808 commented Jan 28, 2022

Use SWC loader #29

Use SWC loader #29

Conversation

tomdracz commented Jan 24, 2022 • edited

tomdracz commented Jan 25, 2022

justin808 commented Jan 25, 2022

justin808 commented Jan 27, 2022

tomdracz commented Jan 27, 2022

justin808 commented Jan 28, 2022

justin808 commented Jan 28, 2022

justin808 left a comment

Choose a reason for hiding this comment

justin808 Jan 28, 2022

Choose a reason for hiding this comment

justin808 Jan 28, 2022

Choose a reason for hiding this comment

tomdracz Jan 28, 2022

Choose a reason for hiding this comment

tomdracz Jan 28, 2022

Choose a reason for hiding this comment

justin808 Jan 28, 2022

Choose a reason for hiding this comment

justin808 commented Jan 28, 2022

justin808 left a comment

Choose a reason for hiding this comment

justin808 Jan 28, 2022

Choose a reason for hiding this comment

justin808 commented Jan 28, 2022

tomdracz commented Jan 24, 2022 •

edited