pug-php / pug

Pug template engine for PHP
https://www.phug-lang.com
MIT License
391 stars 42 forks source link

Bug when using combinaison of mixins with block in iteration #242

Open dadajuice opened 4 years ago

dadajuice commented 4 years ago

Hello,

I recently switched a project from Pug 2 to Pug 3 and I encountered a very specific kind of bug. It needs couple blocks of code to properly explain. I excuse myself in advance for my explanation which is hard to summarize 😅 There seem to be a problem when I call a mixin (in my code the +delete-button()) from within a mixin's block part in a loop (defined in my list) which has beed programmed using at least one mixing block (+list-headers(headers)).

//-
  GENERIC MIXIN EXAMPLE
mixin delete-button()
  button.btn.btn-sm.btn-danger delete

//-
  MIXIN EXAMPLES FOR LIST RENDERING
mixin list-headers(headers)
  thead
    tr
      each header, i in headers
        th=header

mixin list(rows, headers)
  .table-wrapper
    table.table.table-sm
      +list-headers(headers)
      tbody
          each row in rows
            block

//-
  VARIABLES DEFINITION (normally given as the pug file's arguments)
-rows = [{id: 1, name: "Martin Sandwich"}, {id: 2, name: "Jumbo Moutarde"}, {id: 3, name: "Sir. Bob Lewis"}]
-headers = ['number', 'name']

//-
  LIST MIXIN USAGE [WORKING CASE WITHOUT OTHER MIXIN CALLED]
+list(rows, headers)
  tr
    td=row.id
    td=row.name

//-
  LIST MIXIN USAGE [NOT WORKING CASE WITH OTHER MIXIN CALLED]
+list(rows, headers)
  tr
    td=row.id
    td=row.name
    td
      +delete-button()

What happens is that the variable row, doesn't change. It stays at the first element of my rows variable. But, if I remove the +delete-button() call, it will work as expected (having the correct 3 names). Also, if I comment the +list-headers(headers) in the list mixin straight and I keep the +delete-button it will also work as expected. So the result of the above Pug file will be :

<div class="table-wrapper">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>number</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Martin Sandwich</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jumbo Moutarde</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sir. Bob Lewis</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table-wrapper">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>number</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Martin Sandwich</td>
                <td>
                    <button class="btn btn-sm btn-danger">delete</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Martin Sandwich</td>
                <td>
                    <button class="btn btn-sm btn-danger">delete</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Martin Sandwich</td>
                <td>
                    <button class="btn btn-sm btn-danger">delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

It is a very weird bug to kinda explain as it needs a specific combinaison of mixins within mixins within a block inside a loop to properly replicate. As I stated at the beginning, I switched from Pug 2 and this use case was working (if it can be of any help). I tried my best to simplify the use case to the bare minimum from my part to isolate the problem. I hope it can help.

Thank you very much for your time and this amazing project 😊