Suggestion: a rule to enforce the style of components with a single `v-slot` directive and no other children

[andreww2012]

Please describe what the rule should do:

If a component has a single v-slot directive (commonly shortened as #), it's possible to remove an extra wrapper by moving this directive to the component directly, i.e. the following examples are equivalent:

<my-component>
  <template #default>...</template>
</my-component>

<my-component #default>...</my-component>

<my-component>...</my-component>

<my-component>
  <template #foo>...</template>
</my-component>

<my-component #foo>...</my-component>

It would be nice to have a rule to enforce a specific style in these cases.

What category should the rule belong to?

• Enforces code style (layout)
• Warns about a potential error (problem)
• Suggests an alternate way of doing something (suggestion)
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

See above

Additional context

One caveat that I see with this rule is comments handling: If a component has a single named slot and also at least one comment node outside the slot, would it be desirable to move comment nodes inside the slot when enforcing the style that avoids the additional wrapper? In other words, do we treat this

<my-component>
  <!-- some comment -->
  <template #foo>...</template>
</my-component>

the same as this:

<my-component #foo><!-- some comment -->...</my-component>

I think the default answer should be no because comment nodes are part of rendered HTML - but maybe this can be configurable via the rule option, say treatCommentsAsInsignificant.

Proposed name

single-v-slot-style

Proposed rule options

type Style = 'any' | 'with-wrapper' | 'without-wrapper';

type Options = Style /* shorthand for `style` option */ | {
  style?: Style; // Default: `any` (not enforced)
  defaultStyle?: Style; // `default` slot style. Default: inherits from `style`
  treatCommentsAsInsignificant?: boolean; // Default: false
}

[FloEdelmann]

Perfectly reasonable 🙂

I only think the default style should not be any, because the rule doesn't do anything when not specifying any options then. I think a more reasonable default would be:

{
  style: 'without-wrapper',
  defaultStyle: undefined, // inherit from `style`
  treatCommentsAsInsignificant: false
}

Also, I'd rename style to namedSlotStyle and defaultStyle to defaultSlotStyle to be explicit.

PR welcome for that 🙂

[ota-meshi]

<my-component #foo><!-- some comment -->...</my-component>

I don't know if it's the same now, but at the time the documentation said it couldn't be done, so it might be reported as invalid under a different rule.
We might need to resolve #1229 first.