Proposal: Generic launch example

[stevechy]

I was trying out Tyrian and wrote a simple launcher based on how react-rails mounts elements.

There's some extra Promise wrapping around it but the basic idea is.

        for {element <- dom.document.querySelectorAll("[data-tyrian-app]")
             } yield {
          val htmlElement = element.asInstanceOf[HTMLElement]
          htmlElement.dataset.get("tyrianApp") match {
            case Some("MyCustomApp") => {
              println("Launching")
              new MyCustomApp().launch(element)
            }
            case _ => ()
          }
        }

Flags could also be read from the dataset

Does this seem useful?

[davesmith00000]

Yes I like it. So if I'm reading it right, the idea would be to launch from the main method, and that essentially does the above? (+ flags in the dataset)

Have I got that right?

One of the common questions I get quite often is "why can't I just use the main method?" and the answer is of course that you can! ...but we don't have many examples, nor is there a good built in solution for that.

[stevechy]

Yep, I'm currently launching this from the main method. It looks like if the bundle is loaded as a regular script vs module it has to wait for DOMContentLoaded so I also have some handling for that.

I could create a PR with an example in the examples folder?

[davesmith00000]

Hi @stevechy - I was wondering about baking it into the main launcher, here somewhere:

https://github.com/PurpleKingdomGames/tyrian/blob/main/tyrian/js/src/main/scala/tyrian/TyrianAppF.scala

Although I confess that at the moment I don't know exactly what that would look like!

If you felt like having a go, you could either work on the main launcher, or add an example - as you suggested - that we could use as the basis for the launcher version later (that I could help with). It would be great to have either contributed if you have the time, no pressure. 😄

[stevechy]

Ok, I created #200 I guess I should have made it a draft.

[stevechy]

Having multiple apps probably doesn't fit with the Elm Architecture but I find it useful to get things up and running.

  <div data-tyrian-app="CounterApp" data-tyrian-app-flag-initial-counter="42"></div>

  <div data-tyrian-app="ChatApp" data-tyrian-app-flag-initial-message="Hello"></div>

[davesmith00000]

The PR has been merged and this feature will be in the next release - thanks for all the work @stevechy! 😄

[stevechy]

That's great! Looking forward to using this instead of the messy version in my current project 😄