fix handling of factories for default values when extracting props

app/vue/README.md

@@ -29,3 +29,20 @@ You can also build a [static version](https://storybook.js.org/basics/exporting-
 ## Vue Notes
 
 - When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
+
+## Known Limitations
+
+In Storybook story and decorator components you can not access the Vue instance
+in factory functions for default prop values:
+
+```js
+{
+  props: {
+    foo: {
+      default() {
+        return this.bar; // does not work!
+      }
+    }
+  }
+}
+```

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

@@ -3,15 +3,10 @@ import Vue from 'vue';
 
 import './globals';
 import render, { VALUES } from './render';
+import { extractProps } from './util';
 
 export const WRAPS = 'STORYBOOK_WRAPS';
 
-function extractProps(component) {
-  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

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

@@ -0,0 +1,20 @@
+function getType(fn) {
+  const match = fn && fn.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : '';
+}
+
+// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L92
+function resolveDefault({ type, default: def }) {
+  if (typeof def === 'function' && getType(type) !== 'Function') {
+    // known limitation: we dont have the component instance to pass
+    return def.call();
+  }
+
+  return def;
+}
+
+export function extractProps(component) {
+  return Object.entries(component.options.props || {})
+    .map(([name, prop]) => ({ [name]: resolveDefault(prop) }))
+    .reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
+}