@storybook/vue@rc : addon-knobs creates and destroys story on knob update

[y-nk]

Step to reproduce :

1. Following babel-preset-vue missing as peer dependency #4505 installation steps
2. add npm i --save-dev @storybook/addon-knobs@rc
3. add import '@storybook/addon-knobs/register'; to .storybook/addons.js
4. add a basic story :

import { storiesOf } from '@storybook/vue';
import { withKnobs, text, button } from '@storybook/addon-knobs';

storiesOf('Knobs demo', module)
  .addDecorator(withKnobs)
  .add('foobar', () => ({
    template: '<span @click="i++">My name is {{ name }} and i am {{ i }} years old.</span>',

    data() { return {
      name: text('name', 'John Doe'),
      i: 40,
    }; },

    beforeCreate() {
      button('age me', () => this.i++)
    },

    created() { console.log('created') },
    destroyed() { console.log('destroyed') },
  }));

Expected result :

I can see the "created" log when i launch the story only

Actual result :

I can see the "created" and "destroyed" log everytime i modify the text value from the knob.

Additional comments :

• It's related to [vue.js] [withKnobs] addon causes to re-create a new story at knobChange #3777 . As @ndelangen said it was working with v4 alphas, I wanted to try it myself to know if we could migrate our app.

• Here's a repo and a gif screen-record of this bug :

[igor-dv]

#4098 is also related

[y-nk]

@igor-dv if that could help, i provided a very dirty patch in the firsts posts of #3777 .

[igor-dv]

In a v4 we do not have a separation in knobs to vue/angular/react/whatever. So we need a more generic solution.

[y-nk]

@igor-dv i'd be happy to help if i could get any pointers to a direction, but i feel it's a deep structural change that should probably come from the core team, right ?

[igor-dv]

I think so =/ There is some discussion about changing knobs anyway.

[y-nk]

@igor-dv would you have any idea about a time to get a chance to see an alpha ? as for now, vue-play isn't supporting knobs and unmaintained for years, there's no options for Vue users, and i suspect it'll be the same for other frameworks.

[igor-dv]

Can you please explain the problem behind the issue ? I understand that the component is recreated each time you change the knob, but sounds like it is still working. Regarding the alpha, there is no alpha yet, but discussion in Discord

[y-nk]

@igor-dv if the component is created and destroyed everytime, then all the variables initialized in the internal state of the component are going back to default and so is the same with all the children of this component.

[y-nk]

@igor-dv actually, my code and gif can a bit misleading.

For the code, I'm using the knob in the data() node, but i should be using a property instead. it looked like working properly because the value is set by storybook after the knob changes and because of Vue accessors, it actually doesn't change so much ; but what you don't see, is that data.i is actually reset to 40 every time (because of this bug), and then then button knob seems useless.

Consider more console.log from the same story :

import { storiesOf } from '@storybook/vue';
import { withKnobs, text, button } from '@storybook/addon-knobs';

storiesOf('Knobs demo', module)
  .addDecorator(withKnobs)
  .add('foobar', () => ({
    template: '<span @click="i++">My name is {{ name }} and i am {{ i }} years old.</span>',

+    props: {
+      name: {
+        type: String,
+        default: text('name', 'John Doe'),
+      },
+    },
+
    data() { return {
-      name: text('name', 'John Doe'),
      i: 40,
    }; },

+    watch: {
+      i(val) {
+        console.log('i has changed to', val)
+      },
+    },
+
    beforeCreate() {
-      button('age me', () => this.i++)
+      button('age me', () => {
+        console.log('button knob has been triggered.')
+        this.i++
+      })
    },

    created() { console.log('created') },
    destroyed() { console.log('destroyed') },
  }));

and you will have :

In this gif you can see (in order) :

1. Trying to set up a property still resets the story component
2. clicking the button knob resets the story componets (and so we don't see i increment)
3. but the story itself works since i can click on the span and increment i properly
4. but then, changing a prop kills/respawn the story component, resulting in i going back to default

[shilman]

Released in 4.0.8. Can we close?

[igor-dv]

Yep 💪