Feature request: Provide a way to skip outputting whitespace

[landyacht]

Because browsers add space between certain elements when there is space around their tags in the HTML, sometimes writing raw HTML you'd do something like this:

<p> To learn more, click <a href="...">this link</a>. </p>

Note the lack of whitespace between the ending anchor tag and the punctuation.

However, when generating HTML via a Cro template, getting this effect becomes unwieldy. Consider the following:

<p>
    <@.elements>
        <?{ .type eq 'text' }>
            <.text>
        </?>
        <!?{ .type eq 'link' } a href="<.target>">
            <.link-text>
        </?>
    </@>
</p>

To have punctuation immediately next to an anchor tag, we'd have to scrunch this code mostly onto one line. Otherwise, the spacing in the source crotmp file gets preserved in the generated HTML. Might I suggest a backslash to render any amount of following whitespace "insignificant"?

        <!?{ .type eq 'link' } a href="<.target>">\
            <.link-text>\
        </?>\

Some kind of "auto-minify" setting on the template render call might be nice as well, but less granular.

[FCO]

@landyacht have you tried removing the new lines on template?

If I run:

use Cromponent;
class Bla does Cromponent {

   has @.elements = { type => 'link', target => 'target', link-text => 'blablabla' },;

   method RENDER {
      q:to/END/;
      <p>
         <@.elements>
            <?{ .type eq 'text' }>
               <.text>
            </?>
            <!?{ .type eq 'link' } a href='<.target>'>
               <.link-text>
            </?>.
         </@>
      </p>
      END
   }
}

say Bla.new.Str

It prints:

<p>
<a href='target'>         blablabla
      </a>.
</p>

But if I run this:

use Cromponent;
class Bla does Cromponent {

   has @.elements = { type => 'link', target => 'target', link-text => 'blablabla' },;

   method RENDER {
      q:to/END/;
      <p>
         <@.elements>
            <?{ .type eq 'text' }><.text></?>
            <!?{ .type eq 'link' } a href='<.target>'><.link-text></?>.
         </@>
      </p>
      END
   }
}

say Bla.new.Str

it prints it with no spaces:

<p>
      <a href='target'>blablabla</a>.
</p>

[FCO]

I couldn't find now, but it says about spaces on the documentation...

[landyacht]

The idea would be not to have the punctuation hard-coded, so you might have a text element Text.new(text => 'To learn more, ') then a link Link.new(target => 'https://example.com/', link-text => 'click here'), then another text element Text.new(text => '. Or, read on...').

What I'm looking for is a way to put those together generically without introducing space in between, but also without cramming all the template syntax together without spacing.

[FCO]

If the opening and closing iteration tags are the only thing on the line, then no output will be generated for those lines, making the output more pleasant.

https://cro.raku.org/docs/reference/cro-webapp-template-syntax

[librasteve]

@landyacht

Looking at your last comment, I feel that you may be looking for a better way to compose "components" than vanilla Cro templates offer. Here I imagine that a component is a snippet of HTML which can take parameters.

Here's what you could write with Cromponents - is this the sort of thing you have in mind?

class Text does Cromponent {
    has $.text;

    method RENDER {
        Q|<.text>|
    }   
}

class Link does Cromponent {
    has $.target;
    has $.link-text;

    method RENDER {
        Q|<a href='<.target>'><.link-text></a>.|
    }   
}

class Para does Cromponent {
    has $.type;
    has $.text;
    has $.link;

    method RENDER {
        q:to/END/;
        <p> 
            <?{  .type eq 'text' }><.text></?>
            <!?{ .type eq 'link' }><.link></?>.
        </p>
        END 
    }   
}

my $text = Text.new( text => 'To learn more, ' );
my $link = Link.new( target => 'https://example.com/', link-text => 'click here');

say Para.new( :type<link>, :$link ).Str;

NB. This does not quite work, I will leave it to @FCO to advise us the right way for a Cromponent to embed another.

[FCO]

Sorry, I only used Cromponents as a easy way to test Cro templates...

[librasteve]

@FCO - well when @landyacht writes a link Link.new(target => 'https://example.com/', link-text => 'click here'), then that makes me think of Cromponent. ;-)

just thought I'd check if that would be more what they want...

[landyacht]

@librasteve I wouldn't want a period after every link though, just some. What I'm aiming for is a way to have that period in the next Text element without space between the ending anchor tag and that text, but also without having tags directly adjacent in the template code. Some links might also abut other punctuation, such as quotes which could come immediately before, after, or both.

[librasteve]

@landyacht - ok fine lets set aside Cromponent (except that it's a good way to quickly test Cro template output).

I like you idea of the trailing \, if everyone is happy with adding that syntax to the Cro template Grammar, I'll go spelunk into the Grammar and see how the current ws propagation works and if we can suppress it.

[FCO]

use Cromponent;
class Text does Cromponent {
    has $.text;

    method RENDER {
        Q|<.text>|
    }
}

class Link does Cromponent {
    has $.target;
    has $.link-text;

    method RENDER {
        Q|<a href='<.target>'><.link-text></a>|
    }
}

class Para does Cromponent {
    has $.type;
    has $.text;
    has $.link;

    method RENDER {
        Q:to/END/;
        <p> 
            <?{  .type eq 'text' }><&HTML(.text)></?>
            <!?{ .type eq 'link' }><&HTML(.link)></?>.
        </p>
        END 
    }
}

my $text = Text.new( text => 'To learn more, ' );
my $link = Link.new( target => 'https://example.com/', link-text => 'click here');

say Para.new( :type<link>, :$link ).Str;

prints:

<p> 
    <a href='https://example.com/'>click here</a>.
</p>