PUG templates tips

Pug templating recipes and debug tricks.

Recipes

Compile pug file locally in command line

Useful to debug what pug files compile if you do not have access to compiles html (with webpac for example)

pug -O '{"pretty": true}' sr-order.template.pug

Mixins with block (to wrap content inside a mixin)

https://github.com/neuland/jade4j/issues/11

How to use a json for data in commande line

https://github.com/visionmedia/jade/issues/833

Option 1

This insane mixin works:

mixin json()
  - var oldbuf = buf; buf = [];
  block
  - var res = JSON.stringify(JSON.parse(buf.join('')));
  - buf = oldbuf;
  != res
You can then call it:

+json().
  [
    {
      "name": "ABC-Logistic",
      "file":  "Abc-logistic",
      "link":  "abc-logistic.co.jp"
    }
  ]
And the resulting file will contain:

[{"name":"ABC-Logistic","file":"Abc-logistic","link":"abc-logistic.co.jp"}]

How to load data in a grunt base environnement

https://github.com/gruntjs/grunt-contrib-jade#data

options: {
                pretty: true, // Output HTML in indented style
                doctype: 'html',
                data: {
                    links: grunt.file.readJSON("app/Resources/views/mixins/_vars.json"),
                },
            },

#{link.title} will be available Potentially we can load sevral data objects

Multiline js in jade (work in progress)

https://github.com/visionmedia/jade/issues/796

unescaped html tags inside a variable

http://html2jade.org/

-var title = "blabla bl <br/> szlkjs mlklj ";

h3(class="fs1")
            | !{title}

Conditional attributes

How to print an attributes, only if a js value is available to feed it For example angular directive attributes ng-click... should not be printed if there has no value.

div(#{myAttributes}) just don't work #{t} nterpolation work only in the attribute ""

To check http://html2jade.org/

- var t = "la valeur de t"
- var z ="lkj"
p(class="klj" sdsd="#{t}")(title=s)(blang=z)

<p sdsd="la valeur de t" blang="lkj" class="klj"></p>

Multiline tag content

        .tip.
          Enter a valid
          email address
          such as <em>[email protected]</em>.

Dynamic Mixin call

http://stackoverflow.com/questions/24392055/jade-templates-dynamically-calling-a-mixin?rq=1

mixin blue
  div(class="blue") Blue
    block

mixin red
  div(class="red") red
    block

mixin para(type)
  - console.log(type);
  +#{type}()
    div Nice dynamic mixin call !


+para('blue')
+para('red')

Result

<div class="blue">Blue
  <div>Nice dynamic mixin call !</div>
</div>
<div class="red">red
  <div>Nice dynamic mixin call !</div>
</div>

Dynamic attributes

http://jade-lang.com/reference/attributes/

- var customAttributes = {'set-nav-pattern': true, 'calamar': "setCalamar()"}
div(class="blue")&attributes(customAttributes)

Result

<div class="blue" set-nav-pattern calamar="setCalamar()"></div>

Debug pug or jade

unexpected token "indent" :

Check if there is no added space at the end of a mixin definition. You can switch on the invisible character display to look up more easily...

"Unexpected token 'tag' expected 'text', 'code', ':', 'newline' or 'eos'"

Wrong because their is no space between "Polaziste" and it's tag

   label(for="polaziste")Polaziste

Fixed

   label(for="polaziste") Polaziste