Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR starts losing transform results after changing template language to pug and back #381

Open
8 of 9 tasks
IlyaSemenov opened this issue Mar 28, 2024 · 0 comments
Open
8 of 9 tasks

Comments

@IlyaSemenov
Copy link

Related plugins

Describe the bug

I am developing a Vite plugin (vite-plugin-vue-css-module) that slightly modifies Vue templates before they are actually rendered. For that, I am adding the transform hook (with enforce: 'pre') where I modify user-provided source code.

I test my modifications to work fine in various user flows, including Vue and pug templates, and of course HMR. I've noticed that vite-plugin-vue works differently when doing HMR on Vue and pug templates, but what I expect is that it behaves consistently on the same type of template after I switch between languages there and back.

What is actually happening is that HMR flow is different on these scenarios:
A. User is only using Vue templates.
B. User was using Vue templates then switched to pug and then back.

Initially, HMR updates for Vue templates go like:

ℹ hmr update /app.vue                                                                             11:04:05 PM
ℹ hmr update /app.vue (x2)                                                                        11:04:06 PM
ℹ hmr update /app.vue (x3)                                                                        11:04:07 PM
ℹ hmr update /app.vue (x4)    

after changing <template> to <template lang="pug">, it becomes:

ℹ hmr update /app.vue?vue&type=template&lang.js                                                   11:06:37 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x2)                                              11:06:39 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x3)                                              11:06:40 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x4)                

but after changing it back to <template>, the HMR method is not restored to full SFC transform, it still goes with ?type=template submodule updates:

ℹ hmr update /app.vue?vue&type=template&lang.js (x5)                                              11:08:04 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x6)                                              11:08:05 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x7)                                              11:08:07 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x8)    

While this itself doesn't introduce an immediate user-facing problem, it breaks things for plugin authors.

Namely, after changing language from none to pug and then back, all code modifications returned by transform hooks are completely ignored (see reproduction).

I suspect this also could lead to other subtle problems and/or inefficiencies.

Reproduction

https://stackblitz.com/edit/nuxt-starter-anyrc6?file=app.vue,nuxt.config.ts

Steps to reproduce

Run npm install followed by npm run dev (happens automatically in Stackblitz).

Then:

  • try modifying div text in app.vue to see HMR+transform working;
  • then try changing the language to pug (and dedenting the code) to see HMR+transform still working;
  • then change template language back to none, after which HMR will work but transform will not.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm

Used Package Manager

npm

Logs

No response

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants