@storybook/vue3 6.5.0-alpha.9 → 6.5.0-beta.2

package/README.md

@@ -19,8 +19,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 
 ---
 
-Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue3/configure/storybook-addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/vue3/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
 
 ## Extending the Vue application
 

package/dist/cjs/client/docs/config.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parameters = exports.argTypesEnhancers = void 0;
+
+var _docsTools = require("@storybook/docs-tools");
+
+var _extractArgTypes = require("./extractArgTypes");
+
+var _prepareForInline = require("./prepareForInline");
+
+var parameters = {
+  docs: {
+    inlineStories: true,
+    prepareForInline: _prepareForInline.prepareForInline,
+    extractArgTypes: _extractArgTypes.extractArgTypes,
+    extractComponentDescription: _docsTools.extractComponentDescription
+  }
+};
+exports.parameters = parameters;
+var argTypesEnhancers = [_docsTools.enhanceArgTypes];
+exports.argTypesEnhancers = argTypesEnhancers;

package/dist/cjs/client/docs/extractArgTypes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractArgTypes = void 0;
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _docsTools = require("@storybook/docs-tools");
+
+var SECTIONS = ['props', 'events', 'slots'];
+
+var extractArgTypes = function extractArgTypes(component) {
+  if (!(0, _docsTools.hasDocgen)(component)) {
+    return null;
+  }
+
+  var results = {};
+  SECTIONS.forEach(function (section) {
+    var props = (0, _docsTools.extractComponentProps)(component, section);
+    props.forEach(function (_ref) {
+      var propDef = _ref.propDef,
+          docgenInfo = _ref.docgenInfo,
+          jsDocTags = _ref.jsDocTags;
+      var name = propDef.name,
+          type = propDef.type,
+          description = propDef.description,
+          defaultSummary = propDef.defaultValue,
+          required = propDef.required;
+      var sbType = section === 'props' ? (0, _docsTools.convert)(docgenInfo) : {
+        name: 'void'
+      };
+      results[name] = {
+        name: name,
+        description: description,
+        type: Object.assign({
+          required: required
+        }, sbType),
+        table: {
+          type: type,
+          jsDocTags: jsDocTags,
+          defaultValue: defaultSummary,
+          category: section
+        }
+      };
+    });
+  });
+  return results;
+};
+
+exports.extractArgTypes = extractArgTypes;

package/dist/cjs/client/docs/prepareForInline.js

@@ -0,0 +1,61 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareForInline = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var Vue = _interopRequireWildcard(require("vue"));
+
+var _index = require("../index");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This is cast as `any` to workaround type errors caused by Vue 2 types
+var _ref = Vue,
+    render = _ref.render,
+    h = _ref.h;
+
+var prepareForInline = function prepareForInline(storyFn, _ref2) {
+  var args = _ref2.args;
+  var component = storyFn();
+  var vnode = h(component, args); // By attaching the app context from `@storybook/vue3` to the vnode
+  // like this, these stoeis are able to access any app config stuff
+  // the end-user set inside `.storybook/preview.js`
+
+  vnode.appContext = _index.app._context; // eslint-disable-line no-underscore-dangle
+
+  return /*#__PURE__*/_react.default.createElement('div', {
+    ref: function ref(node) {
+      return node ? render(vnode, node) : null;
+    }
+  });
+};
+
+exports.prepareForInline = prepareForInline;

package/dist/cjs/client/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -19,16 +21,10 @@ var _exportNames = {
   app: true,
   activeStoryComponent: true
 };
