@storybook/vue3 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/cjs/client/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+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 = {
+  storiesOf: true,
+  setAddon: true,
+  addDecorator: true,
+  addParameters: true,
+  configure: true,
+  getStorybook: true,
+  forceReRender: true,
+  raw: true,
+  app: true,
+  activeStoryComponent: true
+};
+Object.defineProperty(exports, "storiesOf", {
+  enumerable: true,
+  get: function get() {
+    return _preview.storiesOf;
+  }
+});
+Object.defineProperty(exports, "setAddon", {
+  enumerable: true,
+  get: function get() {
+    return _preview.setAddon;
+  }
+});
+Object.defineProperty(exports, "addDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _preview.addDecorator;
+  }
+});
+Object.defineProperty(exports, "addParameters", {
+  enumerable: true,
+  get: function get() {
+    return _preview.addParameters;
+  }
+});
+Object.defineProperty(exports, "configure", {
+  enumerable: true,
+  get: function get() {
+    return _preview.configure;
+  }
+});
+Object.defineProperty(exports, "getStorybook", {
+  enumerable: true,
+  get: function get() {
+    return _preview.getStorybook;
+  }
+});
+Object.defineProperty(exports, "forceReRender", {
+  enumerable: true,
+  get: function get() {
+    return _preview.forceReRender;
+  }
+});
+Object.defineProperty(exports, "raw", {
+  enumerable: true,
+  get: function get() {
+    return _preview.raw;
+  }
+});
+Object.defineProperty(exports, "app", {
+  enumerable: true,
+  get: function get() {
+    return _preview.app;
+  }
+});
+Object.defineProperty(exports, "activeStoryComponent", {
+  enumerable: true,
+  get: function get() {
+    return _preview.activeStoryComponent;
+  }
+});
+
+var _preview = require("./preview");
+
+var _types = require("./preview/types-6-0");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

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

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

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decorateStory = decorateStory;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _vue = require("vue");
+
+var _store = require("@storybook/store");
+
+/*
+  This normalizes a functional component into a render method in ComponentOptions.
+
+  The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
+  method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
+ */
+function normalizeFunctionalComponent(options) {
+  return typeof options === 'function' ? {
+    render: options,
+    name: options.name
+  } : options;
+}
+
+function prepare(rawStory, innerStory) {
+  var story = rawStory;
+
+  if (story == null) {
+    return null;
+  }
+
+  if (innerStory) {
+    return Object.assign({}, normalizeFunctionalComponent(story), {
+      components: Object.assign({}, story.components || {}, {
+        story: innerStory
+      })
+    });
+  }
+
+  return {
+    render: function 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);
+      }
+
+      if (decoratedStory === story) {
+        return story;
+      }
+
+      return prepare(decoratedStory, story);
+    };
+  }, function (context) {
+    return prepare(storyFn(context));
+  });
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+var _global = _interopRequireDefault(require("global"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var globalWindow = _global.default.window;
+globalWindow.STORYBOOK_REACT_CLASSES = {};
+globalWindow.STORYBOOK_ENV = 'vue3';

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "activeStoryComponent", {
+  enumerable: true,
+  get: function get() {
+    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;
+
+require("core-js/modules/es.array.concat.js");
+
+var _client = require("@storybook/core/client");
+
+require("./globals");
+
+var _decorateStory = require("./decorateStory");
+
+var _render = require("./render");
+
+var framework = 'vue3';
+var api = (0, _client.start)(_render.renderToDOM, {
+  decorateStory: _decorateStory.decorateStory
+});
+
+var storiesOf = function storiesOf(kind, m) {
+  return api.clientApi.storiesOf(kind, m).addParameters({
+    framework: framework
+  });
+};
+
+exports.storiesOf = storiesOf;
+
+var configure = function configure() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return api.configure.apply(api, [framework].concat(args));
+};
+
+exports.configure = configure;
+var addDecorator = api.clientApi.addDecorator;
+exports.addDecorator = addDecorator;
+var addParameters = api.clientApi.addParameters;
+exports.addParameters = addParameters;
+var clearDecorators = api.clientApi.clearDecorators;
+exports.clearDecorators = clearDecorators;
+var setAddon = api.clientApi.setAddon;
+exports.setAddon = setAddon;
+var forceReRender = api.forceReRender;
+exports.forceReRender = forceReRender;
+var getStorybook = api.clientApi.getStorybook;
+exports.getStorybook = getStorybook;
+var raw = api.clientApi.raw;
+exports.raw = raw;
+var app = _render.storybookApp;
+exports.app = app;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderToDOM = renderToDOM;
+exports.storybookApp = exports.activeStoryComponent = void 0;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _vue = require("vue");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var activeStoryComponent = (0, _vue.shallowRef)(null);
+exports.activeStoryComponent = activeStoryComponent;
+var root = null;
+var storybookApp = (0, _vue.createApp)({
+  // If an end-user calls `unmount` on the app, we need to clear our root variable
+  unmounted: function unmounted() {
+    root = null;
+  },
+  setup: function setup() {
+    return function () {
+      if (!activeStoryComponent.value) throw new Error('No Vue 3 Story available. Was it set correctly?');
+      return (0, _vue.h)(activeStoryComponent.value);
+    };
+  }
+});
+exports.storybookApp = storybookApp;
+
+function renderToDOM(_ref, domElement) {
+  var title = _ref.title,
+      name = _ref.name,
+      storyFn = _ref.storyFn,
+      showMain = _ref.showMain,
+      showError = _ref.showError,
+      showException = _ref.showException;
+  storybookApp.config.errorHandler = showException;
+  var element = storyFn();
+
+  if (!element) {
+    showError({
+      title: "Expecting a Vue component from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
+      description: (0, _tsDedent.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Did you forget to return the Vue component from the story?\n        Use \"() => ({ template: '<my-comp></my-comp>' })\" or \"() => ({ components: MyComp, template: '<my-comp></my-comp>' })\" when defining the story.\n      "])))
+    });
+    return;
+  }
+
+  showMain();
+  activeStoryComponent.value = element;
+
+  if (!root) {
+    root = storybookApp.mount(domElement);
+  }
+}

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

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

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

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

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

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

