Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component lifecycle hooks #5

Closed
rsaccon opened this issue Dec 18, 2018 · 5 comments

Comments

@rsaccon
Copy link
Contributor

@rsaccon rsaccon commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Member

@David-OConnor David-OConnor commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@rsaccon rsaccon commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Member

@David-OConnor David-OConnor commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Member

@David-OConnor David-OConnor commented Dec 22, 2018

@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 comment has been minimized.

Copy link
Contributor Author

@rsaccon rsaccon commented Dec 22, 2018

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 ...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.