-Object.defineProperty(exports, "storiesOf", {
-  enumerable: true,
-  get: function get() {
-    return _preview.storiesOf;
-  }
-});
-Object.defineProperty(exports, "setAddon", {
+Object.defineProperty(exports, "activeStoryComponent", {
   enumerable: true,
   get: function get() {
-    return _preview.setAddon;
+    return _preview.activeStoryComponent;
   }
 });
 Object.defineProperty(exports, "addDecorator", {
@@ -43,16 +39,16 @@ Object.defineProperty(exports, "addParameters", {
     return _preview.addParameters;
   }
 });
-Object.defineProperty(exports, "configure", {
+Object.defineProperty(exports, "app", {
   enumerable: true,
   get: function get() {
-    return _preview.configure;
+    return _preview.app;
   }
 });
-Object.defineProperty(exports, "getStorybook", {
+Object.defineProperty(exports, "configure", {
   enumerable: true,
   get: function get() {
-    return _preview.getStorybook;
+    return _preview.configure;
   }
 });
 Object.defineProperty(exports, "forceReRender", {
@@ -61,22 +57,28 @@ Object.defineProperty(exports, "forceReRender", {
     return _preview.forceReRender;
   }
 });
+Object.defineProperty(exports, "getStorybook", {
+  enumerable: true,
+  get: function get() {
+    return _preview.getStorybook;
+  }
+});
 Object.defineProperty(exports, "raw", {
   enumerable: true,
   get: function get() {
     return _preview.raw;
   }
 });
-Object.defineProperty(exports, "app", {
+Object.defineProperty(exports, "setAddon", {
   enumerable: true,
   get: function get() {
-    return _preview.app;
+    return _preview.setAddon;
   }
 });
-Object.defineProperty(exports, "activeStoryComponent", {
+Object.defineProperty(exports, "storiesOf", {
   enumerable: true,
   get: function get() {
-    return _preview.activeStoryComponent;
+    return _preview.storiesOf;
   }
 });
 

package/dist/cjs/client/preview/config.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "renderToDOM", {
+Object.defineProperty(exports, "decorateStory", {
   enumerable: true,
   get: function get() {
-    return _render.renderToDOM;
+    return _decorateStory.decorateStory;
   }
 });
-Object.defineProperty(exports, "decorateStory", {
+exports.parameters = void 0;
+Object.defineProperty(exports, "renderToDOM", {
   enumerable: true,
   get: function get() {
-    return _decorateStory.decorateStory;
+    return _render.renderToDOM;
   }
 });
-exports.parameters = void 0;
 
 var _render = require("./render");
 

package/dist/cjs/client/preview/decorateStory.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.object.assign.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 var _vue = require("vue");
 
 var _store = require("@storybook/store");

package/dist/cjs/client/preview/index.js

@@ -9,11 +9,11 @@ Object.defineProperty(exports, "activeStoryComponent", {
     return _render.activeStoryComponent;
   }
 });
-exports.app = exports.raw = exports.getStorybook = exports.forceReRender = exports.setAddon = exports.clearDecorators = exports.addParameters = exports.addDecorator = exports.configure = exports.storiesOf = void 0;
+exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.app = exports.addParameters = exports.addDecorator = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
-var _client = require("@storybook/core/client");
+var _core = require("@storybook/core");
 
 require("./globals");
 
@@ -22,7 +22,7 @@ var _decorateStory = require("./decorateStory");
 var _render = require("./render");
 
 var framework = 'vue3';
-var api = (0, _client.start)(_render.renderToDOM, {
+var api = (0, _core.start)(_render.renderToDOM, {
   decorateStory: _decorateStory.decorateStory,
   render: _render.render
 });

package/dist/cjs/client/preview/render.js

@@ -7,8 +7,9 @@ require("core-js/modules/es.object.freeze.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.render = exports.activeStoryComponent = void 0;
 exports.renderToDOM = renderToDOM;
-exports.storybookApp = exports.activeStoryComponent = exports.render = void 0;
+exports.storybookApp = void 0;
 
 require("core-js/modules/es.function.name.js");
 
@@ -30,7 +31,8 @@ var render = function render(props, context) {
 
   if (!Component) {
     throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
-  }
+  } // TODO remove this hack
+
 
   return (0, _vue.h)(Component, props);
 };

package/dist/cjs/client/preview/types-6-0.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/client/preview/types-7-0.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/client/preview/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/server/framework-preset-vue3-docs.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.previewAnnotations = void 0;
+exports.webpackFinal = webpackFinal;
+
+var _coreCommon = require("@storybook/core-common");
+
+var _docsTools = require("@storybook/docs-tools");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function webpackFinal(webpackConfig = {}, options) {
+  var _options$presetsList;
+
+  if (!(0, _docsTools.hasDocsOrControls)(options)) return webpackConfig;
+  var vueDocgenOptions = {};
+  (_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(function (preset) {
+    if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
+      var appendableOptions = preset.options.vueDocgenOptions;
+      vueDocgenOptions = _objectSpread(_objectSpread({}, vueDocgenOptions), appendableOptions);
+    }
+  });
+  webpackConfig.module.rules.push({
+    test: /\.vue$/,
+    loader: require.resolve('vue-docgen-loader', {
+      paths: [require.resolve('@storybook/vue3')]
+    }),
+    enforce: 'post',
+    options: {
+      docgenOptions: _objectSpread({
+        alias: webpackConfig.resolve.alias
+      }, vueDocgenOptions)
+    }
+  });
+  return webpackConfig;
+}
+
+var previewAnnotations = function (entry = [], options) {
+  if (!(0, _docsTools.hasDocsOrControls)(options)) return entry;
+  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/docs/config')];
+};
+
+exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/framework-preset-vue3.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.previewAnnotations = void 0;
 exports.webpack = webpack;
-exports.config = void 0;
 
 var _vueLoader = require("vue-loader");
 
@@ -12,9 +12,9 @@ var _webpack = require("webpack");
 
 var _coreCommon = require("@storybook/core-common");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -49,8 +49,8 @@ function webpack(config) {
   });
 }
 
-var config = function (entry = []) {
+var previewAnnotations = function (entry = []) {
   return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
 };
 
-exports.config = config;
+exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/options.js

@@ -12,6 +12,6 @@ var _default = {
     cwd: __dirname
   }).packageJson,
   framework: 'vue3',
-  frameworkPresets: [require.resolve('./framework-preset-vue3')]
+  frameworkPresets: [require.resolve('./preset')]
 };
 exports.default = _default;

package/dist/cjs/server/preset.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addons = void 0;
+var addons = [require.resolve('./framework-preset-vue3'), require.resolve('./framework-preset-vue3-docs')];
+exports.addons = addons;

package/dist/esm/client/docs/config.js

@@ -0,0 +1,12 @@
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes } from './extractArgTypes';
+import { prepareForInline } from './prepareForInline';
+export var parameters = {
+  docs: {
+    inlineStories: true,
+    prepareForInline: prepareForInline,
+    extractArgTypes: extractArgTypes,
+    extractComponentDescription: extractComponentDescription
+  }
+};
+export var argTypesEnhancers = [enhanceArgTypes];

package/dist/esm/client/docs/extractArgTypes.js

@@ -0,0 +1,45 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.assign.js";
+import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
+var SECTIONS = ['props', 'events', 'slots'];
+export var extractArgTypes = function extractArgTypes(component) {
+  if (!hasDocgen(component)) {
+    return null;
+  }
+
+  var results = {};
+  SECTIONS.forEach(function (section) {
+    var props = extractComponentProps(component, section);
+    props.forEach(function (_ref) {
+      var propDef = _ref.propDef,
+          docgenInfo = _ref.docgenInfo,
+          jsDocTags = _ref.jsDocTags;
+      var name = propDef.name,
+          type = propDef.type,
+          description = propDef.description,
+          defaultSummary = propDef.defaultValue,
+          required = propDef.required;
+      var sbType = section === 'props' ? convert(docgenInfo) : {
+        name: 'void'
+      };
+      results[name] = {
+        name: name,
+        description: description,
+        type: Object.assign({
+          required: required
+        }, sbType),
+        table: {
+          type: type,
+          jsDocTags: jsDocTags,
+          defaultValue: defaultSummary,
+          category: section
+        }
+      };
+    });
+  });
+  return results;
+};

package/dist/esm/client/docs/prepareForInline.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as Vue from 'vue';
+import { app } from '../index'; // This is cast as `any` to workaround type errors caused by Vue 2 types
+
+var _ref = Vue,
+    render = _ref.render,
+    h = _ref.h;
+export var prepareForInline = function prepareForInline(storyFn, _ref2) {
+  var args = _ref2.args;
+  var component = storyFn();
+  var vnode = h(component, args); // By attaching the app context from `@storybook/vue3` to the vnode
+  // like this, these stoeis are able to access any app config stuff
+  // the end-user set inside `.storybook/preview.js`
+
+  vnode.appContext = app._context; // eslint-disable-line no-underscore-dangle
+
+  return /*#__PURE__*/React.createElement('div', {
+    ref: function ref(node) {
+      return node ? render(vnode, node) : null;
+    }
+  });
+};

package/dist/esm/client/preview/decorateStory.js

@@ -1,5 +1,6 @@
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.object.to-string.js";
 import { h } from 'vue';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 

package/dist/esm/client/preview/index.js

@@ -1,5 +1,5 @@
 import "core-js/modules/es.array.concat.js";
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
 import './globals';
 import { decorateStory } from './decorateStory';
 import { render, renderToDOM, storybookApp } from './render';

package/dist/esm/client/preview/render.js

@@ -14,7 +14,8 @@ export var render = function render(props, context) {
 
   if (!Component) {
     throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
-  }
+  } // TODO remove this hack
+
 
   return h(Component, props);
 };

package/dist/esm/client/preview/types-6-0.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/client/preview/types-7-0.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/client/preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/server/framework-preset-vue3-docs.js

@@ -0,0 +1,37 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { findDistEsm } from '@storybook/core-common';
+import { hasDocsOrControls } from '@storybook/docs-tools';
+export function webpackFinal(webpackConfig = {}, options) {
+  var _options$presetsList;
+
+  if (!hasDocsOrControls(options)) return webpackConfig;
+  var vueDocgenOptions = {};
+  (_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(function (preset) {
+    if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
+      var appendableOptions = preset.options.vueDocgenOptions;
+      vueDocgenOptions = _objectSpread(_objectSpread({}, vueDocgenOptions), appendableOptions);
+    }
+  });
+  webpackConfig.module.rules.push({
+    test: /\.vue$/,
+    loader: require.resolve('vue-docgen-loader', {
+      paths: [require.resolve('@storybook/vue3')]
+    }),
+    enforce: 'post',
+    options: {
+      docgenOptions: _objectSpread({
+        alias: webpackConfig.resolve.alias
+      }, vueDocgenOptions)
+    }
+  });
+  return webpackConfig;
+}
+export var previewAnnotations = function (entry = [], options) {
+  if (!hasDocsOrControls(options)) return entry;
+  return [...entry, findDistEsm(__dirname, 'client/docs/config')];
+};

package/dist/esm/server/framework-preset-vue3.js

@@ -1,6 +1,6 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -37,6 +37,6 @@ export function webpack(config) {
     })
   });
 }
-export var config = function (entry = []) {
+export var previewAnnotations = function (entry = []) {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };

package/dist/esm/server/options.js

@@ -4,5 +4,5 @@ export default {
     cwd: __dirname
   }).packageJson,
   framework: 'vue3',
-  frameworkPresets: [require.resolve('./framework-preset-vue3')]
+  frameworkPresets: [require.resolve('./preset')]
 };

package/dist/esm/server/preset.js

@@ -0,0 +1 @@
+export var addons = [require.resolve('./framework-preset-vue3'), require.resolve('./framework-preset-vue3-docs')];

package/dist/modern/client/docs/config.js

@@ -0,0 +1,12 @@
+import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+import { extractArgTypes } from './extractArgTypes';
+import { prepareForInline } from './prepareForInline';
+export const parameters = {
+  docs: {
+    inlineStories: true,
+    prepareForInline,
+    extractArgTypes,
+    extractComponentDescription
+  }
+};
+export const argTypesEnhancers = [enhanceArgTypes];

package/dist/modern/client/docs/extractArgTypes.js

@@ -0,0 +1,42 @@
+import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
+const SECTIONS = ['props', 'events', 'slots'];
+export const extractArgTypes = component => {
+  if (!hasDocgen(component)) {
+    return null;
+  }
+
+  const results = {};
+  SECTIONS.forEach(section => {
+    const props = extractComponentProps(component, section);
+    props.forEach(({
+      propDef,
+      docgenInfo,
+      jsDocTags
+    }) => {
+      const {
+        name,
+        type,
+        description,
+        defaultValue: defaultSummary,
+        required
+      } = propDef;
+      const sbType = section === 'props' ? convert(docgenInfo) : {
+        name: 'void'
+      };
+      results[name] = {
+        name,
+        description,
+        type: Object.assign({
+          required
+        }, sbType),
+        table: {
+          type,
+          jsDocTags,
+          defaultValue: defaultSummary,
+          category: section
+        }
+      };
+    });
+  });
+  return results;
+};

package/dist/modern/client/docs/prepareForInline.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as Vue from 'vue';
+import { app } from '../index'; // This is cast as `any` to workaround type errors caused by Vue 2 types
+
+const {
+  render,
+  h
+} = Vue;
+export const prepareForInline = (storyFn, {
+  args
+}) => {
+  const component = storyFn();
+  const vnode = h(component, args); // By attaching the app context from `@storybook/vue3` to the vnode
+  // like this, these stoeis are able to access any app config stuff
+  // the end-user set inside `.storybook/preview.js`
+
+  vnode.appContext = app._context; // eslint-disable-line no-underscore-dangle
+
+  return /*#__PURE__*/React.createElement('div', {
+    ref: node => node ? render(vnode, node) : null
+  });
+};

package/dist/modern/client/preview/index.js

@@ -1,4 +1,4 @@
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
 import './globals';
 import { decorateStory } from './decorateStory';
 import { render, renderToDOM, storybookApp } from './render';

package/dist/modern/client/preview/render.js

@@ -8,7 +8,8 @@ export const render = (props, context) => {
 
   if (!Component) {
     throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
-  }
+  } // TODO remove this hack
+
 
   return h(Component, props);
 };

package/dist/modern/client/preview/types-6-0.js

@@ -0,0 +1 @@
+export {};

package/dist/modern/client/preview/types-7-0.js

@@ -0,0 +1 @@
+export {};

package/dist/modern/client/preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/modern/server/framework-preset-vue3-docs.js

@@ -0,0 +1,37 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { findDistEsm } from '@storybook/core-common';
+import { hasDocsOrControls } from '@storybook/docs-tools';
+export function webpackFinal(webpackConfig = {}, options) {
+  var _options$presetsList;
+
+  if (!hasDocsOrControls(options)) return webpackConfig;
+  var vueDocgenOptions = {};
+  (_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(function (preset) {
+    if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
+      var appendableOptions = preset.options.vueDocgenOptions;
+      vueDocgenOptions = _objectSpread(_objectSpread({}, vueDocgenOptions), appendableOptions);
+    }
+  });
+  webpackConfig.module.rules.push({
+    test: /\.vue$/,
+    loader: require.resolve('vue-docgen-loader', {
+      paths: [require.resolve('@storybook/vue3')]
+    }),
+    enforce: 'post',
+    options: {
+      docgenOptions: _objectSpread({
+        alias: webpackConfig.resolve.alias
+      }, vueDocgenOptions)
+    }
+  });
+  return webpackConfig;
+}
+export var previewAnnotations = function (entry = [], options) {
+  if (!hasDocsOrControls(options)) return entry;
+  return [...entry, findDistEsm(__dirname, 'client/docs/config')];
+};

package/dist/modern/server/framework-preset-vue3.js

@@ -1,6 +1,6 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -37,6 +37,6 @@ export function webpack(config) {
     })
   });
 }
-export var config = function (entry = []) {
+export var previewAnnotations = function (entry = []) {
   return [...entry, findDistEsm(__dirname, 'client/preview/config')];
 };

package/dist/modern/server/options.js

@@ -4,5 +4,5 @@ export default {
     cwd: __dirname
   }).packageJson,
   framework: 'vue3',
-  frameworkPresets: [require.resolve('./framework-preset-vue3')]
+  frameworkPresets: [require.resolve('./preset')]
 };

