feat: support for Vue3 JSX HMR #2018

liyincode · 2024-04-07T09:19:04Z

Summary

support vue3 jsx hmr

Checklist

Tests updated (or not required).
Documentation updated (or not required).

CLAassistant · 2024-04-07T09:19:09Z

All committers have signed the CLA.

netlify · 2024-04-07T09:19:21Z

✅ Deploy Preview for rsbuild ready!

Name	Link
🔨 Latest commit	`840cbcb`
🔍 Latest deploy log	https://app.netlify.com/sites/rsbuild/deploys/6615f32f6cc6ac000874d600
😎 Deploy Preview	https://deploy-preview-2018--rsbuild.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 72 (no change from production) Accessibility: 97 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

packages/plugin-vue-jsx/package.json

chenjiahan · 2024-04-07T09:37:25Z

e2e/cases/vue/jsx-hmr/index.test.ts

+  await rsbuild.close();
+});
+
+// // not pass


We can add a comment here:

// TODO: see https://github.com/web-infra-dev/rsbuild/issues/153

packages/plugin-vue-jsx/src/index.ts

chenjiahan · 2024-04-07T09:40:46Z

There are some conflicts need to be resolved 😄

# Conflicts: # packages/plugin-vue-jsx/package.json # pnpm-lock.yaml

…jsx-hmr

liyincode · 2024-04-07T11:29:49Z

There are some conflicts need to be resolved 😄

already resolved

chenjiahan · 2024-04-07T12:56:40Z

Please fix the CI~

liyincode · 2024-04-08T03:21:55Z

Hi, I forgot the run steps in the CONTRIBUTING.md before, I've followed the steps now and it should be fine.

But, After I merged the main branch, I ran pnpm run e2e, and found that one of the test cases didn't pass😅

9aoy · 2024-04-08T03:32:06Z

Hi, I forgot the run steps in the CONTRIBUTING.md before, I've followed the steps now and it should be fine.

But, After I merged the main branch, I ran pnpm run e2e, and found that one of the test cases didn't pass😅

@liyincode did you run build again after you merge main branch?

liyincode · 2024-04-08T03:46:33Z

Hi, I forgot the run steps in the CONTRIBUTING.md before, I've followed the steps now and it should be fine.
But, After I merged the main branch, I ran pnpm run e2e, and found that one of the test cases didn't pass😅

@liyincode did you run build again after you merge main branch?

oh, i didn't. I have now executed build and e2e test has passed👍

i exected pnpm run lint, is this passed?

chenjiahan · 2024-04-08T06:09:12Z

i exected pnpm run lint, is this passed?

It seems that lint is passed. When executing ls-lint locally, the result is abnormal. You can ignore it and we will handle it.

liyincode · 2024-04-08T06:38:44Z

Only windows didn't pass, I found two issues in the e2e test. The first one seems to need your help, and I will solve the second one on a Windows machine.

chenjiahan · 2024-04-08T07:11:42Z

You can ignore the first decoratorBeforeExport error, it is expected 😄

liyincode · 2024-04-09T08:21:38Z

Hi, I'm not sure what specifically causes the issue where e2e tests fail only on Windows platform.

Everything works fine on my Mac using a Windows 11 virtual machine, but the problem recurs on my home desktop with Windows 11. I suspect it might be related to the ARM vs x86 architecture or execution speed, but I'm unsure how to fix it.

Interestingly, when I test single e2e unit run npx playwright test cases/vue/jsx-hmr/index.test.ts -g "hmr: named export via specifier" within the e2e directory, everything works fine.

However, running all tests with npx playwright test cases/vue/jsx-hmr/index.test.ts reproduces the issue. I suspected it might be due to launching rsbuild run dev multiple times.

Surprisingly, by using a single rsbuild and page instance with test.describe, I found that the problem was resolved, and everything worked normally.

chenjiahan · 2024-04-09T08:32:01Z

HMR related cases sometimes will fail in Windows, you can add a condition to skip that as a workaround:

There should be a more fundamental reason behind this, and we need to take time to investigate.

liyincode · 2024-04-09T11:13:31Z

ok, i has disabled the hmr e2e test in windows, but there's another error I need to fix.🥲

chenjiahan · 2024-04-10T02:28:28Z

Thanks for your great work! 👍👍 It will be released in Rsbuild v0.6.0

liyincode · 2024-04-10T02:28:41Z

I'm confused about the difference between these three test types

test
rspackOnlyTest
webpackOnlyTest

I'm using rspackOnlyTest to write e2e test cases, and using pnpm e2e:rspack -g vue pnpm e2e:webpack -g vue doesn't report an error

If I write an e2e test case using test, using pnpm e2e:rspack -g vue doesn't give me an error, but using pnpm e2e:webpack -g vue does!

liyincode · 2024-04-10T02:33:54Z

I'm confused about the difference between these three test types

test

rspackOnlyTest

webpackOnlyTest

I'm using rspackOnlyTest to write e2e test cases, and using pnpm e2e:rspack -g vue pnpm e2e:webpack -g vue doesn't report an error

If I write an e2e test case using test, using pnpm e2e:rspack -g vue doesn't give me an error, but using pnpm e2e:webpack -g vue does!

I now mix the use of rspackOnlyTest and test in this way, I don't know if there will be any problems.

chenjiahan · 2024-04-10T02:38:10Z

That's ok. Some of the E2E tests in Rsbuild are run by both Rspack and Webpack at the same time. This is to check that the functionality of Rspack is correctly aligned with Webpack.

