Seed: Proposal: Allow custom events

[MartinKavik]

It should be possible to use custom events (something like custom attributes).
We should also add missing official events.

Next step - define API.

[David-OConnor]

How would these trigger? Custom attributes and tags are straightforward since they can be interpreted arbitrarily. Can you provide an example use?

[MartinKavik]

I think there are 3 use-cases for custom events:

1. Special or new official events

• We don't have given event among the typed events because:
  
  
  
  • It's super new. Users have to wait for the new Seed release.
  
  
  • Given event is deprecated / experimental / browser specific.. etc. so we don't want it to be in typed events.
  
  
• This is an edge-case.
• I think we can handle these events with something like raw_ev(Ev::Custom("event-name"), Msg::EventName) in element macros and in window_events.

2. Web Components (custom elements)

• Event example: https://www.webcomponents.org/element/@fooloomanzoo/datetime-picker/elements/date-picker#event-input-picker-closed
• Another example in CSS-tricks tutorial (search 'dialog-closed' on that page): https://css-tricks.com/creating-a-custom-element-from-scratch/
• I think we can handle Web Component events with raw_ev in element macros.
• mathjax example uses custom element, but there aren't any events. However we can use it as a starting point and probably write a new example with a super simple custom element with some event(s).

3. Custom events triggered somewhere in JS world

• In JS libraries, HTML (inline JS scripts), workers (?), our JS/Typescript code, etc.
• An example exists - update_from_js. But I don't like it because it requires to decorate Msg enum with Deserialize and don't forget to add trigger_update_handler into window_events. So I suggest to deprecate this feature (especially because we don't need it in callbacks anymore thanks to order.clone_app(). And I think we can rewrite this example to use raw_ev in window_events.

---

So I suggest these steps:

1. Add events.json with currently used events in Seed into https://github.com/MartinKavik/html-css-db.
2. Integrate API call to events.json into Seed (similar to Styles).
3. Write events.json generator. (Probably my job and it can be done later.)
4. Add variant Ev::Custom(..).
5. Try to add an event into mathjax's custom element and handle it with Ev::Custom.
6. Write an example with simple Web Component which uses a custom event. (Probably my job and it can be done later.)
7. Rewrite update_from_js (see 3.)

[MartinKavik]

Just note - example in link Hosted seems to be old - https://github.com/David-OConnor/seed/tree/master/examples/mathjax.

[MartinKavik]

Note: related comments:

• https://github.com/David-OConnor/seed/issues/82#issuecomment-520983363
• https://github.com/David-OConnor/seed/issues/82#issuecomment-522238962

[rumanbsl]

Coming from Vue, this is one of thing I use regularly. Creating view libraries would benefit from it greatly.
Context: https://vuejs.org/v2/guide/components-custom-events.html.

[MartinKavik]

rumanbsl: "this is one of thing I use regularly"
MartinKavik: "6. Write an example with simple Web Component which uses a custom event."

@rumanbsl Thanks for comment & info. I've only written two web components and neither one needs custom events. So you have more experience with them than me - do you think you can write the example?
It should demonstrate a real-world use-case but it shouldn't be too complex to understand by beginners. And yeah, it won't work until this issue is resolved, so you don't have to create a PR, a gist would be enough to start.

Another way how you (or anybody else) can help with this issue is to find a list of all events. It will be used as the source for creating typed events - so it should be as official as possible, updated regularly, and ideally in json. It will resolve the problem of missing official events and allow us to refactor it, so implementing of custom events will be simpler / faster.
Example:
We fetch this list: https://raw.githubusercontent.com/mdn/data/master/css/properties.json, then we transform it into this list: https://github.com/seed-rs/html-css-db/blob/master/css_properties.json and then we generate typed styles from it, so you can use something like St::FlexDirection in your code.

[rumanbsl]

How would you like me to approach it? Should I create a simple .vue component that illustrates the usecase, or it has to be a Seed example per say? I am pretty new to Seed, and Elm architecture overall. If you can write the steps in brief, that would help :)

[MartinKavik]

@rumanbsl If you can write a runnable example in Vue (so I can clone it and try it on my PC), we can discuss it and then try to implement it in Seed 1:1.

[rumanbsl]

https://codesandbox.io/s/vue-f67nh?fontsize=14&hidenavigation=1&theme=dark

This is very simple child to parent relation component. But serves the purpose

[MartinKavik]

I've created a Seed example that mirrors the Vue one - https://github.com/MartinKavik/seed/tree/example/children/examples/children/src (you can clone it and run with cargo make start children from the root).
However I don't know why events would be better than standard messages. Do you have some ideas?

[rumanbsl]

I didn't know that, I can pass standard messages from child to parent (with data). If it is possible, I am definitely up for adapting the paradigm. The solution you provided works just how I wanted it to be just FYI

[MartinKavik]

@rumanbsl Yeah, there are more paradigms / ways how to write submodules (aka components) in Seed and Elm. It's probably the simplest one. Let me know when you encounter some problems with it while you are working on a Seed project.
In general, everything should be doable with messages, exception should be only WebComponents or some JS libraries.

@flosse I see you liked the comment above - do you want to share and idea / opinion?

[rumanbsl]

Not relevant to the issue:
I would actually suggest to provide guidelines bearing in mind many of web developers are familiar with React/Vue architecture. Side by side code examples of how to do thing in both React/vue and Seed would clear potential confusion/question.

One other note is that, I would be happy to contribute. The contribution guideline seems to lack a way of introducing codebase to others. PostCSS team has done outstanding job in their Contribution page. Especially the Core development part is well written. In my opinion this is very important to attract contributors, and Seed should have such kinds of detailed document.

Thank you @MartinKavik for quick response. You and @David-OConnor are doing really good job :)

[David-OConnor]

Agree on code comparisons. We can start with an additional page on the guide. I'm unable to help with Vue comparison, but will add React content.

[rumanbsl]

I can help with Vue if needed

[MartinKavik]

Custom events have been implemented in PR https://github.com/seed-rs/seed/pull/330. You can create them in the same way like Tag, At or St.
Example:

div![
    ev(Ev::from("my-event"), |event| Msg::MyEventFired),
]

New event API will be designed here: https://github.com/seed-rs/seed/issues/331