svelte/require-store-reactive-access

[baseballyama]

Motivation

This is coming from sveltejs/svelte#7984.

Description

Disallow to render store itself. Need to use $ prefix or get function.

This rule is fixable.

<!-- before -->
<p>{storeValue}</p>
<!-- after -->
<p>{$storeValue}</p>

Examples

<script lang="ts">
  import { writable, get } from 'svelte/store';
  const storeValue = writable("hello");
</script>

<!-- ✓ GOOD -->
<p>{$storeValue}</p>
<p>{get(storeValue)}</p>

<!-- ✗ BAD -->
<p>{storeValue}</p>

Additional comments

Svelte can define your own store. So we need to support it at some point. (But I think it's difficult. Is there any way to provide it to TypeScript users?)

https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract

[ota-meshi]

Thank you for suggesting the rule!
That rule sounds good to me!

I still don't know how to type check if it's a store or not, but I think we can get TypeScript type information from a node like this:

const tools = getTypeScriptTools(context)
if (!tools) {
   return {}
}
const { service, ts } = tools
const checker = service.program.getTypeChecker()
// ...
const tsNode = services.esTreeNodeToTSNodeMap.get(node);
const type = checker.getTypeAtLocation(tsNode);

The following code is a deprecated rule the other day, but it may be helpful.

https://github.com/ota-meshi/eslint-plugin-svelte/blob/7be12eb2d1752902ab495245ccfe7ba7c8516cc8/src/rules/%40typescript-eslint/no-unnecessary-condition.ts#L160-L166

[ota-meshi]

typescript-eslint's no-floating-promises rule seems to identify Promise by checking the then method.
I think we might be able to identify the store instance by checking the subscribe method in the same way.

https://github.com/typescript-eslint/typescript-eslint/blob/54141946ac2a25799bb622d47d9a3fd1fb316ef9/packages/eslint-plugin/src/rules/no-floating-promises.ts#L184-L206

[ota-meshi]

We should also check references from extractStoreReferences in case users don't use typescript.

[ota-meshi]

I'll try to work on implementing this rule.

[bleucitron]

Hello,

this rule triggers when using custom stores methods, which is a bit annoying.

Would it be possible to add some rule option to prevent that ?

[baseballyama]

Please open a new issue.

[bleucitron]

Sorry.

Plus, the behaviour i'm experiencing is a little bit weirder than i thought, i'll investigate more before posting an actual issue.