feat: added the no-useless-children-snippet rule (#922)

Author: marekdedic

.changeset/loud-zoos-kiss.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: added the no-useless-children-snippet rule

README.md

@@ -366,6 +366,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-svelte-internal](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-svelte-internal/) | svelte/internal will be removed in Svelte 6. | |
 | [svelte/no-unused-class-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-class-name/) | disallow the use of a class in the template without a corresponding style | |
 | [svelte/no-unused-svelte-ignore](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
+| [svelte/no-useless-children-snippet](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-children-snippet/) | disallow explicit children snippet where it's not needed | |
 | [svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :wrench: |
 | [svelte/prefer-const](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-const/) | Require `const` declarations for variables that are never reassigned after declared | :wrench: |
 | [svelte/prefer-destructured-store-props](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-destructured-store-props/) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |

docs/rules.md

@@ -63,6 +63,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-svelte-internal](./rules/no-svelte-internal.md) | svelte/internal will be removed in Svelte 6. | |
 | [svelte/no-unused-class-name](./rules/no-unused-class-name.md) | disallow the use of a class in the template without a corresponding style | |
 | [svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md) | disallow unused svelte-ignore comments | :star: |
+| [svelte/no-useless-children-snippet](./rules/no-useless-children-snippet.md) | disallow explicit children snippet where it's not needed | |
 | [svelte/no-useless-mustaches](./rules/no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
 | [svelte/prefer-const](./rules/prefer-const.md) | Require `const` declarations for variables that are never reassigned after declared | :wrench: |
 | [svelte/prefer-destructured-store-props](./rules/prefer-destructured-store-props.md) | destructure values from object stores for better change tracking & fewer redraws | :bulb: |

docs/rules/no-useless-children-snippet.md

@@ -0,0 +1,57 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-useless-children-snippet'
+description: "disallow explicit children snippet where it's not needed"
+---
+
+# svelte/no-useless-children-snippet
+
+> disallow explicit children snippet where it's not needed
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+Any content inside component tags that is not a snippet declaration implicitly becomes part of the children snippet. Thus, declaring the children snippet explicitly is only necessary when the snippet has parameters.
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+ /* eslint svelte/no-useless-children-snippet: "error" */
+
+ import { Foo } from './Foo.svelte';
+</script>
+
+<!-- ✓ GOOD -->
+<Foo>
+ {#snippet bar()}
+ Hello
+ {/snippet}
+</Foo>
+
+<Foo>
+ {#snippet children(val)}
+ Hello {val}
+ {/snippet}
+</Foo>
+
+<Foo>Hello</Foo>
+
+<!-- ✗ BAD -->
+<Foo>
+ {#snippet children()}
+ Hello
+ {/snippet}
+</Foo>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-useless-children-snippet.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-useless-children-snippet.ts)

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -260,6 +260,11 @@ export interface RuleOptions {
  * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/
  */
  'svelte/no-unused-svelte-ignore'?: Linter.RuleEntry<[]>
+ /**
+ * disallow explicit children snippet where it's not needed
+ * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-children-snippet/
+ */
+ 'svelte/no-useless-children-snippet'?: Linter.RuleEntry<[]>
  /**
  * disallow unnecessary mustache interpolations
  * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/

packages/eslint-plugin-svelte/src/rules/no-useless-children-snippet.ts

@@ -0,0 +1,29 @@
+import { createRule } from '../utils/index.js';
+
+export default createRule('no-useless-children-snippet', {
+meta: {
+docs: {
+description: "disallow explicit children snippet where it's not needed",
+category: 'Best Practices',
+recommended: false
+},
+schema: [],
+messages: {
+uselessSnippet: 'Found an unnecessary children snippet.'
+},
+type: 'suggestion'
+},
+create(context) {
+return {
+SvelteSnippetBlock(node) {
+if (
+node.parent.type === 'SvelteElement' &&
+node.id.name === 'children' &&
+node.params.length === 0
+) {
+context.report({ node, messageId: 'uselessSnippet' });
+}
+}
+};
+}
+});

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -51,6 +51,7 @@ import noTrailingSpaces from '../rules/no-trailing-spaces.js';
 import noUnknownStyleDirectiveProperty from '../rules/no-unknown-style-directive-property.js';
 import noUnusedClassName from '../rules/no-unused-class-name.js';
 import noUnusedSvelteIgnore from '../rules/no-unused-svelte-ignore.js';
+import noUselessChildrenSnippet from '../rules/no-useless-children-snippet.js';
 import noUselessMustaches from '../rules/no-useless-mustaches.js';
 import preferClassDirective from '../rules/prefer-class-directive.js';
 import preferConst from '../rules/prefer-const.js';
@@ -121,6 +122,7 @@ export const rules = [
 noUnknownStyleDirectiveProperty,
 noUnusedClassName,
 noUnusedSvelteIgnore,
+noUselessChildrenSnippet,
 noUselessMustaches,
 preferClassDirective,
 preferConst,

packages/eslint-plugin-svelte/tests/fixtures/rules/no-useless-children-snippet/invalid/_requirements.json

@@ -0,0 +1,3 @@
+{
+"svelte": ">=5.0.0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-useless-children-snippet/invalid/children-snippet01-errors.yaml

@@ -0,0 +1,4 @@
+- message: Found an unnecessary children snippet.
+ line: 2
+ column: 3
+ suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-useless-children-snippet/invalid/children-snippet01-input.svelte

@@ -0,0 +1,5 @@
+<Foo>
+ {#snippet children()}
+ Hello
+ {/snippet}
+</Foo>