Hooking into lifecycle events for cleanup about seed HOT 24 CLOSED

I investigated it a little bit and found some related discussions in the Elm world:

1. elm/virtual-dom#11
2. elm/html#19

It looks that hooks are useful in some special cases but Elm still doesn't support them because we don't need them in the most cases and it can be hard to design it properly.

Back to specific use-cases:

1. @zimond's one - Canvas element

   • There is Elm library which uses custom element (see elm-canvas.js and element creation). So we can use custom elements for cases like this but I don't know if it's a workaround or a proper solution.

2. @jgrund's one - Propagate validation state of an input to the model

   • It sounds a little bit weird to me but we probably need more context here.

3. @johnsonw's one - Stop fetching on component unmount when leaving page

   • At the moment, we are slowly integrating seed into an existing app, so we are not at the point where we are using routes (I think I could hook into there if I was).

     • I agree with you that you should "listen" route/page changes (or some other reliable events) instead of a component unmount. (Un)mounting is async because Seed waits for the next animation frame to rerender page so It's possible that according to your Model you are already on the other page but it still fetches.
       So it seems like an anti-pattern to me and you can probably use some workarounds while you are integrating Seed into existing application.

from seed.

The API I'm thinking for this is a seed::update function which accepts a message, that can be called anywhere. Need to sort out the implementation, if it's feasible. Would like to avoid passing it down through the view fn like before.

from seed.

It might be more feasible to implement having the lifecycle hooks return an Option that can be used to update state once complete with side-effects.

from seed.

WIP API: did_mount(|_| log!("mounted")).update(Msg::DoThis)

from seed.

Added my progress to latest commit (Breaks tests, but not code). Panics if you attempt to use the .update2() syntax described above. Hoping this is an easy fix, but perhaps my approach is intractable.

from seed.

Note: Tests are currently broken due to this WIP change. Expect them to be broken until resolved.

from seed.

Thanks @David-OConnor, will take a look at this when I get a chance.

from seed.

@MartinKavik fixed the tests, and the PR he referenced above will likely be the solution to this issue.

from seed.

update2() doesn't do anything for me, it's not sending any messages.

Anyways, this API does not provide a way to pass the node passed to the lifecycle closure to the event. I'm trying to integrate a canvas element into seed, which needs both the model and the HtmlCanvasElement (aka Node) at the same time. Seed provides a canvas! macro, but I don't think it can actually be used at this point.

from seed.

Didn't get update2 (WIP name) working yet. Still need to fix.

from seed.

Any progress here?

from seed.

Nope

from seed.

Is this able to be handled by seed::update?

from seed.

Is there a way to do this in 0.4.0? Looks like the update2 fn has been removed.

Would it be possible to have the lifecycle hooks return a message?

from seed.

@jgrund Could you provide an example(s) so we/I can help you resolve your issues and it's clear what are you trying to do?

Note: In 0.4.0 you can get App instance to call app.update(..) from orders.
Example: https://github.com/David-OConnor/seed/blob/master/examples/animation_frame/src/lib.rs#L72

from seed.

@MartinKavik Sure, in my case I'm trying to propagate the validation state of an input to the model when did_mount fires. There doesn't appear to be an easy way to do this within the view.

from seed.

I haven't used hooks before so I've created a simple example from the quick source code exploration: https://github.com/MartinKavik/seed/blob/demo/did_mount/examples/did_mount/src/lib.rs.
But it doesn't work and API seems a little bit weird on the first glance.

So I suggest to :

1. Create a new issue dedicated to general hook APIs.
2. Find out current state of hooks.
3. Prepare some real-world examples because hooks can be easily abused to do VirtualDOM's work by reading and modifying DOM and it's hard to debug it. And we need something for integration tests.
4. Think a little bit about how to integrate JS components into application (I think it can be related to hooks and patch algorithm).
5. Redesign API if necessary.
6. Write some unit tests and implement it.

@David-OConnor what do you think?

from seed.

I don't use hooks myself, here or elsewhere - if there are ways around them in most cases, we can ditch the hooks api entirely. Need a good understanding of what the common use-cases.

from seed.

My use case: I use a hook into a canvas element and render the canvas when it's initialized. I think this could be quite common for html canvas-heavy apps

from seed.

Some more context, I am utilizing the built-in HTML5 validation API: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Using_built-in_form_validation.

My usecase is conceptually simple; I want to display the error message from a required attribute when the element mounts on the page. I want to do this with a custom error tooltip. Ex:

The tricky part is that the DOM controls essentially own that error message (accessible via https://docs.rs/web-sys/0.3.25/web_sys/struct.HtmlInputElement.html#method.validation_message, so I need a way to persist that message to the model when the component loads so it can be rendered into that tooltip.

If I could trigger a message when the element mounts, I could persist it through the update fn.

If there is some other way to utilize that message in the tooltip on page load (rather than hooks), I'd be happy to do that as well.

from seed.

I've created an example of custom "tooltip" with an error message.

• https://github.com/MartinKavik/seed/blob/demo/did_mount/examples/did_mount/src/lib.rs
• You can clone branch and run cargo make start did_mount from the root.

However there is one thing which I don't understand:

in the tooltip on page load

@jgrund: Why on page load? - When do you run form validation?

P.S. There is Ev::Invalid in example. It's missing in Seed, it's todo - I'll probably create a new issue or add missing events.

from seed.

if there are ways around them in most cases, we can ditch the hooks api entirely

I'm starting to agree with @David-OConnor. See this comment: #200 (comment). Custom elements seem to be a better alternative (also in Elm world - see https://guide.elm-lang.org/interop/custom_elements.html).

To support custom elements we probably just need to add API to support custom events (and it will be nice to add missing official events as well). I'll create an issue if we agree on this.

from seed.

FYI, there is a new API and examples:

@zimond's - Canvas element

• see the canvas example :)
• and JS custom element
• and Typescript custom element

@jgrund

If there is some other way to utilize that message in the tooltip on page load (rather than hooks), I'd be happy to do that as well.

I think you can use also the new API orders.after_next_render. See canvas example.

I think we can close the issue.

from seed.

@MartinKavik Thank you for the updates. I'll close the issue.

from seed.