lit-element props configured by TS decorators do not cause a re-render of the component

Describe the bug With Lit-element, using controls to update the element’s properties, storybook does not cause a render of the component when the component’s properties are defined by TypeScript decorators.

To Reproduce https://github.com/steveworkman/sb6-ts-decorators-bug

1. In that repo - run the storybook
2. In the non-decorators story, change the “kind” to be “secondary” - see that the component re-renders and the colour changtes
3. Do the same in the decorators story

Expected behavior The component should re-render the same as the non-decorator one

Code snippets Repo: https://github.com/steveworkman/sb6-ts-decorators-bug

System:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    npm: 6.14.7 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.21 
    @storybook/addon-essentials: ^6.0.21 => 6.0.21 
    @storybook/addon-links: ^6.0.21 => 6.0.21 
    @storybook/web-components: ^6.0.21 => 6.0.21 

Additional context I think it’s to do with how the TS decorators are transpiled, but I can’t be sure. This was working in SB 5 with a webcomponents setup.

[MaxAltena]

The proposed fix by @emilio-martinez works for me. I added a babel.config.js into the .storybook/ directory with the plugins. Thanks!

[emilio-martinez]

I’m not able to fully dig in now, but this does sounds familiar. I believe this is a Babel-related issue when applying the following combination of options within the Babel config:

// Storybook is likely using these options within its Babel
"plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ["@babel/plugin-proposal-class-properties", { "loose": true }]
]

TL;DR, use these options instead

"plugins": [
  [ "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true } ],
  "@babel/plugin-proposal-class-properties"
]

LitElement has two decorator implementations, attempting to support two different stages of decorator proposals. The Typescript compiler (tsc) uses the older proposal, while Babel’s @babel/plugin-proposal-decorators by default will use the newer one. However, @babel/plugin-proposal-decorators optionally allows for a legacy flag, which instead switches to support the same proposal used with tsc.

However, that legacy option from Babel doesn’t work well with LitElement decorators + Typescript. Instead, when using Babel you should target the non-legacy variant and enable the decoratorsBeforeExport option as shown above. I do remember useDefineForClassFields being an issue in some cases, as Justin mentioned, but I don’t remember that being related to this particular issue. Incidentally, Babel applies that behavior via @babel/plugin-proposal-class-properties.