Discussion: Options for property syntax.

[JSideris]

Ideal form:

const MyComp = dot.component({
    builder(){
        this.myProp = 0;
        return dot.span(this.myProp);
    },
    ready(){
        setInterval(function(){
            this.myProp++;
        }, 1000);
    },
    props:["myProp"]
});

dot.h(MyComp());

Challenges:

this.myProp is evaluated before dot.span(). Also doesn't support calculated values. Very tricky to solve.

Option 1: Properties as a function.

const MyComp = dot.component({
    builder(){
        this.myProp = 0;
        return dot.span(()=>this.myProp);
    },
    ready(){
        setInterval(function(){
            this.myProp++;
        }, 1000);
    },
    props:["myProp"]
});

dot.h(MyComp());

When dot.span callls the function, it will indicate in an internal metadata structure that it is calling a function. Then when the function executes, for the first time, the property will learn to be bound to that html element.

The downside of this is that it may break the existing function syntax. This may honestly be the best (only) way to do it...

Here is how arrays will work:

const MyComp = dot.component({
    builder(data){
        this.myData = data;
        return dot.ul(
                dot.forEach(()=>this.myData, (v)=>
                    dot.li(v.value)
                );
        );
    },
    props:["myData"]
});

var data = [];
dot.h(MyComp(data));

data.push({value: 5});
data.push({value: 3});
data.push({value: 1});