[Feature]: Support Vue JSX HMR

[chenjiahan]

What problem does this feature solve?

Support Vue JSX HMR.

What does the proposed API look like?

• https://www.npmjs.com/package/@ant-design-vue/vue-jsx-hot-loader
• https://www.npmjs.com/package/unplugin-vue-jsx-hmr
• https://www.npmjs.com/package/@vitejs/plugin-vue-jsx

[liyincode]

Hello, rsbuild team! First off, I would like to express my gratitude as the migration of our project from vue-cli to rsbuild has significantly improved our start-up and build performance!

I tried to implement the HMR functionality of plugin-vue-jsx in rsbuild, and referred to the code of @vite/plugin-vue-jsx for inspiration to achieve its functionality.

code: plugin-vue-jsx implementation

I created a sample code similar to @vite/plugin-vue-jsx and it is able to achieve the same hmr functionality, proving that it can be used normally.

Demo code:rsbuild HMR demo

However, when I tried to write a test case using playwright for testing similar to @vite/plugin-vue-jsx, I found that it did not run well. I encountered the following two problems and hope to get your help.

Test code: Playwright test case

1. React is not defined

Test code

Running the test with the command npx playwright test cases/vue/jsx-hmr/index.test.ts yields a "React is not defined" error. I've authored a custom loader to handle .jsx|.tsx files, but this issue wasn't present in earlier versions of your project. Here's the before and after modification in my code:

before

modifyBabelLoaderOptions({
          chain,
          CHAIN_ID,
          modifier: (babelOptions) => {
            babelOptions.plugins ??= [];
            babelOptions.plugins.push([
              require.resolve('@vue/babel-plugin-jsx'),
              options.vueJsxOptions || {}
            ]);
            return babelOptions;
          }
        })

after

      chain.module
          .rule('vue-jsx')
          .test(/\.(jsx|tsx)(\.js)?$/)
          .use('vue-jsx')
          .loader(path.resolve(__dirname, './loader'))
          .options(options.vueJsxOptions ?? {});

I troubleshooted and found that if I follow the code below I don't have this problem

      const rule = chain.module.rule('babel-js');
        if (rule.uses.has('babel')) {
          rule.use('babel').tap((babelOptions) => {
            babelOptions.plugins ??= [];
            babelOptions.plugins.push([
              require.resolve('@vue/babel-plugin-jsx'),
              options.vueJsxOptions || {},
            ]);
            return babelOptions;
          });
        }

        chain.module
          .rule('vue-jsx')
          .test(/\.(jsx|tsx)(\.js)?$/)
          .use('vue-jsx')
          .loader(path.resolve(__dirname, './loader'))
          .options(options.vueJsxOptions ?? {});
      });

I am thinking why this issue occurred. It's necessary to push the @vue/babel-plugin-jsx plugin into the rule named babel-js in order for it to function properly. I guess that the code has been processed by @rsbuild/plugin-babel before reaching my loader.

I that @rsbuild/plugin-babel first uses swc and then babel for parsing, but I don't know if there's any connection with this.

However, I don't know how to solve this problem because it seems very redundant. I hope that only one loader can handle both parsing vue-jsx and HMR functionalities at the same time.

2. Lack of HMR updates in Playwright tests

Test code

In my Playwright tests, after modifying the code, the changes do not reflect on the webpage, preventing further testing. For HMR testing, I need to edit the file code and wait for rsbuild to sync the new code to the browser, but the sync doesn't happen even though local files are updated. I'm unsure how to configure rsbuild to test HMR with Playwright effectively.

The above is the issue I encountered during testing in playwright, but it works fine in the demo. I don't know why this happened and hope to get your help. Thank you!

[chenjiahan]

Thank you for your detailed introduction ❤️, I will try to reproduce this problem soon

[9aoy]

About question 2 Lack of HMR updates in Playwright tests:

if you want to test HMR, maybe you should run dev instead of build.

[chenjiahan]

Sorry I can not reproduce the React is not defined issue.

These are the steps I take:

• clone the repo and switch to feat/vue-jsx-hmr
• enable the commented code:

3. run npx playwright test cases/vue/jsx-hmr/index.test.ts, I get this:

Maybe there is something wrong with my steps?

[liyincode]

@9aoy Thank you very much, it is indeed the case, build is production mode and dev is development mode

[liyincode]

@chenjiahan thank reply, You need to comment as follows:

beacuse , Lines 21 - 44 of code are two solutions to this problem

[liyincode]

@chenjiahan I'm sorry, I didn't finish. Then enter npx playwright test cases/vue/jsx-hmr/index.test.ts --ui to open the interface mode, and you can see it in the Console Tab.

[chenjiahan]

You need to comment as follows

The modifyBabelLoaderOptions should not be replaced with a new rule. This is because the order of custom rules is after the default SWC rule, which means that the JSX in the code was compiled by SWC and cannot be processed by custom rules.

It is recommended to use modifyBabelLoaderOptions to apply extra babel plugins.

[liyincode]

You need to comment as follows

The modifyBabelLoaderOptions should not be replaced with a new rule. This is because the order of custom rules is after the default SWC rule, which means that the JSX in the code was compiled by SWC and cannot be processed by custom rules.

It is recommended to use modifyBabelLoaderOptions to apply extra babel plugins.

Okay, do you mean creating a separate babel plugin for the jsx hmr and adding it to the plugin via the modifyBabelLoaderOptions method?