package/dist/modern/server/preset.js

@@ -0,0 +1 @@
+export var addons = [require.resolve('./framework-preset-vue3'), require.resolve('./framework-preset-vue3-docs')];

package/dist/ts3.4/client/docs/config.d.ts

@@ -0,0 +1,10 @@
+import { extractComponentDescription } from '@storybook/docs-tools';
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").VueFramework, import("@storybook/csf").Args>, { args }: import("@storybook/csf").StoryContext<import("..").VueFramework, import("@storybook/csf").Args>) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+        extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
+        extractComponentDescription: typeof extractComponentDescription;
+    };
+};
+export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

package/dist/ts3.4/client/docs/extractArgTypes.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypesExtractor } from '@storybook/docs-tools';
+export declare const extractArgTypes: ArgTypesExtractor;

package/dist/ts3.4/client/docs/prepareForInline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StoryContext, PartialStoryFn } from '@storybook/csf';
+import { VueFramework } from '../index';
+export declare const prepareForInline: (storyFn: PartialStoryFn<VueFramework>, { args }: StoryContext<VueFramework>) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/ts3.4/server/framework-preset-vue3-docs.d.ts

@@ -0,0 +1,3 @@
+import { Options, StorybookConfig } from '@storybook/core-common';
+export declare function webpackFinal(webpackConfig: any, options: Options): any;
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.4/server/framework-preset-vue3.d.ts

