Knobs/Controls add-ons fail to update UI when using Zero config typescript

[fernandopasik]

Describe the bug Using zero config typescript the addons knobs and controls do not update the ui one the value is changed in the control. I'm using web components.

To Reproduce Steps to reproduce the behavior:

1. Start storybook with zero config typescript
2. Open a story with controls or knobs
3. change the value of the control
4. UI keeps the same with the default value.

Expected behavior The UI is updated

Additional context I'm working with web components, haven't tried with react.

[fernandopasik]

My project https://github.com/fernandopasik/hello-web-components has a custom config for typescript that works good. And I have a branch in the repo https://github.com/fernandopasik/hello-web-components/tree/ts-zero-config where the bug can be reproduced.

[fernandopasik]

I'm a bit lost on why this issue could be happening, any clue @shilman ?

[shilman]

I don't know what's going on.

1. I verified that this works on the main branch, then switched to the zero-config branch
2. I upgraded to the latest RC using npx sb@next upgrade --prerelease
3. I added a console.log to the story

I observed that:

1. The story function is getting called repeatedly with the expected args as I type, but the preview is not refreshing
2. The story is refreshing as expected in the Docs tab

I don't know how this is related to the config change. 🤔

[fernandopasik]

Great finding about the docs tab, I didn't notice. In that case all of it is in the same iframe.

Canvas has the controls outside the iframe.

[fernandopasik]

Also, the value is modified in the component, what seems to happen is that the update is not triggered within the component. I've triggered manually the update with dev tools selecting the element and running in the console $0.update()

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[tmeasday]

@fernandopasik is this still an issue for you? I don't see that branch any more in your repo--could you recreate it possibly?

[fernandopasik]

Hi @tmeasday! Yes I've just updated my repo to latest storybook and checked that still an issue.

https://github.com/fernandopasik/hello-web-components

If you run yarn start on that one storybook will start. The problem it's noticed in the canvas view as you change the control value it doesn't update the UI. If you go to the docs view it updates correctly.

[tmeasday]

Yep, I see. Let me investigate.

[tmeasday]

@fernandopasik I don't really know much about web-components or lit-element but what I can see in the browser is that the element is getting updated:

From my perspective (the controls/args implementation) we are doing the right thing, but there could be a bug in @storybook/web-components, for sure. I suspect you have a better chance of diagnosing it than me though! Any ideas?

[fernandopasik]

Yes, I noticed the same thing.

I used before a custom webpack configuration adding ts-loader to it and that worked fine, that was the oddest part.

https://github.com/fernandopasik/hello-web-components/commit/c99b8db052a5f6efc2c6428d4a027e992f9302d0#diff-2d9ab5214985b9a608b4cd47ed561a301cfd4c7d5352c7a94ee046d4e1f1af10

[tmeasday]

I guess it is difficult for me to debug further as I am no expert on WCs. Do you have an idea on how to understand why a WC would not re-render when an attribute changes?

[elvorad]

I think I have some findings that may help track down what the problem is. I have a similar case. If my observation is right, the component in the "Docs" tab does not get updated but entirely re-created each time the args change. This would explain why it works there. In the "Canvas" view however, the component does receive the prop changes, they are visible in the browser's code inspector as @tmeasday pointed out. But the component itself does not react to the changes.

Here is a step-by-step guide of how I could refresh a Lit element manually in the browser (Storybook 6.2.9):

1. Open the story
2. change a control value
3. inspect the Web Component in Chrome, note that the parameters are updated there
4. right-click on the entry and click "Store as global variable" (it will be called temp1)
5. in the browser console, run: temp1.requestUpdate()

Et voilà, the component now looks as specified with the args.

[fernandopasik]

this is working now with v7