[chenjiahan]

Yeah that will be nice

[liyincode]

Hi, I've converted the previous Webpack Loader form into a Babel Plugin form, and it meets most use cases.

Code list:

Babel Plugin: babel-plugin-vue-jsx-hmr
Case Demo: vue-jsx-hmr-case (You can preview this demo by running npm run dev)
E2E Test: vue-jsx-hmr-test (Referenced from vite-plugin-vue)

This plugin satisfies most of the unit tests, but there are two types it cannot meet, which I can't solve at the moment and need your help with.

1. Single .vue files containing only <script lang="jsx"> cannot be hot-reloaded (unit test).

Code Example:

mian.jsx (You can comment out the other codes, I have already removed them for a better reading experience.)

import { createApp } from 'vue';  
import JsxScript from './Script.vue';  
  
function App() {  
  return (  
    <>  
      <JsxScript />          
    </>  
  );  
}  
  
createApp(App).mount('#root');

Script.vue

<script lang="jsx">
import { defineComponent, ref } from 'vue'

export default defineComponent(() => {
  const count = ref(4)
  const inc = () => count.value++

  return () => (
    <button class="script" onClick={inc}>
      script {count.value}
    </button>
  )
})
</script>

Steps:

1. npm run dev
2. edit the code in Script.vue, change script {count.value} to script updated {count.value}, and save.

Results:

1. after waiting for the hot update, the expected display on the page is script updated 4, but no change occurs.
2. the page renders the modified content only after I manually refresh the browser.

Troubleshooting:

1.In the Network Tab of Chrome Developer Tools, you can see that index.xxx.hot-update.js is successfully fetched and returns the updated content.

2. Single .vue files that include <script src="xxx.jsx"></script> cannot be hot-reloaded.

Code Example:

mian.jsx

import { createApp } from 'vue';  
import JsxSrcImport from './SrcImport.vue';  
  
function App() {  
  return (  
    <>  
      <JsxSrcImport />  
    </>  
  );  
}  
  
createApp(App).mount('#root');

SrcImport.vue

<script src="./SrcImport.jsx"></script>

SrcImport.jsx

import { defineComponent, ref } from 'vue';  
  
export default defineComponent(() => {  
  const count = ref(5);  
  const inc = () => count.value++;  
  
  return () => (  
    <button class="src-import" onClick={inc}>  
      src import {count.value}  
    </button>  );  
});

Steps:

1. npm run dev
2. edit the code in Script.vue, change src import {count.value} to src import updated {count.value}, and save.

Results:

1. after waiting for the hot update, the expected display on the page is src import updated 5, but no change occurs.
2. the page renders the modified content only after I manually refresh the browser.

Troubleshooting:

1.In the Network Tab of Chrome Developer Tools, you can see that index.xxx.hot-update.js is successfully fetched and returns the updated content.

If I comment out babel-plugin-vue-jsx-hmr and only leave @vue/babel-plugin-jsx as before, the above two examples work normally.

modifyBabelLoaderOptions({  
  chain,  
  CHAIN_ID,  
  modifier: (babelOptions) => {  
    babelOptions.plugins ??= [];  
    babelOptions.plugins.push(  
      [  
        require.resolve('@vue/babel-plugin-jsx'),  
        options.vueJsxOptions || {},  
      ],  
      // [path.resolve(__dirname, './babel-plugin-vue-jsx-hmr')],  
    );  
    return babelOptions;  
  },  
});

Besides the issues mentioned, there are two requirements when using this setup:

1. It is necessary to disable the Babel cache disable babel cache.

rsbuild.config.ts

  performance: {
    buildCache: false,
  },

The principle of this vue-jsx-hmr-babel-plugin is that each time the current file is compiled, it first collects the vue components that need HMR through a visitor, saving them as hotComponents. Finally, in the post hook function, it appends the associated vue hmr code to the end of the file. Then, at the beginning of compiling the next file, it clears this data in the pre function.

However, if the babel compilation cache is enabled, the hotComponents and other record data cannot be cleared after each execution of this plugin. This causes the next file to compile and erroneously include the previous file's HMR code, leading to runtime errors.

2. The Babel Plugin must include files with .jsx.js or .tsx.js extensions.

(rsbuild.config.ts)[https://github.com/liyincode/rsbuild/blob/686322333e2cae557b101ee6e6778f804959163c/e2e/cases/vue/jsx-hmr/rsbuild.config.ts#L10]

plugins: [
    pluginVue(),
    pluginBabel({
      include: /\.(?:jsx|tsx)(\.js)?$/,
      exclude: /[\\/]node_modules[\\/]/,
    }),
    pluginVueJsx(),
  ],

This is because files of the type SrcImport.vue are first compiled into files with a jsx.js extension. Then, they are processed by @vue/babel-plugin-jsx.

[chenjiahan]

Thank you for your great work!

Among the several issues mentioned above, the first two problems do not seem to be the main use cases. We can create separate issues for them and consider how to support them.

For the issue of buildCache, disable the cache will slow down the compilation speed of HMR. I believe we need to find a solution to solve this.

For the babel plugin include requirement, this is acceptable and we can note this in the documentation.

[chenjiahan]

I think now is a good time to start reviewing this PR. 😄

In addition, babel-plugin-vue-jsx-hmr is also suitable to be published as a separate npm package, so that other projects in the webpack and Rspack ecosystems can use it as well. What's your opinion on this?