`vue/require-toggle-inside-transition` false negative with whitespace before the element

[yoshi-pi]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: ^8.39.0
• eslint-plugin-vue version: ^9.11.0
• Node version: v18.15.0
• Operating System: macOS 13.5.2

Please show your full configuration:

/* eslint-env node */
module.exports = {
  root: true,
  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

What did you do?

<template>
  <Transition> <div>Hello</div></Transition>
</template>

What did you expect to happen?
It should show a red wavy warning of vue/require-toggle-inside-transition on the VSCode because there is no v-if of v-show.

What actually happened?

It doesn't show any red wavy warnings if there are spaces or line breaks before the element.

Repository to reproduce this issue

https://github.com/yoshi-pi/bug-report-vue-require-toggle-inside-transition

[FloEdelmann]

Sounds like a bug, thanks for reporting!

[yoshi-pi]

Thank you for the changes made. I have three concerns:

1. I noticed that custom components are not getting an error. Why is that? The <Transition> component can be used with v-if, v-show, <component>, and the key attribute. I think it would be a good idea to issue an error if these directives are missing in custom components.

Update:
One possible scenario is the use of 'v-if' or similar directives on the root element within the component, so I believe it's okay not to raise an error. I apologize for the confusion.

ReUpdate:
According to #9491, it's expected that functionality for switching elements, like 'v-if' or 'v-show,' should be used within the same template as the <Transition> component. Therefore, I still think it would be a good idea to restrict the use of these directives to custom components, excluding <component> and <slot>.

<Transition>
  <Foo /> // no error
</Transition>

2. Similarly, I think we shouldn't be getting an error for the key attribute for the same reason. I understand that the key attribute is not commonly used, so it's okay to issue an error, but I'm not sure if it's necessary to make an error about it.

<Transition>
  <div key="hello" /> // error
</Transition>

3. Lastly, when there are multiple elements inside a transition, for example,

<Transition>
  <div v-if="ok"></div>
  <div></div>  // no error
</Transition>

no error is issued. While this may not be a significant issue because Vue.js shows an overlay in such cases, it still raised a slight concern for me.
What are your thoughts on these three points?

[719media]

I started getting a lot of errors as I use the key= syntax noted above in example 2.
I also get errors for

<transition>
  <slot /> // throws error, but should not IMO
</transition>

Which, IMO, should not be an error

I also think that lack of v-show or v-if with appear on the transition should not throw an error:

<transition appear>
  <div>Something</div> // throws error, but should not IMO
</transition>