tidenjs / tiden

Build dynamic web applications using streams, nano-frontends, and modern native web technology
MIT License
13 stars 6 forks source link

"render" nanos #17

Open mikabytes opened 3 years ago

mikabytes commented 3 years ago

Is your feature request related to a problem? Please describe. Currently when we want to run several nanos on the same page, often nested within each other, there's a lot of boilerplate code for settings things up. Many steps of createElement/appendChild, and the result is less than intuitive.

Describe the solution you'd like It'd be nice if we could borrow inspiration from lit-html and develop a function that works similarly to their render.

Let's suppose we have a template nano, a main page nano, and a popup nano. What I'd like to see is something like:

const result = yield nanos`
  <template>
    <mainPage>
      <popup slot="popup"></popup>
    </mainPage>
  </template>
`

Note: These are not customElements. These are sagas, as any other nano. However, the concept is familiar to web users and more intuitive than many lines of javascript calls.

Describe alternatives you've considered

  1. We could package nanos inside real customElements and use lit-html to render them. The result would look very much like a React container component.

Additional context No matter what solution we go for, it is imperative that we can await the result from the nanos. This means that the sagas can't live free in the wild, but must be bound somehow to its creator.

mikabytes commented 3 years ago

While this is implemented, there are some weird corner cases that lead to unpredictable behavior.

Moving this to the Bronze milestone.