@storybook/addon-svelte-csf 1.0.1 → 1.1.1

package/.babelrc.js

@@ -1,3 +1,15 @@
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  env: {
+    esm: {
+      presets: [
+        [
+          '@babel/env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+    },
+  },
 };

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v1.1.1 (Fri Apr 08 2022)
+
+#### 🐛 Bug Fix
+
+- Fix generated id [#43](https://github.com/storybookjs/addon-svelte-csf/pull/43) ([@j3rem1e](https://github.com/j3rem1e))
+- Update yarn.lock [#48](https://github.com/storybookjs/addon-svelte-csf/pull/48) ([@shilman](https://github.com/shilman))
+- Add auto release workflow [#48](https://github.com/storybookjs/addon-svelte-csf/pull/48) ([@shilman](https://github.com/shilman))
+
+#### Authors: 2
+
+- Jérémie ([@j3rem1e](https://github.com/j3rem1e))
+- Michael Shilman ([@shilman](https://github.com/shilman))
+
+---
+
+# v1.1.0 (Thu Jun 10 2021)
+
+#### 🚀 Enhancement
+
+- Add ESM support [#30](https://github.com/storybookjs/addon-svelte-csf/pull/30) ([@TheComputerM](https://github.com/TheComputerM) [@shilman](https://github.com/shilman))
+
+#### Authors: 2
+
+- Michael Shilman ([@shilman](https://github.com/shilman))
+- TheComputerM ([@TheComputerM](https://github.com/TheComputerM))
+
+---
+
 # v1.0.1 (Wed Jun 09 2021)
 
 #### 🐛 Bug Fix

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

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "Template", {
     return _Template["default"];
   }
 });
+exports["default"] = void 0;
 
 var _Meta = _interopRequireDefault(require("./components/Meta.svelte"));
 
@@ -28,4 +29,12 @@ var _Story = _interopRequireDefault(require("./components/Story.svelte"));
 
 var _Template = _interopRequireDefault(require("./components/Template.svelte"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+
+var _default = {};
+exports["default"] = _default;

package/dist/{parser → cjs/parser}/extract-id.js

@@ -7,7 +7,15 @@ exports.extractId = extractId;
 
 var _clientLogger = require("@storybook/client-logger");
 
-// extract a story id
+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);
+  return Math.abs(h).toString(16);
+} // extract a story id
+
+
 function extractId(_ref) {
   var id = _ref.id,
       name = _ref.name;
@@ -28,11 +36,4 @@ function extractId(_ref) {
   }
 
   return generated;
-}
-
-function hashCode(str) {
-  return str.split('').reduce(function (prevHash, currVal) {
-    return (prevHash << 5) - prevHash + currVal.charCodeAt(0) | 0;
-  }, 0) // eslint-disable-line
-  .toString(16);
 }

package/dist/{parser → cjs/parser}/extract-id.test.js

@@ -13,4 +13,9 @@ describe('extract-id', function () {
       name: 'Button'
     }, ['Button'])).toBe('Button77471352');
   });
+  test('No negative hash', function () {
+    expect((0, _extractId.extractId)({
+      name: 'Navbar'
+    }, ['Navbar'])).toBe('Navbar7557f7d0');
+  });
 });

package/dist/esm/components/Meta.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { useContext } from './context';
+
+  useContext().meta = $$props;
+</script>
+

package/dist/esm/components/RegisterContext.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { createRegistrationContext } from './context';
+
+  export let Stories;
+  export let repositories;
+
+  createRegistrationContext(repositories);
+
+</script>
+
+<svelte:component this={Stories} />

package/dist/esm/components/RenderContext.svelte

@@ -0,0 +1,13 @@
+<script>
+  /**
+   * @component
+   * @wrapper
+   */
+  import { createRenderContext } from './context';
+
+  export let Stories;
+
+  createRenderContext($$props);
+</script>
+
+<svelte:component this={Stories}/>

package/dist/esm/components/Story.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { useContext } from './context';
+
+  const context = useContext();
+
+  export let name;
+  export let template = null;
+
+  if (!name) {
+    throw new Error('Missing Story name');
+  }
+
+  context.register({
+    name,
+    ...$$restProps, 
+    template: template != null ? template : !$$slots.default ? 'default' : null,
+  });
+
+  $: render = context.render && !context.templateName && context.storyName == name;
+</script>
+
+{#if render}
+  <slot args={context.args} {...context.args}/>
+{/if}

package/dist/esm/components/Template.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { useContext } from './context';
+
+  const context = useContext();
+
+  export let id = 'default';
+
+  context.register({id, isTemplate: true});
+
+  $: render = context.render && context.templateId === id;
+</script>
+
+{#if render}
+  <slot args={context.args} {...context.args}/>
+{/if}

package/dist/esm/components/__tests__/TestStories.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Meta from '../Meta.svelte';
+    import Story from '../Story.svelte';
+    import Template from '../Template.svelte';
+</script>
+
+<Meta title="Test"/>
+
+<Template id="tpl1">
+    <div>tpl1</div>
+</Template>
+
+<Template id="tpl2">
+    <div>tpl2</div>
+</Template>
+
+<Story name="Story1" template="tpl1" args={{tpl1:true}}/>
+<Story name="Story2" template="tpl2" source args={{tpl1:true}}/>
+<Story name="Story3" source="xyz">
+    <div>story3</div>
+</Story>

package/dist/esm/components/context.js

@@ -0,0 +1,39 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { 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({
+    render: true,
+    register: function register() {},
+    meta: {},
+    args: {}
+  }, props));
+}
+export function createRegistrationContext(repositories) {
+  setContext(CONTEXT_KEY, {
+    render: false,
+    register: function register(story) {
+      repositories.stories.push(story);
+    },
+
+    set meta(value) {
+      // eslint-disable-next-line no-param-reassign
+      repositories.meta = value;
+    },
+
+    args: {}
+  });
+}
+export function useContext() {
+  if (!hasContext(CONTEXT_KEY)) {
+    createRenderContext();
+  }
+
+  return getContext(CONTEXT_KEY);
+}

package/dist/esm/constants.js

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

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+export { default as Meta } from './components/Meta.svelte';
+export { default as Story } from './components/Story.svelte';
+export { default as Template } from './components/Template.svelte';
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+
+export default {};

package/dist/esm/jest-transform.js

@@ -0,0 +1,19 @@
+var svelte = require('svelte/compiler');
+
+var parser = require.resolve('./parser/collect-stories').replace(/[/\\]/g, '/');
+
+function process(src, filename) {
+  var result = svelte.compile(src, {
+    format: 'cjs',
+    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 });"),
+    map: result.js ? result.js.map : result.map
+  };
+  return z;
+}
+
+exports.process = process;

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

@@ -0,0 +1,167 @@
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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.
+ *
+ * It mounts a Stories component in a context which disables
+ * the rendering of every <Story/> and <Template/> but instead
+ * collects names and properties.
+ *
+ * For every discovered <Story/>, it creates a storyFn which
+ * instantiate the main Stories component: Every Story but
+ * the one selected is disabled.
+ */
+
+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 = {
+    meta: null,
+    stories: []
+  }; // extract all stories
+
+  try {
+    var context = new RegisterContext({
+      target: createFragment(),
+      props: {
+        Stories: StoriesComponent,
+        repositories: repositories
+      }
+    });
+    context.$destroy();
+  } catch (e) {
+    logger.error("Error extracting stories ".concat(e.toString()), e);
+  }
+
+  var meta = repositories.meta;
+
+  if (!meta) {
+    logger.error('Missing <Meta/> tag');
+    return {};
+  }
+
+  var globalComponent = meta.component; // collect templates id
+
+  var templatesId = repositories.stories.filter(function (story) {
+    return story.isTemplate;
+  }).map(function (story) {
+    return story.id;
+  }); // check for duplicate templates
+
+  var duplicateTemplatesId = templatesId.filter(function (item, index) {
+    return templatesId.indexOf(item) !== index;
+  });
+
+  if (duplicateTemplatesId.length > 0) {
+    logger.warn("Found duplicates templates id for stories '".concat(meta.name, "': ").concat(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, ["id", "name", "template", "component", "source"]);
+
+      var storyId = extractId(story, allocatedIds);
+
+      if (!storyId) {
+        return all;
+      }
+
+      var unknownTemplate = template != null && templatesId.indexOf(template) < 0;
+
+      var storyFn = function storyFn(args) {
+        if (unknownTemplate) {
+          throw new Error("Story ".concat(name, " is referencing an unknown template ").concat(template));
+        }
+
+        return {
+          Component: RenderContext,
+          props: {
+            Stories: StoriesComponent,
+            storyName: name,
+            templateId: template,
+            args: args,
+            sourceComponent: component || globalComponent
+          }
+        };
+      };
+
+      storyFn.storyName = name;
+      Object.entries(props).forEach(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            k = _ref3[0],
+            v = _ref3[1];
+
+        storyFn[k] = v;
+      }); // inject story sources
+
+      var storyDef = stories[template ? "tpl:".concat(template) : storyId];
+      var hasArgs = storyDef ? storyDef.hasArgs : true; // inject source snippet
+
+      var rawSource = storyDef ? storyDef.source : null;
+
+      if (rawSource) {
+        storyFn.parameters = combineParameters(storyFn.parameters || {}, {
+          storySource: {
+            source: rawSource
+          }
+        });
+      }
+
+      var snippet;
+
+      if (source === true || source === false && !hasArgs) {
+        snippet = rawSource;
+      } else if (typeof source === 'string') {
+        snippet = source;
+      }
+
+      if (snippet) {
+        storyFn.parameters = combineParameters(storyFn.parameters || {}, {
+          docs: {
+            source: {
+              code: snippet
+            }
+          }
+        });
+      } // eslint-disable-next-line no-param-reassign
+
+
+      all[storyId] = storyFn;
+      return all;
+    }, {})
+  };
+});

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

@@ -0,0 +1,21 @@
+import collectStories from './collect-stories';
+import TestStories from '../components/__tests__/TestStories.svelte';
+describe('parse-stories', function () {
+  test('Extract Stories', function () {
+    var data = collectStories(TestStories, {
+      stories: {
+        '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    ");
+    expect(stories.Story1.storyName).toBe('Story1');
+    expect(stories.Story1.parameters).toMatchInlineSnapshot("undefined");
+    expect(stories.Story2.storyName).toBe('Story2');
+    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    ");
+  });
+});

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

@@ -0,0 +1,31 @@
+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);
+  return Math.abs(h).toString(16);
+} // 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] : [];
+
+  if (id) {
+    return id;
+  }
+
+  var generated = name.replace(/\W+(.)/g, function (_, chr) {
+    return chr.toUpperCase();
+  });
+
+  if (allocatedIds.indexOf(generated) >= 0) {
+    logger.warn("Story name conflict with exports - Please add an explicit id for story ".concat(name));
+    generated += hashCode(name);
+  }
+
+  return generated;
+}

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

@@ -0,0 +1,18 @@
+import { extractId } from './extract-id';
+describe('extract-id', function () {
+  test('name with spaces', function () {
+    expect(extractId({
+      name: 'Name with spaces'
+    })).toBe('NameWithSpaces');
+  });
+  test('duplicates id', function () {
+    expect(extractId({
+      name: 'Button'
+    }, ['Button'])).toBe('Button77471352');
+  });
+  test('No negative hash', function () {
+    expect(extractId({
+      name: 'Navbar'
+    }, ['Navbar'])).toBe('Navbar7557f7d0');
+  });
+});

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

@@ -0,0 +1,112 @@
+import dedent from 'ts-dedent';
+import * as svelte from 'svelte/compiler';
+import { extractId } from './extract-id';
+
+function getStaticAttribute(name, node) {
+  // extract the attribute
+  var attribute = node.attributes.find(function (att) {
+    return att.type === 'Attribute' && att.name === name;
+  });
+
+  if (!attribute) {
+    return null;
+  }
+
+  var value = attribute.value; // expect the attribute to be static, ie only one Text node
+
+  if (value && value.length === 1 && value[0].type === 'Text') {
+    return value[0].data;
+  }
+
+  throw new Error("Attribute ".concat(name, " is not static"));
+}
+/**
+ * Parse a Svelte component and extract stories.
+ * @param component Component Source
+ * @returns Map of storyName -> source
+ */
+
+
+export function extractStories(component) {
+  // compile
+  var _svelte$compile = svelte.compile(component),
+      ast = _svelte$compile.ast;
+
+  var allocatedIds = ['default'];
+  var localNames = {
+    Story: 'Story',
+    Template: 'Template'
+  };
+  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;
+          });
+        }
+
+        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 = {};
+  svelte.walk(ast.html, {
+    enter: function 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
+
+        var name = getStaticAttribute('name', node); // templates has a default name
+
+        if (!name && isTemplate) {
+          name = 'default';
+        }
+
+        var id = extractId({
+          id: getStaticAttribute('id', node),
+          name: name
+        }, isTemplate ? undefined : allocatedIds);
+
+        if (name && id) {
+          // ignore stories without children
+          var source;
+
+          if (node.children.length > 0) {
+            var start = node.children[0].start;
+            var end = node.children[node.children.length - 1].end;
+            source = dedent(component.substr(start, end - start));
+          }
+
+          stories[isTemplate ? "tpl:".concat(id) : id] = {
+            name: name,
+            template: isTemplate,
+            source: source,
+            hasArgs: node.attributes.find(function (att) {
+              return att.type === 'Let';
+            }) != null
+          };
+        }
+      }
+    }
+  });
+  return {
+    stories: stories,
+    allocatedIds: allocatedIds
+  };
+}

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

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

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

