Finish cleanup of addon knobs

addons/knobs/src/components/Panel.js

@@ -57,10 +57,15 @@ export default class Panel extends React.Component {
     this.loadedFromUrl = false;
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
     this.props.channel.on('addon:knobs:setOptions', this.setOptions);
+
+    this.stopListeningOnStory = this.props.api.onStory(() => {
+      this.setState({ knobs: [] });
+    });
   }
 
   componentWillUnmount() {
     this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
+    this.stopListeningOnStory();
   }
 
   setOptions(options = { debounce: false, timestamps: false }) {
@@ -155,6 +160,7 @@ Panel.propTypes = {
   }).isRequired,
   onReset: PropTypes.object, // eslint-disable-line
   api: PropTypes.shape({
+    onStory: PropTypes.func,
     getQueryParam: PropTypes.func,
     setQueryParams: PropTypes.func,
   }).isRequired,

addons/knobs/src/react/WrapStory.js

@@ -33,10 +33,6 @@ export default class WrapStory extends React.Component {
     this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
     this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs);
     this.props.knobStore.unsubscribe(this.setPaneKnobs);
-
-    // cleanup before leaving
-    this.props.knobStore.reset();
-    this.setPaneKnobs(false);
   }
 
   setPaneKnobs(timestamp = +new Date()) {

addons/knobs/src/vue/index.js

@@ -1,7 +1,6 @@
 export const vueHandler = (channel, knobStore) => getStory => context => ({
   render(h) {
-    const story = getStory(context);
-    return h(typeof story === 'string' ? { template: story } : story);
+    return h(getStory(context));
   },
 
   methods: {
@@ -31,10 +30,8 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
   },
 
   beforeDestroy(){
-    console.log('beforeDestroy');
     channel.removeListener('addon:knobs:reset', this.onKnobReset);
     channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
     knobStore.unsubscribe(this.setPaneKnobs);
-    this.onKnobReset();
   }
 });

app/vue/src/client/preview/render.js

@@ -96,8 +96,7 @@ export function renderMain(data, storyStore) {
   app = new Vue({
     el: '#root',
     render(h) {
-      const story = typeof element === 'string' ? { template: element } : element;
-      return h('div', {attrs: { id: 'root' } }, [h(story)]);
+      return h('div', {attrs: { id: 'root' } }, [h(element)]);
     },
   });
 }

examples/cra-kitchen-sink/src/stories/index.js

@@ -7,7 +7,6 @@ import { addonNotes, WithNotes } from '@storybook/addon-notes';
 import { withKnobs, addonKnobs, text, number } from '@storybook/addon-knobs';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
-import { withKnobs, text, number } from '@storybook/addon-knobs';
 import centered from '@storybook/addon-centered';
 
 import Button from '@storybook/components/dist/demo/Button';

examples/vue/src/stories/index.js

@@ -14,7 +14,9 @@ import MyButton from './Button.vue';
 
 storiesOf('Button', module)
   // Works if Vue.component is called in the config.js in .storybook 
-  .add('story as a function template', () => '<my-button :rounded="true">story as a function template</my-button>')
+  .add('story as a function template', () => ({
+    template: '<my-button :rounded="true">story as a function template</my-button>'
+  }))
   .add('story as a function renderer', () => (h) => h('div', ['story as a function renderer']))
   .add('story as a function component with template', () => ({
     template: '<my-button :rounded="true">story as a function component with template</my-button>',
@@ -57,8 +59,12 @@ storiesOf('Button', module)
   }));
 
 storiesOf('Other', module)
-  .add('button with emoji', () => '<button>😑😐😶🙄</button>')
-  .add('p with emoji', () => '<p>🤔😳😯😮</p>')
+  .add('button with emoji', () => ({
+    template: '<button>😑😐😶🙄</button>'
+  }))
+  .add('p with emoji', () => ({
+    template: '<p>🤔😳😯😮</p>'
+  }))
   .add('colorful', () => ({
     render(h) {
       return h(MyButton, { props: { color: 'pink' } }, ['colorful']);
@@ -78,7 +84,9 @@ storiesOf('Other', module)
 
 
 storiesOf('Addon Notes', module)
-  .add('with some emoji', addonNotes({notes: 'My notes on emojies'})(() => '<p>🤔😳😯😮</p>'))
+  .add('with some emoji', addonNotes({notes: 'My notes on emojies'})(() => ({
+    template: '<p>🤔😳😯😮</p>'
+  })))
   .add('with some button', addonNotes({ notes: 'My notes on some button' })(() => ({
     components: { MyButton },
     template: '<my-button :rounded="true">rounded</my-button>'
@@ -93,18 +101,22 @@ storiesOf('Addon Notes', module)
     })
   ))
   .add('with some long text', addonNotes({ notes: 'My notes on some long text' })(
-    () => '<div>A looooooooonnnnnnnggggggggggggg text</div>'
+    () => ({
+      template: '<div>A looooooooonnnnnnnggggggggggggg text</div>'
+    })
   ))
   .add('with some bold text', addonNotes({ notes: 'My notes on some bold text' })(() => ({
     render: h => h('div', [h('strong', ['A very long text to display'])])
   })));
 
 
-  storiesOf('Addon Knobs', module)
-    .add('With some name', addonKnobs()(() => {
-      const name = text('Name', 'Arunoda Susiripala');
-      const age = number('Age', 89);
+storiesOf('Addon Knobs', module)
+  .add('With some name', addonKnobs()(() => {
+    const name = text('Name', 'Arunoda Susiripala');
+    const age = number('Age', 89);
 
-      const content = `I am ${name} and I'm ${age} years old.`;
-      return `<div>${content}</div>`
-    }));
+    const content = `I am ${name} and I'm ${age} years old.`;
+    return {
+      template: `<div>${content}</div>`
+    };
+  }));