Polight/lego

Syntax for attributes

Closed this issue · 8 comments

vinyll commented

Lego permits to deal with special attributes for conditions, loops, booleans and events.
A syntax has to be defined.

The examples below are considering this context: this.state.people = ['John', 'Maria', 'Socrate']

Conditions

Conditions are evaluated in the :if="${ trueOrFalse }" attribute.

<div :if="${ this.state.people > 5 }">Too many people are present</div>

Condition is false, tag won't be displayed.

<div :if="${ this.state.people < 5 }">Everyone may join</div>

Ouput:

<div>Everyone may join</div>

Loops

A loop attributes is declared as :for="${ itemName in collection }" where collection is the array of items and itemName is the name of the variable in the loop.

<ul>
  <li :for="${ person in this.state.people }">${ this.person }</li>
</ul>

Ouput:

```html
<ul>
  <li>John</li>
  <li>Maria</li>
  <li>Socrate</li>
</ul>

Boolean evaluation

An attribute that ends with a ? will be given a value when true or removed when false.

This is especially useful for attributes like required, checked, selected, …

<input type=checkbox checked?="${ this.state.length > 5 }">

Ouput:

<input type=checkbox>
<input type=checkbox checked?="${ this.state.length < 5 }">

Ouput:

<input type=checkbox checked="checked">

Events

Events are declared with a on- attribute prefix.

<input type=checkbox on-change="this.boxHasChanged">

<script>
  this.boxHasChanged = (event) => {
    alert(`box is now ${ event.target.checked ? 'checked' : 'unchecked' }`)
  }
</script>
vinyll commented

Other proposal, all Lego attribute are prefixed with a semicolumn

Condition

<div :if="this.state.people > 5">Too many people are present</div>

Loops

<li :for="person in this.state.people">${ this.person }</li>

Boolean

<input type=checkbox :checked="this.state.length > 5">

Events

<input type=checkbox :on-change="this.boxHasChanged">
vinyll commented

Other proposal, all Lego attribute are prefixed with a semicolumn:

## Condition

<div :if="this.state.people > 5">Too many people are present</div>

## Loops:

<li :for="person in this.state.people">${ this.person }</li>

## Boolean:

<input type=checkbox :checked="this.state.length > 5">

## Events

<input type=checkbox :on-change="this.boxHasChanged">
fuentesloic commented

@vinyll In my personal point of vue, it's better to keep the same syntax for all attributes.
It's pretty complicated for the user to remember it et maybe not relevant to change the syntaxe according attribute role.
About event, if we use a semicolon, the on- part could be free to use by user or not. If I wish write :change because I prefer, it's should be work.

What do you think ?

vinyll commented

personal point of view vue

💙 😃

I do share the perspective of having one single syntax for all attributes and considering the :attr syntax.

About the events syntax I also had in mind to be able to write :click or :input. However I feel like it could interfere (reading or even in the HTML list) with the boolean attributes.
ex: <textarea :input="this.fill" :valid="this.valid"> vs <textarea :on-input="this.fill" :valid="this.valid">.

It could also be :oninput, though I feel like it could lead to some weird behavior like trying to call a boolean with a name starting with on (I don't have an example in HTML but it could be for some custom webcomponent) would be interpreted as an event.

What do you think?

fuentesloic commented

Oh I see but if you add :on- to indicate it's not a boolean why you don't write for boolean :bool-input and also :str- ... and create a typing to validate which kind of value you need or you want ??

If not use :on- is understandable and pretty a standars.

vinyll commented

I've updated the demo that is now fully working with the syntax you preferred: https://github.com/vinyll/lego/blob/master/demo/components/todo-list.html and https://github.com/vinyll/lego/blob/master/demo/components/user-details.html.

If we want to convert from :on-eventname to :eventname, I'm not sure how to distinguish an event from a boolean. We could indeed prefix all boolean with :bool- but it would be heavier.

I'm not sure how to make it easier so far.
Can you have a look at the demos and let me know what you think?

vinyll commented

I'm thinking we could have converters to apply what you say: on:input="…", bool:required="…", int:age="…".

That could be interesting but I don't see the use cases so far (except on:… for events).
Would that on:click syntax be clearer with you?
It is closer to what VueJS does.

vinyll commented

The latest was chosen. Thanks @fuentesloic for feedbacks and opinions.

:if, :for, :<attr_name>, and on:<event_name> is the way to write special attributes.
Their value is plain text. Ex: <input :checked="this.state.gender === 'woman'" name="gender" />