Skip to content
This repository was archived by the owner on Jul 24, 2025. It is now read-only.

Commit 7ced984

Browse files
committed
Initial commit [publish]
0 parents  commit 7ced984

File tree

9 files changed

+1053
-0
lines changed

9 files changed

+1053
-0
lines changed

.github/workflows/publish.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Publish to npm
2+
on:
3+
push:
4+
branches:
5+
- main
6+
jobs:
7+
publish:
8+
runs-on: ubuntu-latest
9+
if: ${{ contains(github.event.head_commit.message, '[publish]') }}
10+
steps:
11+
- uses: actions/checkout@v2
12+
- run: yarn install --frozen-lockfile
13+
- run: yarn prettier-ci
14+
- run: yarn build
15+
# Setup .npmrc file to publish to npm
16+
- uses: actions/setup-node@v2
17+
with:
18+
node-version: "16.x"
19+
registry-url: "https://registry.npmjs.org"
20+
- run: npm publish
21+
env:
22+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.idea/
2+
node_modules/
3+
*.js
4+
*.d.ts
5+
!src/refresh-runtime.js

.npmignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
*.ts
2+
!*.d.ts
3+
tsconfig.json
4+
.github

README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# vite-plugin-swc-react-refresh [![npm](https://img.shields.io/npm/v/vite-plugin-swc-react-refresh)](https://www.npmjs.com/package/vite-plugin-swc-react-refresh)
2+
3+
Use the versatility of [swc](https://swc.rs/) for development and the maturity of [esbuild](https://esbuild.github.io/) for production.
4+
5+
- ✅ A fast Fast Refresh (~20x faster than Babel)
6+
- ✅ Skip `import React`
7+
- ❌ Not compatible with [automatic JSX runtime](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). See [this section](#jsx-runtime)
8+
- ❌ Don't check for consistent components exports. See [this section](#consistent-components-exports)
9+
10+
## Installation
11+
12+
```sh
13+
npm i -D vite-plugin-swc-react-refresh
14+
```
15+
16+
## Usage
17+
18+
```ts
19+
import { defineConfig } from "vite";
20+
import swcReactRefresh from "vite-plugin-swc-react-refresh";
21+
22+
export default defineConfig({
23+
plugins: [swcReactRefresh()],
24+
esbuild: { jsxInject: `import React from "react"` },
25+
});
26+
```
27+
28+
## JSX Runtime
29+
30+
This plugin is only used in development, and esbuild (which doesn't support the automatic JSX runtime) will be used by Vite for bundling. However, you can omit the default React import with the `esbuild.jsxInject` Vite option.
31+
32+
## Consistent components exports
33+
34+
For React refresh to work, 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).
35+
36+
However, having some components being hot updated and not others is a very frustrating experience as a developer, and I think this rule should be enforced by a linter, so I made an [eslint rule](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) to go along with this plugin.
37+
38+
This plugin expects this rule to be respected and will always fast refresh components. If a file export something that is not a React component (TS types are ok), update to this export would not propagate and require a manual reload.

package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "vite-plugin-swc-react-refresh",
3+
"description": "Use the versatility of swc for development and the maturity of esbuild for production",
4+
"version": "0.1.0",
5+
"license": "MIT",
6+
"author": "Arnaud Barré (https://github.com/ArnaudBarre)",
7+
"main": "src/swc-react-refresh.js",
8+
"repository": "github:ArnaudBarre/vite-plugin-swc-react-refresh",
9+
"keywords": [
10+
"vite",
11+
"vite-plugin",
12+
"react",
13+
"swc",
14+
"react-refresh",
15+
"fast refresh"
16+
],
17+
"scripts": {
18+
"build": "tsc",
19+
"prettier": "yarn prettier-ci --write",
20+
"prettier-ci": "prettier --check '**/*.{js,ts,json,md,yml}'"
21+
},
22+
"prettier": {
23+
"trailingComma": "all"
24+
},
25+
"dependencies": {
26+
"@swc/core": "^1.2.133"
27+
},
28+
"devDependencies": {
29+
"@types/node": "^17.0.10",
30+
"prettier": "^2.5.1",
31+
"typescript": "^4.5.4",
32+
"vite": "^2.7.13"
33+
}
34+
}

0 commit comments

Comments
 (0)