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

[OJ Kwon (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. **

[Iha Shin (신의하) (XiNiHa)]

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

[JH.Lee (orionmiz)]

working on this plugin :)

[Vincent Prouillet (Keats)]

Any news on that?

[Iha Shin (신의하) (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

[Nate Wienert (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.

[OJ Kwon (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.

[OJ Kwon (kwonoj)]

Please use #3540 for generic plugin discussions.

[Bruce Wayne (Edge00)]

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

[Iha Shin (신의하) (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.

[Bruce Wayne (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!

[Bruce Wayne (Edge00)]

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

[Pig Fang (g-plane)]

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

[OJ Kwon (kwonoj)]

swc-project/plugins#29

[Joooye_34 (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)

[Donny/강동윤 (kdy1)]

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

[Donny/강동윤 (kdy1)]

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

[OJ Kwon (kwonoj)]

software-mansion/react-native-reanimated#3341

[Joshua Moon (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.

[Paweł Pyc (PawelPyc154)]

babel-plugin-macros

[Fredrik Pettersen (Fumler)]

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

[Donny/강동윤 (kdy1)]

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

[watsonhaw (watsonhaw5566)]

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

Can i use another way to implement babel-plugin-macros on swc ?

[Ken Cheung (vip30)]

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

[OJ Kwon (kwonoj)]

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

[Angelo Annunziata (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

[Tomas Belada (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.

[OJ Kwon (kwonoj)]

#4768 (reply in thread)

[Renaud Chaput (renchap)]

OJ Kwon (@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…

[OJ Kwon (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.

[Timofei Iatsenko (timofei-iatsenko)]

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.

[Timofei Iatsenko (timofei-iatsenko)]

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

[OJ Kwon (kwonoj)]

Webpack loaders are irrelevant to swc.

[xyhxx (xyhxx)]

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

[Pig Fang (g-plane)]

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

[Kiryl Mialeshka (meskill)]

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

[Fy (JSerFeng)]

Working on it

[Fy (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!

[Erkan Altınörs (erkanaltinors)]

babel-plugin-jsx-control-statements

[Jingkun Hua (hjkcai)]

I made some utility plugins

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

[Amal Jossy (AmalJossy)]

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

[Yungoo Kong (ohsory1324)]

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

[Phil Wolstenholme (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)

[Scott Driggers (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

[Hari Haran (gethari)]

anything for lit-element or lit component lib app ?