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

Nesting components with Svelte 5 snippet parameters with the same name can cause ESLint errors #871

Open
trevorparscal opened this issue Oct 12, 2024 · 3 comments

Comments

@trevorparscal
Copy link

trevorparscal commented Oct 12, 2024

Describe the bug

When components in nested scopes use the same snippet names, ESLint's no-shadow rule detects that the inner scope is shadowing the snippet name from the outer scope.

svelte-issue

While the example shows a contrived use-case, I ran into this pretty quickly once I started creating reusable UI components. I've temporarily disabled ESLint's no-shadow rule, but of course that isn't ideal.

Reproduction

Example with ESLint configuration on GitHub

Example with the same code on REPL

ESLint Error

Logs

[{
	"resource": "/Users/trevorparscal/Sites/svelte-issue/src/routes/+page.svelte",
	"owner": "eslint4",
	"code": {
		"value": "no-shadow",
		"target": {
			"$mid": 1,
			"path": "/docs/latest/rules/no-shadow",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "'icon' is already declared in the upper scope on line 16 column 12.",
	"source": "eslint",
	"startLineNumber": 22,
	"startColumn": 13,
	"endLineNumber": 22,
	"endColumn": 17
},{
	"resource": "/Users/trevorparscal/Sites/svelte-issue/src/routes/+page.svelte",
	"owner": "eslint4",
	"code": {
		"value": "no-shadow",
		"target": {
			"$mid": 1,
			"path": "/docs/latest/rules/no-shadow",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "'label' is already declared in the upper scope on line 13 column 12.",
	"source": "eslint",
	"startLineNumber": 27,
	"startColumn": 13,
	"endLineNumber": 27,
	"endColumn": 18
}]

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 66.11 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    bun: 1.1.12 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 129.1.70.123
    Chrome: 126.0.6478.127
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.264

Severity

annoyance

@Conduitry Conduitry transferred this issue from sveltejs/svelte Oct 12, 2024
@ota-meshi
Copy link
Member

I think that rule correctly reports shadowing, why do you think it's not ideal?

@trevorparscal
Copy link
Author

Agreed, it's not a bug in ESLint. What's not ideal is that it's quite common for components to accept parameters with the same names, and for them to be nested, so this makes the use of snippets as parameters break in what is likely a common case.

@ota-meshi
Copy link
Member

Oh I see. So snippet tags define variables, but users don't intend variable definitions, and no-shadow rule doesn't seem to work well when slot names are intended.
I think we need to create a rule that extends no-shadow rule, and the new rule will exclude snippet tags used only with slot names from reporting.

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