fix: add metadata to jsx when using @vite/plugin-react-refresh

packages/playground/react/__tests__/react.spec.ts

@@ -16,3 +16,24 @@ test('should hmr', async () => {
   // preserve state
   expect(await page.textContent('button')).toMatch('count is: 1')
 })
+
+test('should have annotated jsx with file location metadata', async () => {
+  // we're not annotating in prod,
+  // so we skip this test when isBuild is true
+  if (isBuild) return
+
+  const meta = await page.evaluate(() => {
+    const button = document.querySelector('button')
+    const key = Object.keys(button).find(
+      (key) => key.indexOf('__reactFiber') === 0
+    )
+    return button[key]._debugSource
+  })
+  // If the evaluate call doesn't crash, and the returned metadata has
+  // the expected fields, we're good.
+  expect(Object.keys(meta).sort()).toEqual([
+    'columnNumber',
+    'fileName',
+    'lineNumber'
+  ])
+})

packages/plugin-react-refresh/index.js

@@ -1,6 +1,6 @@
 // @ts-check
 const fs = require('fs')
-const { transformSync } = require('@babel/core')
+const { transformSync, ParserOptions } = require('@babel/core')
 
 const runtimePublicPath = '/@react-refresh'
 const runtimeFilePath = require.resolve(
@@ -41,6 +41,8 @@ function reactRefreshPlugin(opts) {
   return {
     name: 'react-refresh',
 
+    enforce: 'pre',
+
     configResolved(config) {
       shouldSkip = config.command === 'build' || config.isProduction
       base = config.base
@@ -73,15 +75,30 @@ function reactRefreshPlugin(opts) {
         return
       }
 
+      /**
+       * @type ParserOptions["plugins"]
+       */
+      const parserPlugins = ['jsx']
+      if (/\.tsx?$/.test(id)) {
+        // it's a typescript file
+        parserPlugins.push('typescript')
+      }
+      if (opts && opts.parserPlugins) {
+        parserPlugins.push(...opts.parserPlugins)
+      }
+
       const isReasonReact = id.endsWith('.bs.js')
       const result = transformSync(code, {
         configFile: false,
+        filename: id,
         parserOpts: {
           sourceType: 'module',
           allowAwaitOutsideFunction: true,
-          plugins: opts && opts.parserPlugins
+          plugins: parserPlugins
         },
         plugins: [
+          require('@babel/plugin-transform-react-jsx-self'),
+          require('@babel/plugin-transform-react-jsx-source'),
           require('@babel/plugin-syntax-import-meta'),
           [require('react-refresh/babel'), { skipEnvCheck: true }]
         ],

packages/plugin-react-refresh/package.json

@@ -27,6 +27,8 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-self": "^7.12.10",
+    "@babel/plugin-transform-react-jsx-source": "^7.12.10",
     "react-refresh": "^0.9.0"
   }
 }

yarn.lock

@@ -366,6 +366,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-transform-react-jsx-self@^7.12.10":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.13.tgz#422d99d122d592acab9c35ea22a6cfd9bf189f60"
+  integrity sha512-FXYw98TTJ125GVCCkFLZXlZ1qGcsYqNQhVBQcZjyrwf8FEUtVfKIoidnO8S0q+KBQpDYNTmiGo1gn67Vti04lQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-transform-react-jsx-source@^7.12.10":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.13.tgz#051d76126bee5c9a6aa3ba37be2f6c1698856bcb"
+  integrity sha512-O5JJi6fyfih0WfDgIJXksSPhGP/G0fQpfxYy87sDc+1sFmsCS6wr3aAn+whbzkhbjtq4VMqLRaSzR6IsshIC0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
 "@babel/plugin-transform-typescript@^7.12.1":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.13.tgz#8bcb5dd79cb8bba690d6920e19992d9228dfed48"