[Feature Request] Convert transitions when generating vue components

[vesper8]

This is a feature request to handle transition comment blocks when generating vue components

So this:

  <!--
    Background overlay, show/hide based on modal state.

    Entering: "ease-out duration-300"
      From: "opacity-0"
      To: "opacity-100"
    Leaving: "ease-in duration-200"
      From: "opacity-100"
      To: "opacity-0"
  -->
  <div class="fixed inset-0 transition-opacity">
    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
  </div>

Would become this:

  <transition
    enter-class="opacity-0"
    enter-active-class="ease-out duration-300"
    enter-to-class="opacity-100"
    leave-class="opacity-100"
    leave-active-class="ease-in duration-200"
    leave-to-class="opacity-0"
  >  
    <div class="fixed inset-0 transition-opacity">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
  </transition>

Basically this would entail converting the comment block to a transiton tag, and then figuring out the next child below the block and adding a closing transition tag on the other end of that immediate children tag

If this is too complicated, then at least replacing the comment block by a commented-out vue transition tag would also be very helpful, and it would be up to the developer to add the closing tag and if necessary figure out the correct position of the opening transition tag

[kiliman]

Instead of trying to parse the HTML comments, I'll probably convert the alpine code. I've already started on a simple converter.

[kiliman]

Cleaning up issues.

Tailwind UI now provides React and Vue components, so I've removed transformers from the crawler.