Framework support (Omi)

[tonai]

Is your feature request related to a problem? Please describe.
I'm trying to make the storybook work with the Omi framework : https://github.com/Tencent/omi

Describe the solution you'd like
I'd like a way to create a story by using my own rendering method.
To clarify and by taking the example of React; instead of returning a React element in the story:

storiesOf('MyComponent', module).add('default', () => <MyComponent/>)

I would to write something like this:

storiesOf('MyComponent', module).add('default', () => ReactDOM.render(<MyComponent />, document.getElementById('root')))

(maybe it can be an other mathods than add)

Describe alternatives you've considered
As the Omi framework generates web component I tried the @storybook/html package.
And It works:

storiesOf('MyComponent', module).add('default', () => '<my-component />')

But the Omi framework has a built-in store that you bind to your app by calling the render method:

render(<my-component />, '#root', store);

The store does not only contains data, it also contains methods that you can't pass by using the web component notation.

Are you able to assist bring the feature to reality?
Maybe we can create a wrapper like for react, angular...etc.
But as JS Framework are always growing and changing, is it really the right choice ?
I'am wondering if lower level methods exist that allow you to create your own wrapper.
Is it possible to have that kind of generic approach ?

[igor-dv]

Hey @tonai

(maybe it can be an other mathods than add)

Probably it can't. add() is a part of the SB core stories API

Maybe we can create a wrapper like for react, angular...etc.
But as JS Framework are always growing and changing, is it really the right choice ?
I'am wondering if lower level methods exist that allow you to create your own wrapper.
Is it possible to have that kind of generic approach ?

I am not sure I got what do you mean. Are you talking about adding the @storbyook/omisupport ?

[tonai]

Hi @igor-dv,

Sorry I was not clear enough (it was quite late friday 😴 ).

I am not sure I got what do you mean. Are you talking about adding the @storbyook/omisupport ?

In fact, I think this is the default choice.
So my answer is: yes maybe.

I haven't looked at the code of the core yet, so I'm just questionning here if there is a more generic way of adding a story than using the add method.

Because; maintaining all those versions of storybook must be quite hard.

And maybe adding Omi support is not worth it, because not a lot of people will use it...
And that also may be the case for an homemade framework.

So I don't know if adding the Omi framework support is a good choice.
But perhaps, adding the Omi framework support, is the only way of doing it... (for now)
In that case, and in your opinion, is it possible to create that kind of integration method ?
(that is to say, a more generic way of creating a story that looks like stories.add('default', () => ReactDOM.render(<MyComponent />, element)))

Thanks,

[igor-dv]

maintaining all those versions of storybook must be quite hard.

What versions 🤔
If you add it as a new framework to SB, you only need to support SB >= 4

[tonai]

I'm talking about maintaining all storybook variant:

• @storybook/react
• @storybook/angular
• @storybook/vue
• @storybook/ember
• ...etc.

I don't think it will be really hard to create the @storbyook/omi variant as it is very close to the @storybook/react one.
So we may duplicate it and adapt it to omi but that will be a lot of duplicated code won't it ?

[igor-dv]

Most of the common code is located in @storybook/core. The only difference if the rendering mechanism. Take a look at the recent ember addition: #4237