- Refactor each view layer to export a "story" component
(sort of like I imagined on this PR: storybookjs/storybook#3360)
So, you could this:
import React from 'react';
import { Story } from '@storybook/react';
import { myStory } from './MyComponent.stories';
export () => (
<div>
<h1>Here's my component</h1>
<Story story={myStory} />
</div>
)
The above works in React, but essentially the same code can be written in any view layer (importing from the correct storybook app package of course).
- Create "prop table" etc components in a lightweight way that can be consumed in any view layer:
import React from 'react';
import { Story, Doc } from '@storybook/react';
import { PropTable } from '@storybook/docs';
import { myStory } from './MyComponent.stories';
export () => (
<div>
<h1>Here's my component</h1>
<Story story={myStory} />
<Doc component={PropTable} story={myStory} />
</div>
)
Note again that the above is written in React but could be any view layer.
The PropTable
export is something that can easily be rendered within any view layer. Options include:
- Using something self contained like Svelte.
- Using React (which embeds OK?), at a cost of including the React runtime in every x-framework docs app.