storybookjs/storybook

[Bug]: Constructor of lit-component called twice

Open

#25,116 opened on Dec 5, 2023

View on GitHub
 (3 comments) (1 reaction) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedsev:S3web-components

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

The constructor in lit web-component, wen used in storybook is called twice.

test-constructor.ts

@customElement('test-constructor')
class TestConstructorComponent extends LitElement {
  constructor() {
    super();
    console.count();
  }

  render() {
    return html` <span>constructor called multiple times in storybook</span> `;
  }
}

count is 2 in storybook ( reproducible example below ) count is 1 in lit-playground ( reproducible example below )

test-constructor.stories.ts

export const TestConstructor = {
  render: () => {
    return html`<test-constructor></test-constructor>`;
  }
};

This gives a number of problems, including a warning the reactive cycle is called within. And some implemented lifecycle methods. I think this is related: https://github.com/storybookjs/storybook/issues/17094. But a very old issue and maybe that one was related to lit itself.

There are no workarounds known te me, so hopefully someone knows what the problem is when using lit in storybook.

Thanks in advance

To Reproduce

The following component in Storybook calls the constructor twice

https://stackblitz.com/edit/github-q3itzv?file=src%2Fstories%2Ftest-constructor.stories.ts,src%2Fstories%2Ftest-constructor.ts&preset=node

The same component in Lit Playground only calls the constructor once

Lit playground reproduce

System

Storybook Environment Info:

  System:
    OS: macOS 12.6.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 9.6.5 - ~/.nvm/versions/node/v18.12.1/bin/npm <----- active
    pnpm: 7.27.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.199
    Edge: 119.0.2151.97
    Safari: 16.4.1
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3 
    @storybook/addon-essentials: ^7.6.3 => 7.6.3 
    @storybook/addon-interactions: ^7.6.3 => 7.6.3 
    @storybook/addon-jest: ^7.6.3 => 7.6.3 
    @storybook/addon-links: ^7.6.3 => 7.6.3 
    @storybook/addon-storysource: ^7.6.3 => 7.6.3 
    @storybook/blocks: ^7.6.3 => 7.6.3 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/test: ^7.6.3 => 7.6.3 
    @storybook/test-runner: ^0.16.0 => 0.16.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/web-components: ^7.6.3 => 7.6.3 
    @storybook/web-components-vite: ^7.6.3 => 7.6.3 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.3 => 7.6.3

Additional context

No response

Contributor guide