@@ -1,4 +1,4 @@
 import { Configuration } from 'webpack';
 import { StorybookConfig } from '@storybook/core-common';
 export declare function webpack(config: Configuration): Configuration;
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.4/server/preset.d.ts

@@ -0,0 +1,2 @@
+import { StorybookConfig } from '@storybook/core-common';
+export declare const addons: StorybookConfig['addons'];

package/dist/ts3.9/client/docs/config.d.ts

@@ -0,0 +1,10 @@
+import { extractComponentDescription } from '@storybook/docs-tools';
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import("..").VueFramework, import("@storybook/csf").Args>, { args }: import("@storybook/csf").StoryContext<import("..").VueFramework, import("@storybook/csf").Args>) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+        extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
+        extractComponentDescription: typeof extractComponentDescription;
+    };
+};
+export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("@storybook/addons").Parameters)[];

package/dist/ts3.9/client/docs/extractArgTypes.d.ts

@@ -0,0 +1,2 @@
+import type { ArgTypesExtractor } from '@storybook/docs-tools';
+export declare const extractArgTypes: ArgTypesExtractor;

package/dist/ts3.9/client/docs/prepareForInline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StoryContext, PartialStoryFn } from '@storybook/csf';
+import { VueFramework } from '../index';
+export declare const prepareForInline: (storyFn: PartialStoryFn<VueFramework>, { args }: StoryContext<VueFramework>) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/ts3.9/client/preview/decorateStory.d.ts

