@storybook/addon-svelte-csf - npm Package Compare versions

Comparing version 2.0.11 to 2.0.12--canary.94.71b3707.0

.babelrc.js

 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  presets: [
+    ['@babel/preset-env', { targets: { node: '16' }, modules: false }],
+    '@babel/preset-typescript',
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
   env: {
@@ -10,2 +14,3 @@ esm: {
             modules: false,
+            targets: { chrome: '100' },
           },
@@ -12,0 +17,0 @@ ],

.eslintrc.js

 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
+  rules: {
+    '@typescript-eslint/dot-notation': 'off',
+    '@typescript-eslint/no-implied-eval': 'off',
+    '@typescript-eslint/no-throw-literal': 'off',
+    '@typescript-eslint/return-await': 'off',
+  },
   overrides: [],
 };

CHANGELOG.md

@@ -1,13 +0,1 @@
-# v2.0.11 (Tue Jan 17 2023)
-
-#### 🐛 Bug Fix
-
-- Make types compatible with TypeScript `strict` mode [#74](https://github.com/storybookjs/addon-svelte-csf/pull/74) ([@RSWilli](https://github.com/RSWilli))
-
-#### Authors: 1
-
-- Wilhelm Bartel ([@RSWilli](https://github.com/RSWilli))
-
----
-
 # v2.0.10 (Thu Oct 27 2022)
@@ -14,0 +2,0 @@

dist/cjs/components/context.js

@@ -1,34 +0,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createRegistrationContext = createRegistrationContext;
-exports.createRenderContext = createRenderContext;
-exports.useContext = useContext;
-
-var _svelte = require("svelte");
-
-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; }
-
-var CONTEXT_KEY = "storybook-registration-context";
-
-function createRenderContext() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  (0, _svelte.setContext)(CONTEXT_KEY, _objectSpread({
+import { getContext, hasContext, setContext } from "svelte";
+const CONTEXT_KEY = "storybook-registration-context";
+export function createRenderContext(props = {}) {
+  setContext(CONTEXT_KEY, {
     render: true,
-    register: function register() {},
+    register: () => {},
     meta: {},
-    args: {}
-  }, props));
+    args: {},
+    ...props
+  });
 }
-
-function createRegistrationContext(repositories) {
-  (0, _svelte.setContext)(CONTEXT_KEY, {
+export function createRegistrationContext(repositories) {
+  setContext(CONTEXT_KEY, {
     render: false,
-    register: function register(story) {
+    register: story => {
       repositories.stories.push(story);
@@ -45,9 +27,8 @@ },
 }
-
-function useContext() {
-  if (!(0, _svelte.hasContext)(CONTEXT_KEY)) {
+export function useContext() {
+  if (!hasContext(CONTEXT_KEY)) {
     createRenderContext();
   }
 
-  return (0, _svelte.getContext)(CONTEXT_KEY);
+  return getContext(CONTEXT_KEY);
 }

dist/cjs/constants.js

@@ -1,8 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ADDON_ID = void 0;
-var ADDON_ID = 'storybook/svelte-csf';
-exports.ADDON_ID = ADDON_ID;
+export const ADDON_ID = 'storybook/svelte-csf';

dist/cjs/index.js

@@ -1,34 +0,5 @@
-"use strict";
+export { default as Meta } from './components/Meta.svelte';
+export { default as Story } from './components/Story.svelte';
+export { default as Template } from './components/Template.svelte';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Meta", {
-  enumerable: true,
-  get: function get() {
-    return _Meta["default"];
-  }
-});
-Object.defineProperty(exports, "Story", {
-  enumerable: true,
-  get: function get() {
-    return _Story["default"];
-  }
-});
-Object.defineProperty(exports, "Template", {
-  enumerable: true,
-  get: function get() {
-    return _Template["default"];
-  }
-});
-exports["default"] = void 0;
-
-var _Meta = _interopRequireDefault(require("./components/Meta.svelte"));
-
-var _Story = _interopRequireDefault(require("./components/Story.svelte"));
-
-var _Template = _interopRequireDefault(require("./components/Template.svelte"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 if (module && module.hot && module.hot.decline) {
@@ -39,3 +10,2 @@ module.hot.decline();
 
-var _default = {};
-exports["default"] = _default;
+export default {};

dist/cjs/jest-transform.js

@@ -1,16 +0,18 @@
-"use strict";
+const svelte = require('svelte/compiler');
 
-var svelte = require('svelte/compiler');
+const parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');
 
-var parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');
-
 function process(src, filename) {
-  var result = svelte.compile(src, {
+  const result = svelte.compile(src, {
     format: 'cjs',
-    filename: filename,
+    filename,
     dev: true
   });
-  var code = result.js ? result.js.code : result.code;
-  var z = {
-    code: "".concat(code, "\n    const { default: parser } = require('").concat(parser, "');\n    const md = parser(module.exports.default, {});\n    module.exports = { default: md.meta, ...md.stories };\n    Object.defineProperty(exports, \"__esModule\", { value: true });"),
+  const code = result.js ? result.js.code : result.code;
+  const z = {
+    code: `${code}
+    const { default: parser } = require('${parser}');
+    const md = parser(module.exports.default, {});
+    module.exports = { default: md.meta, ...md.stories };
+    Object.defineProperty(exports, "__esModule", { value: true });`,
     map: result.js ? result.js.map : result.map
@@ -17,0 +19,0 @@ };

dist/cjs/parser/collect-stories.js

@@ -1,38 +0,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _clientLogger = require("@storybook/client-logger");
-
-var _clientApi = require("@storybook/client-api");
-
-var _extractId = require("./extract-id");
-
-var _RegisterContext = _interopRequireDefault(require("../components/RegisterContext.svelte"));
-
-var _RenderContext = _interopRequireDefault(require("../components/RenderContext.svelte"));
-
-var _excluded = ["id", "name", "template", "component", "source"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+/* eslint-env browser */
+import { logger } from '@storybook/client-logger';
+import { combineParameters } from '@storybook/client-api';
+import { extractId } from './extract-id';
+import RegisterContext from '../components/RegisterContext.svelte';
+import RenderContext from '../components/RenderContext.svelte';
 /* Called from a webpack loader and a jest transformation.
@@ -48,13 +17,9 @@ *
  */
-var createFragment = document.createDocumentFragment ? function () {
-  return document.createDocumentFragment();
-} : function () {
-  return document.createElement('div');
-};
 
-var _default = function _default(StoriesComponent, _ref) {
-  var _ref$stories = _ref.stories,
-      stories = _ref$stories === void 0 ? {} : _ref$stories,
-      allocatedIds = _ref.allocatedIds;
-  var repositories = {
+const createFragment = document.createDocumentFragment ? () => document.createDocumentFragment() : () => document.createElement('div');
+export default ((StoriesComponent, {
+  stories = {},
+  allocatedIds
+}) => {
+  const repositories = {
     meta: null,
@@ -65,7 +30,7 @@ stories: []
   try {
-    var context = new _RegisterContext["default"]({
+    const context = new RegisterContext({
       target: createFragment(),
       props: {
         Stories: StoriesComponent,
-        repositories: repositories
+        repositories
       }
@@ -75,44 +40,39 @@ });
   } catch (e) {
-    _clientLogger.logger.error("Error extracting stories ".concat(e.toString()), e);
+    logger.error(`Error extracting stories ${e.toString()}`, e);
   }
 
-  var meta = repositories.meta;
+  const {
+    meta
+  } = repositories;
 
   if (!meta) {
-    _clientLogger.logger.error('Missing <Meta/> tag');
-
+    logger.error('Missing <Meta/> tag');
     return {};
   }
 
-  var globalComponent = meta.component; // collect templates id
+  const {
+    component: globalComponent
+  } = meta; // collect templates id
 
-  var templatesId = repositories.stories.filter(function (story) {
-    return story.isTemplate;
-  }).map(function (story) {
-    return story.id;
-  }); // check for duplicate templates
+  const templatesId = repositories.stories.filter(story => story.isTemplate).map(story => story.id); // check for duplicate templates
 
-  var duplicateTemplatesId = templatesId.filter(function (item, index) {
-    return templatesId.indexOf(item) !== index;
-  });
+  const duplicateTemplatesId = templatesId.filter((item, index) => templatesId.indexOf(item) !== index);
 
   if (duplicateTemplatesId.length > 0) {
-    _clientLogger.logger.warn("Found duplicates templates id for stories '".concat(meta.name, "': ").concat(duplicateTemplatesId));
+    logger.warn(`Found duplicates templates id for stories '${meta.name}': ${duplicateTemplatesId}`);
   }
 
   return {
-    meta: meta,
-    stories: repositories.stories.filter(function (story) {
-      return !story.isTemplate;
-    }).reduce(function (all, story) {
-      var id = story.id,
-          name = story.name,
-          template = story.template,
-          component = story.component,
-          _story$source = story.source,
-          source = _story$source === void 0 ? false : _story$source,
-          props = _objectWithoutProperties(story, _excluded);
+    meta,
+    stories: repositories.stories.filter(story => !story.isTemplate).reduce((all, story) => {
+      const {
+        id,
+        name,
+        template,
+        component,
+        source = false,
+        ...props
+      } = story;
+      const storyId = extractId(story, allocatedIds);
 
-      var storyId = (0, _extractId.extractId)(story, allocatedIds);
-
       if (!storyId) {
@@ -122,11 +82,11 @@ return all;
 
-      var unknownTemplate = template != null && templatesId.indexOf(template) < 0;
+      const unknownTemplate = template != null && templatesId.indexOf(template) < 0;
 
-      var storyFn = function storyFn(args, storyContext) {
+      const storyFn = (args, storyContext) => {
         if (unknownTemplate) {
-          throw new Error("Story ".concat(name, " is referencing an unknown template ").concat(template));
+          throw new Error(`Story ${name} is referencing an unknown template ${template}`);
         }
 
         return {
-          Component: _RenderContext["default"],
+          Component: RenderContext,
           props: {
@@ -136,4 +96,4 @@ Stories: StoriesComponent,
             templateId: template,
-            args: args,
-            storyContext: storyContext,
+            args,
+            storyContext,
             sourceComponent: component || globalComponent
@@ -145,17 +105,13 @@ }
       storyFn.storyName = name;
-      Object.entries(props).forEach(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            k = _ref3[0],
-            v = _ref3[1];
-
+      Object.entries(props).forEach(([k, v]) => {
         storyFn[k] = v;
       }); // inject story sources
 
-      var storyDef = stories[template ? "tpl:".concat(template) : storyId];
-      var hasArgs = storyDef ? storyDef.hasArgs : true; // inject source snippet
+      const storyDef = stories[template ? `tpl:${template}` : storyId];
+      const hasArgs = storyDef ? storyDef.hasArgs : true; // inject source snippet
 
-      var rawSource = storyDef ? storyDef.source : null;
+      const rawSource = storyDef ? storyDef.source : null;
 
       if (rawSource) {
-        storyFn.parameters = (0, _clientApi.combineParameters)(storyFn.parameters || {}, {
+        storyFn.parameters = combineParameters(storyFn.parameters || {}, {
           storySource: {
@@ -167,3 +123,3 @@ source: rawSource
 
-      var snippet;
+      let snippet;
 
@@ -177,3 +133,3 @@ if (source === true || source === false && !hasArgs) {
       if (snippet) {
-        storyFn.parameters = (0, _clientApi.combineParameters)(storyFn.parameters || {}, {
+        storyFn.parameters = combineParameters(storyFn.parameters || {}, {
           docs: {
@@ -192,4 +148,2 @@ source: {
   };
-};
-
-exports["default"] = _default;
+});

dist/cjs/parser/collect-stories.test.js

@@ -1,12 +0,6 @@
-"use strict";
-
-var _collectStories = _interopRequireDefault(require("./collect-stories"));
-
-var _TestStories = _interopRequireDefault(require("../components/__tests__/TestStories.svelte"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-describe('parse-stories', function () {
-  test('Extract Stories', function () {
-    var data = (0, _collectStories["default"])(_TestStories["default"], {
+import collectStories from './collect-stories';
+import TestStories from '../components/__tests__/TestStories.svelte';
+describe('parse-stories', () => {
+  test('Extract Stories', () => {
+    const data = collectStories(TestStories, {
       stories: {
@@ -16,13 +10,33 @@ 'tpl:tpl2': 'tpl2src'
     });
-    var stories = data.stories,
-        meta = data.meta;
-    expect(meta).toMatchInlineSnapshot("\n      Object {\n        \"title\": \"Test\",\n      }\n    ");
-    expect(stories).toMatchInlineSnapshot("\n      Object {\n        \"Story1\": [Function],\n        \"Story2\": [Function],\n        \"Story3\": [Function],\n      }\n    ");
+    const {
+      stories,
+      meta
+    } = data;
+    expect(meta).toMatchInlineSnapshot(`
+      Object {
+        "title": "Test",
+      }
+    `);
+    expect(stories).toMatchInlineSnapshot(`
+      Object {
+        "Story1": [Function],
+        "Story2": [Function],
+        "Story3": [Function],
+      }
+    `);
     expect(stories.Story1.storyName).toBe('Story1');
-    expect(stories.Story1.parameters).toMatchInlineSnapshot("undefined");
+    expect(stories.Story1.parameters).toMatchInlineSnapshot(`undefined`);
     expect(stories.Story2.storyName).toBe('Story2');
-    expect(stories.Story2.parameters).toMatchInlineSnapshot("undefined");
+    expect(stories.Story2.parameters).toMatchInlineSnapshot(`undefined`);
     expect(stories.Story3.storyName).toBe('Story3');
-    expect(stories.Story3.parameters).toMatchInlineSnapshot("\n      Object {\n        \"docs\": Object {\n          \"source\": Object {\n            \"code\": \"xyz\",\n          },\n        },\n      }\n    ");
+    expect(stories.Story3.parameters).toMatchInlineSnapshot(`
+      Object {
+        "docs": Object {
+          "source": Object {
+            "code": "xyz",
+          },
+        },
+      }
+    `);
   });
 });

dist/cjs/parser/extract-id.js

@@ -1,15 +0,6 @@
-"use strict";
+import { logger } from '@storybook/client-logger';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extractId = extractId;
-
-var _clientLogger = require("@storybook/client-logger");
-
 function hashCode(str) {
-  var h = str.split('') // eslint-disable-next-line no-bitwise
-  .reduce(function (prevHash, currVal) {
-    return (prevHash << 5) - prevHash + currVal.charCodeAt(0) | 0;
-  }, 0);
+  const h = str.split('') // eslint-disable-next-line no-bitwise
+  .reduce((prevHash, currVal) => (prevHash << 5) - prevHash + currVal.charCodeAt(0) | 0, 0);
   return Math.abs(h).toString(16);
@@ -19,7 +10,6 @@ } // extract a story id
 
-function extractId(_ref) {
-  var id = _ref.id,
-      name = _ref.name;
-  var allocatedIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+export function extractId({
+  id,
+  name
+}, allocatedIds = []) {
   if (id) {
@@ -29,9 +19,10 @@ return id;
 
-  var generated = name.replace(/\W+(.|$)/g, function (_, chr) {
-    return chr.toUpperCase();
-  });
+  if (!name) {
+    throw new Error("Id or Name should be specified");
+  }
 
+  let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
+
   if (allocatedIds.indexOf(generated) >= 0) {
-    _clientLogger.logger.warn("Story name conflict with exports - Please add an explicit id for story ".concat(name));
-
+    logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);
     generated += hashCode(name);
@@ -38,0 +29,0 @@ }

dist/cjs/parser/extract-id.test.js

@@ -1,23 +0,20 @@
-"use strict";
-
-var _extractId = require("./extract-id");
-
-describe('extract-id', function () {
-  test('name with spaces', function () {
-    expect((0, _extractId.extractId)({
+import { extractId } from './extract-id';
+describe('extract-id', () => {
+  test('name with spaces', () => {
+    expect(extractId({
       name: 'Name with spaces'
     })).toBe('NameWithSpaces');
   });
-  test('name with parenthesis', function () {
-    expect((0, _extractId.extractId)({
+  test('name with parenthesis', () => {
+    expect(extractId({
       name: 'Name with (parenthesis)'
     })).toBe('NameWithParenthesis');
   });
-  test('duplicates id', function () {
-    expect((0, _extractId.extractId)({
+  test('duplicates id', () => {
+    expect(extractId({
       name: 'Button'
     }, ['Button'])).toBe('Button77471352');
   });
-  test('No negative hash', function () {
-    expect((0, _extractId.extractId)({
+  test('No negative hash', () => {
+    expect(extractId({
       name: 'Navbar'
@@ -24,0 +21,0 @@ }, ['Navbar'])).toBe('Navbar7557f7d0');

dist/cjs/parser/extract-stories.js

@@ -1,33 +0,17 @@
-"use strict";
+import dedent from 'ts-dedent';
+import * as svelte from 'svelte/compiler';
+import { extractId } from './extract-id';
+import { toId, storyNameFromExport } from "@storybook/csf";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extractStories = extractStories;
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var svelte = _interopRequireWildcard(require("svelte/compiler"));
-
-var _extractId = require("./extract-id");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function getStaticAttribute(name, node) {
   // extract the attribute
-  var attribute = node.attributes.find(function (att) {
-    return att.type === 'Attribute' && att.name === name;
-  });
+  const attribute = node.attributes.find(att => att.type === 'Attribute' && att.name === name);
 
   if (!attribute) {
-    return null;
+    return undefined;
   }
 
-  var value = attribute.value; // expect the attribute to be static, ie only one Text node
+  const {
+    value
+  } = attribute; // expect the attribute to be static, ie only one Text node
 
@@ -38,3 +22,3 @@ if (value && value.length === 1 && value[0].type === 'Text') {
 
-  throw new Error("Attribute ".concat(name, " is not static"));
+  throw new Error(`Attribute ${name} is not static`);
 }
@@ -48,48 +32,50 @@ /**
 
-function extractStories(component) {
+export function extractStories(component) {
   // compile
-  var _svelte$compile = svelte.compile(component),
-      ast = _svelte$compile.ast;
-
-  var allocatedIds = ['default'];
-  var localNames = {
+  const {
+    ast
+  } = svelte.compile(component);
+  const allocatedIds = ['default'];
+  const localNames = {
     Story: 'Story',
-    Template: 'Template'
+    Template: 'Template',
+    Meta: 'Meta'
   };
-  svelte.walk(ast.instance, {
-    enter: function enter(node) {
-      if (node.type === 'ImportDeclaration') {
-        if (node.source.value === '@storybook/addon-svelte-csf') {
-          node.specifiers.filter(function (n) {
-            return n.type === 'ImportSpecifier';
-          }).forEach(function (n) {
-            localNames[n.imported.name] = n.local.name;
-          });
+
+  if (ast.instance) {
+    svelte.walk(ast.instance, {
+      enter(node) {
+        if (node.type === 'ImportDeclaration') {
+          if (node.source.value === '@storybook/addon-svelte-csf') {
+            node.specifiers.filter(n => n.type === 'ImportSpecifier').forEach(n => {
+              localNames[n.imported.name] = n.local.name;
+            });
+          }
+
+          this.skip();
         }
+      }
 
-        this.skip();
+    }); // extracts allocated Ids
+
+    svelte.walk(ast.instance, {
+      enter(node) {
+        if (node.type === 'ImportDeclaration') {
+          node.specifiers.map(n => n.local.name).forEach(name => allocatedIds.push(name));
+          this.skip();
+        }
       }
-    }
-  }); // extracts allocated Ids
 
-  svelte.walk(ast.instance, {
-    enter: function enter(node) {
-      if (node.type === 'ImportDeclaration') {
-        node.specifiers.map(function (n) {
-          return n.local.name;
-        }).forEach(function (name) {
-          return allocatedIds.push(name);
-        });
-        this.skip();
-      }
-    }
-  });
-  var stories = {};
+    });
+  }
+
+  const stories = {};
+  const meta = {};
   svelte.walk(ast.html, {
-    enter: function enter(node) {
+    enter(node) {
       if (node.type === 'InlineComponent' && (node.name === localNames.Story || node.name === localNames.Template)) {
         this.skip();
-        var isTemplate = node.name === 'Template'; // extract the 'name' attribute
+        const isTemplate = node.name === 'Template'; // extract the 'name' attribute
 
-        var name = getStaticAttribute('name', node); // templates has a default name
+        let name = getStaticAttribute('name', node); // templates has a default name
 
@@ -100,5 +86,5 @@ if (!name && isTemplate) {
 
-        var id = (0, _extractId.extractId)({
+        const id = extractId({
           id: getStaticAttribute('id', node),
-          name: name
+          name
         }, isTemplate ? undefined : allocatedIds);
@@ -108,26 +94,35 @@
           // ignore stories without children
-          var source;
+          let source;
 
           if (node.children.length > 0) {
-            var start = node.children[0].start;
-            var end = node.children[node.children.length - 1].end;
-            source = (0, _tsDedent["default"])(component.substr(start, end - start));
+            const {
+              start
+            } = node.children[0];
+            const {
+              end
+            } = node.children[node.children.length - 1];
+            source = dedent(component.substr(start, end - start));
           }
 
-          stories[isTemplate ? "tpl:".concat(id) : id] = {
-            name: name,
+          stories[isTemplate ? `tpl:${id}` : id] = {
+            storyId: toId(meta.id || meta.title || id, storyNameFromExport(id)),
+            name,
             template: isTemplate,
-            source: source,
-            hasArgs: node.attributes.find(function (att) {
-              return att.type === 'Let';
-            }) != null
+            source,
+            hasArgs: node.attributes.find(att => att.type === 'Let') != null
           };
         }
+      } else if (node.type === 'InlineComponent' && node.name === localNames.Meta) {
+        this.skip();
+        meta.title = getStaticAttribute("title", node);
+        meta.id = getStaticAttribute("id", node);
       }
     }
+
   });
   return {
-    stories: stories,
-    allocatedIds: allocatedIds
+    meta,
+    stories,
+    allocatedIds
   };
 }

dist/cjs/parser/extract-stories.test.js

@@ -1,30 +0,245 @@
-"use strict";
+import { extractStories } from './extract-stories';
+describe('extractSource', () => {
+  test('Simple Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
 
-var _extractStories = require("./extract-stories");
+        <Story name="MyStory">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "MyStory": Object {
+            "hasArgs": false,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "mystory--my-story",
+            "template": false,
+          },
+        },
+      }
+    `);
+  });
+  test('Explicit Id Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
 
-describe('extractSource', function () {
-  test('Simple Story', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"MyStory\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"MyStory\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+        <Story id="myId" name="MyStory">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "myId": Object {
+            "hasArgs": false,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "myid--my-id",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Explicit Id Story', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story id=\"myId\" name=\"MyStory\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"myId\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Args Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
+
+        <Story name="MyStory" let:args>
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "MyStory": Object {
+            "hasArgs": true,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "mystory--my-story",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Args Story', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"MyStory\" let:args>\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"MyStory\": Object {\n            \"hasArgs\": true,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Simple Template', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template name="MyTemplate">
+          <div>a template</div>
+        </Template>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "tpl:MyTemplate": Object {
+            "hasArgs": false,
+            "name": "MyTemplate",
+            "source": "<div>a template</div>",
+            "storyId": "mytemplate--my-template",
+            "template": true,
+          },
+        },
+      }
+    `);
   });
-  test('Simple Template', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Template name=\"MyTemplate\">\n          <div>a template</div>\n        </Template>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"tpl:MyTemplate\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyTemplate\",\n            \"source\": \"<div>a template</div>\",\n            \"template\": true,\n          },\n        },\n      }\n    ");
+  test('Unnamed Template', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template>
+          <div>a template</div>
+        </Template>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "tpl:default": Object {
+            "hasArgs": false,
+            "name": "default",
+            "source": "<div>a template</div>",
+            "storyId": "default--default",
+            "template": true,
+          },
+        },
+      }
+    `);
   });
-  test('Unnamed Template', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Template>\n          <div>a template</div>\n        </Template>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"tpl:default\": Object {\n            \"hasArgs\": false,\n            \"name\": \"default\",\n            \"source\": \"<div>a template</div>\",\n            \"template\": true,\n          },\n        },\n      }\n    ");
+  test('Multiple Stories', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        <Story name="Story2">
+          <div>story 2</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "Story1": Object {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "story1--story-1",
+            "template": false,
+          },
+          "Story2": Object {
+            "hasArgs": false,
+            "name": "Story2",
+            "source": "<div>story 2</div>",
+            "storyId": "story2--story-2",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Multiple Stories', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"Story1\">\n          <div>story 1</div>\n        </Story>\n        <Story name=\"Story2\">\n          <div>story 2</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"Story1\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story1\",\n            \"source\": \"<div>story 1</div>\",\n            \"template\": false,\n          },\n          \"Story2\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story2\",\n            \"source\": \"<div>story 2</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Renamed Import', () => {
+    expect(extractStories(`
+        <script>
+          import { Story as SBStory, Meta as SBMeta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <SBMeta title='test'/>
+
+        <SBStory name="Story1">
+          <div>story 1</div>
+        </SBStory>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "SBStory",
+          "SBMeta",
+        ],
+        "meta": Object {
+          "id": undefined,
+          "title": "test",
+        },
+        "stories": Object {
+          "Story1": Object {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Renamed Import', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Story as SBStory, Meta as SBMeta } from '@storybook/addon-svelte-csf';\n        </script>\n\n        <SBMeta title='test'/>\n\n        <SBStory name=\"Story1\">\n          <div>story 1</div>\n        </SBStory>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"SBStory\",\n          \"SBMeta\",\n        ],\n        \"stories\": Object {\n          \"Story1\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story1\",\n            \"source\": \"<div>story 1</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Duplicate Id', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+          import Button from './Button.svelte';
+        </script>
+
+        <Story name="Button">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+          "Button",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "Button77471352": Object {
+            "hasArgs": false,
+            "name": "Button",
+            "source": "<div>a story</div>",
+            "storyId": "button77471352--button-77471352",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Duplicate Id', function () {
-    expect((0, _extractStories.extractStories)("\n        <script>\n          import { Story } from '@storybook/svelte';\n          import Button from './Button.svelte';\n        </script>\n\n        <Story name=\"Button\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n          \"Button\",\n        ],\n        \"stories\": Object {\n          \"Button77471352\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Button\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
-  });
 });

dist/cjs/parser/svelte-stories-loader.js

@@ -1,43 +0,15 @@
-"use strict";
+import dedent from 'ts-dedent';
+import { readFileSync } from 'fs';
+import { extractStories } from './extract-stories';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-exports.getNameFromFilename = getNameFromFilename;
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _fs = require("fs");
-
-var _extractStories = require("./extract-stories");
-
-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) } })); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var parser = require.resolve('./collect-stories').replace(/[/\\]/g, '/'); // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
+const parser = require.resolve('./collect-stories').replace(/[/\\]/g, '/'); // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
 // Copied because it is not exported from the compiler
 
 
-function getNameFromFilename(filename) {
+export function getNameFromFilename(filename) {
   if (!filename) return null;
-  var parts = filename.split(/[/\\]/).map(encodeURI);
+  const parts = filename.split(/[/\\]/).map(encodeURI);
 
   if (parts.length > 1) {
-    var index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
+    const index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
 
@@ -50,6 +22,6 @@ if (index_match) {
 
-  var base = parts.pop().replace(/%/g, 'u').replace(/\.[^.]+$/, '').replace(/[^a-zA-Z_$0-9]+/g, '_').replace(/^_/, '').replace(/_$/, '').replace(/^(\d)/, '_$1');
+  const base = parts.pop().replace(/%/g, 'u').replace(/\.[^.]+$/, '').replace(/[^a-zA-Z_$0-9]+/g, '_').replace(/^_/, '').replace(/_$/, '').replace(/^(\d)/, '_$1');
 
   if (!base) {
-    throw new Error("Could not derive component name from file ".concat(filename));
+    throw new Error(`Could not derive component name from file ${filename}`);
   }
@@ -62,23 +34,21 @@
   // eslint-disable-next-line no-underscore-dangle
-  var resource = this._module.resource;
-  var componentName = getNameFromFilename(resource);
-  var source = (0, _fs.readFileSync)(resource).toString();
-  var storiesDef = (0, _extractStories.extractStories)(source);
-  var stories = storiesDef.stories;
-  var storyDef = Object.entries(stories).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        def = _ref2[1];
-
-    return !def.template;
-  }).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-        id = _ref4[0];
-
-    return "export const ".concat(id, " = __storiesMetaData.stories[").concat(JSON.stringify(id), "]");
-  }).join('\n');
-  var codeWithoutDefaultExport = code.replace('export default ', '//export default');
-  return (0, _tsDedent["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["", "\n    const { default: parser } = require('", "');\n    const __storiesMetaData = parser(", ", ", ");\n    export default __storiesMetaData.meta;\n    ", ";\n  "])), codeWithoutDefaultExport, parser, componentName, JSON.stringify(storiesDef), storyDef);
+  const {
+    resource
+  } = this._module;
+  const componentName = getNameFromFilename(resource);
+  const source = readFileSync(resource).toString();
+  const storiesDef = extractStories(source);
+  const {
+    stories
+  } = storiesDef;
+  const storyDef = Object.entries(stories).filter(([, def]) => !def.template).map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}]`).join('\n');
+  const codeWithoutDefaultExport = code.replace('export default ', '//export default');
+  return dedent`${codeWithoutDefaultExport}
+    const { default: parser } = require('${parser}');
+    const __storiesMetaData = parser(${componentName}, ${JSON.stringify(storiesDef)});
+    export default __storiesMetaData.meta;
+    ${storyDef};
+  `;
 }
 
-var _default = transformSvelteStories;
-exports["default"] = _default;
+export default transformSvelteStories;

dist/cjs/preset/index.js

@@ -1,36 +0,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.managerEntries = managerEntries;
-exports.webpack = webpack;
-
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function managerEntries() {
-  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return [].concat(_toConsumableArray(entry), [require.resolve('./manager')]);
+import { svelteIndexer } from './indexer.js';
+export function managerEntries(entry = []) {
+  return [...entry, require.resolve('./manager')];
 }
-
-function webpack(config) {
-  return _objectSpread(_objectSpread({}, config), {}, {
-    module: _objectSpread(_objectSpread({}, config.module), {}, {
-      rules: [].concat(_toConsumableArray(config.module.rules), [{
+export function webpack(config) {
+  return { ...config,
+    module: { ...config.module,
+      rules: [...config.module.rules, {
         test: /\.stories\.svelte$/,
@@ -41,5 +14,43 @@ enforce: 'post',
         }]
-      }])
-    })
-  });
-}
+      }]
+    }
+  };
+}
+export async function viteFinal(config, options) {
+  const {
+    plugins = []
+  } = config;
+  const svelteOptions = await options.presets.apply('svelteOptions', {}, options);
+  let svelteConfig = svelteOptions;
+
+  try {
+    const {
+      loadSvelteConfig
+    } = await import('@sveltejs/vite-plugin-svelte');
+    svelteConfig = { ...(await loadSvelteConfig()),
+      ...svelteOptions
+    };
+  } catch (err) {
+    const {
+      log
+    } = console;
+
+    if (err.code === 'MODULE_NOT_FOUND') {
+      log('@sveltejs/vite-plugin-svelte not found.  Unable to load config from svelte.config file');
+    } else {
+      throw err;
+    }
+  }
+
+  const svelteCsfPlugin = (await import('../plugins/vite-svelte-csf.js')).default.default;
+  plugins.push(svelteCsfPlugin(svelteConfig));
+  return { ...config,
+    plugins
+  };
+}
+export const storyIndexers = async indexers => {
+  return [{
+    test: /\.stories\.svelte$/,
+    indexer: svelteIndexer
+  }, ...(indexers || [])];
+};

dist/cjs/preset/manager.js

@@ -1,8 +0,4 @@
-"use strict";
+import { addons } from '@storybook/addons';
+import { ADDON_ID } from '../constants'; // Register the addon
 
-var _addons = require("@storybook/addons");
-
-var _constants = require("../constants");
-
-// Register the addon
-_addons.addons.register(_constants.ADDON_ID, function () {});
+addons.register(ADDON_ID, () => {});

dist/esm/components/context.js

@@ -1,17 +0,11 @@
-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; }
-
 import { getContext, hasContext, setContext } from "svelte";
-var CONTEXT_KEY = "storybook-registration-context";
-export function createRenderContext() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  setContext(CONTEXT_KEY, _objectSpread({
+const CONTEXT_KEY = "storybook-registration-context";
+export function createRenderContext(props = {}) {
+  setContext(CONTEXT_KEY, {
     render: true,
-    register: function register() {},
+    register: () => {},
     meta: {},
-    args: {}
-  }, props));
+    args: {},
+    ...props
+  });
 }
@@ -21,3 +15,3 @@ export function createRegistrationContext(repositories) {
     render: false,
-    register: function register(story) {
+    register: story => {
       repositories.stories.push(story);
@@ -24,0 +18,0 @@ },

dist/esm/constants.js

@@ -1,1 +0,1 @@
-export var ADDON_ID = 'storybook/svelte-csf';
+export const ADDON_ID = 'storybook/svelte-csf';

dist/esm/jest-transform.js

@@ -1,14 +0,18 @@
-var svelte = require('svelte/compiler');
+const svelte = require('svelte/compiler');
 
-var parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');
+const parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');
 
 function process(src, filename) {
-  var result = svelte.compile(src, {
+  const result = svelte.compile(src, {
     format: 'cjs',
-    filename: filename,
+    filename,
     dev: true
   });
-  var code = result.js ? result.js.code : result.code;
-  var z = {
-    code: "".concat(code, "\n    const { default: parser } = require('").concat(parser, "');\n    const md = parser(module.exports.default, {});\n    module.exports = { default: md.meta, ...md.stories };\n    Object.defineProperty(exports, \"__esModule\", { value: true });"),
+  const code = result.js ? result.js.code : result.code;
+  const z = {
+    code: `${code}
+    const { default: parser } = require('${parser}');
+    const md = parser(module.exports.default, {});
+    module.exports = { default: md.meta, ...md.stories };
+    Object.defineProperty(exports, "__esModule", { value: true });`,
     map: result.js ? result.js.map : result.map
@@ -15,0 +19,0 @@ };

dist/esm/parser/collect-stories.js

@@ -1,19 +0,1 @@
-var _excluded = ["id", "name", "template", "component", "source"];
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 /* eslint-env browser */
@@ -36,12 +18,8 @@ import { logger } from '@storybook/client-logger';
 
-var createFragment = document.createDocumentFragment ? function () {
-  return document.createDocumentFragment();
-} : function () {
-  return document.createElement('div');
-};
-export default (function (StoriesComponent, _ref) {
-  var _ref$stories = _ref.stories,
-      stories = _ref$stories === void 0 ? {} : _ref$stories,
-      allocatedIds = _ref.allocatedIds;
-  var repositories = {
+const createFragment = document.createDocumentFragment ? () => document.createDocumentFragment() : () => document.createElement('div');
+export default ((StoriesComponent, {
+  stories = {},
+  allocatedIds
+}) => {
+  const repositories = {
     meta: null,
@@ -52,7 +30,7 @@ stories: []
   try {
-    var context = new RegisterContext({
+    const context = new RegisterContext({
       target: createFragment(),
       props: {
         Stories: StoriesComponent,
-        repositories: repositories
+        repositories
       }
@@ -62,6 +40,8 @@ });
   } catch (e) {
-    logger.error("Error extracting stories ".concat(e.toString()), e);
+    logger.error(`Error extracting stories ${e.toString()}`, e);
   }
 
-  var meta = repositories.meta;
+  const {
+    meta
+  } = repositories;
 
@@ -73,33 +53,27 @@ if (!meta) {
 
-  var globalComponent = meta.component; // collect templates id
+  const {
+    component: globalComponent
+  } = meta; // collect templates id
 
-  var templatesId = repositories.stories.filter(function (story) {
-    return story.isTemplate;
-  }).map(function (story) {
-    return story.id;
-  }); // check for duplicate templates
+  const templatesId = repositories.stories.filter(story => story.isTemplate).map(story => story.id); // check for duplicate templates
 
-  var duplicateTemplatesId = templatesId.filter(function (item, index) {
-    return templatesId.indexOf(item) !== index;
-  });
+  const duplicateTemplatesId = templatesId.filter((item, index) => templatesId.indexOf(item) !== index);
 
   if (duplicateTemplatesId.length > 0) {
-    logger.warn("Found duplicates templates id for stories '".concat(meta.name, "': ").concat(duplicateTemplatesId));
+    logger.warn(`Found duplicates templates id for stories '${meta.name}': ${duplicateTemplatesId}`);
   }
 
   return {
-    meta: meta,
-    stories: repositories.stories.filter(function (story) {
-      return !story.isTemplate;
-    }).reduce(function (all, story) {
-      var id = story.id,
-          name = story.name,
-          template = story.template,
-          component = story.component,
-          _story$source = story.source,
-          source = _story$source === void 0 ? false : _story$source,
-          props = _objectWithoutProperties(story, _excluded);
+    meta,
+    stories: repositories.stories.filter(story => !story.isTemplate).reduce((all, story) => {
+      const {
+        id,
+        name,
+        template,
+        component,
+        source = false,
+        ...props
+      } = story;
+      const storyId = extractId(story, allocatedIds);
 
-      var storyId = extractId(story, allocatedIds);
-
       if (!storyId) {
@@ -109,7 +83,7 @@ return all;
 
-      var unknownTemplate = template != null && templatesId.indexOf(template) < 0;
+      const unknownTemplate = template != null && templatesId.indexOf(template) < 0;
 
-      var storyFn = function storyFn(args, storyContext) {
+      const storyFn = (args, storyContext) => {
         if (unknownTemplate) {
-          throw new Error("Story ".concat(name, " is referencing an unknown template ").concat(template));
+          throw new Error(`Story ${name} is referencing an unknown template ${template}`);
         }
@@ -123,4 +97,4 @@
             templateId: template,
-            args: args,
-            storyContext: storyContext,
+            args,
+            storyContext,
             sourceComponent: component || globalComponent
@@ -132,14 +106,10 @@ }
       storyFn.storyName = name;
-      Object.entries(props).forEach(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            k = _ref3[0],
-            v = _ref3[1];
-
+      Object.entries(props).forEach(([k, v]) => {
         storyFn[k] = v;
       }); // inject story sources
 
-      var storyDef = stories[template ? "tpl:".concat(template) : storyId];
-      var hasArgs = storyDef ? storyDef.hasArgs : true; // inject source snippet
+      const storyDef = stories[template ? `tpl:${template}` : storyId];
+      const hasArgs = storyDef ? storyDef.hasArgs : true; // inject source snippet
 
-      var rawSource = storyDef ? storyDef.source : null;
+      const rawSource = storyDef ? storyDef.source : null;
 
@@ -154,3 +124,3 @@ if (rawSource) {
 
-      var snippet;
+      let snippet;
 
@@ -157,0 +127,0 @@ if (source === true || source === false && !hasArgs) {

dist/esm/parser/collect-stories.test.js

 import collectStories from './collect-stories';
 import TestStories from '../components/__tests__/TestStories.svelte';
-describe('parse-stories', function () {
-  test('Extract Stories', function () {
-    var data = collectStories(TestStories, {
+describe('parse-stories', () => {
+  test('Extract Stories', () => {
+    const data = collectStories(TestStories, {
       stories: {
@@ -10,13 +10,33 @@ 'tpl:tpl2': 'tpl2src'
     });
-    var stories = data.stories,
-        meta = data.meta;
-    expect(meta).toMatchInlineSnapshot("\n      Object {\n        \"title\": \"Test\",\n      }\n    ");
-    expect(stories).toMatchInlineSnapshot("\n      Object {\n        \"Story1\": [Function],\n        \"Story2\": [Function],\n        \"Story3\": [Function],\n      }\n    ");
+    const {
+      stories,
+      meta
+    } = data;
+    expect(meta).toMatchInlineSnapshot(`
+      Object {
+        "title": "Test",
+      }
+    `);
+    expect(stories).toMatchInlineSnapshot(`
+      Object {
+        "Story1": [Function],
+        "Story2": [Function],
+        "Story3": [Function],
+      }
+    `);
     expect(stories.Story1.storyName).toBe('Story1');
-    expect(stories.Story1.parameters).toMatchInlineSnapshot("undefined");
+    expect(stories.Story1.parameters).toMatchInlineSnapshot(`undefined`);
     expect(stories.Story2.storyName).toBe('Story2');
-    expect(stories.Story2.parameters).toMatchInlineSnapshot("undefined");
+    expect(stories.Story2.parameters).toMatchInlineSnapshot(`undefined`);
     expect(stories.Story3.storyName).toBe('Story3');
-    expect(stories.Story3.parameters).toMatchInlineSnapshot("\n      Object {\n        \"docs\": Object {\n          \"source\": Object {\n            \"code\": \"xyz\",\n          },\n        },\n      }\n    ");
+    expect(stories.Story3.parameters).toMatchInlineSnapshot(`
+      Object {
+        "docs": Object {
+          "source": Object {
+            "code": "xyz",
+          },
+        },
+      }
+    `);
   });
 });

dist/esm/parser/extract-id.js

 import { logger } from '@storybook/client-logger';
 
 function hashCode(str) {
-  var h = str.split('') // eslint-disable-next-line no-bitwise
-  .reduce(function (prevHash, currVal) {
-    return (prevHash << 5) - prevHash + currVal.charCodeAt(0) | 0;
-  }, 0);
+  const h = str.split('') // eslint-disable-next-line no-bitwise
+  .reduce((prevHash, currVal) => (prevHash << 5) - prevHash + currVal.charCodeAt(0) | 0, 0);
   return Math.abs(h).toString(16);
@@ -12,7 +10,6 @@ } // extract a story id
 
-export function extractId(_ref) {
-  var id = _ref.id,
-      name = _ref.name;
-  var allocatedIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+export function extractId({
+  id,
+  name
+}, allocatedIds = []) {
   if (id) {
@@ -22,8 +19,10 @@ return id;
 
-  var generated = name.replace(/\W+(.|$)/g, function (_, chr) {
-    return chr.toUpperCase();
-  });
+  if (!name) {
+    throw new Error("Id or Name should be specified");
+  }
 
+  let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
+
   if (allocatedIds.indexOf(generated) >= 0) {
-    logger.warn("Story name conflict with exports - Please add an explicit id for story ".concat(name));
+    logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);
     generated += hashCode(name);
@@ -30,0 +29,0 @@ }

dist/esm/parser/extract-id.test.js

 import { extractId } from './extract-id';
-describe('extract-id', function () {
-  test('name with spaces', function () {
+describe('extract-id', () => {
+  test('name with spaces', () => {
     expect(extractId({
@@ -8,3 +8,3 @@ name: 'Name with spaces'
   });
-  test('name with parenthesis', function () {
+  test('name with parenthesis', () => {
     expect(extractId({
@@ -14,3 +14,3 @@ name: 'Name with (parenthesis)'
   });
-  test('duplicates id', function () {
+  test('duplicates id', () => {
     expect(extractId({
@@ -20,3 +20,3 @@ name: 'Button'
   });
-  test('No negative hash', function () {
+  test('No negative hash', () => {
     expect(extractId({
@@ -23,0 +23,0 @@ name: 'Navbar'

dist/esm/parser/extract-stories.js

 import dedent from 'ts-dedent';
 import * as svelte from 'svelte/compiler';
 import { extractId } from './extract-id';
+import { toId, storyNameFromExport } from "@storybook/csf";
 
 function getStaticAttribute(name, node) {
   // extract the attribute
-  var attribute = node.attributes.find(function (att) {
-    return att.type === 'Attribute' && att.name === name;
-  });
+  const attribute = node.attributes.find(att => att.type === 'Attribute' && att.name === name);
 
   if (!attribute) {
-    return null;
+    return undefined;
   }
 
-  var value = attribute.value; // expect the attribute to be static, ie only one Text node
+  const {
+    value
+  } = attribute; // expect the attribute to be static, ie only one Text node
 
@@ -21,3 +22,3 @@ if (value && value.length === 1 && value[0].type === 'Text') {
 
-  throw new Error("Attribute ".concat(name, " is not static"));
+  throw new Error(`Attribute ${name} is not static`);
 }
@@ -33,46 +34,48 @@ /**
   // compile
-  var _svelte$compile = svelte.compile(component),
-      ast = _svelte$compile.ast;
-
-  var allocatedIds = ['default'];
-  var localNames = {
+  const {
+    ast
+  } = svelte.compile(component);
+  const allocatedIds = ['default'];
+  const localNames = {
     Story: 'Story',
-    Template: 'Template'
+    Template: 'Template',
+    Meta: 'Meta'
   };
-  svelte.walk(ast.instance, {
-    enter: function enter(node) {
-      if (node.type === 'ImportDeclaration') {
-        if (node.source.value === '@storybook/addon-svelte-csf') {
-          node.specifiers.filter(function (n) {
-            return n.type === 'ImportSpecifier';
-          }).forEach(function (n) {
-            localNames[n.imported.name] = n.local.name;
-          });
+
+  if (ast.instance) {
+    svelte.walk(ast.instance, {
+      enter(node) {
+        if (node.type === 'ImportDeclaration') {
+          if (node.source.value === '@storybook/addon-svelte-csf') {
+            node.specifiers.filter(n => n.type === 'ImportSpecifier').forEach(n => {
+              localNames[n.imported.name] = n.local.name;
+            });
+          }
+
+          this.skip();
         }
+      }
 
-        this.skip();
+    }); // extracts allocated Ids
+
+    svelte.walk(ast.instance, {
+      enter(node) {
+        if (node.type === 'ImportDeclaration') {
+          node.specifiers.map(n => n.local.name).forEach(name => allocatedIds.push(name));
+          this.skip();
+        }
       }
-    }
-  }); // extracts allocated Ids
 
-  svelte.walk(ast.instance, {
-    enter: function enter(node) {
-      if (node.type === 'ImportDeclaration') {
-        node.specifiers.map(function (n) {
-          return n.local.name;
-        }).forEach(function (name) {
-          return allocatedIds.push(name);
-        });
-        this.skip();
-      }
-    }
-  });
-  var stories = {};
+    });
+  }
+
+  const stories = {};
+  const meta = {};
   svelte.walk(ast.html, {
-    enter: function enter(node) {
+    enter(node) {
       if (node.type === 'InlineComponent' && (node.name === localNames.Story || node.name === localNames.Template)) {
         this.skip();
-        var isTemplate = node.name === 'Template'; // extract the 'name' attribute
+        const isTemplate = node.name === 'Template'; // extract the 'name' attribute
 
-        var name = getStaticAttribute('name', node); // templates has a default name
+        let name = getStaticAttribute('name', node); // templates has a default name
 
@@ -83,5 +86,5 @@ if (!name && isTemplate) {
 
-        var id = extractId({
+        const id = extractId({
           id: getStaticAttribute('id', node),
-          name: name
+          name
         }, isTemplate ? undefined : allocatedIds);
@@ -91,26 +94,35 @@
           // ignore stories without children
-          var source;
+          let source;
 
           if (node.children.length > 0) {
-            var start = node.children[0].start;
-            var end = node.children[node.children.length - 1].end;
+            const {
+              start
+            } = node.children[0];
+            const {
+              end
+            } = node.children[node.children.length - 1];
             source = dedent(component.substr(start, end - start));
           }
 
-          stories[isTemplate ? "tpl:".concat(id) : id] = {
-            name: name,
+          stories[isTemplate ? `tpl:${id}` : id] = {
+            storyId: toId(meta.id || meta.title || id, storyNameFromExport(id)),
+            name,
             template: isTemplate,
-            source: source,
-            hasArgs: node.attributes.find(function (att) {
-              return att.type === 'Let';
-            }) != null
+            source,
+            hasArgs: node.attributes.find(att => att.type === 'Let') != null
           };
         }
+      } else if (node.type === 'InlineComponent' && node.name === localNames.Meta) {
+        this.skip();
+        meta.title = getStaticAttribute("title", node);
+        meta.id = getStaticAttribute("id", node);
       }
     }
+
   });
   return {
-    stories: stories,
-    allocatedIds: allocatedIds
+    meta,
+    stories,
+    allocatedIds
   };
 }

dist/esm/parser/extract-stories.test.js

 import { extractStories } from './extract-stories';
-describe('extractSource', function () {
-  test('Simple Story', function () {
-    expect(extractStories("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"MyStory\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"MyStory\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+describe('extractSource', () => {
+  test('Simple Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
+
+        <Story name="MyStory">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "MyStory": Object {
+            "hasArgs": false,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "mystory--my-story",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Explicit Id Story', function () {
-    expect(extractStories("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story id=\"myId\" name=\"MyStory\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"myId\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Explicit Id Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
+
+        <Story id="myId" name="MyStory">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "myId": Object {
+            "hasArgs": false,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "myid--my-id",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Args Story', function () {
-    expect(extractStories("\n        <script>\n          import { Story } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"MyStory\" let:args>\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n        ],\n        \"stories\": Object {\n          \"MyStory\": Object {\n            \"hasArgs\": true,\n            \"name\": \"MyStory\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Args Story', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+        </script>
+
+        <Story name="MyStory" let:args>
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "MyStory": Object {
+            "hasArgs": true,
+            "name": "MyStory",
+            "source": "<div>a story</div>",
+            "storyId": "mystory--my-story",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Simple Template', function () {
-    expect(extractStories("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Template name=\"MyTemplate\">\n          <div>a template</div>\n        </Template>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"tpl:MyTemplate\": Object {\n            \"hasArgs\": false,\n            \"name\": \"MyTemplate\",\n            \"source\": \"<div>a template</div>\",\n            \"template\": true,\n          },\n        },\n      }\n    ");
+  test('Simple Template', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template name="MyTemplate">
+          <div>a template</div>
+        </Template>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "tpl:MyTemplate": Object {
+            "hasArgs": false,
+            "name": "MyTemplate",
+            "source": "<div>a template</div>",
+            "storyId": "mytemplate--my-template",
+            "template": true,
+          },
+        },
+      }
+    `);
   });
-  test('Unnamed Template', function () {
-    expect(extractStories("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Template>\n          <div>a template</div>\n        </Template>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"tpl:default\": Object {\n            \"hasArgs\": false,\n            \"name\": \"default\",\n            \"source\": \"<div>a template</div>\",\n            \"template\": true,\n          },\n        },\n      }\n    ");
+  test('Unnamed Template', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Template>
+          <div>a template</div>
+        </Template>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "tpl:default": Object {
+            "hasArgs": false,
+            "name": "default",
+            "source": "<div>a template</div>",
+            "storyId": "default--default",
+            "template": true,
+          },
+        },
+      }
+    `);
   });
-  test('Multiple Stories', function () {
-    expect(extractStories("\n        <script>\n          import { Template } from '@storybook/svelte';\n        </script>\n\n        <Story name=\"Story1\">\n          <div>story 1</div>\n        </Story>\n        <Story name=\"Story2\">\n          <div>story 2</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Template\",\n        ],\n        \"stories\": Object {\n          \"Story1\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story1\",\n            \"source\": \"<div>story 1</div>\",\n            \"template\": false,\n          },\n          \"Story2\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story2\",\n            \"source\": \"<div>story 2</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Multiple Stories', () => {
+    expect(extractStories(`
+        <script>
+          import { Template } from '@storybook/svelte';
+        </script>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        <Story name="Story2">
+          <div>story 2</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Template",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "Story1": Object {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "story1--story-1",
+            "template": false,
+          },
+          "Story2": Object {
+            "hasArgs": false,
+            "name": "Story2",
+            "source": "<div>story 2</div>",
+            "storyId": "story2--story-2",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Renamed Import', function () {
-    expect(extractStories("\n        <script>\n          import { Story as SBStory, Meta as SBMeta } from '@storybook/addon-svelte-csf';\n        </script>\n\n        <SBMeta title='test'/>\n\n        <SBStory name=\"Story1\">\n          <div>story 1</div>\n        </SBStory>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"SBStory\",\n          \"SBMeta\",\n        ],\n        \"stories\": Object {\n          \"Story1\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Story1\",\n            \"source\": \"<div>story 1</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Renamed Import', () => {
+    expect(extractStories(`
+        <script>
+          import { Story as SBStory, Meta as SBMeta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <SBMeta title='test'/>
+
+        <SBStory name="Story1">
+          <div>story 1</div>
+        </SBStory>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "SBStory",
+          "SBMeta",
+        ],
+        "meta": Object {
+          "id": undefined,
+          "title": "test",
+        },
+        "stories": Object {
+          "Story1": Object {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
-  test('Duplicate Id', function () {
-    expect(extractStories("\n        <script>\n          import { Story } from '@storybook/svelte';\n          import Button from './Button.svelte';\n        </script>\n\n        <Story name=\"Button\">\n          <div>a story</div>\n        </Story>\n        ")).toMatchInlineSnapshot("\n      Object {\n        \"allocatedIds\": Array [\n          \"default\",\n          \"Story\",\n          \"Button\",\n        ],\n        \"stories\": Object {\n          \"Button77471352\": Object {\n            \"hasArgs\": false,\n            \"name\": \"Button\",\n            \"source\": \"<div>a story</div>\",\n            \"template\": false,\n          },\n        },\n      }\n    ");
+  test('Duplicate Id', () => {
+    expect(extractStories(`
+        <script>
+          import { Story } from '@storybook/svelte';
+          import Button from './Button.svelte';
+        </script>
+
+        <Story name="Button">
+          <div>a story</div>
+        </Story>
+        `)).toMatchInlineSnapshot(`
+      Object {
+        "allocatedIds": Array [
+          "default",
+          "Story",
+          "Button",
+        ],
+        "meta": Object {},
+        "stories": Object {
+          "Button77471352": Object {
+            "hasArgs": false,
+            "name": "Button",
+            "source": "<div>a story</div>",
+            "storyId": "button77471352--button-77471352",
+            "template": false,
+          },
+        },
+      }
+    `);
   });
 });

dist/esm/parser/svelte-stories-loader.js

@@ -1,17 +0,1 @@
-var _templateObject;
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 import dedent from 'ts-dedent';
@@ -21,3 +5,3 @@ import { readFileSync } from 'fs';
 
-var parser = require.resolve('./collect-stories').replace(/[/\\]/g, '/'); // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
+const parser = require.resolve('./collect-stories').replace(/[/\\]/g, '/'); // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
 // Copied because it is not exported from the compiler
@@ -28,6 +12,6 @@
   if (!filename) return null;
-  var parts = filename.split(/[/\\]/).map(encodeURI);
+  const parts = filename.split(/[/\\]/).map(encodeURI);
 
   if (parts.length > 1) {
-    var index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
+    const index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
 
@@ -40,6 +24,6 @@ if (index_match) {
 
-  var base = parts.pop().replace(/%/g, 'u').replace(/\.[^.]+$/, '').replace(/[^a-zA-Z_$0-9]+/g, '_').replace(/^_/, '').replace(/_$/, '').replace(/^(\d)/, '_$1');
+  const base = parts.pop().replace(/%/g, 'u').replace(/\.[^.]+$/, '').replace(/[^a-zA-Z_$0-9]+/g, '_').replace(/^_/, '').replace(/_$/, '').replace(/^(\d)/, '_$1');
 
   if (!base) {
-    throw new Error("Could not derive component name from file ".concat(filename));
+    throw new Error(`Could not derive component name from file ${filename}`);
   }
@@ -52,22 +36,21 @@
   // eslint-disable-next-line no-underscore-dangle
-  var resource = this._module.resource;
-  var componentName = getNameFromFilename(resource);
-  var source = readFileSync(resource).toString();
-  var storiesDef = extractStories(source);
-  var stories = storiesDef.stories;
-  var storyDef = Object.entries(stories).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        def = _ref2[1];
-
-    return !def.template;
-  }).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-        id = _ref4[0];
-
-    return "export const ".concat(id, " = __storiesMetaData.stories[").concat(JSON.stringify(id), "]");
-  }).join('\n');
-  var codeWithoutDefaultExport = code.replace('export default ', '//export default');
-  return dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["", "\n    const { default: parser } = require('", "');\n    const __storiesMetaData = parser(", ", ", ");\n    export default __storiesMetaData.meta;\n    ", ";\n  "])), codeWithoutDefaultExport, parser, componentName, JSON.stringify(storiesDef), storyDef);
+  const {
+    resource
+  } = this._module;
+  const componentName = getNameFromFilename(resource);
+  const source = readFileSync(resource).toString();
+  const storiesDef = extractStories(source);
+  const {
+    stories
+  } = storiesDef;
+  const storyDef = Object.entries(stories).filter(([, def]) => !def.template).map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}]`).join('\n');
+  const codeWithoutDefaultExport = code.replace('export default ', '//export default');
+  return dedent`${codeWithoutDefaultExport}
+    const { default: parser } = require('${parser}');
+    const __storiesMetaData = parser(${componentName}, ${JSON.stringify(storiesDef)});
+    export default __storiesMetaData.meta;
+    ${storyDef};
+  `;
 }
 
 export default transformSvelteStories;

dist/esm/preset/index.js

@@ -1,27 +0,9 @@
-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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-export function managerEntries() {
-  var entry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return [].concat(_toConsumableArray(entry), [require.resolve('./manager')]);
+import { svelteIndexer } from './indexer.js';
+export function managerEntries(entry = []) {
+  return [...entry, require.resolve('./manager')];
 }
 export function webpack(config) {
-  return _objectSpread(_objectSpread({}, config), {}, {
-    module: _objectSpread(_objectSpread({}, config.module), {}, {
-      rules: [].concat(_toConsumableArray(config.module.rules), [{
+  return { ...config,
+    module: { ...config.module,
+      rules: [...config.module.rules, {
         test: /\.stories\.svelte$/,
@@ -32,5 +14,43 @@ enforce: 'post',
         }]
-      }])
-    })
-  });
-}
+      }]
+    }
+  };
+}
+export async function viteFinal(config, options) {
+  const {
+    plugins = []
+  } = config;
+  const svelteOptions = await options.presets.apply('svelteOptions', {}, options);
+  let svelteConfig = svelteOptions;
+
+  try {
+    const {
+      loadSvelteConfig
+    } = await import('@sveltejs/vite-plugin-svelte');
+    svelteConfig = { ...(await loadSvelteConfig()),
+      ...svelteOptions
+    };
+  } catch (err) {
+    const {
+      log
+    } = console;
+
+    if (err.code === 'MODULE_NOT_FOUND') {
+      log('@sveltejs/vite-plugin-svelte not found.  Unable to load config from svelte.config file');
+    } else {
+      throw err;
+    }
+  }
+
+  const svelteCsfPlugin = (await import('../plugins/vite-svelte-csf.js')).default.default;
+  plugins.push(svelteCsfPlugin(svelteConfig));
+  return { ...config,
+    plugins
+  };
+}
+export const storyIndexers = async indexers => {
+  return [{
+    test: /\.stories\.svelte$/,
+    indexer: svelteIndexer
+  }, ...(indexers || [])];
+};

dist/esm/preset/manager.js

 import { addons } from '@storybook/addons';
 import { ADDON_ID } from '../constants'; // Register the addon
 
-addons.register(ADDON_ID, function () {});
+addons.register(ADDON_ID, () => {});

index.d.ts

@@ -61,3 +61,3 @@ import type { SvelteComponentTyped, SvelteComponent } from 'svelte';
  */
-export class Story extends SvelteComponentTyped<StoryProps, any, Slots> { }
+export class Story extends SvelteComponentTyped<StoryProps, {}, Slots> {}
 /**
@@ -68,2 +68,2 @@ * Template.
  */
-export class Template extends SvelteComponentTyped<TemplateProps, any, Slots> { }
+export class Template extends SvelteComponentTyped<TemplateProps, {}, Slots> {}

package.json

 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "2.0.11",
+  "version": "2.0.12--canary.94.71b3707.0",
   "description": "Allows to write stories in Svelte syntax",
@@ -31,8 +31,10 @@ "keywords": [
     "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "sb dev -p 6006",
     "start": "concurrently \"yarn storybook -- --no-manager-cache --quiet\" \"yarn build -- --watch\"",
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
+    "@babel/runtime": "^7.17.5",
+    "magic-string": "^0.26.6",
     "ts-dedent": "^2.0.0"
@@ -44,12 +46,16 @@ },
     "@babel/core": "^7.17.5",
+    "@babel/plugin-transform-runtime": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-essentials": "^6.4.20",
-    "@storybook/addon-interactions": "^6.4.20",
+    "@storybook/addon-essentials": "^7.0.0-alpha.29",
+    "@storybook/addon-interactions": "^7.0.0-alpha.29",
+    "@storybook/addon-storyshots": "^7.0.0-alpha.29",
+    "@storybook/core-client": "^7.0.0-alpha.29",
+    "@storybook/core-server": "^7.0.0-alpha.29",
+    "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "^0.0.10",
+    "@storybook/svelte": "^7.0.0-alpha.29",
+    "@storybook/svelte-webpack5": "7.0.0-alpha.29",
     "@storybook/testing-library": "^0.0.9",
-    "@storybook/addon-storyshots": "^6.4.20",
-    "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/svelte": "^6.4.20",
     "auto": "^10.3.0",
@@ -67,15 +73,26 @@ "babel-jest": "^29.1.0",
     "rimraf": "^3.0.2",
-    "svelte": "^3.46.6",
+    "sb": "7.0.0-alpha.29",
+    "svelte": "^3.50.0",
     "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.2",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.7",
+    "vite": "^3.1.4"
   },
   "peerDependencies": {
-    "@storybook/svelte": ">=6.4.20",
-    "svelte": "^3.46.6",
-    "svelte-loader": "^3.1.2"
+    "@storybook/svelte": "^7.0.0-beta",
+    "@storybook/theming": "^7.0.0-beta",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0 || ^2.0.0",
+    "svelte": "^3.50.0",
+    "svelte-loader": "^3.1.2",
+    "vite": "^3.0.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@sveltejs/vite-plugin-svelte": {
+      "optional": true
+    },
     "svelte-loader": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
     }
@@ -82,0 +99,0 @@ },

README.md

@@ -48,4 +48,22 @@ # Svelte Story Format
 
-1. Add '@storybook/addon-svelte-csf' to your dev dependencies
-2. In `.storybook/main.js`, add `*.stories.svelte` to the stories patterns
-3. In `.storybook/main.js`, add `@storybook/addon-svelte-csf` to the addons array
+1. `npm install --save-dev @storybook/addon-svelte-csf` or `yarn add --dev @storybook/addon-svelte-csf`
+2. In `.storybook/main.js`, add `@storybook/addon-svelte-csf` to the addons array
+3. In `.storybook/main.js`, add `*.stories.svelte` to the stories patterns
+
+An example `main.js` configuration could look like this:
+
+```js
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-svelte-csf',
+  ],
+  framework: '@storybook/svelte-vite',
+};
+```
+
+> **Warning**
+> v3 and above of this addon requires at least Storybook v7. If you're using Storybook between v6.4.20 and v7.0.0, you should instead use v2 of this addon with `npm install --save-dev @storybook/addon-svelte-csf@^2.0.10` or `yarn add --dev @storybook/addon-svelte-csf@^2.0.10`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of package files

55

increased by12.24%

Lines of code

1897

increased by68.32%

Number of lines in readme file

69

increased by35.29%

Worsened metrics

Total package byte prevSize

76801

decreased by-3.19%

Dependency count

9

increased by125%

Dev dependency count

35

increased by20.69%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

12

increased by500%

Number of medium supply chain risk alerts

3

increased by200%

Dependency changes

• + Added@babel/runtime@^7.17.5

• + Addedmagic-string@^0.26.6

• + Added@babel/helper-string-parser@7.24.8(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/parser@7.25.6(transitive)

• + Added@babel/runtime@7.25.6(transitive)

• + Added@babel/types@7.25.6(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@esbuild/android-arm@0.18.20(transitive)

• + Added@esbuild/android-arm64@0.18.20(transitive)

• + Added@esbuild/android-x64@0.18.20(transitive)

• + Added@esbuild/darwin-arm64@0.18.20(transitive)

• + Added@esbuild/darwin-x64@0.18.20(transitive)

• + Added@esbuild/freebsd-arm64@0.18.20(transitive)

• + Added@esbuild/freebsd-x64@0.18.20(transitive)

• + Added@esbuild/linux-arm@0.18.20(transitive)

• + Added@esbuild/linux-arm64@0.18.20(transitive)

• + Added@esbuild/linux-ia32@0.18.20(transitive)

• + Added@esbuild/linux-loong64@0.18.20(transitive)

• + Added@esbuild/linux-mips64el@0.18.20(transitive)

• + Added@esbuild/linux-ppc64@0.18.20(transitive)

• + Added@esbuild/linux-riscv64@0.18.20(transitive)

• + Added@esbuild/linux-s390x@0.18.20(transitive)

• + Added@esbuild/linux-x64@0.18.20(transitive)

• + Added@esbuild/netbsd-x64@0.18.20(transitive)

• + Added@esbuild/openbsd-x64@0.18.20(transitive)

• + Added@esbuild/sunos-x64@0.18.20(transitive)

• + Added@esbuild/win32-arm64@0.18.20(transitive)

• + Added@esbuild/win32-ia32@0.18.20(transitive)

• + Added@esbuild/win32-x64@0.18.20(transitive)

• + Added@isaacs/cliui@8.0.2(transitive)

• + Added@pkgjs/parseargs@0.11.0(transitive)

• + Added@storybook/channels@7.6.20(transitive)

• + Added@storybook/client-logger@7.6.20(transitive)

• + Added@storybook/core-client@7.6.20(transitive)

• + Added@storybook/core-common@7.6.20(transitive)

• + Added@storybook/core-events@7.6.20(transitive)

• + Added@storybook/docs-tools@7.6.20(transitive)

• + Added@storybook/node-logger@7.6.20(transitive)

• + Added@storybook/preview-api@7.6.20(transitive)

• + Added@storybook/svelte@7.6.20(transitive)

• + Added@storybook/theming@7.6.20(transitive)

• + Added@storybook/types@7.6.20(transitive)

• + Added@sveltejs/vite-plugin-svelte@2.5.3(transitive)

• + Added@sveltejs/vite-plugin-svelte-inspector@1.0.4(transitive)

• + Added@types/babel__core@7.20.5(transitive)

• + Added@types/babel__generator@7.6.8(transitive)

• + Added@types/babel__template@7.4.4(transitive)

• + Added@types/babel__traverse@7.20.6(transitive)

• + Added@types/doctrine@0.0.3(transitive)

• + Added@types/find-cache-dir@3.2.1(transitive)

• + Added@types/node@18.19.54(transitive)

• + Added@types/node-fetch@2.6.11(transitive)

• + Added@types/pretty-hrtime@1.0.3(transitive)

• + Addedansi-regex@6.1.0(transitive)

• + Addedansi-styles@6.2.1(transitive)

• + Addedapp-root-dir@1.0.2(transitive)

• + Addedassert@2.1.0(transitive)

• + Addedasynckit@0.4.0(transitive)

• + Addedbrace-expansion@2.0.1(transitive)

• + Addedcombined-stream@1.0.8(transitive)

• + Addedcommondir@1.0.1(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addeddelayed-stream@1.0.0(transitive)

• + Addeddequal@2.0.3(transitive)

• + Addeddotenv@16.4.5(transitive)

• + Addeddotenv-expand@10.0.0(transitive)

• + Addedeastasianwidth@0.2.0(transitive)

• + Addedemoji-regex@8.0.09.2.2(transitive)

• + Addedesbuild@0.18.20(transitive)

• + Addedfile-system-cache@2.3.0(transitive)

• + Addedfind-cache-dir@3.3.2(transitive)

• + Addedfind-up@4.1.05.0.0(transitive)

• + Addedforeground-child@3.3.0(transitive)

• + Addedform-data@4.0.0(transitive)

• + Addedfs-extra@11.1.111.2.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedglob@10.4.5(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhandlebars@4.7.8(transitive)

• + Addedis-fullwidth-code-point@3.0.0(transitive)

• + Addedis-nan@1.3.2(transitive)

• + Addedjackspeak@3.4.3(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsonfile@6.1.0(transitive)

• + Addedkleur@4.1.5(transitive)

• + Addedlazy-universal-dotenv@4.0.0(transitive)

• + Addedlocate-path@5.0.06.0.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedlru-cache@10.4.3(transitive)

• + Addedmagic-string@0.26.7(transitive)

• + Addedmake-dir@3.1.0(transitive)

• + Addedmap-or-similar@1.5.0(transitive)

• + Addedmemoizerific@1.11.3(transitive)

• + Addedminimatch@9.0.5(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedminipass@7.1.2(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedneo-async@2.6.2(transitive)

• + Addednode-fetch@2.7.0(transitive)

• + Addedobject-is@1.1.6(transitive)

• + Addedobject-keys@1.1.1(transitive)

• + Addedobject.assign@4.1.5(transitive)

• + Addedp-limit@2.3.03.1.0(transitive)

• + Addedp-locate@4.1.05.0.0(transitive)

• + Addedp-try@2.2.0(transitive)

• + Addedpackage-json-from-dist@1.0.1(transitive)

• + Addedpath-exists@4.0.0(transitive)

• + Addedpath-scurry@1.11.1(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpkg-dir@4.2.05.0.0(transitive)

• + Addedpostcss@8.4.47(transitive)

• + Addedpretty-hrtime@1.0.3(transitive)

• + Addedramda@0.29.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve-from@5.0.0(transitive)

• + Addedrollup@3.29.5(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedsignal-exit@4.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedsourcemap-codec@1.4.8(transitive)

• + Addedstring-width@4.2.35.1.2(transitive)

• + Addedstrip-ansi@7.1.0(transitive)

• + Addedsvelte-hmr@0.15.3(transitive)

• + Addedsynchronous-promise@2.0.17(transitive)

• + Addedtelejson@7.2.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedtr46@0.0.3(transitive)

• + Addeduglify-js@3.19.3(transitive)

• + Addedundici-types@5.26.5(transitive)

• + Addeduniversalify@2.0.1(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedvite@4.5.5(transitive)

• + Addedvitefu@0.2.5(transitive)

• + Addedwebidl-conversions@3.0.1(transitive)

• + Addedwhatwg-url@5.0.0(transitive)

• + Addedwordwrap@1.0.0(transitive)

• + Addedwrap-ansi@7.0.08.1.0(transitive)

• + Addedyocto-queue@0.1.0(transitive)

• - Removed@ampproject/remapping@2.3.0(transitive)

• - Removed@esbuild/aix-ppc64@0.23.1(transitive)

• - Removed@esbuild/android-arm@0.23.1(transitive)

• - Removed@esbuild/android-arm64@0.23.1(transitive)

• - Removed@esbuild/android-x64@0.23.1(transitive)

• - Removed@esbuild/darwin-arm64@0.23.1(transitive)

• - Removed@esbuild/darwin-x64@0.23.1(transitive)

• - Removed@esbuild/freebsd-arm64@0.23.1(transitive)

• - Removed@esbuild/freebsd-x64@0.23.1(transitive)

• - Removed@esbuild/linux-arm@0.23.1(transitive)

• - Removed@esbuild/linux-arm64@0.23.1(transitive)

• - Removed@esbuild/linux-ia32@0.23.1(transitive)

• - Removed@esbuild/linux-loong64@0.23.1(transitive)

• - Removed@esbuild/linux-mips64el@0.23.1(transitive)

• - Removed@esbuild/linux-ppc64@0.23.1(transitive)

• - Removed@esbuild/linux-riscv64@0.23.1(transitive)

• - Removed@esbuild/linux-s390x@0.23.1(transitive)

• - Removed@esbuild/linux-x64@0.23.1(transitive)

• - Removed@esbuild/netbsd-x64@0.23.1(transitive)

• - Removed@esbuild/openbsd-arm64@0.23.1(transitive)

• - Removed@esbuild/openbsd-x64@0.23.1(transitive)

• - Removed@esbuild/sunos-x64@0.23.1(transitive)

• - Removed@esbuild/win32-arm64@0.23.1(transitive)

• - Removed@esbuild/win32-ia32@0.23.1(transitive)

• - Removed@esbuild/win32-x64@0.23.1(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@storybook/components@8.3.4(transitive)

• - Removed@storybook/core@8.3.4(transitive)

• - Removed@storybook/manager-api@8.3.4(transitive)

• - Removed@storybook/preview-api@8.3.4(transitive)

• - Removed@storybook/svelte@8.3.4(transitive)

• - Removed@storybook/theming@8.3.4(transitive)

• - Removed@types/estree@1.0.6(transitive)

• - Removed@types/node@22.7.4(transitive)

• - Removedaccepts@1.3.8(transitive)

• - Removedacorn-typescript@1.4.13(transitive)

• - Removedaria-query@5.3.2(transitive)

• - Removedarray-flatten@1.1.1(transitive)

• - Removedast-types@0.16.1(transitive)

• - Removedaxobject-query@4.1.0(transitive)

• - Removedbetter-opn@3.0.2(transitive)

• - Removedbody-parser@1.20.3(transitive)

• - Removedbrowser-assert@1.2.1(transitive)

• - Removedbytes@3.1.2(transitive)

• - Removedcontent-disposition@0.5.4(transitive)

• - Removedcontent-type@1.0.5(transitive)

• - Removedcookie@0.6.0(transitive)

• - Removedcookie-signature@1.0.6(transitive)

• - Removeddebug@2.6.9(transitive)

• - Removeddefine-lazy-prop@2.0.0(transitive)

• - Removeddepd@2.0.0(transitive)

• - Removeddestroy@1.2.0(transitive)

• - Removedee-first@1.1.1(transitive)

• - Removedencodeurl@1.0.22.0.0(transitive)

• - Removedesbuild@0.23.1(transitive)

• - Removedescape-html@1.0.3(transitive)

• - Removedesm-env@1.0.0(transitive)

• - Removedesprima@4.0.1(transitive)

• - Removedesrap@1.2.2(transitive)

• - Removedetag@1.8.1(transitive)

• - Removedexpress@4.21.0(transitive)

• - Removedfinalhandler@1.3.1(transitive)

• - Removedforwarded@0.2.0(transitive)

• - Removedfresh@0.5.2(transitive)

• - Removedhttp-errors@2.0.0(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedipaddr.js@1.9.1(transitive)

• - Removedis-docker@2.2.1(transitive)

• - Removedis-reference@3.0.2(transitive)

• - Removedis-wsl@2.2.0(transitive)

• - Removedjsdoc-type-pratt-parser@4.1.0(transitive)

• - Removedlocate-character@3.0.0(transitive)

• - Removedmedia-typer@0.3.0(transitive)

• - Removedmerge-descriptors@1.0.3(transitive)

• - Removedmethods@1.1.2(transitive)

• - Removedmime@1.6.0(transitive)

• - Removedms@2.0.0(transitive)

• - Removednegotiator@0.6.3(transitive)

• - Removedon-finished@2.4.1(transitive)

• - Removedopen@8.4.2(transitive)

• - Removedparseurl@1.3.3(transitive)

• - Removedpath-to-regexp@0.1.10(transitive)

• - Removedprocess@0.11.10(transitive)

• - Removedproxy-addr@2.0.7(transitive)

• - Removedrange-parser@1.2.1(transitive)

• - Removedraw-body@2.5.2(transitive)

• - Removedrecast@0.23.9(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsend@0.19.0(transitive)

• - Removedserve-static@1.16.2(transitive)

• - Removedsetprototypeof@1.2.0(transitive)

• - Removedstatuses@2.0.1(transitive)

• - Removedstorybook@8.3.4(transitive)

• - Removedsvelte@5.0.0-next.260(transitive)

• - Removedtoidentifier@1.0.1(transitive)

• - Removedtslib@2.7.0(transitive)

• - Removedtype-is@1.6.18(transitive)

• - Removedundici-types@6.19.8(transitive)

• - Removedunpipe@1.0.0(transitive)

• - Removedutils-merge@1.0.1(transitive)

• - Removedvary@1.1.2(transitive)

• - Removedws@8.18.0(transitive)

• - Removedzimmerframe@1.1.2(transitive)