Vue / Knobs - optimize on force render

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

@@ -46,7 +46,7 @@ export default function renderMain({
   }
 
   // We need to unmount the existing set of components in the DOM node.
-  // Otherwise, React may not recrease instances for every story run.
+  // Otherwise, React may not recreate instances for every story run.
   // This could leads to issues like below:
   //    https://github.com/storybooks/react-storybook/issues/81
   // But forceRender means that it's the same story, so we want too keep the state in that case.

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

@@ -1,12 +1,49 @@
 import { stripIndents } from 'common-tags';
 import Vue from 'vue';
 
-let app = null;
+let root = null;
 
-function renderRoot(options) {
-  if (app) app.$destroy();
+function updateComponent(component) {
+  const [lastStory] = root.$children;
 
-  app = new Vue(options);
+  if (!lastStory) {
+    return false;
+  }
+
+  if (typeof component.data !== 'function') {
+    return false;
+  }
+
+  const data = component.data();
+
+  if (!data) {
+    return false;
+  }
+
+  Object.entries(data).forEach(([key, value]) => {
+    lastStory[key] = value;
+  });
+
+  lastStory.$forceUpdate();
+
+  return true;
+}
+
+function renderRoot({ forceRender, component }) {
+  if (root) {
+    if (forceRender === true && updateComponent(component)) {
+      return;
+    }
+
+    root.$destroy();
+  }
+
+  root = new Vue({
+    el: '#root',
+    render(h) {
+      return h('div', { attrs: { id: 'root' } }, [h(component)]);
+    },
+  });
 }
 
 export default function render({
@@ -16,6 +53,7 @@ export default function render({
   showMain,
   showError,
   showException,
+  forceRender,
 }) {
   Vue.config.errorHandler = showException;
 
@@ -33,10 +71,6 @@ export default function render({
   }
 
   showMain();
-  renderRoot({
-    el: '#root',
-    render(h) {
-      return h('div', { attrs: { id: 'root' } }, [h(component)]);
-    },
-  });
+
+  renderRoot({ forceRender, component });
 }

examples/vue-kitchen-sink/src/stories/SimpleKnobExample.vue

@@ -0,0 +1,23 @@
+<template>
+  <div @click="i++">I am {{ name }} and I'm {{ age }} years old. Inner State Counter {{ i }}</div>
+</template>
+
+<script>
+  export default {
+    props: {
+      name: String,
+      age: Number,
+    },
+    data() {
+      return {
+        i: 40,
+      };
+    },
+    created() {
+      console.log('created');
+    },
+    destroyed() {
+      console.log('destroyed');
+    },
+  }
+</script>

examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot

@@ -40,7 +40,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 
 exports[`Storyshots Addon|Knobs Simple 1`] = `
 <div>
-  I am John Doe and I'm 44 years old.
+  I am John Doe and I'm 44 years old. Inner State Counter 40
 </div>
 `;
 

examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js

@@ -12,15 +12,20 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
+import SimpleKnobExample from './SimpleKnobExample.vue';
+
 storiesOf('Addon|Knobs', module)
   .addDecorator(withKnobs)
   .add('Simple', () => {
     const name = text('Name', 'John Doe');
     const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
 
     return {
-      template: `<div>${content}</div>`,
+      components: { SimpleKnobExample },
+      template: '<simple-knob-example :name="name" :age="age" />',
+      data() {
+        return { name, age };
+      },
     };
   })
   .add('All knobs', () => {