@@ -0,0 +1,69 @@
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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';
+import { readFileSync } from 'fs';
+import { extractStories } from './extract-stories';
+
+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
+// Copied because it is not exported from the compiler
+
+
+export function getNameFromFilename(filename) {
+  if (!filename) return null;
+  var parts = filename.split(/[/\\]/).map(encodeURI);
+
+  if (parts.length > 1) {
+    var index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
+
+    if (index_match) {
+      parts.pop();
+      parts[parts.length - 1] += index_match[1];
+    }
+  }
+
+  var 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));
+  }
+
+  return base[0].toUpperCase() + base.slice(1);
+}
+
+function transformSvelteStories(code) {
+  // 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);
+}
+
+export default transformSvelteStories;

package/dist/esm/preset/index.js

@@ -0,0 +1,35 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _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" && Symbol.iterator in Object(iter)) 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')]);
+}
+export function webpack(config) {
+  return _objectSpread(_objectSpread({}, config), {}, {
+    module: _objectSpread(_objectSpread({}, config.module), {}, {
+      rules: [].concat(_toConsumableArray(config.module.rules), [{
+        test: /\.stories\.svelte$/,
+        enforce: 'post',
+        use: [{
+          loader: require.resolve('../parser/svelte-stories-loader')
+        }]
+      }])
+    })
+  });
+}

