svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Svelte 5: svelte-ignore not working

Open rChaoz opened this issue 9 months ago • 7 comments

Describe the bug

It seems like svelte-ignore comments are not working since I upgraded to Svelte 5 - svelte-check and my IDE are spewing out errors/warnings where there were none before. This may seem like something small but currently it's blocking my CI and I'm not sure how to fix it, this is why it put this severity.

Reproduction

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:mousedown={...}></div>

Logs

Warn: `<div>` with a mousedown or mouseup handler must have an ARIA role (svelte)
[...]

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 13.10 GB / 31.86 GB
  Binaries:
    Node: 20.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.1.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0)
    Internet Explorer: 11.0.19041.1566

Severity

blocking an upgrade

rChaoz avatar May 01 '24 18:05 rChaoz

Error and warning codes were switched to snake style: a11y_no_static_element_interactions, and some were renamed. It's shortly listed in the breaking changes.

7nik avatar May 01 '24 20:05 7nik

We should either update the "Various error and warning codes have been renamed slightly." note in the docs to say that all error and warning codes have been changed from kebab case to snake case, or we should have svelte-ignore normalize kebab case to snake case when it's comparing error codes.

Conduitry avatar May 01 '24 20:05 Conduitry

For DX, it would be best to map the old codes to the new ones but emit a warning about using old codes.

7nik avatar May 01 '24 20:05 7nik

Alternatively, a migration script could be added, similar to the self-closing tags, to take care of it.

huntabyte avatar May 01 '24 20:05 huntabyte

I tried updating to the new codes, and it's not working for 2 main reasons:

  • IDE support - my IDE (JetBrains) gives me quick actions to add the svelte-ignore tags with the old codes and warnings when new ones are used
  • eslint-plugin-svelte gives me 2 errors when I switch to the new style codes:
    • on the comment itself - ESLint: svelte-ignore comment is used, but not warned(svelte/no-unused-svelte-ignore)
    • on the autofocus tag - ESLint: A11y: Avoid using autofocus(a11y-autofocus)(svelte/valid-compile)

Personally, I think that this breaks a lot of things, possibly more than initially thought, and I don't really see a valid reason for this change? Especially when every other tool I can think of uses kebab-case for its comments. Could this potentially be reverted/modified to accept using the old style comments without warnings?

rChaoz avatar May 01 '24 22:05 rChaoz

Update: I updated ESLint & its svelte plugin to latest version, they now support the snake_case error IDs. However, it seems like it's not very consistent. It works for almost all cases, but the following still fails:

<!-- svelte-ignore a11y_autofocus -->
<input type="text" autofocus style="display: none" />
$ svelte-check
Warn: Avoid using autofocus (svelte)
        <!-- svelte-ignore a11y_autofocus -->
        <input type="text" autofocus style="display: none" />

Others, like a11y_no_static_element_interactions work correctly.

rChaoz avatar May 02 '24 12:05 rChaoz

~~a11y_autofocus seems to be renamed to a11y_misplaced_role.~~

7nik avatar May 02 '24 13:05 7nik

Closed by #11549

dummdidumm avatar May 14 '24 09:05 dummdidumm