@storybook/vue3 6.5.9 → 7.0.0-alpha.2

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,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function () {
+    return _config.argTypesEnhancers;
+  }
+});
+exports.parameters = void 0;
+
+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 () {
+      return _config2[key];
+    }
+  });
+});
+const parameters = Object.assign({
+  framework: 'vue3'
+}, _config.parameters);
+exports.parameters = parameters;

package/dist/cjs/{client/docs → docs}/config.js

@@ -9,16 +9,13 @@ var _docsTools = require("@storybook/docs-tools");
 
 var _extractArgTypes = require("./extractArgTypes");
 
-var _prepareForInline = require("./prepareForInline");
-
-var parameters = {
+const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline: _prepareForInline.prepareForInline,
     extractArgTypes: _extractArgTypes.extractArgTypes,
     extractComponentDescription: _docsTools.extractComponentDescription
   }
 };
 exports.parameters = parameters;
-var argTypesEnhancers = [_docsTools.enhanceArgTypes];
+const argTypesEnhancers = [_docsTools.enhanceArgTypes];
 exports.argTypesEnhancers = argTypesEnhancers;

package/dist/cjs/docs/extractArgTypes.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractArgTypes = void 0;
+
+var _docsTools = require("@storybook/docs-tools");
+
+const SECTIONS = ['props', 'events', 'slots'];
+
+const extractArgTypes = component => {
+  if (!(0, _docsTools.hasDocgen)(component)) {
+    return null;
+  }
+
+  const results = {};
+  SECTIONS.forEach(section => {
+    const props = (0, _docsTools.extractComponentProps)(component, section);
+    props.forEach(({
+      propDef,
+      docgenInfo,
+      jsDocTags
+    }) => {
+      const {
+        name,
+        type,
+        description,
+        defaultValue: defaultSummary,
+        required
+      } = propDef;
+      const sbType = section === 'props' ? (0, _docsTools.convert)(docgenInfo) : {
+        name: 'void'
+      };
+      results[name] = {
+        name,
+        description,
+        type: Object.assign({
+          required
+        }, sbType),
+        table: {
+          type,
+          jsDocTags,
+          defaultValue: defaultSummary,
+          category: section
+        }
+      };
+    });
+  });
+  return results;
+};
+
+exports.extractArgTypes = extractArgTypes;

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

@@ -1,11 +1,5 @@
 "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
 });
@@ -18,66 +12,59 @@ var _exportNames = {
   getStorybook: true,
   forceReRender: true,
   raw: true,
-  app: true,
-  activeStoryComponent: true
+  setup: true
 };
-Object.defineProperty(exports, "activeStoryComponent", {
-  enumerable: true,
-  get: function get() {
-    return _preview.activeStoryComponent;
-  }
-});
 Object.defineProperty(exports, "addDecorator", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.addDecorator;
   }
 });
 Object.defineProperty(exports, "addParameters", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.addParameters;
   }
 });
-Object.defineProperty(exports, "app", {
-  enumerable: true,
-  get: function get() {
-    return _preview.app;
-  }
-});
 Object.defineProperty(exports, "configure", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.configure;
   }
 });
 Object.defineProperty(exports, "forceReRender", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.forceReRender;
   }
 });
 Object.defineProperty(exports, "getStorybook", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.getStorybook;
   }
 });
 Object.defineProperty(exports, "raw", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.raw;
   }
 });
 Object.defineProperty(exports, "setAddon", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.setAddon;
   }
 });
+Object.defineProperty(exports, "setup", {
+  enumerable: true,
+  get: function () {
+    return _preview.setup;
+  }
+});
 Object.defineProperty(exports, "storiesOf", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.storiesOf;
   }
 });
@@ -92,12 +79,13 @@ Object.keys(_types).forEach(function (key) {
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _types[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}/config.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "applyDecorators", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _decorateStory.decorateStory;
   }
 });
 exports.parameters = void 0;
 Object.defineProperty(exports, "render", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _render.render;
   }
 });
 Object.defineProperty(exports, "renderToDOM", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _render.renderToDOM;
   }
 });
@@ -27,7 +27,7 @@ var _render = require("./render");
 
 var _decorateStory = require("./decorateStory");
 