package/dist/esm/preset/manager.js

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

package/index.d.ts

@@ -0,0 +1,66 @@
+import type { SvelteComponentTyped, SvelteComponent } from 'svelte';
+import type { BaseMeta, BaseAnnotations } from '@storybook/addons';
+
+
+type DecoratorReturnType = void|SvelteComponent|{
+    Component: any,
+    props?: any
+}
+
+interface StoryProps extends BaseAnnotations<any, DecoratorReturnType> {
+    /**
+     * Id of the story.
+     * 
+     * Optional, auto-generated from name if not specified.
+     */
+    id?: string;
+    /**
+     * Name of the story.
+     */
+    name: string;
+    /**
+     * Id of the template used by this story.
+     * 
+     * Optional. Used if the story has no body.
+     * If not specified, use the 'default' template.
+     */
+    template?: string;
+    /**
+     * Specify which sources should be shown.
+     * 
+     * By default, sources for an args story are auto-generated.
+     * If source is true, then the source of the story will be used instead.
+     * If source is a string, it replaces the source of the story.
+     */
+    source?: boolean|string
+}
+
+interface TemplateProps extends BaseAnnotations<any, DecoratorReturnType> {
+    /**
+     * Id of the template.
+     * 
+     * Optional. Use 'default' if not specified.
+     */
+    id?: string;
+}
+
+interface Slots {
+    default: {
+        args: any;
+        [key: string]: any;
+    }
+}
+/**
+ * Meta.
+ */
+export class Meta extends SvelteComponentTyped<BaseMeta<any> & BaseAnnotations<any, DecoratorReturnType>> {}
+/**
+ * Story.
+ */
+export class Story extends SvelteComponentTyped<StoryProps, {}, Slots> {}
+/**
+ * Template.
+ * 
+ * Allow to reuse definition between stories.
+ */
+export class Template extends SvelteComponentTyped<TemplateProps, {}, Slots> {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",
@@ -11,43 +11,48 @@
     "url": "https://github.com/storybookjs/addon-svelte-csf"
   },
   "license": "MIT",
