Allow multiline JS var definition

[kinergy]

Similar to how this works in Jade:

input(
  type='checkbox'
  name='agreement'
  checked)

I'd like to be able to do this:

config = {
  a: 'something',
  b: 'something-else'
}

instead of having to write:

config = { a: 'something', b: 'something-else' }

This is a short example, however as config grows it would be much prettier if funky spacing was allowed.

[notslang]

you could use:

- var config = {
-     a: 'something',
-     b: 'something-else'
- }

[kinergy]

Tried that but compiling gives me the following:

SyntaxError: Unexpected token .
    at Object.Function (unknown source)
    at Object.exports.compile (/Users/kinergy/Documents/project/node_modules/jade/lib/jade.js:176:8)
    at /Users/kinergy/Documents/project/client/tasks/jade.js:47:25
    at Array.map (native)
    at Object.module.exports (/Users/kinergy/Documents/project/client/tasks/jade.js:41:31)
    at Task.helper (/usr/local/lib/node_modules/bbb/node_modules/grunt/lib/util/task.js:117:19)
    at Object.module.exports.grunt.registerHelper.namespace (/Users/kinergy/Documents/project/client/tasks/jade.js:25:35)
    at Object.task.registerMultiTask.thisTask (/usr/local/lib/node_modules/bbb/node_modules/grunt/lib/grunt/task.js:109:15)
    at Object.task.registerTask.thisTask.fn (/usr/local/lib/node_modules/bbb/node_modules/grunt/lib/grunt/task.js:58:16)
    at Task.<anonymous> (/usr/local/lib/node_modules/bbb/node_modules/grunt/lib/util/task.js:341:36)

[kinergy]

Similarly, this code does not work either:

+foo('test',
        'bar')

[notslang]

this looks like it is related to #629

[tj]

multiline mixins is arguable but i dont want this sort of thing, config etc should be outside of jade

[notslang]

if this is valid JS (which I think it is) it should work. I am not interested in adding configuration inside of templates, but if there is something wrong with the way that Jade parses inline JS it should be fixed (no matter what bad organization of code it might allow developers to use).

[tj]

I dont have infinite time and it's not something I would personally want, but I'll welcome a pull-request if it's not too large / hacky

[pheuter]

@visionmedia where would I want to look to possibly implement this feature?

[ForbesLindesay]

For starters, it would mean some new syntax (e.g. we have - for single line javascript). We should be able to get:

- var config = {
-     a: 'something',
-     b: 'something-else'
- }

to work, and I'd say it's pretty much just a bug that it doesn't already.

We could equally definitely get:

config = {
  a: 'something',
  b: 'something-else'
}

to work by using character-parser, but I'm not entirely convinced that it's not too much magic.

[ivankravchenko]

Request for comments.

How about that syntax?

config = { \
  a: 'something', \
  b: 'something-else'
}

Line ending escaping is bash's practice.
I think it is very simple to implement.

[eddiemonge]

so was this killed?

[ForbesLindesay]

Should work, but doesn't and requires a lot more cleverness to make work:

- var config = {
-     a: 'something',
-     b: 'something-else'
- }

I would probably accept a pull request to make work, but don't have time or inclination to write myself:

-
  var config = {
      a: 'something',
      b: 'something-else'
  }

[eddiemonge]

so I accomplished what I wanted by passing in the array in grunt-contrib-jade instead of putting it directly in the template. Also allowed me to get rid of grunt-sed

[ForbesLindesay]

That's the preferred method of doing this, and the reason why this is low priority for me.

[harrypujols]

+1 with the request.

This would open an alternative for compiling Jade.
You would be able to save variables in a separate jade file and pass them to the main file as an include (A practice many do with Sass, including me).
I mean, you can already do this, but just single-line variables.

It would open Jade to GUIs, like Codekit, solving issue #833.

[legomushroom]

+1

[meodai]

+1

[maruf89]

+1

[TimothyGu]

I am going to go ahead and unlock this issue. Please refrain from adding more +1’s, and limit your comments to constructive implementation details.

[iliakan]

+1, it worked for me as Forbes said here #796 (comment), but only with debug disabled.

[TimothyGu]

@iliakan it is expected that !debug works as debugging "symbols" are attached in between lines.

[iliakan]

@TimothyGu yes, I felt it's the reason :/
Is it possible to do something with it? Maybe something like js:, to let jade know we're including a non-breakable js...

[TimothyGu]

@iliakan I'm not extremely motivated to do this. We will accept pull requests for the following syntax though:

-
  var af = {
    prop: 1
  }

See @ForbesLindesay's #796 (comment)

[acidjazz]

If we do need this or think it's helpful I'd say a more generic, faster, and safer implementation would be that of a multi-line JS block similar identifier like /* */ or .

This sort of also bumps into the factor of functionality balance though, if I have am doing THIS much in jade that I require such a feature, should this be in Jade?

[TimothyGu]

@acidjazz said:

If we do need this or think it's helpful I'd say a more generic, faster, and safer implementation would be that of a multi-line JS block similar identifier like /* */ or .

I'd rather use the syntax proposed by @ForbesLindesay to be more consistent with the currently used -.

This sort of also bumps into the factor of functionality balance though, if I have am doing THIS much in jade that I require such a feature, should this be in Jade?

+1, although in many cases it's just a simply look-up table or loop array, so I guess it's fine.

[dogancelik]

👍 I would be happy if someone could implement multi-line JS.

[AbraaoAlves]

+1

[ironmancris]

+1

[alephyud]

Had the same issue - put together a patch to handle block code like:

-
  var a = {
    prop: 1
  }

[jjhoncv]

For make object with jade and array is this best solution: https://gist.github.com/jjhoncv/a6efea5eeb7937cb6f90

[jjhoncv]

I leave some aid.

look this:

Is only jade with var text type

- var list = []
- list.push({status: "active", text: "option 1"})
- list.push({status: "", text: "option 2"})
- list.push({status: "", text: "option 3"})

each(item, index in list)
  li(class="#{item.status}")
    a= item.text

Is only jade with var type text and var html type.

- var list = []
- list.push({status: "active", text: "option 1"})
- list.push({status: "", text: "<strong>option 2</strong>"})
- list.push({status: "", text: "option 3"})

each(item, index in list)
  li(class="#{item.status}")
    a= !{item.text}

Now for other language side back for example PHP:

- var list = []
- list.push({status: "<?php echo $status1;?>", text: "option 1"})
- list.push({status: "<?php echo $status2;?>", text: "<strong>option 2</strong>"})
- list.push({status: "<?php echo $status3;?>", text: "option 3"})

each(item, index in list)
  li(class!="#{item.status}")
    a= !{item.text}

[RSamokhin]

[ghost]

+1