Multiple blocks append in child layout block append and includes results in multiple bugs: blocks duplicated, with different orders

[thomas-riccardi]

The following examples are compiled using jade v0.35.0 and today's master (bd6233b).

layout.jade

block scripts

block content

page2.jade

append scripts
  script console.log("page2");

append content
  p page2

page1-v1.jade

extends layout
append scripts
  script console.log("page1");

append content
  p page 1

page1-v1.html

<script>console.log("page1");</script>
<p>page 1</p>

Up to here everything is OK.

page1-v2.jade

extends layout
append scripts
  script console.log("page1");

append content
  p page 1
  append scripts
    script console.log("page1 in content");

page1-v2.html

<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<p>page 1</p>
<script>console.log("page1 in content");</script>
<script>console.log("page1");</script>

Issue 1: block append in another block append duplicates the content of the inner block append, in different order furthermore.

page1-v3.jade

extends layout
append scripts
  script console.log("page1");

append content
  p page 1

include page 2

page1-v3.html

<script>console.log("page2");</script>
<script>console.log("page1");</script>
<p>page 2</p>
<p>page 1</p>

Issue 2: append order is not the expected one: page 2 should be after page 1 in both script & content blocks.
With manual copy past of page2.jade instead of include page2.jade it works:
page1-v3bis.jade

extends layout
append scripts
  script console.log("page1");

append content
  p page 1

append scripts
  script console.log("page2");

append content
  p page 2

page1-v3bis.html

<script>console.log("page1");</script>
<script>console.log("page2");</script>
<p>page 1</p>
<p>page 2</p>

page1-v4.jade (include inside append content)

extends layout
append scripts
  script console.log("page1");

append content
  p page 1
  include page2

page1-v4.html

<script>console.log("page2");</script>
<script>console.log("page1");</script>
<p>page 1</p>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<p>page 2</p>

Issue 3: block scripts is duplicated like in issue 1, but the order is the same in the two copies...

This seems duplicated each time we append, directly or from an include:
page1-v4bis.jade (page 2 included two times + direct append)

extends layout
append scripts
  script console.log("page1");

append content
  p page 1
  append scripts
    script console.log("page1 in content");
  include page2
  append scripts
    script console.log("page1 in content after include page2");
  include page2
  append scripts
    script console.log("page1 in content after 2nd include page2");

page1-v4.html

<script>console.log("page2");</script>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<script>console.log("page1 in content after include page2");</script>
<script>console.log("page1 in content after 2nd include page2");</script>
<p>page 1</p>
<script>console.log("page1 in content");</script>
<script>console.log("page1");</script>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<p>page 2</p>
<script>console.log("page1 in content after include page2");</script>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<script>console.log("page2");</script>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<script>console.log("page1 in content after include page2");</script>
<p>page 2</p>
<script>console.log("page1 in content after 2nd include page2");</script>
<script>console.log("page2");</script>
<script>console.log("page2");</script>
<script>console.log("page1");</script>
<script>console.log("page1 in content");</script>
<script>console.log("page1 in content after include page2");</script>

I have a use-case for this: a page.jade that extends layout.jade optionally includes multiple features, each feature has a css, scripts & content blocks to append to. Currently I'm forced to split each feature in 3 .jade files, one per block to implement, and include them at the top level of page.jade; but this doesn't work well either because of issue 2...

[buschtoens]

Just for the records: I ran into this aswell and used the same work-around (splittig the file up). I opened #1267, which got closed for good. Your description has a clearer structure.

One thing that I'd like to add though, is that includes (inc.jade) can't append/prepend/replace blocks of layouts (layout.jade), that aren't referenced by in the including file (page.jade).

layout.jade

#head
  block head
    h1 block head

#body
  block body
    h1 block body

#footer
  block foot
    h1 block foot

page.jade

extends layout

// Append content
append head
  p Appended by `append head` in `page.jade`

// No content, only a reference
append body

// No reference for block foot

// include only works down here
include inc

inc.jade

append head
  p Appended by `append head` in `inc.jade`

append body
  p Appended by `append body` in `inc.jade`

append foot
  p Appended by `append foot` in `inc.jade`

page.html

<div id="head">
  <h1>block head</h1>
  <p>Appended by `append head` in `inc.jade`</p>    <!-- wrong order, btw -->
  <p>Appended by `append head` in `page.jade`</p>
</div>
<div id="body">
  <h1>block body</h1>
  <p>Appended by `append body` in `inc.jade`</p>    <!-- wrong order, btw -->
  <p>Appended by `append body` in `page.jade`</p>
</div>
<div id="footer">
  <h1>block foot</h1>
</div>

[buschtoens]

I wonder how this bug was unnoticed until recently (is it new, maybe?). My team and I can't continue with our developing, until we get this sorted out.

We are exactly in @triccardi-systran's use-case to construct our layouts of various parts, so we don't end up with one 5.000 loc layout file.

So please excuse me writing about 10 comments in two hours and being a PITA about this. 😄
I'm really sorry.

[buschtoens]

#1272

[ForbesLindesay]

Sorry this has taken so long. Blocks will be totally overhauled as part of the 2.0.0 release. Hopefully that will resolve the bug.

[tremendus]

Do we believe this issue to be closed?

I have a layout, which includes a 'view'. The view includes a form and has a block append scripts which includes the JS needed to run that view include.

The script ends up getting included twice - once under the view (incorrect) and once in the scripts block before the body close tag (correct)

This is using gulp-pug ^3.2.0 which seems to pull current ^2.1.0 versions of the parser. If you need more code, I will post but its the same setup and symptoms as above.

[ForbesLindesay]

OK, I've written a test and it does look like this is still a problem.

[csakis]

I have just experienced this bug. It has been report in 2013 first. That was 4 years ago, and it still has not been fixed.

[renatodeleao]

Yup, still here.

[mslinn]

Very disappointing

[cspotcode]

All the block replacement/appending/prepending code needs to be rewritten IMO. Last I checked, it's full of side-effects. It tries to convert an AST containing blocks into the equivalent AST without blocks, but in doing so destroys the original block structure, and it does it over multiple passes. There's no easy way to see the algorithm's comprehension of your block hierarchy, so it's tough to debug or even document desired behavior. It will be easier to reason about if a single pug transformation creates its own tree-like comprehension of all blocks in all layouts. This single structure can be dumped, logged, or debugged. Then a single traversal of the root layout uses this structure to recursively expand blocks in one pass.

…

On Tue, Jan 2, 2018 at 1:17 AM, Mike Slinn ***@***.***> wrote: Very disappointing — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1261 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAW-uBc5Xx0wkVAzrYSlhu2glpPGVzdjks5tGcn7gaJpZM4BHjUp> .

[Robula]

I've just hit this also and now I am sad.

Should this be reopened?

[nsagot]

Need a update