@storybook/vue@4.0.8 and @storybook/addon-knobs@4.0.8 do not update components using JSX render functions in stories

Describe the bug Knobs no longer update components when using JSX render functions in stories. I managed to get it working for standard string templates, but I have a large project using JSX for stories.

To Reproduce Steps to reproduce the behavior:

1. git clone https://gitlab.com/alexkcollier/storybook-vue-knobs-issue.git
2. npm install
3. npm start
4. Change a knob

Expected behavior Component in story should updates, but won’t unless you rollback storybook and addons to 4.0.7

Screenshots Note how knobs do not match component state.

Code snippets

// SButton.stories.jsx

import SButton from './SButton.vue'
import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'
import { storiesOf } from '@storybook/vue'

storiesOf('SButton JSX', module)
  .addDecorator(withKnobs)
  .add('Button JSX', () => {
    const buttonColor = select('Button color', ['green', 'red'], 'green', 'Optional Props')
    const buttonSize = select(
      'Button size',
      ['small', 'regular', 'large'],
      'small',
      'Optional Props'
    )
    const buttonText = text('Button text', 'Sample text', 'Slots')

    const props = {
      buttonColor,
      buttonSize
    }

    const disabled = boolean('disabled', false, '$attrs')

    return {
      render: h => (
        <div>
          <SButton {...{ props }} disabled={disabled}>
            {buttonText}
          </SButton>
          <p>{buttonColor}</p>
          <p>{buttonSize}</p>
        </div>
      )
    }
  })

// SButton.vue

<template>
  <button v-bind="$attrs" :class="classList" class="button"><slot /></button>
</template>

<script>
export default {
  name: 'SButton',

  props: {
    buttonColor: {
      type: String,
      default: ''
    },

    buttonSize: {
      type: String,
      default: ''
    }
  },

  computed: {
    classList() {
      return [
        // Handles storybook default
        this.buttonColor ? `button--color-${this.buttonColor}` : 'button--color-green',
        this.buttonSize ? `button--size-${this.buttonSize}` : ''
      ]
    }
  }
}
</script>

<style>
.button--color-green {
  background-color: green;
}
.button--color-red {
  background-color: red;
}

.button--size-large {
  font-size: 3rem;
}
.button--size-regular {
  font-size: 1rem;
}
.button--size-small {
  font-size: 0.5rem;
}
</style>

System:

• OS: Windows 10
• Device: Desktop
• Browser: Chrome
• Framework: Vue, project configured using vue-cli
• Addons: @storybook/addon-knobs
• Version: 4.0.8 .

[Laslo89]

you should have an invite to a repo. thank you for your help 😃

Edit: If you go to storybook-demo you can see the same behaviour. When you click on the section knobs and then on “All Knobs” you will see that the component will not react to the changes of knobs. Just try to alter the name for example.

… sry i missed the “public” … here it is: StorybookTest-Repo

[Laslo89]

@y-nk Thank you for your answer. Unfortunately the way you wrote the story, does not work. I think what you’ve wanted to write is:

storiesOf(TestComponent.name, module)
  .addDecorator(withKnobs)
  .add('as Component', () => ({
    components: { TestComponent },
    props: {
      textProp: {
        type: String,
        default: text('text', 'peter'),
      },
    },
    template: `<TestComponent :text.sync="textProp" />`,
  }))

But still it never updates the component, when I change the value of the knob. Is this working as intended?