let x-if add multiple root nodes

[TomorrowToday]

It'd be nice to no longer need shim elements or a lot of code duplication to bring in multiple sibling nodes with an x-if template element. The following is a somewhat common scenario: a view selector within a page with computationally heavy styles and scripts that we don't want running when the view isn't loaded. It could be this easy:

<!--  ...  -->
<div class="view-selector">...</div>
<div class="view">
    <header>...</header>

    <template x-if="view=='1'">
        <style>...</style>
        <main>...</main>
        <script>...<script>
    </template>

    <template x-if="view=='2'">
        <style>...</style>
        <main>...</main>
        <script>...<script>
    </template>

    <!--  ...  -->

    <template x-if="view=='n'">
        <style>...</style>
        <main>...</main>
        <script>...<script>
    </template>

    <aside>...</aside>
    <footer>...</footer>
</div>
<!--  ...  -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('view', '1')
    })
</script>

If this example were possible it'd be much easier to manipulate layers (z-index) for lightbox effects or style div.view using a grid. Where using a shim element throws off the hierarchy or requires much more html to be duplicated inside the template or the use of many more templates like so:

<!--   ...  -->
<div class="view-selector">...</div>
<div class="view">
    <header>...</header>

    <!-- VIEW 1 -->
    <template x-if="view=='1'">
        <style>...</style>
    </template>
    <template x-if="view=='1'">
        <main>...</main>
    </template>
    <template x-if="view=='1'">
        <script>...<script>
    </template>

   <!-- VIEW 2 -->
    <template x-if="view=='2'">
        <style>...</style>
    </template>
    <template x-if="view=='2'">
        <main>...</main>
    </template>
    <template x-if="view=='2'">
        <script>...<script>
    </template>

    <!--   ...  -->

    <!-- VIEW N -->
    <template x-if="view=='n'">
        <style>...</style>
    </template>
    <template x-if="viev=='n'">
        <main>...</main>
    </template>
    <template x-if="view=='n'">
        <script>...<script>
    </template>

    <aside>...</aside>
    <footer>...</footer>
</div>

<!--  ...  -->

All the additional lines and duplicated code just makes things brittle and more error prone.

[SimoTod]

I believe the current behaviour is mainly for 2 reasons:

• It's a tech debt from v1/2 where allowing multiple nodes was more complicated and computationally expensive.
• It matches what x-show does (<div x-show="...">...</div> => <template x-if="..."><div>...</div></template>). If you have 2 elements without a common ancestor you need to put an x-show tag on each one.

None of them is a real blocker for V3, though. Theoretically, you can also implement your own directive supporting multiple children for your own projects (you just need a good name, maybe x-when).

[TomorrowToday]

Yeah, the x-if directive isn't complex and extending it would be easy. I'll fork and play around with it to see what the performance impact is... can't imagine it'll be worse than a dozen extra x-if template wrappers though.

[SimoTod]

Yeah, I tried myself and it doesn't look like it's any worse. Size is almost the same as well. 👍

[ethernidee]

Is there any progress on this issue? Conditional blocks with multiple elements is a pain currently.

[ekwoka]

You can mostly just wrap the contents in an element with display: contents and be fine.

[alex-jitbit]

I started migrating a huge codebase from Vue to Alpine and after 2 hours hit a wall - realizing all template tags can have exactly one root element for some weird reason. This broke all my CSS selectors (because there's a dummy extra tag everywhere). Too much friction. Staying on Vue, I guess :)

[ethernidee]

Same problem. Extra tags, extra styling. It's normal for template processor to allow conditional rendering of multiple same level items.