package/dist/cjs/server/build.js

@@ -0,0 +1,9 @@
+"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.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webpack = webpack;
+exports.config = void 0;
+
+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); if (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 _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: /\.tsx?$/,
+        use: [{
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+            appendTsSuffixTo: [/\.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 config = function (entry = []) {
+  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
+};
+
+exports.config = config;

package/dist/cjs/server/index.js

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

@@ -0,0 +1,17 @@
+"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('./framework-preset-vue3')]
+};
+exports.default = _default;

package/dist/cjs/typings.d.js

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

package/dist/esm/client/index.js

@@ -0,0 +1,6 @@
+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();
+}

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

@@ -0,0 +1,5 @@
+export { renderToDOM } from './render';
+export { decorateStory } from './decorateStory';
+export var parameters = {
+  framework: 'vue3'
+};

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

@@ -0,0 +1,63 @@
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.assign.js";
+import { h } from 'vue';
+import { sanitizeStoryContextUpdate } from '@storybook/store';
+
+/*
+  This normalizes a functional component into a render method in ComponentOptions.
+
+  The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
+  method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
+ */
+function normalizeFunctionalComponent(options) {
+  return typeof options === 'function' ? {
+    render: options,
+    name: options.name
+  } : options;
+}
+
+function prepare(rawStory, innerStory) {
+  var story = rawStory;
+
+  if (story == null) {
+    return null;
+  }
+
+  if (innerStory) {
+    return Object.assign({}, normalizeFunctionalComponent(story), {
+      components: Object.assign({}, story.components || {}, {
+        story: innerStory
+      })
+    });
+  }
+
+  return {
+    render: function render() {
+      return h(story);
+    }
+  };
+}
+
+export 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, sanitizeStoryContextUpdate(update)));
+        return story;
+      }, context);
+
+      if (!story) {
+        story = decorated(context);
+      }
+
+      if (decoratedStory === story) {
+        return story;
+      }
+
+      return prepare(decoratedStory, story);
+    };
+  }, function (context) {
+    return prepare(storyFn(context));
+  });
+}

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

