sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
864 stars 105 forks source link

`@hmr:keep` not honored if `lang="ts"` #571

Closed Leftium closed 6 months ago

Leftium commented 1 year ago

Describe the bug

If lang="ts" then @hmr:keep is not honored. (@hmr:keep-all still works).

Reproduction

  1. Clone https://github.com/Leftium/kit-bugs/tree/hmr
  2. Open /lang-ts route
  3. Click button to change value of count
  4. Trigger HMR (by changing increment amount)

Expected: value of count is preserved.

Actual: value of count is reset.

Notes:

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 6.01 GB / 23.86 GB
  Binaries:
    Node: 18.9.0 - D:\dropbox\a\nodejs\64v18.9.0\node.EXE
    Yarn: 1.22.18 - D:\dropbox\home\.yarn\bin\yarn.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0
    @sveltejs/kit: ^1.0.0 => 1.0.1
    svelte: ^3.54.0 => 3.55.0
    vite: ^4.0.0 => 4.0.3

Severity

annoyance

Additional Information

Reference: https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#svelte-hmr

bluwy commented 1 year ago

That's because vitePreprocess uses esbuild to transpile TS to JS. esbuild unfortunately removes (most) comments by default, so the comment was likely stripped before svelte-hmr sees them.

I'm not really sure how this can be fixed, other than:

  1. Hoping esbuild would support not stripping comments one day. It strips now due to performance reasons.
  2. Use svelte-preprocess and typescript to preprocess lang="ts"

no2 can be used to workaround in the meantime if you rely on this feature. You can turn off script processing in vitePreprocess specifically with vitePreprocess({ script: false }).

dominikg commented 1 year ago

esbuild unconditionally stripping comments is a bit of a bummer, but as mentioned already you can switch to svelte-preprocess if you need this behavior.

You can also enable it globally with a flag in svelte.config.js vitePlugin.hmr, but preserving local state during hmr is not without risk, see https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state .

dominikg commented 6 months ago

closing as wontfix, svelte-hmr is getting replaced by Svelte 5 native hmr support