improve vue integration

addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js

@@ -2,12 +2,15 @@
 import Vue from 'vue';
 
 function getRenderedTree(story, context) {
-  const storyElement = story.render(context);
+  const component = story.render(context);
 
-  const Constructor = Vue.extend(storyElement);
+  const vm = new Vue({
-  const vm = new Constructor().$mount();
+    render(h) {
+      return h(component);
+    },
+  });
 
-  return vm.$el;
+  return vm.$mount().$el;
 }
 
 export default getRenderedTree;

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

@@ -1,30 +1,72 @@
 import { start } from '@storybook/core/client';
+import Vue from 'vue';
 
 import './globals';
 import render from './render';
 
-const createWrapperComponent = Target => ({
+export const WRAPS = 'STORYBOOK_WRAPS';
-  functional: true,
+export const VALUES = 'STORYBOOK_VALUES';
-  render(h, c) {
-    return h(Target, c.data, c.children);
-  },
-});
-const decorateStory = (getStory, decorators) =>
-  decorators.reduce(
-    (decorated, decorator) => context => {
-      const story = () => decorated(context);
-      let decoratedStory = decorator(story, context);
 
-      if (typeof decoratedStory === 'string') {
+function extractProps(component) {
-        decoratedStory = { template: decoratedStory };
+  return Object.entries(component.options.props || {})
+    .map(([name, def]) => ({ [name]: def.default }))
+    .reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
+}
+
+function prepare(rawStory, innerStory) {
+  let story = rawStory;
+  // eslint-disable-next-line no-underscore-dangle
+  if (!story._isVue) {
+    if (typeof story === 'string') {
+      story = { template: story };
+    }
+    if (innerStory) {
+      story.components = { ...(story.components || {}), story: innerStory };
+    }
+    story = Vue.extend(story);
+  } else if (story.options[WRAPS]) {
+    return story;
+  }
+
+  return Vue.extend({
+    [WRAPS]: story,
+    [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
+    functional: true,
+    render(h, { data, parent, children }) {
+      return h(
+        story,
+        {
+          ...data,
+          props: { ...(data.props || {}), ...(parent.$root[VALUES] || {}) },
+        },
+        children
+      );
+    },
+  });
+}
+
+function decorateStory(getStory, decorators) {
+  return decorators.reduce(
+    (decorated, decorator) => context => {
+      let story;
+      const decoratedStory = decorator(() => {
+        story = decorated(context);
+        return story;
+      }, context);
+
+      if (!story) {
+        story = decorated(context);
       }
 
-      decoratedStory.components = decoratedStory.components || {};
+      if (decoratedStory === story) {
-      decoratedStory.components.story = createWrapperComponent(story());
+        return story;
-      return decoratedStory;
+      }
+
+      return prepare(decoratedStory, story);
     },
-    getStory
+    context => prepare(getStory(context))
   );
+}
 
 const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
 

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

@@ -1,24 +1,17 @@
 import { stripIndents } from 'common-tags';
 import Vue from 'vue';
+import { VALUES } from '.';
 
 let root = null;
 
-function getComponentProxy(component) {
+function renderRoot(component) {
-  return Object.entries(component.props || {})
-    .map(([name, def]) => ({ [name]: def.default }))
-    .reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
-}
-
-function renderRoot(component, proxy) {
   root = new Vue({
     el: '#root',
-    beforeCreate() {
+    data() {
-      this.proxy = proxy;
+      return { [VALUES]: component.options[VALUES] };
     },
-
     render(h) {
-      const props = this.proxy;
+      return h('div', { attrs: { id: 'root' } }, [h(component)]);
-      return h('div', { attrs: { id: 'root' } }, [h(component, { props })]);
     },
   });
 }
@@ -49,15 +42,12 @@ export default function render({
 
   showMain();
 
-  const proxy = getComponentProxy(component);
-
   // at component creation || refresh by HMR
   if (!root || !forceRender) {
     if (root) root.$destroy();
 
-    renderRoot(component, proxy);
+    renderRoot(component);
   } else {
-    root.proxy = proxy;
+    root[VALUES] = component.options[VALUES];
-    root.$forceUpdate();
   }
 }

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

@@ -7,28 +7,12 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
   <div
     style="margin: auto; max-height: 100%;"
   >
-    <div
+    <button
-      style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
     >
-      <div
+      A Button with rounded edges!
-        style="margin: auto; max-height: 100%;"
+    </button>
-      >
-        <div
-          style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
-        >
-          <div
-            style="margin: auto; max-height: 100%;"
-          >
-            <button
-              class="button rounded"
-              style="color: rgb(66, 185, 131); border-color: #42b983;"
-            >
-              A Button with rounded edges!
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 `;

examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot

@@ -5,21 +5,13 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
   style="border: medium solid blue;"
 >
   <div
-    style="border: medium solid blue;"
+    style="border: medium solid red;"
   >
-    <div
+    <button
-      style="border: medium solid blue;"
+      class="button"
     >
-      <div
+      renders component: MyButton!
-        style="border: medium solid red;"
+    </button>
-      >
-        <button
-          class="button"
-        >
-          renders component: MyButton!
-        </button>
-      </div>
-    </div>
   </div>
 </div>
 `;
@@ -29,22 +21,14 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
   style="border: medium solid blue;"
 >
   <div
-    style="border: medium solid blue;"
+    style="border: medium solid red;"
   >
-    <div
+    <button
-      style="border: medium solid blue;"
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
     >
-      <div
+      MyButton with template!
-        style="border: medium solid red;"
+    </button>
-      >
-        <button
-          class="button"
-          style="color: rgb(66, 185, 131); border-color: #42b983;"
-        >
-          MyButton with template!
-        </button>
-      </div>
-    </div>
   </div>
 </div>
 `;