Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitejs/vite-plugin-react-swc
Speed up your Vite dev server with SWC
https://github.com/vitejs/vite-plugin-react-swc
fast-refresh react swc vite
Last synced: 7 days ago
JSON representation
Speed up your Vite dev server with SWC
- Host: GitHub
- URL: https://github.com/vitejs/vite-plugin-react-swc
- Owner: vitejs
- License: mit
- Created: 2022-01-27T22:57:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T23:11:27.000Z (3 months ago)
- Last Synced: 2024-10-29T14:58:04.390Z (3 months ago)
- Topics: fast-refresh, react, swc, vite
- Language: TypeScript
- Homepage:
- Size: 6.3 MB
- Stars: 846
- Watchers: 9
- Forks: 57
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - @vitejs/plugin-react-swc - Official React support that uses SWC. (Plugins / React)
- awesome-vite - @vitejs/plugin-react-swc - Official React support that uses SWC. (Plugins / React)
README
# @vitejs/plugin-react-swc [](https://www.npmjs.com/package/@vitejs/plugin-react-swc)
Speed up your Vite dev server with [SWC](https://swc.rs/)
- ✅ A fast Fast Refresh (~20x faster than Babel)
- ✅ Enable [automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
## Installation
```sh
npm i -D @vitejs/plugin-react-swc
```
## Usage
```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
```
## Caveats
This plugin has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behaviour:
- [useDefineForClassFields](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier) is always activated, as this matches the current ECMAScript spec
- `jsx runtime` is always `automatic`
- In development:
- esbuild is disabled, so the [esbuild configuration](https://vitejs.dev/config/shared-options.html#esbuild) has no effect
- `target` is ignored and defaults to `es2020` (see [`devTarget`](#devtarget))
- JS files are not transformed
- tsconfig is not resolved, so properties other than the ones listed above behaves like TS defaults
## Options
### jsxImportSource
Control where the JSX factory is imported from.
`@default` "react"
```ts
react({ jsxImportSource: "@emotion/react" });
```
### tsDecorators
Enable TypeScript decorators. Requires `experimentalDecorators` in tsconfig.
`@default` false
```ts
react({ tsDecorators: true });
```
### plugins
Use SWC plugins. Enable SWC at build time.
```ts
react({ plugins: [["@swc/plugin-styled-components", {}]] });
```
### devTarget
Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
For production target, see https://vitejs.dev/config/build-options.html#build-target.
`@default` "es2020"
```ts
react({ devTarget: "es2022" });
```
### parserConfig
Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
This requires to redefine the config for any file you want to be included (ts, mdx, ...).
If you want to trigger fast refresh on compiled JS, use `jsx: true`. Exclusion of node_modules should be handled by the function if needed. Using this option to use JSX inside `.js` files is highly discouraged and can be removed in any future version.
```ts
react({
parserConfig(id) {
if (id.endsWith(".res")) return { syntax: "ecmascript", jsx: true };
if (id.endsWith(".ts")) return { syntax: "typescript", tsx: false };
},
});
```
## Consistent components exports
For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).
If an incompatible change in exports is found, the module will be invalidated and HMR will propagate. To make it easier to export simple constants alongside your component, the module is only invalidated when their value changes.
You can catch mistakes and get more detailed warning with this [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh).
## Migrating from `vite-plugin-swc-react-refresh`
The documentation for the previous version of the plugin is available in the [v2 branch](https://github.com/vitejs/vite-plugin-react-swc/tree/v2)
To migrate, see this [changelog](https://github.com/vitejs/vite-plugin-react-swc/releases/tag/v3.0.0-beta.0)