More clean up

addons/knobs/src/KnobManager.js

@@ -1,33 +1,14 @@
 /* eslint no-underscore-dangle: 0 */
-// import window from 'global';
-// import React from 'react';
 import deepEqual from 'deep-equal';
-// import WrapStory from './components/WrapStory';
 import KnobStore from './KnobStore';
 
 // This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
 const PANEL_UPDATE_INTERVAL = 400;
 
 export default class KnobManager {
-  constructor() {
-    this.knobStore = null;
-    this.knobStoreMap = {
-      length: 0,
-    };
-  }
-
-  initStore(channel) {
+  constructor(channel) {
     this.channel = channel;
-    const key = this.knobStoreMap.length + 1;
-    this.knobStoreMap.length = this.knobStoreMap.length + 1;
-    let knobStore = this.knobStoreMap[key];
-
-    if (!knobStore) {
-      knobStore = this.knobStoreMap[key] = new KnobStore(); // eslint-disable-line
-    }
-
-    this.knobStore = knobStore;
-    knobStore.markAllUnused();
+    this.knobStore = new KnobStore();
   }
 
   knob(name, options) {

addons/knobs/src/components/Panel.js

@@ -60,6 +60,7 @@ export default class Panel extends React.Component {
 
     this.stopListeningOnStory = this.props.api.onStory(() => {
       this.setState({ knobs: [] });
+      this.props.channel.emit('addon:knobs:reset');
     });
   }
 

addons/knobs/src/index.js

@@ -5,7 +5,8 @@ import KnobManager from './KnobManager';
 import { vueHandler } from './vue';
 import { reactHandler } from './react';
 
-const manager = new KnobManager();
+const channel = addons.getChannel();
+const manager = new KnobManager(channel);
 
 export function knob(name, options) {
   return manager.knob(name, options);
@@ -60,14 +61,11 @@ export function date(name, value = new Date()) {
 }
 
 function oldKnobs(storyFn, context) {
-  const channel = addons.getChannel();
-  manager.initStore(channel);
   return reactHandler(channel, manager.knobStore)(storyFn)(context);
 }
 
 function oldKnobsWithOptions(options = {}) {
   return (...args) => {
-    const channel = addons.getChannel();
     channel.emit('addon:knobs:setOptions', options);
 
     return oldKnobs(...args);
@@ -93,9 +91,6 @@ Object.defineProperty(exports, 'withKnobsOptions', {
 });
 
 export function addonKnobs(options) {
-  const channel = addons.getChannel();
-  manager.initStore(channel);
-
   if (options) channel.emit('addon:knobs:setOptions', options);
 
   switch (window.STORYBOOK_ENV) {

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

@@ -130,8 +130,8 @@ storiesOf('addonNotes', module)
 storiesOf('Addon Knobs deprecated Decorator', module)
   .addDecorator(withKnobs) // test deprecated
   .add('with dynamic variables deprecated', () => {
-    const name = text('Name', 'Arunoda Susiripala');
-    const age = number('Age', 89);
+    const name = text('Name', 'Story Teller');
+    const age = number('Age', 120);
 
     const content = `I am ${name} and I'm ${age} years old.`;
     return <div>{content}</div>;

examples/vue/src/stories/index.js

@@ -119,4 +119,13 @@ storiesOf('Addon Knobs', module)
     return {
       template: `<div>${content}</div>`
     };
-  }));
+  }))
+  .add('With some different name', addonKnobs()(() => {
+    const name = text('Name', 'Story Teller');
+    const age = number('Age', 120);
+
+    const content = `I am a ${name} and I'm ${age} years old.`;
+    return {
+      template: `<div>${content}</div>`
+    };
+  }));;