Skip to content

Using $derived in bind:value function binding setter yeilds parsing error #697

New issue

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

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

Already on GitHub? # to your account

Closed
2 tasks done
lts20050703 opened this issue Apr 2, 2025 · 0 comments · Fixed by #698
Closed
2 tasks done

Using $derived in bind:value function binding setter yeilds parsing error #697

lts20050703 opened this issue Apr 2, 2025 · 0 comments · Fixed by #698

Comments

@lts20050703
Copy link

lts20050703 commented Apr 2, 2025

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.23.0

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

3.5.0

What did you do?

Configuration
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';

const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

export default ts.config(
	includeIgnoreFile(gitignorePath),
	js.configs.recommended,
	...ts.configs.recommended,
	...svelte.configs.recommended,
	{
		languageOptions: {
			globals: { ...globals.browser, ...globals.node }
		},
		rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
		// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
		"no-undef": 'off' }
	},
	{
		files: [
			'**/*.svelte',
			'**/*.svelte.ts',
			'**/*.svelte.js'
		],
		ignores: ['eslint.config.js', 'svelte.config.js'],
		languageOptions: {
			parserOptions: {
				projectService: true,
				extraFileExtensions: ['.svelte'],
				parser: ts.parser,
				svelteConfig
			}
		}
	}
);
<script lang="ts"></script>

<select bind:value={() => 0, () => $derived(0)}></select>

What did you expect to happen?

I'm not sure, can you even declare $derived runes in setter function bindings like this?

Expected behavior is probably either "No Errors" or "Error: cannot use $derived rune in setter function bindings"

What actually happened?

5:9 error Parsing error: ',' expected

✖ 1 problem (1 error, 0 warnings)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/lts20050703/fuzzy-dollop

Additional comments

Reproduce Repo is created using bunx sv create.

The only change was:

    1. Edit src/routes/+page.svelte to have the content of the minimal reproducible example.
    1. Add .vscode/settings.json so ESLint errors show up in VSCodium, without that file (and therefore without the config "eslint.validate": ["javascript", "svelte", "typescript"],), VSCodium ESLint extension doesn't show any errors, BUT running the eslint checker with bun run lint still yields the above error.
@lts20050703 lts20050703 changed the title Using $derived in select menu setter yeilds strange eslint parsing error Using $derived in bind:value function binding setter yeilds parsing error Apr 2, 2025
@baseballyama baseballyama transferred this issue from sveltejs/eslint-plugin-svelte Apr 2, 2025
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant