Mixin block works with undocumented "+" syntax but fails if you use the mixin keyword #1137

Closed
PherricOxide opened this Issue Jul 24, 2013 · 1 comment

Projects

None yet

3 participants

@PherricOxide

The mixin definition I'm using,

mixin header(title, helpAnchor)
  div(style="display: inline-block")
    h3.cardHeader
      span #{title}
      a(href="help##{helpAnchor}", target="_blank")
    img.helpIcon(src="/images/about.png", style="float: right;")
    div.cardOuter(style="display: inline-block")
      block

The following works fine,

+header('Overview of captured network traffic', 'suspectGrid')
  p test

But the following results in an error,

mixin header('Overview of captured network traffic', 'suspectGrid')
  p test

The error is,

Error
    at new JS_Parse_Error (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:196:18)
    at js_error (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:204:11)
    at croak (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:636:9)
    at as_symbol (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:1231:27)
    at ctor.argnames (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:907:28)
    at function_ (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:911:15)
    at expr_atom (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:1123:24)
    at maybe_unary (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:1287:19)
    at expr_ops (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:1322:24)
    at maybe_conditional (/home/pherricoxide/Code/Nova/Quasar/node_modules/jade/node_modules/with/node_modules/uglify-js/lib/parse.js:1327:20)

This seems to happen on both jade 0.32.x and 0.33.x (the versions in npm).

@joeytwiddle

You cannot expect that to work. For example, in the second case, if you wanted to pass two variables instead of string literals:

- var netTitle = 'Overview of captured network traffic'
- var netAnchor = 'suspectGrid'

mixin header(netTitle, netAnchor)
  p test

then there is no way for Jade to know that you want to make a mixin call. This looks like a mixin definition!

Because mixin definitions are distinguished from mixin calls only by the presence of indented content, it is necessary that the magic block mixin call has a different syntax. That is the +header(...) syntax.

(I'm pretty sure block mixins were documented, but the docs appear to be in a state of flux right now, neither in the README nor the website!)

I suspect you are seeing a parse error, because Jade sees a mixin definition and tries to create:

function header('Overview of captured network traffic', 'suspectGrid') {
  ...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment