Skip to content

Commit

Permalink
refactor: migrate plugin-react-refresh to plugin-react
Browse files Browse the repository at this point in the history 
See #3588 for full commit history

Co-authored-by: Shinigami <chrissi92@hotmail.de>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
  • Loading branch information
@aleclarson @Shinigami92 @pengx17
3 people committed Sep 17, 2021
1 parent 867decd commit e999b23
Show file tree
Hide file tree
Showing 15 changed files with 985 additions and 432 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,10 @@
"docs": "vitepress dev docs",
"build-docs": "vitepress build docs",
"serve-docs": "vitepress serve docs",
"build": "run-s build-vite build-plugin-vue",
"build": "run-s build-vite build-plugin-vue build-plugin-react",
"build-vite": "cd packages/vite && yarn build",
"build-plugin-vue": "cd packages/plugin-vue && yarn build",
"build-plugin-react": "cd packages/plugin-react && yarn build",
"ci-build-vite": "cd packages/vite && yarn ci-build",
"ci-docs": "run-s build-vite build-plugin-vue build-docs"
},
Expand Down
136 changes: 9 additions & 127 deletions packages/plugin-react/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,15 @@
## [1.3.6](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.5...plugin-react-refresh@1.3.6) (2021-07-27)
# 1.0.0 (TBD)

