Web Components: addon-actions very slow

[tpluscode]

Summary

I have a simple story with one element where I dispatch a bubbling event (does not work otherwise).

It takes a whopping 1.7 seconds for the event to appear in the actions panel.

Any ideas why?

Additional information

main.ts:

import { join, dirname } from 'node:path'
import { StorybookConfig } from '@storybook/web-components-vite'

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
const getAbsolutePath = (value: string) => {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
  ],

  framework: {
    name: getAbsolutePath('@storybook/web-components-vite'),
    options: {},
  },

  staticDirs: [
    '../shapes',
    '../../../node_modules/@shoelace-style/'
  ],

  docs: {},
}
export default config

preview.ts:

import { SyntaxHighlighter } from '@storybook/components';
import turtle from 'react-syntax-highlighter/dist/esm/languages/prism/turtle.js';
import { withActions } from '@storybook/addon-actions/decorator';
import $rdf from '../lib/env.js'
import stringToStream from 'string-to-stream'
import { html } from 'lit'
import { StoryFn } from '@storybook/web-components'

SyntaxHighlighter.registerLanguage('turtle', turtle);

const preview = {
  parameters: {
    controls: {
      disableSaveFromUI: true,
    },
    actions: {
      handles: ['foobar']
    },
    docs:{
      toc:{
        headingSelector: 'h1, h2, h3',
      }
    }
  },
  decorators: [
    withActions,
    (story: StoryFn)=> html`<fieldset><legend>Rendered form</legend>${story()}</fieldset>`
  ],
  loaders: [async ({ args }: Record<any, any>) => {
    let shapes = $rdf.clownface()
    if(args.shapes) {
      shapes = $rdf.clownface({
        dataset: await $rdf.dataset()
          .import($rdf.formats.parsers.import('text/turtle', stringToStream(args.shapes))!),
      })
    }

    let data = $rdf.clownface()
    if(args.data) {
      data = $rdf.clownface({
        dataset: await $rdf.dataset()
          .import($rdf.formats.parsers.import('text/turtle', stringToStream(args.data))!),
      })
    }

    return {
      shapes,
      data,
    }
  }],
}

export default preview

Create a reproduction

No response

[tpluscode]

Here's a screenshot from browser profiling