Skip to content

Commit adb618d

Browse files
authored
docs: clarify fast refresh README examples (#105)
1 parent dd69f3d commit adb618d

File tree

1 file changed

+7
-10
lines changed

1 file changed

+7
-10
lines changed

README.md

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@ import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
3737

3838
## Usage
3939

40-
Enabling [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) functionality primarily involves two aspects: code injection and code transformation.
40+
To enable [React Fast Refresh](https://reactnative.dev/docs/fast-refresh), you need both runtime injection and source transformation.
4141

42-
- Code injection will inject some code from the [react-refresh](https://www.npmjs.com/package/react-refresh) package, as well as some custom runtime code, all of which are integrated in this plugin and can be injected through.
43-
- Code transformation can be added through loaders, such as [jsc.transform.react.refresh](https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh) for [swc-loader](https://swc.rs/docs/usage/swc-loader) or the [react-refresh/babel](https://github.com/facebook/react/tree/main/packages/react-refresh) for [babel-loader](https://github.com/babel/babel-loader).
42+
- This plugin handles runtime injection, including code from [react-refresh](https://www.npmjs.com/package/react-refresh) and the custom runtime it requires.
43+
- Source transformation should be enabled in your loader, for example with [jsc.transform.react.refresh](https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh) in [swc-loader](https://rspack.rs/guide/features/builtin-swc-loader).
4444

4545
```js
4646
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
@@ -52,15 +52,12 @@ export default {
5252
module: {
5353
rules: [
5454
{
55-
test: /\.jsx$/,
55+
test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
5656
use: {
5757
loader: 'builtin:swc-loader',
5858
options: {
59+
detectSyntax: 'auto',
5960
jsc: {
60-
parser: {
61-
syntax: 'ecmascript',
62-
jsx: true,
63-
},
6461
transform: {
6562
react: {
6663
development: isDev,
@@ -81,8 +78,8 @@ Compared to the previous approach, this method decouples the React Fast Refresh
8178

8279
## Example
8380

84-
- For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rstackjs/rspack-examples/tree/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
85-
- For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rstackjs/rspack-examples/tree/main/rspack/react-refresh-babel-loader/rspack.config.js)
81+
- For usage with `builtin:swc-loader`, you can refer to the example at [examples/react-refresh](https://github.com/rstackjs/rstack-examples/blob/main/rspack/react-refresh/rspack.config.js), When using with `swc-loader`, simply replace `builtin:swc-loader` with `swc-loader`.
82+
- For usage with `babel-loader`, you can refer to the example at [examples/react-refresh-babel-loader](https://github.com/rstackjs/rstack-examples/blob/main/rspack/react-refresh-babel-loader/rspack.config.js)
8683

8784
## Options
8885

0 commit comments

Comments
 (0)