Storybook support for Blits components

[minhui-foxtel]

Hi, I wonder if there's an existing or potential Storybook integration? I've checked SolidUI which includes storybook integration and borrowed some code to make it work and be able to take snapshot for visual regression.

There's still two main issues bothering me:

• Seems no way to assemble the component with story args, render the pre-assembled story directly

const assembledComponent = story.component(story.args);
// then render `assembledComponent` in storybook

• There's no way to unmount a launched app, so it might be launched multiple times in storybook, does it cause memory leaks?

The following is my code snippets, much appreciated if you could give me some advice.

.storybook/preview.ts

import Blits from '@lightningjs/blits';
import {theme} from '@lightningjs/blits/plugins';
import type {Preview} from '@storybook/html';

import myTheme from '../src/themes/index.js';

Blits.Plugin(theme, myTheme);

const preview: Preview = {
    decorators: [
        (_, context) => {
            const rootElement = document.createElement('div');
           // Seems no way to assemble the component with story args here, render the pre-assembled story directly
            const Story = context.moduleExport;

            const App = Blits.Application({
                components: {Story},
                template: '<Story />',
            });

            Blits.Launch(App, rootElement, {
                w: 1920,
                h: 1080,
                debugLevel: 1,
            });

            return rootElement;
        },
    ],
};

export default preview;

Button.stories.ts

import Blits from '@lightningjs/blits';

import type {Meta as BaseMeta} from '@storybook/html';
import Button from ".";

type Meta<T extends ReturnType<typeof Blits.Component>> = Omit<BaseMeta, 'component'> & {
    component: T;
};

const meta: Meta<typeof Button> = {
    title: 'Components/Button',
    component: Button,
};

// I'd like to only declare props here, but have to pre-assemble the component.
export const Default = Blits.Component('Button', {
    components: {Button},
    template: `
    <Button content="Watch" />
  `,
});

export const Focused = Blits.Component('Button', {
    components: {Button},
    template: `
    <Button ref="button" content="Watch" />
  `,
    hooks: {
        ready() {
            this.$select('button').$focus();
        },
    },
});

export default meta;

[minhui-foxtel]

I did see memory leaks if a story is updated, e.g. event listeners are not removed.