less ugly working example

addons/knobs/src/KnobManager.js

@@ -1,6 +1,5 @@
 /* eslint no-underscore-dangle: 0 */
-/* global window */
-
+import window from 'global';
 import React from 'react';
 import deepEqual from 'deep-equal';
 import WrapStory from './components/WrapStory';
@@ -12,7 +11,23 @@ const PANEL_UPDATE_INTERVAL = 400;
 export default class KnobManager {
   constructor() {
     this.knobStore = null;
-    this.knobStoreMap = {};
+    this.knobStoreMap = {
+      length: 0,
+    };
+  }
+
+  initStore(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();
   }
 
   knob(name, options) {

addons/knobs/src/index.js

@@ -1,3 +1,4 @@
+// import { window } from 'global';
 import addons from '@storybook/addons';
 import KnobManager from './KnobManager';
 
@@ -55,16 +56,36 @@ export function date(name, value = new Date()) {
   return manager.knob(name, { type: 'date', value: proxyValue });
 }
 
-export function withKnobs(storyFn, context) {
+// export function withKnobs(storyFn, context) {
+//   const channel = addons.getChannel();
+//   return manager.wrapStory(channel, storyFn, context);
+
+// export function withKnobsOptions(options = {}) {
+//   return (...args) => {
+//     const channel = addons.getChannel();
+//     channel.emit('addon:knobs:setOptions', options);
+
+//     return withKnobs(...args);
+//   };
+// }
+
+export function withKnobs() {
   const channel = addons.getChannel();
-  return manager.wrapStory(channel, storyFn, context);
-}
+  manager.initStore(channel);
 
-export function withKnobsOptions(options = {}) {
-  return (...args) => {
-    const channel = addons.getChannel();
-    channel.emit('addon:knobs:setOptions', options);
-
-    return withKnobs(...args);
-  };
+  return storyFn => context => ({
+    render(h) {
+      const story = storyFn(context);
+      return h(typeof story === 'string' ? { template: story } : story);
+    },
+    created() {
+      channel.on('addon:knobs:knobChange', change => {
+        const { name, value } = change;
+        // Update the related knob and it's value.
+        const knobOptions = manager.knobStore.get(name);
+        knobOptions.value = value;
+        this.$forceUpdate();
+      });
+    },
+  });
 }

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

@@ -71,17 +71,6 @@ export default class ClientApi {
         return component;
       }
 
-      const newGetStory = (context) => {
-        const component = parseStory(context);
-        let finalComponent = new Vue({
-          render(h) {
-            return h('div', {attrs: { id: 'root' } }, [h(parseStory(context))]);
-          },
-        });
-
-        return finalComponent;
-      }
-
       // Wrap the getStory function with each decorator. The first
       // decorator will wrap the story function. The second will
       // wrap the first decorator and so on.
@@ -89,11 +78,21 @@ export default class ClientApi {
 
       const fn = decorators.reduce(
         (decorated, decorator) => context => decorator(() => decorated(context), context),
-        newGetStory
+        getStory
       );
 
+
+      const fnR = (context) => {
+        return new Vue({
+          render(h) {
+            const story = parseStory(fn(context));
+            return h('div', {attrs: { id: 'root' } }, [h(story)]);
+          },
+        });
+      }
+
       // Add the fully decorated getStory function.
-      this._storyStore.addStory(kind, storyName, fn);
+      this._storyStore.addStory(kind, storyName,fnR);
       return api;
     };
 

examples/vue/src/stories/index.js

@@ -101,11 +101,10 @@ storiesOf('Addon Notes', module)
 
 
   storiesOf('Addon Knobs', module)
-    .addDecorator(withKnobs)
-    .add('With some name', () => {
+    .add('With some name', withKnobs()(() => {
       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>`;
-    });
+      return `<div>${content}</div>`
+    }));