-  "main": "dist/preset",
-  "browser": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "browser": "dist/cjs/index.js",
   "files": [
     "dist/**/*",
     "README.md",
-    "*.js"
+    "*.js",
+    "*.d.ts"
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "build": "babel ./src --out-dir ./dist --extensions .ts --extensions .js --copy-files",
-    "prepublish": "npm run clean && npm run build",
+    "build": "concurrently \"yarn build:cjs\" \"yarn build:esm\"",
+    "build:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.ts\" --copy-files",
+    "build:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.ts\" --copy-files",
+    "prepublish": "yarn clean && yarn build",
     "test": "jest",
     "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "storybook": "start-storybook -p 6006",
-    "start": "concurrently \"npm run storybook -- --no-manager-cache --quiet\" \"npm run build -- --watch\"",
+    "start": "concurrently \"yarn storybook -- --no-manager-cache --quiet\" \"yarn build -- --watch\"",
     "build-storybook": "build-storybook",
-    "release": "npm run build && auto shipit --base-branch=main"
+    "release": "yarn build && auto shipit"
   },
   "dependencies": {
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@auto-it/released": "^10.32.6",
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.12.5",
-    "@storybook/addon-essentials": "^6.2.1",
-    "@storybook/addon-knobs": "^6.2.1",
-    "@storybook/addon-storyshots": "^6.2.1",
-    "@storybook/eslint-config-storybook": "^2.4.0",
-    "@storybook/svelte": "^6.2.1",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-storyshots": "^6.2.9",
+    "@storybook/eslint-config-storybook": "^3.0.0",
+    "@storybook/svelte": "^6.2.9",
     "auto": "^10.3.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
     "chromatic": "^5.6.1",
-    "concurrently": "^5.3.0",
+    "concurrently": "^6.2.0",
     "eslint": "^7.17.0",
     "jest": "^26.6.3",
     "jest-environment-jsdom-thirteen": "^1.0.1",
@@ -61,14 +66,14 @@
     "typescript": "^3.3.3333"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.2.1",
-    "@storybook/api": "^6.2.1",
-    "@storybook/client-api": "^6.2.1",
-    "@storybook/client-logger": "^6.2.1",
-    "@storybook/components": "^6.2.1",
-    "@storybook/core-events": "^6.2.1",
-    "@storybook/svelte": "^6.2.1",
-    "@storybook/theming": "^6.2.1",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/api": "^6.2.9",
+    "@storybook/client-api": "^6.2.9",
+    "@storybook/client-logger": "^6.2.9",
+    "@storybook/components": "^6.2.9",
+    "@storybook/core-events": "^6.2.9",
+    "@storybook/svelte": "^6.2.9",
+    "@storybook/theming": "^6.2.9",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "svelte": "^3.35.0",
@@ -85,6 +90,12 @@
       "optional": true
     }
   },
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/preset');
+module.exports = require('./dist/cjs/preset');