Riot 4 support about riot

[libetl]

I have not worked with riot for a while.
Let's vote for the issue. If I get more than 10 👍 I can take a look

[dmtrs]

Thanks @shilman have forked storybook and will go through the document

Will come back to this ticket for updates/questions.

[libetl]

Aïe... more than 10 thumbs.

[libetl]

@GianlucaGuarini Hi

[libetl]

Team, I am quite ready to get started now

[shilman]

Start of a doc here: https://docs.google.com/document/d/1fe6uCfpr3mzSnj4jN_uoZqVnyNtjBjfOMxt_ZI7ktL8/edit

If somebody wants to add Riot 4 support and it's completely different from Riot 3, I recommend dropping Riot 3 support. If people want to use the old version of Riot, they can also use the old version of Storybook, and there are not enough existing Storybook for Riot users to justify supporting both.

[libetl]

Hmm, I was pretty sure it would not be compatibe

[libetl]

Pretty busy right now, but if I think some time I can have a look.

How do we mount a component with riot 4 ? and how do we unmount ?

[damusix]

Webpack info

• Official webpack example
• My webpack setup (bit more elaborate)

Mounting / Unmounting components

• Docs: Mount
• Docs: Unmount
• Official Example of mount
• How a component's JS is implemented
• Working example of mounting an element
• Working example of registering elements

Ways to mount

From a bundled file

import * as riot from 'riot'
import App from './app.riot'

const mountApp = riot.component(App)

const app = mountApp(
  document.getElementById('root'),
  { message: 'Hello World' }
)

Using riot.mount

Riot template

<my-component>

  <!-- layout -->
  <h3>{ props.title }</h3>

  <style>
    :host { display: block }
    h3 { font-size: 120% }
    /** other component specific styles **/
  </style>

</my-component>

index.html

<div is="my-component"></div>

app.js

// import the component javascript output generated via @riotjs/compiler
import MyComponent from './my-component.js'

// register the riot component
riot.register('my-component', MyComponent)

riot.mount('my-component')

Ways to unmount

• Within a particular tag, you can call: this.unmount()
• Using riot global, you can call: riot.unmount('my-component')

Relevant to story book

I imagine you'd want a way to bind into any component and unmount, intercept, etc. You can do that using riot plugins

[damusix]

Any updates on this? @libetl

[shilman]

@libetl I downvoted to help you focus on source-loader 🤣 Teasing of course.

[damusix]

@shilman you troll! lol @libetl can I be of any help?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[libetl]

Really busy these days with my regular job. The situation will slightly get better after september 14th.

[libetl]

@damusix can we chat on discord or zoom when you get a chance ?

[damusix]

@libetl https://discord.gg/vpzwUm

[dmtrs]

What approach do you consider in order to add the riot 4 support without breaking existing installation with current version?

[dmtrs]

dependbot trying to update storybookjs/storybook@a21885f

[damusix]

What approach do you consider in order to add the riot 4 support without breaking existing installation with current version?

Old version is completely different in almost every way. I'll assume you might need to start from scratch.

Old riot, you import tags and mount. New riot, you import tags, register, then mount.
New riot uses lifecycle methods, component state, and no observable.
New riot has less template flexibility (good thing), so old ways will break.
Some attributes and elements changed (each, virtual, template)

[dmtrs]

Hey @damusix,
should storybook support both riot 3 and 4 or should riot 4 be a replacement to existing riot implementation?

What could be good starting points to make appropriate changes alteration? Is there any "support your framework" documentation to see how to start from scratch?