MVCoconut / coconut.vdom

Coconut rendering through virtual-dom.
The Unlicense
19 stars 8 forks source link

Obscure bug about nullable function attribute (?) #32

Closed kevinresol closed 3 years ago

kevinresol commented 4 years ago
class Main extends View {
    @:state var mystate:Int = 1;

    function render() '
        <div>
            <p>State: ${mystate}</p>
            <Menu onClick=${getClick(mystate)}/>
            <button onclick=${toggle}>Toggle</button>
        </div>
    ';

    function toggle() {
        mystate++;
    }

    inline function getClick(state:Int):Void->Void {
        trace('compute ${state}');
        return state == 1 ? function() trace('clicked') : null;
    }

    static function main() {
        mount(document.getElementById('app'), hxx('<Main/>'));
    }
}

class Menu extends View {
    @:attr var onClick:Void->Void = null;
    function render() '
        <div>
            <Button onClick=${onClick}/>
        </div>
    ';
}

class Button extends View {
    @:attr var onClick:Void->Void = null;
    function render() '
        <button onclick=${onClick}>Button</button>
    ';
}

Expected behavior

  1. This should start with state = 1.
  2. When "Button" is clicked, it should trace "clicked"
  3. When "Toggle" is clicked, state will become 2
  4. When state is 2, getClick should produce a null callback and clicking "Button" should do nothing.

Actual behavior:
At step 4: getClick is never called with state = 2 and clicking "Button" will still trace "clicked"

Note: I found that the <div> in Menu is critical. Removing it will make it behave as expected.

vdom version 35a8d8d88553058151da69af3719a945df55894a dependencies should be at latest git head as at time of writing

kevinresol commented 4 years ago

Another note: Removing <p>State: ${mystate}</p> fixes it too