@@ -1,3 +1,3 @@
-import { DecoratorFunction, LegacyStoryFn } from '@storybook/csf';
-import { VueFramework } from './types-6-0';
+import type { DecoratorFunction, LegacyStoryFn } from '@storybook/csf';
+import type { VueFramework } from './types-6-0';
 export declare function decorateStory(storyFn: LegacyStoryFn<VueFramework>, decorators: DecoratorFunction<VueFramework>[]): LegacyStoryFn<VueFramework>;

package/dist/ts3.9/client/preview/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
 import type { App } from 'vue';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { IStorybookSection } from './types';
-import { VueFramework } from './types-6-0';
+import type { IStorybookSection } from './types';
+import type { VueFramework } from './types-6-0';
 interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;

package/dist/ts3.9/client/preview/render.d.ts

@@ -1,5 +1,5 @@
-import { RenderContext } from '@storybook/store';
-import { ArgsStoryFn } from '@storybook/csf';
+import type { RenderContext } from '@storybook/store';
+import type { ArgsStoryFn } from '@storybook/csf';
 import { VueFramework } from './types-6-0';
 export declare const render: ArgsStoryFn<VueFramework>;
 export declare const activeStoryComponent: import("vue").Ref<import("vue").ComponentOptions<any, any, any, Record<string, import("@vue/reactivity").ComputedGetter<any> | import("vue").WritableComputedOptions<any>>, import("vue").MethodOptions, any, any, any>> | import("vue").Ref<import("vue").FunctionalComponent<any, any>>;