@@ -0,0 +1,4 @@
+import global from 'global';
+var globalWindow = global.window;
+globalWindow.STORYBOOK_REACT_CLASSES = {};
+globalWindow.STORYBOOK_ENV = 'vue3';

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

@@ -0,0 +1,37 @@
+import "core-js/modules/es.array.concat.js";
+import { start } from '@storybook/core/client';
+import './globals';
+import { decorateStory } from './decorateStory';
+import { renderToDOM, storybookApp } from './render';
+var framework = 'vue3';
+var api = start(renderToDOM, {
+  decorateStory: decorateStory
+});
+export var storiesOf = function storiesOf(kind, m) {
+  return api.clientApi.storiesOf(kind, m).addParameters({
+    framework: framework
+  });
+};
+export var configure = function configure() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return api.configure.apply(api, [framework].concat(args));
+};
+var addDecorator = api.clientApi.addDecorator;
+export { addDecorator };
+var addParameters = api.clientApi.addParameters;
+export { addParameters };
+var clearDecorators = api.clientApi.clearDecorators;
+export { clearDecorators };
+var setAddon = api.clientApi.setAddon;
+export { setAddon };
+var forceReRender = api.forceReRender;
+export { forceReRender };
+var getStorybook = api.clientApi.getStorybook;
+export { getStorybook };
+var raw = api.clientApi.raw;
+export { raw };
+export var app = storybookApp;
+export { activeStoryComponent } from './render';

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

@@ -0,0 +1,49 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import dedent from 'ts-dedent';
+import { createApp, h, shallowRef } from 'vue';
+export var activeStoryComponent = shallowRef(null);
+var root = null;
+export var storybookApp = createApp({
+  // If an end-user calls `unmount` on the app, we need to clear our root variable
+  unmounted: function unmounted() {
+    root = null;
+  },
+  setup: function setup() {
+    return function () {
+      if (!activeStoryComponent.value) throw new Error('No Vue 3 Story available. Was it set correctly?');
+      return h(activeStoryComponent.value);
+    };
+  }
+});
+export function renderToDOM(_ref, domElement) {
+  var title = _ref.title,
+      name = _ref.name,
+      storyFn = _ref.storyFn,
+      showMain = _ref.showMain,
+      showError = _ref.showError,
+      showException = _ref.showException;
+  storybookApp.config.errorHandler = showException;
+  var element = storyFn();
+
+  if (!element) {
+    showError({
+      title: "Expecting a Vue component from the story: \"".concat(name, "\" of \"").concat(title, "\"."),
+      description: dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        Did you forget to return the Vue component from the story?\n        Use \"() => ({ template: '<my-comp></my-comp>' })\" or \"() => ({ components: MyComp, template: '<my-comp></my-comp>' })\" when defining the story.\n      "])))
+    });
+    return;
+  }
+
+  showMain();
+  activeStoryComponent.value = element;
+
+  if (!root) {
+    root = storybookApp.mount(domElement);
+  }
+}

package/dist/esm/server/build.js

@@ -0,0 +1,3 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+buildStatic(options);

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

@@ -0,0 +1,42 @@
+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 _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 _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 { VueLoaderPlugin } from 'vue-loader';
+import { DefinePlugin } from 'webpack';
+import { findDistEsm } from '@storybook/core-common';
+export function webpack(config) {
+  return _objectSpread(_objectSpread({}, config), {}, {
+    plugins: [...config.plugins, new VueLoaderPlugin(), new 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: /\.tsx?$/,
+        use: [{
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+            appendTsSuffixTo: [/\.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')
+      })
+    })
+  });
+}
+export var config = function (entry = []) {
+  return [...entry, findDistEsm(__dirname, 'client/preview/config')];
+};