@storybook/vue 6.5.7 → 7.0.0-alpha.0

package/README.md

@@ -1,48 +1 @@
-# Storybook for Vue
-
-Storybook for Vue is a UI development environment for your Vue components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-vue-app
-npx sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
-
-<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
-
----
-
-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.
-
-## Vue Notes
-
-- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.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!
-      }
-    }
-  }
-}
-```
+# Storybook Vue renderer

package/dist/cjs/config.js

@@ -0,0 +1,51 @@
+"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");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  decorators: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function get() {
+    return _config.argTypesEnhancers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function get() {
+    return _config.decorators;
+  }
+});
+exports.parameters = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _config = require("./docs/config");
+
+var _config2 = require("./preview/config");
+
+Object.keys(_config2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _config2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _config2[key];
+    }
+  });
+});
+var parameters = Object.assign({
+  framework: 'vue'
+}, _config.parameters);
+exports.parameters = parameters;

package/dist/cjs/{client/index.js → index.js}

@@ -84,6 +84,7 @@ Object.keys(_types).forEach(function (key) {
   });
 });
 
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
+var _module, _module$hot;
+
+// optimization: stop HMR propagation in webpack
+(_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();

package/dist/cjs/{client/preview → preview}/index.js

@@ -7,7 +7,7 @@ exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = expo
 
 require("core-js/modules/es.array.concat.js");
 
-var _core = require("@storybook/core");
+var _coreClient = require("@storybook/core-client");
 
 require("./globals");
 
@@ -17,7 +17,7 @@ var _decorateStory = require("./decorateStory");
 
 /* eslint-disable prefer-destructuring */
 var framework = 'vue';
-var api = (0, _core.start)(_render.renderToDOM, {
+var api = (0, _coreClient.start)(_render.renderToDOM, {
   decorateStory: _decorateStory.decorateStory,
   render: _render.render
 });

package/dist/cjs/{client/preview → preview}/util.js

@@ -51,6 +51,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+/* eslint-disable @typescript-eslint/ban-types */
 function getType(fn) {
   var match = fn && fn.toString().match(/^\s*function (\w+)/);
   return match ? match[1] : '';

package/dist/esm/config.js

@@ -0,0 +1,6 @@
+import { parameters as docsParams } from './docs/config';
+export const parameters = Object.assign({
+  framework: 'vue'
+}, docsParams);
+export { decorators, argTypesEnhancers } from './docs/config';
+export * from './preview/config';

package/dist/{modern/client → esm}/docs/sourceDecorator.js

@@ -1,22 +1,20 @@
-import "core-js/modules/es.array.reduce.js";
+/* eslint-disable no-underscore-dangle */
 
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
 export const skipSourceRender = context => {
-  var _context$parameters$d;
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory; // always render if the user forces it
 
-  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
-  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
-
-  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.DYNAMIC) {
+  if (sourceParams?.type === SourceType.DYNAMIC) {
     return false;
   } // never render if the user is forcing the block to render code, or
   // if the user provides code, or if it's not an args story.
 
 
-  return !isArgsStory || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 export const sourceDecorator = (storyFn, context) => {
   const story = storyFn(); // See ../react/jsxDecorator.tsx
@@ -54,9 +52,7 @@ export const sourceDecorator = (storyFn, context) => {
   };
 };
 export function vnodeToString(vnode) {
-  var _vnode$data, _vnode$componentOptio, _vnode$data2;
-
-  const attrString = [...((_vnode$data = vnode.data) !== null && _vnode$data !== void 0 && _vnode$data.slot ? [['slot', vnode.data.slot]] : []), ['class', stringifyClassAttribute(vnode)], ...((_vnode$componentOptio = vnode.componentOptions) !== null && _vnode$componentOptio !== void 0 && _vnode$componentOptio.propsData ? Object.entries(vnode.componentOptions.propsData) : []), ...((_vnode$data2 = vnode.data) !== null && _vnode$data2 !== void 0 && _vnode$data2.attrs ? Object.entries(vnode.data.attrs) : [])].filter(([name], index, list) => list.findIndex(item => item[0] === name) === index).map(([name, value]) => stringifyAttr(name, value)).filter(Boolean).join(' ');
+  const attrString = [...(vnode.data?.slot ? [['slot', vnode.data.slot]] : []), ['class', stringifyClassAttribute(vnode)], ...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []), ...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : [])].filter(([name], index, list) => list.findIndex(item => item[0] === name) === index).map(([name, value]) => stringifyAttr(name, value)).filter(Boolean).join(' ');
 
   if (!vnode.componentOptions) {
     // Non-component elements (div, span, etc...)
@@ -93,13 +89,11 @@ export function vnodeToString(vnode) {
 }
 
 function stringifyClassAttribute(vnode) {
-  var _vnode$data$staticCla, _vnode$data$staticCla2;
-
   if (!vnode.data || !vnode.data.staticClass && !vnode.data.class) {
     return undefined;
   }
 
-  return [...((_vnode$data$staticCla = (_vnode$data$staticCla2 = vnode.data.staticClass) === null || _vnode$data$staticCla2 === void 0 ? void 0 : _vnode$data$staticCla2.split(' ')) !== null && _vnode$data$staticCla !== void 0 ? _vnode$data$staticCla : []), ...normalizeClassBinding(vnode.data.class)].filter(Boolean).join(' ') || undefined;
+  return [...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)].filter(Boolean).join(' ') || undefined;
 } // https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
 
 

package/dist/esm/{client/index.js → index.js}

@@ -1,6 +1,4 @@
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './preview';
-export * from './preview/types-6-0';
+export * from './preview/types-6-0'; // optimization: stop HMR propagation in webpack
 
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
+module?.hot?.decline();

package/dist/{modern/client → esm}/preview/decorateStory.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import Vue from 'vue';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import { extractProps } from './util';

package/dist/{modern/client → esm}/preview/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-destructuring */
-import { start } from '@storybook/core';
+import { start } from '@storybook/core-client';
 import './globals';
 import { renderToDOM, render } from './render';
 import { decorateStory } from './decorateStory';

package/dist/{modern/client → esm}/preview/render.js

@@ -22,8 +22,6 @@ const root = new Vue({
 
 });
 export const render = (props, context) => {
-  var _component$__docgenIn;
-
   const {
     id,
     component: Component,
@@ -42,11 +40,9 @@ export const render = (props, context) => {
     // @ts-ignore isReservedTag is an internal function from Vue, might be changed in future releases
     const isReservedTag = Vue.config.isReservedTag && Vue.config.isReservedTag(component.name);
     componentName = isReservedTag ? `sb-${component.name}` : component.name;
-  } else if ((_component$__docgenIn = component.__docgenInfo) !== null && _component$__docgenIn !== void 0 && _component$__docgenIn.displayName) {
-    var _component$__docgenIn2;
-
+  } else if (component.__docgenInfo?.displayName) {
     // otherwise, we use the displayName from docgen, if present
-    componentName = (_component$__docgenIn2 = component.__docgenInfo) === null || _component$__docgenIn2 === void 0 ? void 0 : _component$__docgenIn2.displayName;
+    componentName = component.__docgenInfo?.displayName;
   }
 
   return {

package/dist/{modern/client → esm}/preview/util.js

@@ -1,5 +1,4 @@
-import "core-js/modules/es.array.reduce.js";
-
+/* eslint-disable @typescript-eslint/ban-types */
 function getType(fn) {
   const match = fn && fn.toString().match(/^\s*function (\w+)/);
   return match ? match[1] : '';

package/dist/types/config.d.ts

@@ -0,0 +1,12 @@
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        iframeHeight: number;
+        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<null, HTMLElement>;
+        extractArgTypes: import("lib/docs-tools/dist/types").ArgTypesExtractor;
+        extractComponentDescription: typeof import("lib/docs-tools/dist/types").extractComponentDescription;
+    };
+    framework: string;
+};
+export { decorators, argTypesEnhancers } from './docs/config';
+export * from './preview/config';

package/dist/{ts3.9/client → types}/docs/config.d.ts

@@ -9,4 +9,4 @@ export declare const parameters: {
     };
 };
 export declare const decorators: ((storyFn: any, context: import("@storybook/csf").StoryContext<import("..").VueFramework, import("@storybook/csf").Args>) => any)[];
-export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/addons").Parameters | import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args>)[];
+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("lib/addons/dist/types").Parameters)[];

package/dist/{ts3.9/client → types}/preview/types.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-export type { RenderContext } from '@storybook/core';
+export type { RenderContext } from '@storybook/core-client';
 export interface ShowErrorArgs {
     title: string;
     description: string;

package/package.json

@@ -1,41 +1,28 @@
 {
   "name": "@storybook/vue",
-  "version": "6.5.7",
-  "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
+  "version": "7.0.0-alpha.0",
+  "description": "Storybook Vue renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/vue",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/vue",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/vue"
+    "directory": "renderers/vue"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/client/index.js",
-  "module": "dist/esm/client/index.js",
-  "types": "dist/ts3.9/client/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "bin/**/*",
     "dist/**/*",
     "README.md",
     "*.js",
@@ -45,40 +32,27 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.7",
-    "@storybook/client-logger": "6.5.7",
-    "@storybook/core": "6.5.7",
-    "@storybook/core-common": "6.5.7",
+    "@storybook/addons": "7.0.0-alpha.0",
+    "@storybook/client-logger": "7.0.0-alpha.0",
+    "@storybook/core-client": "7.0.0-alpha.0",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.7",
-    "@storybook/store": "6.5.7",
-    "@types/node": "^14.14.20 || ^16.0.0",
-    "@types/webpack-env": "^1.16.0",
+    "@storybook/docs-tools": "7.0.0-alpha.0",
+    "@storybook/store": "7.0.0-alpha.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
-    "ts-dedent": "^2.0.0",
-    "ts-loader": "^8.0.14",
-    "vue-docgen-api": "^4.44.15",
-    "vue-docgen-loader": "^1.5.0",
-    "webpack": ">=4.0.0 <6.0.0"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "vue": "^2.6.12",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "4"
+    "vue": "^2.6.12"
   },
   "peerDependencies": {
     "@babel/core": "*",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "css-loader": "*",
-    "vue": "^2.6.8",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.8"
+    "vue": "^2.6.8"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -86,6 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e19d3e734efa14e7cffba146295ca0d3467a8c6",
-  "sbmodern": "dist/modern/client/index.js"
+  "gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23"
 }

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/config';

package/bin/build.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-require('../dist/cjs/server/build');

package/bin/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../dist/cjs/server');

package/dist/cjs/server/build.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _server = require("@storybook/core/server");
-
-var _options = _interopRequireDefault(require("./options"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _server.buildStatic)(_options.default);

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

@@ -1,50 +0,0 @@
-"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/vue')]
-    }),
-    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-vue.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.previewAnnotations = void 0;
-exports.webpack = webpack;
-
-require("core-js/modules/es.promise.js");
-
-var _vueLoader = require("vue-loader");
-
-var _coreCommon = require("@storybook/core-common");
-
-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; }
-
-async function webpack(config, {
-  presets: presets
-}) {
-  var typescriptOptions = await presets.apply('typescript', {});
-  config.plugins.push(new _vueLoader.VueLoaderPlugin());
-  config.module.rules.push({
-    test: /\.vue$/,
-    loader: require.resolve('vue-loader'),
-    options: {}
-  });
-  config.module.rules.push({
-    test: /\.ts$/,
-    use: [{
-      loader: require.resolve('ts-loader'),
-      options: {
-        transpileOnly: !typescriptOptions.check,
-        appendTsSuffixTo: [/\.vue$/]
-      }
-    }]
-  });
-  config.module.rules.push({
-    test: /\.tsx$/,
-    use: [{
-      loader: require.resolve('ts-loader'),
-      options: {
-        transpileOnly: true,
-        appendTsxSuffixTo: [/\.vue$/]
-      }
-    }]
-  });
-  config.resolve.extensions.push('.vue');
-  config.resolve.alias = _objectSpread(_objectSpread({}, config.resolve.alias), {}, {
-    vue$: require.resolve('vue/dist/vue.esm.js')
-  });
-  return config;
-}
-
-var previewAnnotations = function (entry = []) {
-  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
-};
-
-exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/index.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _server = require("@storybook/core/server");
-
-var _options = _interopRequireDefault(require("./options"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _server.buildDev)(_options.default);