Component lifecycle hooks

[rsaccon]

First, this framework looks very promising and the getting-started experience was very smooth thanks to the excellent documentation! I ported an app I started with yew to seed.

Now I would like to perform some DOM actions after a component has been inserted in the DOM, such as focus an input form element. Is this possible ?

[David-OConnor]

Something like this in Angular?

I was able to add a focus-selector to the counter example with the addition of the following code:

use wasm_bindgen::JsCast;   // Not required once seed::to_html_el is live

// in Msg:
    Focus(&'static str),

// (in update):
        Msg::Focus(el_id) => {
            let document = web_sys::window().unwrap().document().unwrap();
            let input = document.get_element_by_id(el_id).unwrap();
            let input = input.dyn_into::<web_sys::HtmlElement>().unwrap();
            // let input = seed::to_html_el(&input);
            input.focus().unwrap();
            model
        }
/// In bottom of view func:
        input![ attrs!{"id" => "A"} ],
        input![ attrs!{"id" => "B"} ],
        input![ attrs!{"id" => "C"} ],
        button![ "Focus A", simple_ev("click", Msg::Focus("A")) ],
        button![ "Focus B", simple_ev("click", Msg::Focus("B")) ],
        button![ "Focus C", simple_ev("click", Msg::Focus("C")) ],

Thoughts: This approach is probably prone to bugs in more complicated cases, eg if the input els are destroyed/recreated. Could add a more convenient way to access the window document, since what I posted is verbose. Added seed::to_html_el, to avoid having the user import JsCast, and to simplify syntax. (eg commented code above) web_sys::Element doesn't have focus(); only web_sys::HtmlElement.

More importantly, while this seems to work for your specific example, something more flexible that can be triggered by diff events (destroy, create etc) is needed.

[rsaccon]

thanks for your thoughts and the code example which illustrates how to interact with the underlying domNode.

About the life cycle hooks, I was thinking of react componentDidMount, componentWillUnmount, (there are more). I guess most virtual dom based frameworks have something like that. One common use case: integrating third party JS widgets.

[David-OConnor]

Adding this to the to-do list. Top priority is the Fetch (Get/Post data from server) API; will probably prioritize this over routing.

[David-OConnor]

@rsaccon Implemented. Check out the docs, and examples/counter with version 0.1.11. I'm ill-acquainted with the concept, so let me know if this is correct. If so, I'll close this issue.

[rsaccon]

This looks great! According to my understanding, this is correct. Perfectly documented and I look forward to build a more complex example, eventually I would like to do animations (but I don't know yet how exactly ...)