@storybook/svelte 6.5.9 → 7.0.0-alpha.2

package/README.md

@@ -1,32 +1 @@
-# Storybook for Svelte
-
-Storybook for Svelte is a UI development environment for your Svelte 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-svelte-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/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
-
-## TODOs
-
-- [ ] Support `addon-info`
-- [ ] Support Svelte markup directly in stories
-- [ ] Add Svelte storybook generator
-- [ ] Provide stories that show advanced Svelte use cases
-- [ ] Hydratable
-- [ ] Advanced mount options
+# Storybook Svelte renderer

package/dist/cjs/config.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  decorators: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function () {
+    return _config.argTypesEnhancers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function () {
+    return _config.decorators;
+  }
+});
+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: 'svelte'
+}, _config.parameters);
+exports.parameters = parameters;

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

@@ -11,20 +11,17 @@ var _extractArgTypes = require("./extractArgTypes");
 
 var _extractComponentDescription = require("./extractComponentDescription");
 
-var _prepareForInline = require("./prepareForInline");
-
 var _sourceDecorator = require("./sourceDecorator");
 
-var parameters = {
+const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline: _prepareForInline.prepareForInline,
     extractArgTypes: _extractArgTypes.extractArgTypes,
     extractComponentDescription: _extractComponentDescription.extractComponentDescription
   }
 };
 exports.parameters = parameters;
-var decorators = [_sourceDecorator.sourceDecorator];
+const decorators = [_sourceDecorator.sourceDecorator];
 exports.decorators = decorators;
-var argTypesEnhancers = [_docsTools.enhanceArgTypes];
+const argTypesEnhancers = [_docsTools.enhanceArgTypes];
 exports.argTypesEnhancers = argTypesEnhancers;

package/dist/{modern/client → cjs}/docs/extractArgTypes.js

@@ -1,10 +1,17 @@
-import { logger } from '@storybook/client-logger';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractArgTypes = exports.createArgTypes = void 0;
+
+var _clientLogger = require("@storybook/client-logger");
 
 function hasKeyword(keyword, keywords) {
   return keywords ? keywords.find(k => k.name === keyword) != null : false;
 }
 
