Riot 4 support

[damusix]

Is your feature request related to a problem? Please describe.
storybookjs/storybook#7193
storybookjs/storybook#7101 (comment)
storybookjs/storybook#7193 (comment)

Describe the solution you'd like

storybookjs/storybook#7101 (comment)

Riot has been upgraded to version 4, and it is not compatible with Riot 3. Lot of the dependencies currently in Storybook/Riot will not work with Riot 4. If you'd like to see an example of Riot4 with webpack, I have one in my boilerplate project. Check out how the dependencies are now different.

To add to this comment:

• Mounting components is different
• Instantiating component javascript is also different
• Current storybook examples use Riot 3 syntax in components, which aren't backwards-compatible
• New riot webpack setup is much better than the previous version.

Please let me know if I can be of help.

Are you able to assist bring the feature to reality?
Yes, I can...

[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

[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

[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?

[libetl]

Aïe... more than 10 thumbs.

[libetl]

@GianlucaGuarini Hi

[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]

Team, I am quite ready to get started now

[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?

[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.

[dmtrs]

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

Will come back to this ticket for updates/questions.