x-partial directive

[olivmonnier]

Hi, I was wondering about integrate easily an alpine component who is used repeatedly in my html view like a partial in backend framework ? For illustrated, here is an example :

  <div x-init="$el.innerHTML = document.querySelector('#collapsePartial').innerHTML"></div>
  <p>Lorem ipsum dolor sit amet.</p>
  <div x-init="$el.innerHTML = document.querySelector('#collapsePartial').innerHTML"></div>

  <template id="collapsePartial">
    <div x-data="collapse">
      <p x-show="expanded">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ipsa exercitationem enim sed modi, minus, unde aperiam fugit quod accusamus officia dicta voluptate error aspernatur, adipisci ipsam dignissimos hic vitae!</p>
      <button @click="toggle">Click</button>
    </div>
  </template>

  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('collapse', () => ({
        expanded: true,
        toggle() {
          this.expanded = !this.expanded
        }
      }))
    });
  </script>

Maybe a new alpine directive with the name x-partial initialized when the page is loaded like x-init and accept a selector could be a solution ? But the next question is how we can pass some data to the partial ?
This is could be great, especially when you have some blocs elements with very long tailwind classes.

[SimoTod]

You can potentially write your own custom directive for your projects: https://alpinejs.dev/advanced/extending#simple-example