feat: added the prefer-svelte-reactivity rule

[marekdedic]

Closes #1071

Blocked by eslint-community/eslint-utils#249

[changeset-bot]

🦋 Changeset detected

Latest commit: dcf3e34

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-svelte	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Try the Instant Preview in Online Playground

ESLint Online Playground

Install the Instant Preview to Your Local

npm i https://pkg.pr.new/eslint-plugin-svelte@dcf3e34

Published Instant Preview Packages:

• eslint-plugin-svelte: https://pkg.pr.new/eslint-plugin-svelte@dcf3e34

View Commit

[baseballyama]

I think we need to add tests for .svelte.js files also.

[baseballyama]

I don’t think this needs to be reported. If there’s no reassignment, it shouldn’t need to be reactive.

[marekdedic]

It's not about reassignment, it's about internal changes. I'd prefer to be this overly-broad. The alternative is tracking calls to every method that modifies the object (I count 16 on Date alone) or writing to any property.

On top of that, once something is exported, it should be reported as well (mostly relevant for .svelte.ts files)

I am not sure it's worth it, what do you think?

[baseballyama]

What I’m saying is the same thing.

// It should be SvelteMap because there is internal changes.
const foo = new Map();
foo.set("a", 0);

// It should not be reported because there is no internal changes.
const bar = new Map();

On top of that, once something is exported, it should be reported as well (mostly relevant for .svelte.ts files)

If we think of svelte.js as “reactive files,” it should be fine to report aggressively.

[marekdedic]

Oh, I didn't resolve this... Hmmm...

[ota-meshi]

How about tracking instances and checking mutable function calls?
For example, tracking new Set() variables and checking add() calls.

For example, I might use:

const ALLOWED_VALUES = new Set(["a", "b"]); // Not reported
function isAllowedValue(v) {
  return ALLOWED_VALUES.has(v);
}

const usedValues ​​= new Set();
function process(v) {
  if (usedValues.has(v)) return;
  usedValues.add(v); // Reported
  // ...
}

[marekdedic]

I think we need to add tests for .svelte.js files also.

Yes, I wanted to ask about whether that's something we're set up to do, I couldn't find any such tests on the repo...

[marekdedic]

@ota-meshi Can you please take a look at the test file? I tried the solution from eslint-community/eslint-utils#249 (comment), but it didn't work for me :/

[ota-meshi]

@marekdedic What have you tried? Have you added URL here?

eslint-plugin-svelte/packages/eslint-plugin-svelte/tests/utils/utils.ts

Line 18 in 3ddbd83

const globals = {

[marekdedic]

@marekdedic What have you tried? Have you added URL here?

That's exactly what I tried, but it didn't work :(

[ota-meshi]

Is it url01-input.svelte that you're saying didn't work? I've tried adding URL: 'readonly', URLSearchParams: 'readonly' to globals in your repository and it seems to work fine.

[marekdedic]

Ok, I was adding it in a different place and the value got overriden, thanks :)

[ota-meshi]

Could you please revert the unrelated change? Or add \ to the end of the line?

Suggested change

	**Visual Studio Code**
	Install [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
	**Visual Studio Code**\
	Install [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).\

[marekdedic]

This was done by pnpm run update 🤷

[ota-meshi]

Hmm. Maybe it's because .editorconfig was added recently? I don't use the EditorConfig plugin so I'm not sure 😓

[ota-meshi]

I've changed it to use the \ notation, so could you rebase it? #1215

[ota-meshi]

How about tracking instances and checking mutable function calls?
For example, tracking new Set() variables and checking add() calls.

For example, I might use:

const ALLOWED_VALUES = new Set(["a", "b"]); // Not reported
function isAllowedValue(v) {
  return ALLOWED_VALUES.has(v);
}

const usedValues ​​= new Set();
function process(v) {
  if (usedValues.has(v)) return;
  usedValues.add(v); // Reported
  // ...
}