Escaping and Multiline when using #[ ]

[smaili]

I've run into a couple of issues when using the #[ ] syntax and I'm starting to think they may be bugs so I'm posting them here to confirm :)

Here's the two issues I'm experiencing:

1. Using an apostrophe

   p.
       #[strong John's strong text] is really strong.
   

   Error message:

   The end of the string was reached with no closing bracket found.]

2. Using multiple lines

   p.
       #[strong This strong text is really really long. This strong
       text is really really long. This strong text is really really
       long.]
   

   Error message:

   The end of the string was reached with no closing bracket found.]

I've tried solving both problems by adding \ but no luck.

[ForbesLindesay]

1 is a bug. It's quite difficult to fix properly as it probably requires running the entire lexer just to figure out where the interpolation ends (at the moment we run the js lexer which is way simpler to use but incorrectly identifies your ' as the start of a string literal)

2 is intentional. Interpolate tags were not intended to support multi-line text as it's really not clear exactly what that would mean in terms of indentation.

[smaili]

My suspicions were correct :)

So for these particular cases do you recommend just using regular html tags?

    p.
        <strong>John's strong text</strong> is really strong.

    p.
        <strong>This strong text is really really long. This strong
        text is really really long. This strong text is really really
        long.</strong>

[ForbesLindesay]

For 1, that's the best bet for now, but we should eventually get round to fixing the bug. For 2, just do

p
  strong.
    This strong text is really really long. This strong
    text is really really long. This strong text is really really
    long.

[vendethiel]

@ForbesLindesay shouldn't #[ just start "another lexel" inside it, and then merge tokens once a non-matched ] (outer #[) has been found? That's how we do it in CoffeeScript.

[ForbesLindesay]

That is approximately what it should do, but it's not quite that simple. Because of the way tokens like indentation etc. work, it needs to merge the abstract syntax trees, rather than the stream of tokens, There's also the question mark over how we figure out what it means to be an un-matched ], which is not trivial even with the use of the lexer. e.g.

p  not #[img(src='exclamation.png')] even in text

p in #[strong the middle] of some text

and

p interpolation ends with #[code= ']']

We currently support all of those examples.

[vendethiel]

Right, merging the AST is probably the safest bet... :)

I'm not sure why those are not trivial to the lexer, though. the = ']' is trivial for a state machine ("I'm parsing a string!"), and the others don't seem to have anything special?

[ForbesLindesay]

There's a long list of contexts where ] means "end the interpolation" and an equally long list of contexts where it doesn't. I'm not saying we shouldn't do it or that it's impossible, just that it's probably harder than it looks.

[vendethiel]

It's been a very long time since I last looked into jade source (and I still voice my opinion all the tome... Sorry hehe) but I don't how it's a problem in a state machine. If the state is "normal" parsing (not in an attribute list or string or ...) you check the nesting level and if <0, you throw something(from the subparser). The main parsers then "catches" it and integrates the AST into the mainline parsing. You may need some special code to handle actual syntax errors, but outside of that is seems somewhat straightforward to me (might be because I've worked like that everytime)

[ForbesLindesay]

This will be fixed in v2.0.0 (the new jade-lexer/jade-parser modules already have this problem fixed). In the mean time:

p.
    #[strong John#{"'"}s strong text] is really strong.

Works, although it's a big ugly.

[paulpflug]

thanks for the workaround :)

looking forward for 2.0.0

[smaili]

Yes, I second that. Thank you Forbes!

[smaili]

Just out of curiosity, will 2.0 also allow multi-line commenting that does not actually end up in the rendered content?

Assuming no, would something like the following be possible to include in 2.0:

//*
My multi-line comment.
*//

This follows the current method of commenting by starting with //, but also adds the * to signal multiple lines. Off the top of my head, some possible variations in case the above can't be done, could be //-* or //-/*, but they feel a little lengthy :)

[ghost]

You can use multi-line comments like this:

//-
  This is comment,
  and multi-line

[nachiketkumar]

I'm running into the same error with a // inside of a #[code ...]. For example:

#[code git clone https://github.com/jadejs/jade.git] results in an error message:

The end of the string was reached with no closing bracket found.

Escaping with \doesn't work. #[code git clone https:/github.com/jadejs/jade.git] works (only a single / after https:) and so does #[code npm install jade].

Modifying it to the folowing does work:

#[code= 'git clone https://github.com/jadejs/jade.git'].

I guess tl;dr is a // can also cause the same error message.

[TimothyGu]

A work around is this:

#[code= 'git clone https://github.com/jadejs/jade.git']

[mrsean2k]

Use of // also affects cases where an embedded link is "self describing", i.e.

p This link to #[a(href="http://www.google.co.uk") http://www.google.co.uk] will fail
p But this #[a(href="http://www.google.co.uk") http:www.google.co.uk] will work

Continuations are predictably (but only in hindsight for me) fine:

p I believe 
  a(href="http://www.google.co.uk") 
    | http://www.google.co.uk
  |  will also work

If you need to do that sort of thing a lot, a mixin can help:

mixin linkit(url)
  a(href="#{url}") #{url}

//
// ... intervening code ...
//

p This also works #[+linkit('http://www.bing.com')] so hurrah for Jade

The mixin also has the advantage of cutting down the noise of duplication in the source where you want to embed deep links etc.

[ForbesLindesay]

This should be fixed in the master branch, which you can try via:

npm install jadejs/jade

[mrsean2k]

A passing comment that a) the fix notwithstanding, I was surprised the inline mixin works and it feels like it should make other useful behaviour possible and b) in the space of a few weeks I've flipped from "why would I want to get to grips with another templating langage to "why can't I use this everywhere". Really neat design tradeoffs.

[ForbesLindesay]

Incidentally, you could write your mixin a bit more neatly as:

mixin linkit(url)
  a(href=url)= url

1. attributes are implicitly JavaScript expressions. No need to use the interpolation syntax there.
2. = is the preferred way of making the entire content of a tag come from a JavaScript expression, interpolation is intended to be for handling simple expressions in the middle of large blocks of text.

[bretthayes]

The use of #{"'"} is quite ugly and can mess with syntax highlighting. You could always use an html entity for your apostrophe.

Jade:

p The #[strong chief's] golden warthog is still a mystery.

HTML Output:

<p>The chief's golden warthog is still a mystery.</p>