-var parameters = {
+const parameters = {
   framework: 'vue3'
 };
 exports.parameters = parameters;

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

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.decorateStory = decorateStory;
 
-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");
@@ -29,7 +23,7 @@ function normalizeFunctionalComponent(options) {
 }
 
 function prepare(rawStory, innerStory) {
-  var story = rawStory;
+  const story = rawStory;
 
   if (story == null) {
     return null;
@@ -44,32 +38,29 @@ function prepare(rawStory, innerStory) {
   }
 
   return {
-    render: function render() {
+    render() {
       return (0, _vue.h)(story);
     }
+
   };
 }
 
 function decorateStory(storyFn, decorators) {
-  return decorators.reduce(function (decorated, decorator) {
-    return function (context) {
-      var story;
-      var decoratedStory = decorator(function (update) {
-        story = decorated(Object.assign({}, context, (0, _store.sanitizeStoryContextUpdate)(update)));
-        return story;
-      }, context);
-
-      if (!story) {
-        story = decorated(context);
-      }
+  return decorators.reduce((decorated, decorator) => context => {
+    let story;
+    const decoratedStory = decorator(update => {
+      story = decorated(Object.assign({}, context, (0, _store.sanitizeStoryContextUpdate)(update)));
+      return story;
+    }, context);
+
+    if (!story) {
+      story = decorated(context);
+    }
 
-      if (decoratedStory === story) {
-        return story;
-      }
+    if (decoratedStory === story) {
+      return story;
+    }
 
-      return prepare(decoratedStory, story);
-    };
-  }, function (context) {
-    return prepare(storyFn(context));
-  });
+    return prepare(decoratedStory, story);
+  }, context => prepare(storyFn(context)));
 }

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

@@ -4,6 +4,8 @@ var _global = _interopRequireDefault(require("global"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var globalWindow = _global.default.window;
+const {
+  window: globalWindow
+} = _global.default;
 globalWindow.STORYBOOK_REACT_CLASSES = {};
 globalWindow.STORYBOOK_ENV = 'vue3';

package/dist/cjs/preview/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
+Object.defineProperty(exports, "setup", {
+  enumerable: true,
+  get: function () {
+    return _render.setup;
+  }
+});
+exports.storiesOf = void 0;
+
+var _coreClient = require("@storybook/core-client");
+
+require("./globals");
+
+var _decorateStory = require("./decorateStory");
+
+var _render = require("./render");
+
+const framework = 'vue3';
+const api = (0, _coreClient.start)(_render.renderToDOM, {
+  decorateStory: _decorateStory.decorateStory,
+  render: _render.render
+});
+
+const storiesOf = (kind, m) => {
+  return api.clientApi.storiesOf(kind, m).addParameters({
+    framework
+  });
+};
+
+exports.storiesOf = storiesOf;
+
+const configure = (...args) => api.configure(framework, ...args);
+
+exports.configure = configure;
+const {
+  addDecorator
+} = api.clientApi;
+exports.addDecorator = addDecorator;
+const {
+  addParameters
+} = api.clientApi;
+exports.addParameters = addParameters;
+const {
+  clearDecorators
+} = api.clientApi;
+exports.clearDecorators = clearDecorators;
+const {
+  setAddon
+} = api.clientApi;
+exports.setAddon = setAddon;
+const {
+  forceReRender
+} = api;
+exports.forceReRender = forceReRender;
+const {
+  getStorybook
+} = api.clientApi;
+exports.getStorybook = getStorybook;
+const {
+  raw
+} = api.clientApi;
+exports.raw = raw;

package/dist/cjs/preview/render.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = void 0;
+exports.renderToDOM = renderToDOM;
+exports.setup = void 0;
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _vue = require("vue");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const render = (props, context) => {
+  const {
+    id,
+    component: Component
+  } = 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 (0, _vue.h)(Component, props);
+};
+
+exports.render = render;
+
+let setupFunction = app => {};
+
+const setup = fn => {
+  setupFunction = fn;
+};
+
+exports.setup = setup;
+const map = new Map();
+
+function renderToDOM({
+  title,
+  name,
+  storyFn,
+  showMain,
+  showError,
+  showException
+}, domElement) {
+  // TODO: explain cyclical nature of these app => story => mount
+  let element;
+  const storybookApp = (0, _vue.createApp)({
+    unmounted() {
+      map.delete(domElement);
+    },
+
+    render() {
+      map.set(domElement, storybookApp);
+      setupFunction(storybookApp);
+      return (0, _vue.h)(element);
+    }
+
+  });
+  storybookApp.config.errorHandler = showException;
+  element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
+      description: (0, _tsDedent.default)`
+      Did you forget to return the Vue component from the story?
+      Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
+      `
+    });
+    return;
+  }
+
+  showMain();
+
+  if (map.has(domElement)) {
+    map.get(domElement).unmount(domElement);
+  }
+
+  storybookApp.mount(domElement);
+}

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}/docs/config.js

@@ -1,10 +1,8 @@
 import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes } from './extractArgTypes';
-import { prepareForInline } from './prepareForInline';
 export const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline,
     extractArgTypes,
     extractComponentDescription
   }

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw, setup } from './preview';
+export * from './preview/types-6-0'; // optimization: stop HMR propagation in webpack
+
+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,7 +1,7 @@
-import { start } from '@storybook/core';
+import { start } from '@storybook/core-client';
 import './globals';
 import { decorateStory } from './decorateStory';
-import { render, renderToDOM, storybookApp } from './render';
+import { render, renderToDOM } from './render';
 const framework = 'vue3';
 const api = start(renderToDOM, {
   decorateStory,
@@ -34,5 +34,4 @@ export const {
 export const {
   raw
 } = api.clientApi;
-export const app = storybookApp;
-export { activeStoryComponent } from './render';
+export { setup } from './render';

package/dist/esm/preview/render.js

@@ -0,0 +1,66 @@
+import dedent from 'ts-dedent';
+import { createApp, h } from 'vue';
+export const render = (props, context) => {
+  const {
+    id,
+    component: Component
+  } = 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);
+};
+
+let setupFunction = app => {};
+
+export const setup = fn => {
+  setupFunction = fn;
+};
+const map = new Map();
+export function renderToDOM({
+  title,
+  name,
+  storyFn,
+  showMain,
+  showError,
+  showException
+}, domElement) {
+  // TODO: explain cyclical nature of these app => story => mount
+  let element;
+  const storybookApp = createApp({
+    unmounted() {
+      map.delete(domElement);
+    },
+
+    render() {
+      map.set(domElement, storybookApp);
+      setupFunction(storybookApp);
+      return h(element);
+    }
+
+  });
+  storybookApp.config.errorHandler = showException;
+  element = storyFn();
+
+  if (!element) {
+    showError({
+      title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
+      description: dedent`
+      Did you forget to return the Vue component from the story?
+      Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
+      `
+    });
+    return;
+  }
+
+  showMain();
+
+  if (map.has(domElement)) {
+    map.get(domElement).unmount(domElement);
+  }
+
+  storybookApp.mount(domElement);
+}

package/dist/types/config.d.ts

@@ -0,0 +1,10 @@
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        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';