For the Vue related E2E cases, we only need to support Rspack, so we can use rspackOnlyTest in Vue E2E cases. rspackOnlyTest is a function based on the test method and can be mixed with test.

liyincode · 2024-04-10T02:42:09Z

Thanks for your great work! 👍👍 It will be released in Rsbuild v0.6.0

Hahaha, thanks for the outstanding efforts of the rsbuild team, I'm very happy to be able to contribute a little.😃

liyincode added 9 commits March 20, 2024 11:35

feat: support vue3 jsx hmr

ff7335d

fix: React is undefined in playwrihgt test

bd6da63

fix: build() to dev() for dev sever test

197d770

feat: use babel plugin to support vue jsx hmr

e40c9ef

feat: use babel plugin to support vue jsx hmr

f07111c

fix: disabled babel cache and reset hotComponents in pre hook

4a14932

feat: update e2e test case

6b231ae

fix: jsx src import case not be parsed by babel

6863223

feat: replace a single file with an npm package

03fa866

liyincode mentioned this pull request Apr 7, 2024

[Feature]: Support Vue JSX HMR #153

Closed

chenjiahan reviewed Apr 7, 2024

View reviewed changes

packages/plugin-vue-jsx/package.json Outdated Show resolved Hide resolved

chenjiahan reviewed Apr 7, 2024

View reviewed changes

packages/plugin-vue-jsx/package.json Outdated Show resolved Hide resolved

chenjiahan reviewed Apr 7, 2024

View reviewed changes

packages/plugin-vue-jsx/src/index.ts Outdated Show resolved Hide resolved

chenjiahan changed the title ~~Support Vue3 JSX HMR~~ feat: support for Vue3 JSX HMR Apr 7, 2024

github-actions bot added the release: feature label Apr 7, 2024

liyincode added 7 commits April 7, 2024 18:09

feat: only isDev mode, hmr can work

1f85277

fix: delete useless dependencies

df85101

Merge branch 'refs/heads/main' into feat/vue-jsx-hmr

67e84ff

# Conflicts: # packages/plugin-vue-jsx/package.json # pnpm-lock.yaml

fix: resolved conflicts with branch origin/main

3c9d779

Merge branch 'main' into feat/vue-jsx-hmr

c8fc932

feat: use isUsingHMR check hmr status

28c1e7a

Merge remote-tracking branch 'origin/feat/vue-jsx-hmr' into feat/vue-…

453ec18

…jsx-hmr

liyincode added 2 commits April 8, 2024 10:33

style: fix lint

a024546

test(plugin-vue-jsx): update snapshot with vue-jsx-hmr plugin changed

aedb3c5

liyincode added 2 commits April 8, 2024 10:47

Merge branch 'main' into feat/vue-jsx-hmr

006d666

Merge branch 'main' into feat/vue-jsx-hmr

9391766

chenjiahan mentioned this pull request Apr 8, 2024

chore(workflow): replace ls-lint with Biome rule #2030

Merged

2 tasks

chenjiahan mentioned this pull request Apr 8, 2024

test(e2e): fix confusing decorator error logs #2031

Merged

2 tasks

liyincode added 2 commits April 9, 2024 15:42

Merge branch 'main' into feat/vue-jsx-hmr

50bc1ce

fix(plugin-vue-jsx): fix e2e error in windows platform

00ae893

test(plugin-vue-jsx): disabled hmr e2e test in windows

5bc1a56

liyincode added 3 commits April 10, 2024 09:31

test(plugin-vue-jsx): test replace with rspackOnlyTest

2de39be

Merge branch 'main' into feat/vue-jsx-hmr

d34b7bd

fix(plugin-vue-jsx): fix pnpm-lock.yaml error

840cbcb

chenjiahan approved these changes Apr 10, 2024

View reviewed changes

chenjiahan merged commit 298ec98 into web-infra-dev:main Apr 10, 2024

liyincode deleted the feat/vue-jsx-hmr branch April 10, 2024 02:42

chenjiahan mentioned this pull request Apr 10, 2024

Release v0.6.0 #2056

Merged

feat: support for Vue3 JSX HMR #2018

feat: support for Vue3 JSX HMR #2018

Uh oh!

Conversation

liyincode commented Apr 7, 2024

Summary

Related Links

Checklist

Uh oh!

CLAassistant commented Apr 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Apr 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for rsbuild ready!

Uh oh!

Uh oh!

Uh oh!

chenjiahan Apr 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chenjiahan commented Apr 7, 2024

Uh oh!

liyincode commented Apr 7, 2024

Uh oh!

chenjiahan commented Apr 7, 2024

Uh oh!

liyincode commented Apr 8, 2024

Uh oh!

9aoy commented Apr 8, 2024

Uh oh!

liyincode commented Apr 8, 2024

Uh oh!

chenjiahan commented Apr 8, 2024

Uh oh!

liyincode commented Apr 8, 2024

Uh oh!

chenjiahan commented Apr 8, 2024

Uh oh!

liyincode commented Apr 9, 2024

Uh oh!

chenjiahan commented Apr 9, 2024

Uh oh!

liyincode commented Apr 9, 2024

Uh oh!

chenjiahan commented Apr 10, 2024

Uh oh!

liyincode commented Apr 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

liyincode commented Apr 10, 2024

Uh oh!

chenjiahan commented Apr 10, 2024

Uh oh!

liyincode commented Apr 10, 2024

Uh oh!

Uh oh!

CLAassistant commented Apr 7, 2024 •

edited

Loading

netlify bot commented Apr 7, 2024 •

edited

Loading

chenjiahan Apr 7, 2024 •

edited

Loading

liyincode commented Apr 10, 2024 •

edited

Loading