See the [readme](https://github.com/aleclarson/vite/blob/f8129ce6e87684eb7a4edd8106351c5d98207d7b/packages/plugin-react/README.md#vitejsplugin-react-) for more information.

### Bug Fixes
- Support for [automatic JSX runtime](https://github.com/alloc/vite-react-jsx)
- Babel integration for both development and production builds
- Add `react` and `react-dom` to [`resolve.dedupe`](https://vitejs.dev/config/#resolve-dedupe) automatically

* **deps:** update all non-major dependencies ([#4387](https://github.com/vitejs/vite/issues/4387)) ([2f900ba](https://github.com/vitejs/vite/commit/2f900ba4d4ad8061e0046898e8d1de3129e7f784))



## [1.3.5](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.4...plugin-react-refresh@1.3.5) (2021-07-05)



## [1.3.4](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.3...plugin-react-refresh@1.3.4) (2021-06-27)


### Bug Fixes

* **ci:** fix ci lint step ([#2988](https://github.com/vitejs/vite/issues/2988)) ([4e8ffd8](https://github.com/vitejs/vite/commit/4e8ffd8865e6303d19b5a5ea4501fc54bff4e180))
* **deps:** update all non-major dependencies ([#3791](https://github.com/vitejs/vite/issues/3791)) ([74d409e](https://github.com/vitejs/vite/commit/74d409eafca8d74ec4a6ece621ea2895bc1f2a32))


### Features

* **plugin-react-refresh:** add include / exclude options ([#3916](https://github.com/vitejs/vite/issues/3916)) ([c0a4ea1](https://github.com/vitejs/vite/commit/c0a4ea122794973f2e147f9778e5666f6aaca464))



## [1.3.3](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.2...plugin-react-refresh@1.3.3) (2021-04-24)


### Bug Fixes

* **plugin-react-refresh:** ensure decorators before export, fix [#2776](https://github.com/vitejs/vite/issues/2776) ([#2855](https://github.com/vitejs/vite/issues/2855)) ([16412e3](https://github.com/vitejs/vite/commit/16412e3a9452cbb7d82f72dd3cebfbc822061f05))
* **react-refresh:** check FunctionDeclaration nodes properly ([#2903](https://github.com/vitejs/vite/issues/2903)) ([2ee017c](https://github.com/vitejs/vite/commit/2ee017c2637a953aa8219571666e4934e78a195e))



## [1.3.2](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.1...plugin-react-refresh@1.3.2) (2021-03-31)


### Bug Fixes

* ignore babelrc ([#2766](https://github.com/vitejs/vite/issues/2766)) ([23c4114](https://github.com/vitejs/vite/commit/23c41149ddf74261f7615d22e59b39a017b79509)), closes [#2722](https://github.com/vitejs/vite/issues/2722)



## [1.3.1](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.3.0...plugin-react-refresh@1.3.1) (2021-02-10)


### Bug Fixes

* **plugin-react-refresh:** enable parsing for stage 3 and decorators syntax ([565bcb4](https://github.com/vitejs/vite/commit/565bcb4121e678310c26bb249b119da504d13ada)), closes [#1970](https://github.com/vitejs/vite/issues/1970)



# [1.3.0](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.2.2...plugin-react-refresh@1.3.0) (2021-02-08)


### Features

* **plugin-react-refresh:** add jsx metadata ([#1933](https://github.com/vitejs/vite/issues/1933)) ([4037c55](https://github.com/vitejs/vite/commit/4037c55015e74d5e19176bd6ae6bb1c4df157802))



## [1.2.2](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.2.1...plugin-react-refresh@1.2.2) (2021-02-02)


### Bug Fixes

* **plugin-react-refresh:** do not pick up config file in react-refresh plugin ([9d560d8](https://github.com/vitejs/vite/commit/9d560d8ed23d02c8ce4ec8c4cfa2aab8d30e89f0))



## [1.2.1](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.2.0...plugin-react-refresh@1.2.1) (2021-02-02)


### Bug Fixes

* **plugin-react-refresh:** avoid using optional chaining for Node 12 compat ([9d9fa17](https://github.com/vitejs/vite/commit/9d9fa1787558f3dcb1866644c0ebbfaa3f208e5d)), closes [#1851](https://github.com/vitejs/vite/issues/1851)



# [1.2.0](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.1.3...plugin-react-refresh@1.2.0) (2021-02-02)


### Features

* **plugin-react-refresh:** allow specifying additional parser plugins ([435da60](https://github.com/vitejs/vite/commit/435da60785aac2d1336cf62e3c5335523606fd7a))



## [1.1.3](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.1.2...plugin-react-refresh@1.1.3) (2021-01-29)


### Bug Fixes

* **plugin-react-refresh:** fix react refresh with base option ([59c4e7f](https://github.com/vitejs/vite/commit/59c4e7f824a7d7db689215568b66d68570e3f3da)), closes [#1787](https://github.com/vitejs/vite/issues/1787)



## [1.1.2](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.1.1...plugin-react-refresh@1.1.2) (2021-01-19)


### Bug Fixes

* **plugin-react-refresh:** skip during ssr ([d1383ed](https://github.com/vitejs/vite/commit/d1383ed126b37b922a532ff6cb59b32c0a97e1a2))



## [1.1.1](https://github.com/vitejs/vite/compare/plugin-react-refresh@1.1.0...plugin-react-refresh@1.1.1) (2021-01-06)


### Bug Fixes

* **plugin-react-refresh:** publish d.ts file ([#1347](https://github.com/vitejs/vite/issues/1347)) ([1865e46](https://github.com/vitejs/vite/commit/1865e4683a6b6504f485f565f65ba2f330722018))


### Features

* vue-jsx support ([e756c48](https://github.com/vitejs/vite/commit/e756c48ed4c7372d4c8e26016ba4b91880e7e248))



# 1.1.0 (2021-01-02)


### Features

* **plugin-react-refresh:** types ([25d68c1](https://github.com/vitejs/vite/commit/25d68c17228be866152c719f7e2a4fe93cd88b8e))
Thanks to @aleclarson and @pengx17 for preparing this release!

# Legacy

Before `@vitejs/plugin-react`, there was `@vitejs/plugin-react-refresh`.

See its changelog [here.](https://github.com/vitejs/vite/blob/b9e837a2aa2c1a7a8f93d4b19df9f72fd3c6fb09/packages/plugin-react-refresh/CHANGELOG.md)
106 changes: 60 additions & 46 deletions packages/plugin-react/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,97 @@
# @vitejs/plugin-react-refresh [![npm](https://img.shields.io/npm/v/@vitejs/plugin-react-refresh.svg)](https://npmjs.com/package/@vitejs/plugin-react-refresh)
# @vitejs/plugin-react [![npm](https://img.shields.io/npm/v/@vitejs/plugin-react.svg)](https://npmjs.com/package/@vitejs/plugin-react)

Provides [React Refresh](https://www.npmjs.com/package/react-refresh) support for Vite.
The all-in-one Vite plugin for React projects.

- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development
- use the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq)
- avoid manual `import React` in `.jsx` and `.tsx` modules
- dedupe the `react` and `react-dom` packages
- use custom Babel plugins/presets

```js
// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default {
plugins: [reactRefresh()]
}
export default defineConfig({
plugins: [react()]
})
```

## Specifying Additional Parser Plugins
## Filter which files use Fast Refresh

By default, Fast Refresh is used by files ending with `.js`, `.jsx`, `.ts`, and `.tsx`, except for files with a `node_modules` parent directory.

If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them via the `parserPlugins` option:
In some situations, you may not want a file to act as a HMR boundary, instead preferring that the changes propagate higher in the stack before being handled. In these cases, you can provide an `include` and/or `exclude` option, which can be a regex, a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or an array of either. Files matching `include` and not `exclude` will use Fast Refresh. The defaults are always applied.

```js
export default {
plugins: [
reactRefresh({
parserPlugins: ['classProperties', 'classPrivateProperties']
})
]
}
react({
// Exclude storybook stories
exclude: /\.stories\.(t|j)sx?$/,
// Only .tsx files
include: '**/*.tsx'
})
```

## Specifying Additional Babel Plugins
## Babel configuration

The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file.

```js
export default {
plugins: [reactRefresh({
plugins: ['@emotion/babel-plugin']
})]
}
react({
babel: {
presets: [...],
// Your plugins run before any built-in transform (eg: Fast Refresh)
plugins: [...],
// Use .babelrc files
babelrc: true,
// Use babel.config.js files
configFile: true,
}
})
```

[Full list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).

## Specifying files to include or exclude from refreshing
### Proposed syntax

By default, @vite/plugin-react-refresh will process files ending with `.js`, `.jsx`, `.ts`, and `.tsx`, and excludes all files in `node_modules`.

In some situations you may not want a file to act as an HMR boundary, instead preferring that the changes propagate higher in the stack before being handled. In these cases, you can provide an `include` and/or `exclude` option, which can be regex or a [picomatch](https://github.com/micromatch/picomatch#globbing-features) pattern, or array of either. Files must match include and not exclude to be processed. Note, when using either `include`, or `exclude`, the defaults will not be merged in, so re-apply them if necessary.
If you are using ES syntax that are still in proposal status (e.g. class properties), you can selectively enable them with the `babel.parserOpts.plugins` option:

```js
export default {
plugins: [
reactRefresh({
// Exclude storybook stories and node_modules
exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
// Only .tsx files
include: '**/*.tsx'
})
]
}
react({
babel: {
parserOpts: {
plugins: ['decorators-legacy']
}
}
})
```

### Notes

- If using TSX, any TS-supported syntax will already be transpiled away so you won't need to specify them here.

- This option only enables the plugin to parse these syntax - it does not perform any transpilation since this plugin is dev-only.
This option does not enable _code transformation_. That is handled by ESBuild.

- If you wish to transpile the syntax for production, you will need to configure the transform separately using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as a build-only plugin.
**Note:** TypeScript syntax is handled automatically.

## Middleware Mode Notes
Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).

When Vite is launched in **Middleware Mode**, you need to make sure your entry `index.html` file is transformed with `ViteDevServer.transformIndexHtml`. Otherwise, you may get an error prompting `Uncaught Error: @vitejs/plugin-react-refresh can't detect preamble. Something is wrong.`
## Middleware mode

To mitigate this issue, you can explicitly transform your `index.html` like this when configuring your express server:
In [middleware mode](https://vitejs.dev/config/#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:

```js
app.get('/', async (req, res, next) => {
try {
let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')

// Transform HTML using Vite plugins.
html = await viteServer.transformIndexHtml(req.url, html)

res.send(html)
} catch (e) {
return next(e)
}
})
```

Otherwise, you'll probably get this error:

```
Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
```
53 changes: 53 additions & 0 deletions packages/plugin-react/api-extractor.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

"projectFolder": ".",

"mainEntryPointFilePath": "./temp/index.d.ts",

"dtsRollup": {
"enabled": true,
"untrimmedFilePath": "./dist/index.d.ts"
},

"apiReport": {
"enabled": false
},

"docModel": {
"enabled": false
},

"tsdocMetadata": {
"enabled": false
},

"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "warning"
}
},

"extractorMessageReporting": {
"default": {
"logLevel": "warning",
"addToApiReportFile": true
},

"ae-missing-release-tag": {
"logLevel": "none"
}
},

"tsdocMessageReporting": {
"default": {
"logLevel": "warning"
},

"tsdoc-undefined-tag": {
"logLevel": "none"
}
}
}
}
17 changes: 14 additions & 3 deletions packages/plugin-react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,16 @@
"Alec Larson"
],
"files": [
"dist",
"src"
],
"main": "src/index.js",
"types": "src/index.d.ts",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"dev": "tsc -p . -w --incremental",
"build": "rimraf dist && run-s build-bundle build-types",
"build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:@babel/* --external:@rollup/* --external:resolve --external:react-refresh/* --outfile=dist/index.js",
"build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package plugin-react",
"release": "node ../../scripts/release.js --skipBuild"
},
Expand All @@ -29,9 +34,15 @@
"homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
"dependencies": {
"@babel/core": "^7.14.8",
"@babel/plugin-transform-react-jsx": "^7.14.5",
"@babel/plugin-transform-react-jsx-development": "^7.14.5",
"@babel/plugin-transform-react-jsx-self": "^7.14.9",
"@babel/plugin-transform-react-jsx-source": "^7.14.5",
"@rollup/pluginutils": "^4.1.1",
"react-refresh": "^0.10.0"
"react-refresh": "^0.10.0",
"resolve": "^1.20.0"
},
"devDependencies": {
"vite": "link:../vite"
}
}
4 changes: 4 additions & 0 deletions packages/plugin-react/src/babel.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '@babel/plugin-transform-react-jsx'
declare module '@babel/plugin-transform-react-jsx-self'
declare module '@babel/plugin-transform-react-jsx-source'
declare module 'react-refresh/babel.js'
Loading

0 comments on commit e999b23

Please sign in to comment.