package/dist/ts3.9/client/preview/types-6-0.d.ts

@@ -1,6 +1,6 @@
-import { ConcreteComponent } from 'vue';
-import { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-import { StoryFnVueReturnType } from './types';
+import type { ConcreteComponent } from 'vue';
+import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
+import type { StoryFnVueReturnType } from './types';
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 export declare type VueFramework = {
     component: ConcreteComponent<any>;

package/dist/ts3.9/client/preview/types-7-0.d.ts

@@ -1,4 +1,4 @@
-import { Args } from '@storybook/csf';
+import type { Args } from '@storybook/csf';
 import type { StoryObj } from './types-6-0';
 export type { StoryFn, StoryObj, Meta } from './types-6-0';
 /**

package/dist/ts3.9/server/framework-preset-vue3-docs.d.ts

@@ -0,0 +1,3 @@
+import type { Options, StorybookConfig } from '@storybook/core-common';
+export declare function webpackFinal(webpackConfig: any, options: Options): any;
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.9/server/framework-preset-vue3.d.ts

@@ -1,4 +1,4 @@
 import { Configuration } from 'webpack';
-import { StorybookConfig } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/core-common';
 export declare function webpack(config: Configuration): Configuration;
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.9/server/options.d.ts

@@ -1,3 +1,3 @@
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 declare const _default: LoadOptions;
 export default _default;

package/dist/ts3.9/server/preset.d.ts

@@ -0,0 +1,2 @@
+import type { StorybookConfig } from '@storybook/core-common';
+export declare const addons: StorybookConfig['addons'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "6.5.0-alpha.9",
+  "version": "6.5.0-beta.2",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -45,11 +45,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.9",
-    "@storybook/core": "6.5.0-alpha.9",
-    "@storybook/core-common": "6.5.0-alpha.9",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/store": "6.5.0-alpha.9",
+    "@storybook/addons": "6.5.0-beta.2",
+    "@storybook/core": "6.5.0-beta.2",
+    "@storybook/core-common": "6.5.0-beta.2",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/docs-tools": "6.5.0-beta.2",
+    "@storybook/store": "6.5.0-beta.2",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
     "core-js": "^3.8.2",
@@ -60,14 +61,15 @@
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
-    "vue-docgen-api": "^4.38.0",
+    "vue-docgen-api": "^4.44.15",
     "vue-docgen-loader": "^1.5.0",
-    "vue-loader": "^16.0.0",
-    "webpack": "4"
+    "vue-loader": "^16.4.1",
+    "webpack": ">=4.0.0 <6.0.0"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0",
-    "vue": "^3.0.0"
+    "@vue/compiler-sfc": "3.0.0",
+    "vue": "3.0.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -81,6 +83,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fb124ab94e8b5ed0920bc7954e6f6a70bf79c37a",
+  "gitHead": "b42ccab2b3f9d4f1f8f862242a5e4af0d3306061",
   "sbmodern": "dist/modern/client/index.js"
 }

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/server/framework-preset-vue3');
+module.exports = require('./dist/cjs/server/preset');

package/dist/cjs/typings.d.js

@@ -1 +0,0 @@
-"use strict";