Pretty print

[nazar-pc]

According to what I found here in issues there was at least few people who suffer from this, but issue was not resolved.
I have following piece of Jade:

dom-module(id="cs-system-admin-components-modules-list")
    link(rel="import" href="style.css" type="css")
    template
        style(include="advanced-styles")
        table.cs-table(center list)
            tr
                th [[L.module_name]]
                th [[L.state]]
                th [[L.action]]
            template(is="dom-repeat" items="[[modules]]" as="module")
                tr(class$="[[module.class]]")
                    td
                        a(href="[[concat('/admin/', module.name)]]" tooltip="[[module.info]]" hidden$="[[!module.administration]]")
                            span [[module.name_localized]]
                            cs-tooltip
                        span(tooltip="[[module.info]]" hidden$="[[module.administration]]")
                            span [[module.name_localized]]
                            cs-tooltip
                    td
                        cs-icon(icon="[[module.icon]]" tooltip="[[module.icon_text]]")
                        template(is="dom-if" if="[[module.api]]")
                            cs-icon(icon="link" tooltip="[[L.api_exists]]" hidden$="[[module.api.type]]")
                            button(is="cs-button" type="button" icon="link" tooltip="[[concat(L.api_exists, '<br>', L.click_to_view_details)]]" hidden$="[[!module.api.type]]")
                            section(is="cs-section-modal" content="[[module.api.content]]")
                        button(is="cs-button" type="button" icon="book" tooltip="[[concat(L.information_about_module, '<br>', L.click_to_view_details)]]" hidden$="[[!module.readme]]")
                        section(is="cs-section-modal" content="[[module.readme.content]]")
                        button(is="cs-button" type="button" icon="legal" tooltip="[[concat(L.license, '<br>', L.click_to_view_details)]]" hidden$="[[!module.license]]")
                        section(is="cs-section-modal" content="[[module.license.content]]")
                    td(left)
                        a(is="cs-link-button" icon="home" href="[[concat('/admin/System/components/modules/default_module/', module.name)]]" tooltip="[[L.make_default_module]]" hidden$="[[!module.can_be_set_as_default]]")
                        a(is="cs-link-button" icon="database" href="[[concat('/admin/System/components/modules/db/', module.name)]]" tooltip="[[L.databases]]" hidden$="[[!module.db_settings]]")
                        a(is="cs-link-button" icon="hdd-o" href="[[concat('/admin/System/components/modules/storage/', module.name)]]" tooltip="[[L.storages]]" hidden$="[[!module.storage_settings]]")
                        a(is="cs-link-button" icon="sliders" href="[[concat('/admin/', module.name)]]" tooltip="[[L.module_admin_page]]" hidden$="[[!module.administration]]")
                        a(is="cs-link-button" icon="minus" href="[[concat('/admin/System/components/modules/disable/', module.name)]]" tooltip="[[L.disable]]" hidden$="[[!equal(module.active, 1)]]")
                        a(is="cs-link-button" icon="check" href="[[concat('/admin/System/components/modules/enable/', module.name)]]" tooltip="[[L.enable]]" force-compact hidden$="[[!equal(module.active, 0)]]") [[L.enable]]
                        a(is="cs-link-button" icon="trash" href="[[concat('/admin/System/components/modules/uninstall/', module.name)]]" tooltip="[[L.uninstall]]" hidden$="[[equal(module.active, -1)]]")
                        a(is="cs-link-button" icon="download" href="[[concat('/admin/System/components/modules/install/', module.name)]]" tooltip="[[L.install]]" force-compact hidden$="[[!equal(module.active, -1)]]") [[L.install]]
    script(src="script.js")

Eventually with pertty print it becomes this:

