feat: add svelte/prefer-destructured-store-props rule (#270)

* wip: add prefer-destructured-store-props rule

* chore: remove log

* chore: trying to figure out lint invocations

Editor doesn't like this but maybe it's ok?

* wip: better query

* wip: suggest reactive statement in <script>

Also add a description

* wip: address feedbakc

* Update .eslintrc.js

* wip: feedback

* wip: also track imported names

* chore: fix lint errors

* fix: update prefer-destructured-store-props rule

* fix: add testcases and fix

* docs: add changeset

* fix: use esutils

Co-authored-by: Pat Cavit <[email protected]>

Author: ota-meshi

.changeset/real-buses-complain.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: add `svelte/prefer-destructured-store-props` rule

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
     },
     {
       files: ["*.svelte"],
+      extends: ["plugin:svelte/base"],
       parser: "svelte-eslint-parser",
       parserOptions: {
         parser: {

README.md

@@ -294,6 +294,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-reactive-literals](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-unused-svelte-ignore](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
 | [svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
+| [svelte/prefer-destructured-store-props](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
 | [svelte/require-optimized-style-attribute](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-optimized-style-attribute/) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](https://ota-meshi.github.io/eslint-plugin-svelte/rules/require-stores-init/) | require initial value in store |  |
 

docs-svelte-kit/src/lib/eslint/ESLintEditor.svelte

@@ -219,10 +219,11 @@
         edits: [
           {
             resource: model.uri,
-            edit: {
+            textEdit: {
               range: editRange,
               text: fix.text,
             },
+            versionId: model.getVersionId(),
           },
         ],
       },

docs-svelte-kit/src/lib/eslint/MonacoEditor.svelte

@@ -58,7 +58,7 @@
           monaco.languages.registerCodeActionProvider(language, {
             provideCodeActions(model, range, context) {
               const editor = getLeftEditor?.()
-              if (editor?.getModel().url !== model.url) {
+              if (editor?.getModel().uri !== model.uri) {
                 return {
                   actions: [],
                   dispose() {

docs/rules.md

@@ -47,6 +47,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-reactive-literals](./rules/no-reactive-literals.md) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md) | disallow unused svelte-ignore comments | :star: |
 | [svelte/no-useless-mustaches](./rules/no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
+| [svelte/prefer-destructured-store-props](./rules/prefer-destructured-store-props.md) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |
 | [svelte/require-optimized-style-attribute](./rules/require-optimized-style-attribute.md) | require style attributes that can be optimized |  |
 | [svelte/require-stores-init](./rules/require-stores-init.md) | require initial value in store |  |
 

docs/rules/prefer-destructured-store-props.md

@@ -0,0 +1,55 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "svelte/prefer-destructured-store-props"
+description: "destructure values from object stores for better change tracking & fewer redraws"
+---
+
+# svelte/prefer-destructured-store-props
+
+> destructure values from object stores for better change tracking & fewer redraws
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports on directly accessing properties of a store containing an object in templates. These usages can instead be written as a reactive statement using destructuring to allow for more granular change-tracking and reduced redraws in the component.
+
+An example of the improvements can be see in this [REPL](https://svelte.dev/repl/7de86fea94ff40c48abb82da534dfb89)
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/prefer-destructured-store-props: "error" */
+  import store from "./store.js"
+  $: ({ foo } = $store)
+</script>
+
+<!-- ✓ GOOD -->
+{foo}
+
+<!-- ✗ BAD -->
+{$store.foo}
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+Nothing
+
+## :heart: Compatibility
+
+This rule was taken from [@tivac/eslint-plugin-svelte].  
+This rule is compatible with `@tivac/svelte/store-prop-destructuring` rule.
+
+[@tivac/eslint-plugin-svelte]: https://github.com/tivac/eslint-plugin-svelte/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/prefer-destructured-store-props.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/prefer-destructured-store-props.ts)

package.json

@@ -67,6 +67,7 @@
   "dependencies": {
     "debug": "^4.3.1",
     "eslint-utils": "^3.0.0",
+    "esutils": "^2.0.3",
     "known-css-properties": "^0.25.0",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.4",
@@ -100,6 +101,7 @@
     "@types/eslint-utils": "^3.0.1",
     "@types/eslint-visitor-keys": "^1.0.0",
     "@types/estree": "^1.0.0",
+    "@types/esutils": "^2.0.0",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.5",
@@ -172,7 +174,7 @@
     "access": "public"
   },
   "typeCoverage": {
-    "atLeast": 98.64,
+    "atLeast": 98.71,
     "cache": true,
     "detail": true,
     "ignoreAsAssertion": true,