Leaf #extend leads to indentation issues in final HTML

Related Projects Vapor
1

Hey guys,

I have two templates:

  1. InitialDummies.leaf:
<!DOCTYPE html>
<html>
<head>
    <style>
        th, td { padding: 0 15px; }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Component ID</th>
                <th>DummyModel1</th>
                <th>DummyModel2</th>
            </tr>
        </thead>
        <tbody>
        #for(component in components):
            #extend("DummyComponent")
        #endfor
        </tbody>
    </table>

    <script src="/mist.js"></script>
</body>
</html>
  1. DummyComponent.leaf:
<tr mist-component="DummyComponent" mist-id="#(component.dummymodel1.id)">
    <td>#(component.dummymodel1.id)</td>
    <td>#(component.dummymodel1.text)</td>
    <td>#(component.dummymodel2.text2)</td>
</tr>

Here is my http endpoint:

app.get("DummyComponents")
{ request async throws -> View in
    let context = // ...
    return try await request.view.render("InitialDummies", context)
}

The problem (if you want to call it that....) is that this is the final HTML output of the leaf template:

<!DOCTYPE html>
<html>
<head>
    <style>
        th, td { padding: 0 15px; }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Component ID</th>
                <th>DummyModel1</th>
                <th>DummyModel2</th>
            </tr>
        </thead>
        <tbody>
        
            <tr mist-component="DummyComponent" mist-id="9758DFBB-2687-4089-AEB5-D839DB620DB6">
    <td>9758DFBB-2687-4089-AEB5-D839DB620DB6</td>
    <td>leaf</td>
    <td>client</td>
</tr>
   
        </tbody>
    </table>

    <script src="/mist.js"></script>
</body>
</html>

As you can see the here:

            <tr mist-component="DummyComponent" mist-id="9758DFBB-2687-4089-AEB5-D839DB620DB6">
    <td>9758DFBB-2687-4089-AEB5-D839DB620DB6</td>
    <td>leaf</td>
    <td>client</td>
</tr>

The first line of the extended template is indented correctly, but the rest has wrong indentation.

Does anybody know if I just have to live with this? Or is there something im doing wrong?

Thanks!

2

This is a known bug in Leaf. There's not a huge amount you can do to fix it (other than adding the extra indents in) but if you create an issue to track it we can look at it when we overhaul Leaf next

3

Thanks for the clarification!

I opened an issue here.

Also thank you so much for maintaining the Vapor ecosystem. Writing servers in Swift is so cool!

Have a good one!