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

Old-styled svelte-ignores are ignored with Svelte 5 #765

Closed
2 tasks done
shadow-identity opened this issue May 31, 2024 · 2 comments · Fixed by #772
Closed
2 tasks done

Old-styled svelte-ignores are ignored with Svelte 5 #765

shadow-identity opened this issue May 31, 2024 · 2 comments · Fixed by #772
Labels
bug Something isn't working feat: svelte v5 help wanted Extra attention is needed

Comments

@shadow-identity
Copy link

shadow-identity commented May 31, 2024

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

9.3.0

What version of eslint-plugin-svelte are you using?

2.39.0

What did you do?

Configuration

I use default configuration provided by npm create svelte@latest

import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
	js.configs.recommended,
	...svelte.configs['flat/recommended'],
	{
		languageOptions: {
			globals: {
				...globals.browser,
				...globals.node
			}
		}
	},
	{
		ignores: ['build/', '.svelte-kit/', 'dist/']
	}
];

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<my-tag on:click={() => {}}>
</my-tag>

<div />

What did you expect to happen?

Like when Svelte 4.2.17 is used, a11y-click-events-have-key-events and a11y-no-static-element-interactions should not be reported.

Also element_invalid_self_closing_tag was also not reported with Svelte 4, so IMO should not be reported in legacy mode with Svelte 5.

What actually happened?

eslint-plugin-svelte-repro/src/routes/+page.svelte
  1:20  error  svelte-ignore comment is used, but not warned                                                                                                                                                                                                                                                                                                                svelte/no-unused-svelte-ignore
  1:54  error  svelte-ignore comment is used, but not warned                                                                                                                                                                                                                                                                                                                svelte/no-unused-svelte-ignore
  2:1   error  Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details(a11y_click_events_have_key_events)  svelte/valid-compile
  2:1   error  `<my-tag>` with a click handler must have an ARIA role(a11y_no_static_element_interactions)                                                                                                                                                                                                                                                                  svelte/valid-compile
  5:1   error  Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`(element_invalid_self_closing_tag)                                                                                                                                                                                                               svelte/valid-compile

✖ 5 problems (5 errors, 0 warnings)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/shadow-identity/eslint-plugin-svelte-repro

Additional comments

I think the reason of the mess is that svelte 5 uses underscores in warning names. But according to Svelte developers, old-styled components (which does not use runes) should keep working: sveltejs/svelte#11666

After sveltejs/svelte#11666 was fixed, svelte-check does not report this markup.

I also put <div /> case, it was also not reported with Svelte 4 (it is reported with svelte-kit tho).

@ota-meshi
Copy link
Member

Thanks for posting the issue, I wasn't aware of that change.

@shadow-identity
Copy link
Author

Thanks for your work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working feat: svelte v5 help wanted Extra attention is needed
Projects
None yet
2 participants