@storybook/vue3 6.5.7 → 7.0.0-alpha.0

package/README.md

@@ -1,43 +1 @@
-# Storybook for Vue 3
-
-Storybook for Vue 3 is a UI development environment for your Vue 3 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-vue3-app
-npx sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
----
-
-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
-
-Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`.
-
-When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
-
-For example:
-
-```js
-// .storybook/preview.js
-
-import { app } from '@storybook/vue3';
-
-app.use(MyPlugin);
-app.component('my-component', MyComponent);
-app.mixin({
-  /* My mixin */
-});
-```
+# Storybook Vue3 renderer

package/dist/cjs/config.js

@@ -0,0 +1,44 @@
+"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,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function get() {
+    return _config.argTypesEnhancers;
+  }
+});
+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: 'vue3'
+}, _config.parameters);
+exports.parameters = parameters;

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

@@ -98,6 +98,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

@@ -13,7 +13,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");
 
@@ -22,7 +22,7 @@ var _decorateStory = require("./decorateStory");
 var _render = require("./render");
 
 var framework = 'vue3';
-var api = (0, _core.start)(_render.renderToDOM, {
+var api = (0, _coreClient.start)(_render.renderToDOM, {
   decorateStory: _decorateStory.decorateStory,
   render: _render.render
 });

package/dist/esm/config.js

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

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

@@ -1,6 +1,4 @@
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, app, activeStoryComponent } 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 { h } from 'vue';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 

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

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

package/dist/types/config.d.ts

@@ -0,0 +1,11 @@
+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("lib/docs-tools/dist/types").ArgTypesExtractor;
+        extractComponentDescription: typeof import("lib/docs-tools/dist/types").extractComponentDescription;
+    };
+    framework: string;
+};
+export { argTypesEnhancers } from './docs/config';
+export * from './preview/config';

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

@@ -7,4 +7,4 @@ export declare const parameters: {
         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)[];
+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/index.d.ts

@@ -25,7 +25,7 @@ export declare const addParameters: (() => never) | (({ globals, globalTypes, ..
 export declare const clearDecorators: (() => never) | (() => void);
 export declare const setAddon: (() => never) | ((addon: any) => void);
 export declare const forceReRender: (() => never) | (() => void);
-export declare const getStorybook: (() => never) | (() => import("@storybook/client-api/dist/ts3.9/ClientApi").GetStorybookKind<VueFramework>[]);
-export declare const raw: (() => never) | (() => import("@storybook/store").BoundStory<VueFramework>[]);
+export declare const getStorybook: (() => never) | (() => import("lib/client-api/dist/types/ClientApi").GetStorybookKind<VueFramework>[]);
+export declare const raw: (() => never) | (() => import("lib/store/dist/types").BoundStory<VueFramework>[]);
 export declare const app: ClientApi['app'];
 export { activeStoryComponent } from './render';

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

@@ -2,6 +2,6 @@ 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>>;
+export declare const activeStoryComponent: import("vue").Ref<import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any>> | import("vue").Ref<import("vue").FunctionalComponent<any, any>>;
 export declare const storybookApp: import("vue").App<Element>;
 export declare function renderToDOM({ title, name, storyFn, showMain, showError, showException }: RenderContext<VueFramework>, domElement: HTMLElement): void;

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

@@ -1,5 +1,5 @@
 import { ConcreteComponent } 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,39 +1,27 @@
 {
   "name": "@storybook/vue3",
-  "version": "6.5.7",
-  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
+  "version": "7.0.0-alpha.0",
+  "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/vue3",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/vue3",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/vue3"
+    "directory": "renderers/vue3"
   },
   "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/**/*",
@@ -45,35 +33,23 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.7",
-    "@storybook/core": "6.5.7",
-    "@storybook/core-common": "6.5.7",
+    "@storybook/addons": "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",
-    "vue-loader": "^16.4.1",
-    "webpack": ">=4.0.0 <6.0.0"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "3.0.0",
-    "vue": "3.0.0",
-    "webpack": "4"
+    "vue": "3.0.0"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "@vue/compiler-sfc": "^3.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "vue": "^3.0.0"
   },
@@ -83,6 +59,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-vue3-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/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

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.previewAnnotations = void 0;
-exports.webpack = webpack;
-
-var _vueLoader = require("vue-loader");
-
-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); 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 webpack(config) {
-  return _objectSpread(_objectSpread({}, config), {}, {
-    plugins: [...config.plugins, new _vueLoader.VueLoaderPlugin(), new _webpack.DefinePlugin({
-      __VUE_OPTIONS_API__: JSON.stringify(true),
-      __VUE_PROD_DEVTOOLS__: JSON.stringify(true)
-    })],
-    module: _objectSpread(_objectSpread({}, config.module), {}, {
-      rules: [...config.module.rules, {
-        test: /\.vue$/,
-        loader: require.resolve('vue-loader'),
-        options: {}
-      }, {
-        test: /\.ts$/,
-        use: [{
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-            appendTsSuffixTo: [/\.vue$/]
-          }
-        }]
-      }, {
-        test: /\.tsx$/,
-        use: [{
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-            // Note this is different from the `appendTsSuffixTo` above!
-            appendTsxSuffixTo: [/\.vue$/]
-          }
-        }]
-      }]
-    }),
-    resolve: _objectSpread(_objectSpread({}, config.resolve), {}, {
-      extensions: [...config.resolve.extensions, '.vue'],
-      alias: _objectSpread(_objectSpread({}, config.resolve.alias), {}, {
-        vue$: require.resolve('vue/dist/vue.esm-bundler.js')
-      })
-    })
-  });
-}
-
-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);

package/dist/cjs/server/options.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _readPkgUp = require("read-pkg-up");
-
-var _default = {
-  packageJson: (0, _readPkgUp.sync)({
-    cwd: __dirname
-  }).packageJson,
-  framework: 'vue3',
-  frameworkPresets: [require.resolve('./preset')]
-};
-exports.default = _default;

package/dist/cjs/server/preset.js

@@ -1,8 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/index.js

@@ -1,6 +0,0 @@
-export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, app, activeStoryComponent } from './preview';
-export * from './preview/types-6-0';
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}