What plugins do you need to use swc in your app?

[kwonoj]

Context

There are numbers of request to add features in @swc/core. It is currently scattered around gh issues and discussions, and not clearly compiled as list as some are requested as core features, and some goes to the plugins and some elses.

This post attempts to collect list of the features people use, but not available in swc currently which blocks adaption of the swc in the certain app user currently build.

Few disclaimer:

• THIS DOES NOT GUARANTEE SWC WILL IMPLEMENT CERTAIN FEATURE / OR CREATE PLUGINS.
  This is more of collecting real world usecases for now.
• Please check https://github.com/swc-project/plugins just in case if some of features are available already.
• Please do not leave duplicated comments (or +1, something similar) if there's existing comment. Instead, please use emoji to express interests.
• Please share link to original plugin you're using currently, either babel, or next-swc, or something else.
• Please scope discussion to the features need to be implemented as plugin. Generic plugin discussion should be discussed in [Meta] collecting feedback for new transform plugin interface #3540

There are some existing plugins. Check #4818 for the details.

NOTE:

**Any plugin relies on babel-plugin-macro have same constraint to #4768 (reply in thread) (babel-plugin-macros pass babel object to macros) - which SWC can't provide feature parity to macro itself. We do not have any immediate plan to investigate similar approaches. **

[XiNiHa]

SolidJS/dom-expressions JSX transform, although it seems like some of the SolidJS community members are already giving it a shot.

[orionmiz]

working on this plugin :)

[Keats]

Any news on that?

[XiNiHa]

I'm also currently contributing to the plugin and made some progress - although it doesn't support some critical features like ref and SSR yet.
https://github.com/modderme123/swc-plugin-jsx-dom-expressions

[natew]

At least for Tamagui, the ideal would be a swc-babel-api that mimicked babel as much as possible. Not sure if the fundamentals are so different that it’s impossible, but honestly the Babel API is incredibly good and all the useful helpers there make a big difference.

[kwonoj]

This is not for specific features to be implemented via plugin, right? Also yes, there are fundamental difference between babel to swc and its runtime (rust) that we'll never provide 1:1 api surface to babel does.

Double clarify, we should provide helpers - just saying some things are not possible such as access / mutate parent nodes, etcs.

[kwonoj]

Please use #3540 for generic plugin discussions.

[Edge00]

Hope swc can prodive capacity like @vue/babel-plugin-jsx to handle .vue written in .tsx.

[XiNiHa]

Although I personally do not use Vue anymore, I really wanted to have this while using Vue. Will be a huge one I guess.

[Edge00]

not only vue jsx, but vue sfc plugin that can support script-setup

You mean using swc as a bundler? I'am using webpack with vue-loader@16 and swc-loader, which can work well with script-setup.
However, using swc to derectly compile .vue file is also a great idea!

[Edge00]

That would be awsome! If so, the sfc playground could be compiled by rust.

[g-plane]

I made it: g-plane/swc-plugin-vue-jsx.

[kwonoj]

swc-project/plugins#29

[joooye34]

Feedback from TikTok Web team:

• Loadable components transform plugin (https://github.com/gregberge/loadable-components/tree/main/packages/babel-plugin)
• emotion-ts-plugin
• ts-import-plugin (https://github.com/Brooooooklyn/ts-import-plugin)

[kdy1]

Loadable components is implemented by swc-project/plugins#76

[kdy1]

For ts-import-plugin, take a look at https://github.com/swc-project/plugins/tree/28ab1c04df68f7347d470ed3bac4e72d7f7befa9/packages/transform-imports

[kwonoj]

software-mansion/react-native-reanimated#3341

[jaw-sh]

Throwing my hat in for SASS/SCSS support, as mentioned in discussion.

I'm writing an Actix web application and it'd be nice to stay in the Rust ecosystem for asset compilation. It would provide interesting options for the application to manage its own assets directly.

[PawelPyc154]

babel-plugin-macros

[Fumler]

Same here, and to add some context, we're using twin.macro through babel-plugin-macros

[kdy1]

babel-plugin-macros pass babel object to macros, so it's not possible to port it without modifying macro libraries

[vip30]

https://github.com/davesnx/babel-plugin-transform-react-qa-classes

[kwonoj]

Marking as resolved. vanilla-extract-css/vanilla-extract#478 (comment)

[ild0tt0re]

To use Storybook with complete SWC support, the storybook-addon-swc plugin is not enough.
We would like to have:

• babel-plugin-named-exports-order
• babel-plugin-react-docgen

[belaczek]

We're currently blocked by dependency on babel-plugin-macros by LinguiJs library. Having a custom swc plugin for Lingui would enable us to switch from babel.

[kwonoj]

#4768 (reply in thread)

[renchap]

@kwonoj Babel Macros can not directly be ported, but a Lingui plugin could maybe replace the need for macros?

We are blocked by Lingui as well, and switching to a new I18n solution is a huge task…

[kwonoj]

I wouldn't call it 100% impossible task, but that means someone basically needs to reinvent whole logics existing plugin relying on macro / babel specifics. It is not trivial task to consider.

[thekip]

I've started implementation here https://github.com/thekip/swc-lingui-plugin

Probably need few more weeks to get this done.

Also would be very happy if someone from swc core team could review my code for performance and general plugin tips.

[thekip]

Resolved: https://github.com/lingui/swc-plugin

[kwonoj]

Webpack loaders are irrelevant to swc.

[xyhxx]

We need babel-plugin-react-remove-properties, it's completed in next.js.

[g-plane]

I made a SWC plugin "swc-plugin-react-remove-properties": GitHub repo, npm.

[meskill]

@babel/plugin-transform-react-constant-elements to optmize bundle for the react app

[JSerFeng]

Working on it

[JSerFeng]

Take a look at here #7830 (reply in thread)

[mmichalskiba]

babel-plugin-transform-goober to rewrite code from styled.div to styled('div') would be much appreciated!

[erkanaltinors]

babel-plugin-jsx-control-statements

[hjkcai]

I made some utility plugins

• https://github.com/hjkcai/swc-plugin-add-display-name
• https://github.com/hjkcai/swc-plugin-enum-to-obj

[AmalJossy]

https://github.com/gajus/babel-plugin-react-css-modules

[ohsory1324]

https://github.com/facebook/stylex/tree/main/packages/babel-plugin

[philwolstenholme]

Something like https://github.com/lemonmade/babel-plugin-react-component-data-attribute or https://github.com/davesnx/babel-plugin-transform-react-qa-classes would be great.

https://github.com/hjkcai/swc-plugin-add-display-name is close but sets a display name for React Devtools, whereas those two plugins set a data attribute with the name (for testing or for marketing folk to use when setting up click tracking etc)

[msdrigg]

It would be helpful to have something like this:

plugin-transform-react-jsx-source https://babeljs.io/docs/babel-plugin-transform-react-jsx-source

This makes react errors show up better

[gethari]

anything for lit-element or lit component lib app ?