-
-
Notifications
You must be signed in to change notification settings - Fork 40
Description
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 😊