feat(plugin-react-refresh): allow specifying additional parser plugins

packages/plugin-react-refresh/README.md

@@ -9,4 +9,29 @@ import reactRefresh from '@vitejs/plugin-react-refresh'
 export default {
   plugins: [reactRefresh()]
 }
-```
+```
+
+## Specifying Additional Parser Plugins
+
+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:
+
+```js
+export default {
+  plugins: [reactRefresh({
+    parserPlugins: [
+      'classProperties',
+      'classPrivateProperties
+    ]
+  })]
+}
+```
+
+[Full list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
+
+**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.
+
+- 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.

packages/plugin-react-refresh/index.d.ts

@@ -1,7 +1,12 @@
 import { Plugin } from 'vite'
+import { ParserOptions } from '@babel/core'
 
-type PluginFactory = () => Plugin
+type PluginFactory = (options?: Options) => Plugin
 
 declare const createPlugin: PluginFactory & { preambleCode: string }
 
-export = createPlugin
+export interface Options {
+  parserPlugins: ParserOptions['plugins']
+}
+
+export default createPlugin

packages/plugin-react-refresh/index.js

@@ -32,9 +32,9 @@ window.__vite_plugin_react_preamble_installed__ = true
 /**
  * Transform plugin for transforming and injecting per-file refresh code.
  *
- * @returns {import('vite').Plugin}
+ * @type {import('.').default}
  */
-module.exports = function reactRefreshPlugin() {
+function reactRefreshPlugin(opts) {
   let shouldSkip = false
   let base = '/'
 
@@ -75,6 +75,11 @@ module.exports = function reactRefreshPlugin() {
 
       const isReasonReact = id.endsWith('.bs.js')
       const result = transformSync(code, {
+        parserOpts: {
+          sourceType: 'module',
+          allowAwaitOutsideFunction: true,
+          plugins: opts?.parserPlugins
+        },
         plugins: [
           require('@babel/plugin-syntax-import-meta'),
           [require('react-refresh/babel'), { skipEnvCheck: true }]
@@ -151,8 +156,6 @@ module.exports = function reactRefreshPlugin() {
   }
 }
 
-module.exports.preambleCode = preambleCode
-
 /**
  * @param {import('@babel/core').BabelFileResult['ast']} ast
  */
@@ -181,3 +184,7 @@ function isRefreshBoundary(ast) {
 function isComponentishName(name) {
   return typeof name === 'string' && name[0] >= 'A' && name[0] <= 'Z'
 }
+
+module.exports = reactRefreshPlugin
+reactRefreshPlugin['default'] = reactRefreshPlugin
+reactRefreshPlugin.preambleCode = preambleCode