The good, the bad

:( ⸻ Mutant

[State]
var x : [uint] = [];

x.push(10); // BAD

:) ⸻ Mutant

[State]
var x : [uint] = [];

x = [...x, 10] // GOOD

^{You can also implement deriveds.}

:( ⸻ Functions

final = (
    <cset:Evaluator
        functions={[ function():uint(10)
                   , function():uint (0) ]}/>
)       // BAD

^{Callback caching (whack.ds.useCallback) only occurs implicitly for Functions assigned to the whole attribute.}

:( ⸻ Functions

final = (
    <cset:Evaluator>
        <cset:functions>
            {[
                function():uint (10), // BAD
                function():uint  (0), // BAD
            ]}
        </cset:functions>
    </cset:Evaluator>
)

^{Callback caching (whack.ds.useCallback) only occurs implicitly for Functions assigned to the whole attribute.}

:( ⸻ Functions

final = (
    <cset:Evaluator>
        <cset:finish>
            {function(){doIt()} /* BAD */}
        </cset:finish>
    </cset:Evaluator>
)

^{Callback caching (whack.ds.useCallback) only occurs implicitly for Functions assigned to the whole attribute when using a syntactic XML attribute.}

:) ⸻ Functions

final = (
    <cset:Evaluator
        finish&={doIt()}  />
)       // GOOD

:) ⸻ Functions

final = (
    <cset:Evaluator
        finish={function(e){doIt()}} />
)       // GOOD

:( ⸻ Props

class Box extends UIComponent {
    function Box({ x } : Props) {
        super()
        whack.ds.useEffect(function() {
            if (x == 0) {
                trace("zero!")
            }
        });
        final = (
            <></>
        )
    }

    type Props = tap {
        x : uint,
    }
}

:) ⸻ Props

class Box extends UIComponent {
    function Box(props : Props) {
        super()
        whack.ds.useEffect(function() {
            if (props.x == 0) {
                trace("zero!")
            }
        });
        final = (
            <></>
        )
    }

    type Props = tap {
        x : uint,
    }
}

:) ⸻ Evaluation order

class Box extends UIComponent {
    [Bindable]
    var outside : uint;

    function Box(props : Props) {
        // 1 - super
        super()

        // 2 - variable initials & custom hooks
        outside = props.outside;
        ...

        // 3 - effects & custom hooks
        ...

        // 4 - final
        ...
        final = (
            <></>
        )
    }

    type Props = tap {
        outside : whack.ds.BindableReference.<uint>,
    }
}