Storybook integration

[steve8708]

It would be great to integrate Mitosis with Storybook to have a great development environment for viewing components, and ideally be able to preview components across outputs to make sure all is working as expected for each target (React, Vue, etc) you would like to support

[Harkunwar]

I'd love to contribute to the Mitosis project and this seems like something I can look into.

[steve8708]

That would be amazing @Harkunwar!

[steve8708]

I will go ahead and assign this to you here @Harkunwar - if you find we should change that (other obligations arise, etc) just lmk

[Harkunwar]

Thank you @steve8708! Can I add you on discord, I was having some setup issues with the repo. Also wanted to chat about the possible design for this.

[steve8708]

Absolutely! I'm steve8708 on discord and we also have a server with a Mitosis channel here

[steve8708]

hey @Harkunwar - have you had a chance to make progress on this one? Mostly just asking to see if you haven't had the time available, I can unassign you and see if someone else is able to pick this up

[PatrickJS]

yeah this is needed

[PatrickJS]

I can work on a public webpack mitosis-loader/plugin and webpack playground to show raw, compiled components. We created a sample-page internally to check mitosis/core changes. We also used jsfiddle on the generator output to experiment on different approaches for webcomponent. I can incorporate something like that too to help other contribute to mitosis/core

[Harkunwar]

Hello everyone! Sorry I've been busy lately but I have done some preliminary research on this topic and I still plan to work on this. I'll start creating MRs with my progress soon. I've spent most of my last two months writing esbuild plugins just to familiarize myself with JS compiling and hopefully now I can use that knowledge here.

[steve8708]

Sounds great, can't wait @Harkunwar !

[samijaber]

@Harkunwar Awesome. Feel free to reach out in our Discord with any questions/issues you may have: this is a big project and there'll likely be complications 😅

[samijaber]

@Harkunwar We have been feeling the need for better, more comprehensive integration testing for Mitosis.

One of the primary ways we want to accomplish that is via a tool like Storybook:

• write a Mitosis component as a test file (e.g., a button)
• run it through Mitosis to generate a version for each framework we support
• render every generated version in Storybook
• run the same integration test on every version in Storybook using a tool like Playwright https://storybook.js.org/addons/storybook-addon-playwright

This means that this Storybook integration is now more important than ever for us! It will be a huge win to be able to build tests as I outlined above, and greatly increase visibility into how well each generator works.

Would love to know where you're at with it, and if we can unbundle/scope the work into multiple/smaller pieces to help you get it through the door more efficiently!

I'm always reachable via Discord as well, so please reach out with any questions or thoughts :)

[kylecordes]

(removed, makes more sense on another item.)

[ild0tt0re]

@samijaber Storybook already have a built-in test feature based on playwright https://storybook.js.org/docs/react/writing-tests/interaction-testing

[TzviPM]

@Harkunwar are you actively working on this? I’d love to take this over and contribute. My thoughts are as follows:

The common Story Format (CSF) is based on ES6 modules with a default export containing metadata and named exports for each story.

To my knowledge, Mitosis only supports default exports with a single component per file. This leads me to a few initial ideas on how to approach this:

1. Define a directory-based CSF structure with a mitosis file per story and a metadata file.
2. Create a storybook-specific pipeline for mitosis that supports named exports for stories.
3. Add support for named exports to mitosis, in general.

Regardless of the approach taken for generating the stories themselves, I’m thinking that we can take 2 approaches for storybook configs.

1. The first approach is to simply have the user generate the stories for each framework and link to them from a separate config per framework.
2. The second approach is to create a meta-config format that can be used to generate the storybook config for each framework.

I once saw an interesting example with Nx.dev that had a project set up for each of the following:

1. component library A
2. component library B
3. storybook that consumes the library A
4. storybook for library B
5. e2e component tests that use cypress to test the storybook app for A
6. e2e component tests that use cypress to test the storybook app for B
7. An app consuming both component libraries
8. e2e tests for the app

I’m not sure how well multiple storybook projects in a single repo would work, in general, but I’d probably start with the Nx schematics to see how they work.

Overall, I think the simplest path forward is as follows:

1. Write a tool that takes a folder of mitosis components and metadata and generates a CSF file for each framework
2. Users can create their own config for each framework
3. Create a sample repo with this working for a component library

Once this is working, some areas to pursue include:

1. Exploring more convenient ways to define stories in a single file / enable named exports for mitosis
2. Explore meta-configuration for multiple storybook projects based on mitosis
3. Generate a top-level storybook that includes a way to view all stories + components across frameworks
4. Explore approaches to testing multiple parallel stories for different frameworks from a single test definition. For this, perhaps an approach using something like cucumber might be best, where framework-specific adaptors can be created and tests generated from a single specification.

[Takouaghouaiel]

Hello, is there any news on this issue?