Allow to capture the content of a variable with Qute

[ia3andy]

Description

Currently, it is not possible to create variable with complex logic.

For example, lets imagine you want to create a variable faClass (font-awesome) for the icon that represent an admonition block based on the admonition type.

{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}

Having this code in the <i class=""/> would be error prone (spaces) and ugly.

For this case we need something similar to Liquid for Jekyll capturetag: https://shopify.dev/docs/api/liquid/tags/capture

Here is a workaround, but it's not very elegant and user-friendly:

{#fragment id=faClass rendered=false}
{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}
{/fragment}

<p class="admonition {type}">
<i class="{#include $faClass}"></i>
{nested-content}
</p>

Implementation ideas

{#set}
{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}
{#as faClass}
<p class="admonition {type}">
<i class="{faClass}"></i>
{nested-content}
</p>
{/set}

[quarkus-bot]

/cc @mkouba (qute)

[ia3andy]

It could also be used without the ending {/set} like {#let}:

{#set}
{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}
{#as faClass}
<p class="admonition {type}">
<i class="{faClass}"></i>
{nested-content}
</p>

[ia3andy]

FYI @mkouba, I created the issue, but this is coming from a Roq user.

[mkouba]

I don't understand how is the proposed implementation more elegant and more user-friendly compared to the hidden fragment workaround, which is IMO not a workaround at all but a good fit for this kind of stuff.

Furthermore, I think that a user tag like faClass.html could be an idiomatic solution (because it could used anywhere in the app):

{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}

and then in the template:

<p class="admonition {type}">
<i class="{#faClass _unisolated /}"></i>
{! or just {#faClass type=type /} !}
</p>

[ia3andy]

Ok but then you can't use {faClass.trim} for example or whatever. I really think have a way to do it with variable would be way better..

To go your way, at least we could make it a bit simpler by creating an alias for {#fragment id=faClass rendered=false}.
We could name it {#capture faClass} ,register or declare.

[ia3andy]

I think I could be settle if we allow to declare local user tags if that's a possibility:

{#tag faClass}
{#when type}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/when}
{/}
<p class="admonition {type}">
<i class="{#faClass /}"></i>
{nested-content}
</p>

[mkouba]

We have a couple of options but I'd like to keep the naming consistent. One of the reason is that user tags are isolated by default (cannot reference the data from the parent context) but fragments are not. So we should name those parts "fragments" but make it easier to use.

I think that we should add a fragment namespace resolver so that it's possible to use a fragment in an expression, e.g. {frg:faClass}; this would allow thins like {frg:faClass.strip} or {#let preview=frg:faClass.substring(0,10)}. The downside of this approach is that you can't use additional params. We could try to add something later.

It should be also easier to define a hidden fragment too. {#fragment id=faClass rendered=false} can be shortened to {#fragment faClass rendered=false} but I think that we can follow the syntax of {#include} and add the _hidden flag, i.e. {#fragment faClass _hidden}. Alternatively, we could add an alias like hidd_fragment -> {#hidd_fragment faClass}.

[ia3andy]

That's sounds very good, I would just use {#capture} as the name that means {#fragment hidden=true}.

Having a shortcut to avoid having to specify the id would be great like you suggested {#capture foo} = {#capture id=foo}.

For consumption having a namespace is perfect as it solve the coping issue. Let's have {fragment:foo} and {capture:foo} be aliases for usage sake:

{#capture faClass}
foo
{/}
bar {capture:faClass}

=>

bar foo

[ia3andy]

To use the example from the issue so you have a test :)

templates/tags/admonition.html

{#capture faClass}
{#when type??}
  {#is "info"}
    fa fa-lightbulb
  {#is "warning"}
    fa fa-exclamation-triangle
  {#is "error"}
    fa fa-times-circle
  {#is "success"}
    fa fa-check-circle
  {#is "question"}
    fa fa-question-circle
  {#else}
    fa fa-info-circle
{/}
<p class="admonition {type ?: 'info}">
<i class="{capture:faClass}"></i>
{nested-content}
</p>

used like

{#admonition}
Hello World
{/}

{#admonition type="warning"}
It's dangerous
{/}

=>

<p class="admonition info">
<i class="fa fa-info-circle"></i>
Hello World
</p>

<p class="admonition info">
<i class="fa fa-exclamation-triangle"></i>
It's dangerous
</p>