[Bug]: Web components using TS / customElement decorator breaks hotloading in Storybook 7

Describe the bug

Hey there,

I upgraded from Storybook 6 to 7 and I'm running into an issue with hot reloading tossing an error due to my web components being defined using the customElement decorator. This worked fine in v6, maybe there was a change in how the reloading works?

When setting up a repository to get a minimum reproduction, I saw that the web-component examples defined from Storybook are using a function-style definition for the web-components, but the Lit documentation uses classes with the customElement decorator. There's a bit of a discrepancy there, is Storybook expecting web-component code to be defined in that way? Also, looking at the tutorial documentation for web-components, there are examples rendering the custom tag in a template, but they don't import the source for the component which is a little confusing.

Here's a linked a repro repo with a base form of the configuration I'm using: link. Maybe I'm missing something somewhere, any assistance or guidance here would be greatly appreciated. 🙇

To Reproduce

https://github.com/thaithcock/storybook7-hotreload-decorator-repro/tree/main

System

Environment Info:

  System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M2 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.1
  npmPackages:
    @storybook/blocks: ^7.4.0 => 7.4.0 
    @storybook/web-components: ^7.4.0 => 7.4.0 
    @storybook/web-components-webpack5: ^7.4.0 => 7.4.0

Additional context

I did notice when messing around with the repro repo, very rarely the hot reload does not break.

storybookjs / storybook