<dom-module id="cs-system-admin-components-modules-list">
  <link rel="import" href="style.css" type="css">
  <template>
    <style include="advanced-styles"></style>
    <table center list class="cs-table">
      <tr>
        <th>[[L.module_name]]</th>
        <th>[[L.state]]</th>
        <th>[[L.action]]</th>
      </tr>
      <template is="dom-repeat" items="[[modules]]" as="module">
        <tr class$="[[module.class]]">
          <td><a href="[[concat('/admin/', module.name)]]" tooltip="[[module.info]]" hidden$="[[!module.administration]]"><span>[[module.name_localized]]</span>
              <cs-tooltip></cs-tooltip></a><span tooltip="[[module.info]]" hidden$="[[module.administration]]"><span>[[module.name_localized]]</span>
              <cs-tooltip></cs-tooltip></span></td>
          <td>
            <cs-icon icon="[[module.icon]]" tooltip="[[module.icon_text]]"></cs-icon>
            <template is="dom-if" if="[[module.api]]">
              <cs-icon icon="link" tooltip="[[L.api_exists]]" hidden$="[[module.api.type]]"></cs-icon>
              <button is="cs-button" type="button" icon="link" tooltip="[[concat(L.api_exists, '&lt;br&gt;', L.click_to_view_details)]]" hidden$="[[!module.api.type]]"></button>
              <section is="cs-section-modal" content="[[module.api.content]]"></section>
            </template>
            <button is="cs-button" type="button" icon="book" tooltip="[[concat(L.information_about_module, '&lt;br&gt;', L.click_to_view_details)]]" hidden$="[[!module.readme]]"></button>
            <section is="cs-section-modal" content="[[module.readme.content]]"></section>
            <button is="cs-button" type="button" icon="legal" tooltip="[[concat(L.license, '&lt;br&gt;', L.click_to_view_details)]]" hidden$="[[!module.license]]"></button>
            <section is="cs-section-modal" content="[[module.license.content]]"></section>
          </td>
          <td left><a is="cs-link-button" icon="home" href="[[concat('/admin/System/components/modules/default_module/', module.name)]]" tooltip="[[L.make_default_module]]" hidden$="[[!module.can_be_set_as_default]]"></a><a is="cs-link-button" icon="database" href="[[concat('/admin/System/components/modules/db/', module.name)]]" tooltip="[[L.databases]]" hidden$="[[!module.db_settings]]"></a><a is="cs-link-button" icon="hdd-o" href="[[concat('/admin/System/components/modules/storage/', module.name)]]" tooltip="[[L.storages]]" hidden$="[[!module.storage_settings]]"></a><a is="cs-link-button" icon="sliders" href="[[concat('/admin/', module.name)]]" tooltip="[[L.module_admin_page]]" hidden$="[[!module.administration]]"></a><a is="cs-link-button" icon="minus" href="[[concat('/admin/System/components/modules/disable/', module.name)]]" tooltip="[[L.disable]]" hidden$="[[!equal(module.active, 1)]]"></a><a is="cs-link-button" icon="check" href="[[concat('/admin/System/components/modules/enable/', module.name)]]" tooltip="[[L.enable]]" force-compact hidden$="[[!equal(module.active, 0)]]">[[L.enable]]</a><a is="cs-link-button" icon="trash" href="[[concat('/admin/System/components/modules/uninstall/', module.name)]]" tooltip="[[L.uninstall]]" hidden$="[[equal(module.active, -1)]]"></a><a is="cs-link-button" icon="download" href="[[concat('/admin/System/components/modules/install/', module.name)]]" tooltip="[[L.install]]" force-compact hidden$="[[!equal(module.active, -1)]]">[[L.install]]</a></td>
        </tr>
      </template>
    </table>
  </template>
  <script src="script.js"></script>
</dom-module>

Yes, there is one empty line from the beginning, which doesn't bother me that much, what really makes me crazy is that in some random places new lines are present, but in others not.

Don't even try to tell me that I should use stylesheet to separate 2 links in order to avoid them look as single word. I understand that sometimes it might be useful, but I suppose in most cases people just got frustrated, it should work as in regular HTML out of the box. It might not be aligned, but single new line character doesn't cost anything significant.