-export const extractArgTypes = component => {
+const extractArgTypes = component => {
   try {
     // eslint-disable-next-line no-underscore-dangle
     const docgen = component.__docgen;
@@ -13,12 +20,15 @@ export const extractArgTypes = component => {
       return createArgTypes(docgen);
     }
   } catch (err) {
-    logger.log(`Error extracting argTypes: ${err}`);
+    _clientLogger.logger.log(`Error extracting argTypes: ${err}`);
   }
 
   return {};
 };
-export const createArgTypes = docgen => {
+
+exports.extractArgTypes = extractArgTypes;
+
+const createArgTypes = docgen => {
   const results = {};
   docgen.data.forEach(item => {
     var _item$type, _item$type2;
@@ -78,6 +88,9 @@ export const createArgTypes = docgen => {
  * @returns string
  */
 
+
+exports.createArgTypes = createArgTypes;
+
 const parseTypeToControl = type => {
   if (!type) {
     return null;

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

@@ -5,17 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractComponentDescription = extractComponentDescription;
 
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
 function extractComponentDescription(component) {
   if (!component) {
     return null;
   }
 
-  var _component$__docgen = component.__docgen,
-      __docgen = _component$__docgen === void 0 ? {} : _component$__docgen;
-
+  const {
+    __docgen = {}
+  } = component;
   return __docgen.description;
 }

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

@@ -1,25 +1,37 @@
-import { addons, useEffect } from '@storybook/addons';
-import { once } from '@storybook/client-logger';
-import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSvelteSource = generateSvelteSource;
+exports.sourceDecorator = void 0;
+
+var _addons = require("@storybook/addons");
+
+var _clientLogger = require("@storybook/client-logger");
+
+var _docsTools = require("@storybook/docs-tools");
+
+/* eslint-disable no-underscore-dangle */
+
 /**
  * Check if the sourcecode should be generated.
  *
  * @param context StoryContext
  */
-
 const skipSourceRender = context => {
   var _context$parameters$d;
 
   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 === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.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 === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.SourceType.CODE;
 };
 /**
  * Transform a key/value to a svelte declaration as string.
@@ -91,7 +103,7 @@ function getComponentName(component) {
  */
 
 
-export function generateSvelteSource(component, args, argTypes, slotProperty) {
+function generateSvelteSource(component, args, argTypes, slotProperty) {
   const name = getComponentName(component);
 
   if (!name) {
@@ -120,6 +132,7 @@ export function generateSvelteSource(component, args, argTypes, slotProperty) {
  * @param component Component
  */
 
+
 function getWrapperProperties(component) {
   const {
     __docgen
@@ -152,14 +165,15 @@ function getWrapperProperties(component) {
  */
 
 
-export const sourceDecorator = (storyFn, context) => {
-  const channel = addons.getChannel();
+const sourceDecorator = (storyFn, context) => {
+  const channel = _addons.addons.getChannel();
+
   const skip = skipSourceRender(context);
   const story = storyFn();
   let source;
-  useEffect(() => {
+  (0, _addons.useEffect)(() => {
     if (!skip && source) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
+      channel.emit(_docsTools.SNIPPET_RENDERED, (context || {}).id, source);
     }
   });
 
@@ -182,7 +196,7 @@ export const sourceDecorator = (storyFn, context) => {
 
   if (wrapper) {
     if (parameters.component) {
-      once.warn('parameters.component is deprecated. Using context.component instead.');
+      _clientLogger.once.warn('parameters.component is deprecated. Using context.component instead.');
     }
 
     component = ctxtComponent;
@@ -190,4 +204,6 @@ export const sourceDecorator = (storyFn, context) => {
 
   source = generateSvelteSource(component, args, context === null || context === void 0 ? void 0 : context.argTypes, slotProperty);
   return story;
-};
+};
+
+exports.sourceDecorator = sourceDecorator;

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

@@ -5,55 +5,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 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, "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, "storiesOf", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.storiesOf;
   }
 });
 
 var _preview = require("./preview");
 
-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

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "decorateStory", {
+Object.defineProperty(exports, "applyDecorators", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _decorators.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 _decorators = require("./decorators");
 
-var parameters = {
+const parameters = {
   framework: 'svelte'
 };
 exports.parameters = parameters;

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

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.decorateStory = decorateStory;
 
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.object.assign.js");
-
 var _store = require("@storybook/store");
 
 var _SlotDecorator = _interopRequireDefault(require("@storybook/svelte/templates/SlotDecorator.svelte"));
@@ -48,7 +44,7 @@ function unWrap(obj) {
 
 
 function prepareStory(context, story, originalStory) {
-  var result = unWrap(story);
+  let result = unWrap(story);
 
   if (isSvelteComponent(result)) {
     // wrap the component
@@ -70,7 +66,7 @@ function prepareStory(context, story, originalStory) {
       }
     };
   } else {
-    var cpn = result.Component;
+    let cpn = result.Component;
 
     if (!cpn) {
       // if the component is not defined, get it the context
@@ -84,25 +80,21 @@ function prepareStory(context, story, originalStory) {
 }
 
 function decorateStory(storyFn, decorators) {
-  return decorators.reduce(function (previousStoryFn, decorator) {
-    return function (context) {
-      var story;
-      var decoratedStory = decorator(function (update) {
-        story = previousStoryFn(Object.assign({}, context, (0, _store.sanitizeStoryContextUpdate)(update)));
-        return story;
-      }, context);
-
-      if (!story) {
-        story = previousStoryFn(context);
-      }
+  return decorators.reduce((previousStoryFn, decorator) => context => {
+    let story;
+    const decoratedStory = decorator(update => {
+      story = previousStoryFn(Object.assign({}, context, (0, _store.sanitizeStoryContextUpdate)(update)));
+      return story;
+    }, context);
+
+    if (!story) {
+      story = previousStoryFn(context);
+    }
 
-      if (!decoratedStory || decoratedStory === story) {
-        return story;
-      }
+    if (!decoratedStory || decoratedStory === story) {
+      return story;
+    }
 
-      return prepareStory(context, decoratedStory, story);
-    };
-  }, function (context) {
-    return prepareStory(context, storyFn(context));
-  });
+    return prepareStory(context, decoratedStory, story);
+  }, context => prepareStory(context, storyFn(context)));
 }

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

@@ -4,5 +4,7 @@ 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_ENV = 'svelte';

package/dist/cjs/preview/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
+
+var _coreClient = require("@storybook/core-client");
+
+var _decorators = require("./decorators");
+
+require("./globals");
+
+var _render = require("./render");
+
+const {
+  configure: coreConfigure,
+  clientApi,
+  forceReRender
+} = (0, _coreClient.start)(_render.renderToDOM, {
+  decorateStory: _decorators.decorateStory,
+  render: _render.render
+});
+exports.forceReRender = forceReRender;
+const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw
+} = clientApi;
+exports.raw = raw;
+exports.getStorybook = getStorybook;
+exports.clearDecorators = clearDecorators;
+exports.addParameters = addParameters;
+exports.addDecorator = addDecorator;
+exports.setAddon = setAddon;
+const framework = 'svelte';
+
+const storiesOf = (kind, m) => clientApi.storiesOf(kind, m).addParameters({
+  framework
+});
+
+exports.storiesOf = storiesOf;
+
+const configure = (loadable, m) => coreConfigure(framework, loadable, m);
+
+exports.configure = configure;

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

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.render = void 0;
 exports.renderToDOM = renderToDOM;
 
-require("core-js/modules/es.function.name.js");
-
 var _global = _interopRequireDefault(require("global"));
 
 var _PreviewRender = _interopRequireDefault(require("@storybook/svelte/templates/PreviewRender.svelte"));
@@ -15,8 +13,10 @@ var _PreviewRender = _interopRequireDefault(require("@storybook/svelte/templates
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-var document = _global.default.document;
-var previousComponent = null;
+const {
+  document
+} = _global.default;
+let previousComponent = null;
 
 function cleanUpPreviousStory() {
   if (!previousComponent) {
@@ -27,37 +27,40 @@ function cleanUpPreviousStory() {
   previousComponent = null;
 }
 
-function renderToDOM(_ref, domElement) {
-  var storyFn = _ref.storyFn,
-      kind = _ref.kind,
-      name = _ref.name,
-      showMain = _ref.showMain,
-      showError = _ref.showError;
+function renderToDOM({
+  storyFn,
+  kind,
+  name,
+  showMain,
+  showError
+}, domElement) {
   cleanUpPreviousStory();
-  var target = document.getElementById('root');
+  const target = document.getElementById('root');
   target.innerHTML = '';
   previousComponent = new _PreviewRender.default({
-    target: target,
+    target,
     props: {
-      storyFn: storyFn,
-      name: name,
-      kind: kind,
-      showError: showError
+      storyFn,
+      name,
+      kind,
+      showError
     }
   });
   showMain();
 }
 
-var render = function render(args, context) {
-  var id = context.id,
-      Component = context.component;
+const render = (args, context) => {
+  const {
+    id,
+    component: Component
+  } = context;
 
   if (!Component) {
-    throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
+    throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
   }
 
   return {
-    Component: Component,
+    Component,
     props: args
   };
 };

package/dist/esm/config.js

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

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

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