Conditional display of elements for asynchronous properties
Pug allows for conditional rendering based on synchronous properties
if user.is_anonymous
li ...
But it doesn't allow for conditional rendering on asynchronous properties
if ${await value.name}
The value can be conditioned using a ternary operator
li ${await value.name ? await value.name : ""} ${await value.name ? "," : ""} ${await value.fee ? await value.fee:0}%
The problems with this are that it's disgusting and that I'm unable to make the list element conditional (without hacking around pug into HTML with await value.name ? "<li ...></li>" : ""
)
I think this is a difficult problem to solve without making sib-core encompass template rendering
Update (26/04/21)
Specification
The goal is to be able to show content based on the comparison of a resource values
Solid If
A solid-if
is a component which renders what is inside himself if the condition returns true
. It should empty himself if it returns false
.
<solid-if
data-src=""
field=""
field-option=""
value=""
operation=""
>
<p>some html here. Available vars: ${value}, ${src}</p>
</solid-if>
solid-if
s can be nested to handle multiple conditions.
It accepts the following attributes:
-
data-src
: uri of the resource to use for the comparison -
field
: field of the current resource (can be avalue
, aresource
or acontainer
). If empty, it uses the current resource as a comparison element. -
field-option
: modificator for the field. For now, we would allow:-
counter
which returns the number of elements if field is a container
-
-
value
: value to compare with (can be astring
, aresource
, acontainer
or aregexp
). Thestore://
syntax should be available here, and is resolved with the resource of thedata-src
. -
operation
: which operator to use for the comparison
In the template, you can use some variables:
-
value
: value of the field currently compared -
src
: resource id of the parentsolid-display
Operators
Here are the operators we may need based on the type of data we check
- number:
> < <= >= == !=
- string:
== != regexp
- resource:
== !=
(only compare the @id) - container:
in not_in contains not_contains
solid-display
Use in We can nest solid-if
in a solid-widget
. The solid-widget
will automatically set the data-src
attribute on all the solid-if
inside himself.
<solid-display
data-src="https://api.test3.startinblox.com/circles/1/"
field="fakeField"
widget-fakeField="condition-fakeField"
></solid-display>
<solid-widget name="condition-fakeField">
<template>
the template with some conditions
</template>
</solid-widget>
Examples
<solid-widget name="check-a-value">
<template>
<solid-if field="name" value="John" operator="==">
Ton nom est John
</solid-if>
</template>
</solid-widget>
<solid-display
data-src="https://api.test3.startinblox.com/users/jbpasquier/"
field="name, youAreJohn"
widget-youAreJohn="check-a-value"
></solid-display>
<solid-widget name="check-if-member">
<template>
<solid-if field="members" operator="contains" value="store://user">
Tu es membre de ce cercle !
</solid-if>
<solid-if field="members" operator="not_contains" value="store://user">
Tu n'es pas membre du cercle !
</solid-if>
</template>
</solid-widget>
<solid-display
data-src="https://api.test3.startinblox.com/circles/1/"
field="name, join"
widget-join="check-if-member"
></solid-display>
<solid-widget name="check-a-validity">
<template>
<solid-if field="name" operator="regexp" value="[a-zA-Z0-9]+">
Your name is ${value}. Also available like this:
<solid-display data-src="${src}" fields="name"></solid-display>
</solid-if>
</template>
</solid-widget>
<solid-display
data-src="https://api.test3.startinblox.com/users/jbpasquier/"
field="name, yuHaveAValidName"
widget-yuHaveAValidName="check-a-validity"
></solid-display>
Estimation
-
solid-if
: 5d-
base structure (mixins, fetch data and values, ...): 1d -
all comparisons: 2d -
rendering: 1d -
tests: 1d
-
-
solid-display
integration & tests: 2.5d
Total: 7.5d