Some option to just preserve new lines would be awesome (since you're planning to drop pretty print from core). I'm migrating from HAML, and it was so natural....

I saw #905 and #1834 and really hope that this issue will get higher priority.

[TimothyGu]

You have listed some "issues" but not in a concise format so I need to guess what this issue is all about. Plus, pretty-printing is not encouraged anyway.

Yes, there is one empty line from the beginning, which doesn't bother me that much,

Duplicate of #1913.

what really makes me crazy is that in some random places new lines are present, but in others not.

Example? I cannot see any example of such in the output you gave. (If you are talking about the new line before <cs-tooltip> it's perfectly natural since Jade assumes a tag is block-level)

Don't even try to tell me that I should use stylesheet to separate 2 links in order to avoid them look as single word.

You have mentioned #905, which is an exact duplicate of this issue with several solutions in it.

Some option to just preserve new lines would be awesome

Jade new lines are not HTML new lines. They are just separators of tokens.

Some option to just preserve new lines would be awesome (since you're planning to drop pretty print from core)

I failed to see the connection between the two clauses. And the matter of pretty printing has not been discussed recently, so I would guess the status quo will most probably be preserved.

really hope that this issue will get higher priority

The way to get higher priority is not creating duplicate issues that already have resolutions, but by adding insightful and original comments in the original issue. I have seen neither in this issue.

[nazar-pc]

Duplicate of #1913.

I saw that too, it is not actually an issue for me.

Example? I cannot see any example of such in the output you gave. (If you are talking about the new line before it's perfectly natural since Jade assumes a tag is block-level)

There is no new line after first and third <td> , but there is one after second. There are new lines before first and second </td>, but not before third.
I do not know what you mean under natural since Jade assumes a tag is block-level, they are just regular custom elements from modern web, just like a[is=cs-link-button] from the same example.

You have mentioned #905, which is an exact duplicate of this issue with several solutions in it.

First of all, that issue was closed. Second - solutions are ugly and pure hacks, while root issue still remains, there should be a way to use Jade as more convenient replacement for HTML with corresponding natural behavior (I'm using it just as simpler way to write HTML, not as templating for some framework or whatever else, just staic HTML).

Jade new lines are not HTML new lines. They are just separators of tokens.

Yes, but it would be incredible to be just a bit more than tokens separators, believe me, people will highly appreciate that.

I failed to see the connection between the two clauses. And the matter of pretty printing has not been discussed recently, so I would guess the status quo will most probably be preserved.

I had some hope that pretty print will add necessary new lines and it did partially, but since according to roadmap it will be separated, would be nice to have separate option just for new lines, so that was a connection.

TL;DR

Add --new-lines or short -l CLI option to add new lines as in original Jade template between tags:

.class
    a(href="/") Link
    span Text

=>

<div class="class">
<a href="/">Link</a>
<span>Text</span>
</div>

As simple as that. No indentation, no pretty print, just don't remove new lines.

[TimothyGu]

I feel that we need to clarify that in general pretty-printing is not encouraged.

There is no new line after first and third <td>, but there is one after second. There are new lines before first and second </td>, but not before third.
I do not know what you mean under "natural since Jade assumes a tag is block-level", they are just regular custom elements from modern web, just like a[is=cs-link-button] from the same example.

Inline elements are those between which new lines carry a meaning and cannot be used for cosmetic purposes. For example <span> is an inline element since </span><span> and </span>\n<span> are different, so we don't insert new lines. For block level elements like <div> we can safely insert new lines for indentation purposes.

And that is the reason why there is a new line after the second <td>: we assume that <cs-icon> (which is not one defined in any web standard is a block-level element and new lines can be safely inserted before it.

First of all, that issue was closed.

Because (both ugly and so-so) solutions are given.

Second - solutions are ugly and pure hacks,

While the margins can be regarded as a hack, the piped text syntax (and many others) are not.

Yes, but it would be incredible to be just a bit more than tokens separators, believe me, people will highly appreciate that.

Then "that" language would not be jade any more.

Add --new-lines or short -l CLI option to add new lines as in original Jade template between tags:

How would you write <span>a</span><span>b</span> (without space in between) with your "new line preserved" mode? Answer is, you can't without tag interpolation or one of the "ugly hacks". And that's why we don't support it.

[nazar-pc]

How would you write <span>a</span><span>b</span> (without space in between) with your "new line preserved" mode? Answer is, you can't without tag interpolation or one of the "ugly hacks". And that's why we don't support it.

The answer is however I do not need that) If I need no space between elements - I use explicit display: flex on those elements. This is how it worked for ages in HTML and it is perfectly fine.

Especially when dealing with Web Components you just can't know which elements are inline and which are not. And in such case current behavior unfortunately causes more harm than benefit.

I'm not asking about changing default behavior, there are many legitimate use cases for that. I'm just asking to add one switch that will allow to get good old HTML-like behavior. = ' ' and one more line makes it unnecessary more complex.

[TimothyGu]

The answer is however I do not need that

And this is the central problem: sorry, but we wouldn't support a new mode just because one person doesn't need a feature in the standard mode.

[nazar-pc]

And this is the central problem: sorry, but we wouldn't support a new mode just because one person doesn't need a feature in the standard mode.

Well, there is already mentioned #905 with other people who need this feature.
Also here:

• https://stackoverflow.com/questions/10516233/add-a-whitespace-at-the-end-of-the-line-in-jade
• https://stackoverflow.com/questions/12767474/space-between-inline-text-and-input-items-in-jade
• https://stackoverflow.com/questions/32118344/why-does-jade-ignore-n-and-white-space
• https://stackoverflow.com/questions/20727360/do-i-have-to-use-nbsp-for-space-in-jade
• https://stackoverflow.com/questions/17178030/jade-template-ignoring-first-space-on-line-after-pipe-symbol
• https://stackoverflow.com/questions/22876093/how-to-add-a-space-character-between-two-divs-after-jade-rendering
• https://stackoverflow.com/questions/29276580/how-to-keep-trailing-whitespace-with-gulp-jade
• https://stackoverflow.com/questions/27786288/bootstrap-button-spacing-lost-after-render-jade-template-with-express

This is what I found on first 2 pages of search results.

How much links should I add to show that I'm not the only men in this universe who need simple HTML-like behavior? At the end of the day this is just template language, why it can't work similar to HTML at least optionally? I found it superior to HAML in all features except this one, which is very annoying and objectively causes inconveniences to other people.

[alubbe]

I've only just started to really think about this, so I hope I don't repeat ideas that have been considered before.
Technically, what this issue and #905 are about are adding a single white space after the closing tag. Even adding the whitespace within the tag's content (using   or a ) would be incorrect because then each JS edit to its content would have to re-add the white space.

Thus, I have two suggestions, of which I prefer the second:

Use a modifier at the tag's declaration, similar to slim

    a(href="...")> Link1
    a(href="...")> Link2

yields

<a href="...">Link1</a> <a href="...">Link2</a> 

Similarly, < could indicate a white space before the tag and <> a white space before and after.

Interpret empty lines as a call for white space after the previous closing tag

    a(href="...") Link1

    a(href="...") Link2

yields

<a href="...">Link1</a> <a href="...">Link2</a>

Almost all solutions from #905 (comment) involve an additional line between the items. Why not use a completely empty line? Aesthetically, it looks clean and it shows some distance between the items.
Problem is, it is backwards-incompatible and potentially dangerous because we now interpret empty lines that devs may have used to simply separate their jade code for above mentioned aesthetic reasons. Nonetheless, I can report that it would be fully compatible with all code bases that I have worked on so far. It would also be something that we could only think about before 2.0.0 is released.

Would love to hear what you think.

[nazar-pc]

Completely empty line looks better than either line with = '' or using some additional > and <, but worse that if it would be possible to do without any chages in code itself.

I just do not understand why are you so strongly against HTML-like behavior via CLI switch? It doesn't cause BC break, it is completely intentional, simplifies transition from HAML/HTML and gives freedom to choose. I can't find any drawbacks.

Also there might be some modifier on top of template to indicate that this file should result in HTML with new lines, in this case it is even more explicit, doesn't depend on local environment, but requires some more work if all files in project need this modifier.

[ForbesLindesay]

Blank line as white space is actually an idea I haven't heard before. Worth considering.

@nazar-pc please read all the other issues on this topic. Repeating the same points again and again to each new person is exhausting. It wastes time I could spend getting 2.0.0 ready for release.

[alubbe]

One of the reasons I was a bit hesitant about my idea is that it would be impossible to use new lines as a visual separator without "accidentally" using this new feature and thus potentialy breaking functionalíty.

So I did some more thinking on how to disable it. Again, option 2 is my favourite.

Option 1

#section1
  (....)
/                                        or a different character: . \ // -
#section2
  (....)

yields

<div id="section1">(....)</div><div id="section2">(....)</div>

Option 2

#section1
  (....)


#section2
  (....)

yields

<div id="section1">(....)</div><div id="section2">(....)</div>

In other words, one blank lines invokes a new behaviour but two blank lines do not. Simple and beautiful.
Now I am more excited about the idea 😄

[nazar-pc]

So, to render 8 links it would take 2 * 7 + 8 = 22 lines instead of just 8, a bit too much empty space.
I think option 1 looks better, it keeps some visual connection between elements, in second it looks like completely separate blocks.

[vai]

my 2c: As for the display aspects, I think element and style definitions should be precise enough to deal with textual disparities in accordance with the HTML spec, or in the case of components, by the authors.

As regards the textual output, I have just spend a harrowing time finding an issue with a gulp build that I finally tracked down to useref's fantastic behaviour of trimming the entire line, including whatever else was on that line, including another script() jade element.

One ='\n' and that problem was sorted ...

The blank line solution above is fraught with issues, as I (as I'm sure many do) use whitespace liberally to section documents. You're introducing another whole grammar context, to avoid typing | on a blank line? Personally, I think whitespace needs to have any semantic meaning minimized, both in jade and html, but would appreciate finer textual control.

Perhaps (the backwardly compatible) -

    a(href). 
      asdf
    a(href). text

In --pretty

    <a href=""> asdf </a> 
    <a href=""> text </a> 

Else

    <a href=""> asdf </a> <a href=""> text </a> 

[alubbe]

@nazar-pc no, it would take 7 + 8 lines, the same amount as using |   or = '' in between.

@vai Could you share an example of your current code and formatting that would break if a single empty line would introduce a single white space? And could you also please print that same example with two empty lines in the appropriate place to see what it would look like?

[nazar-pc]

Ah, sorry, that is nice actually)