@storybook/addon-svelte-csf 3.0.0-next.0 → 3.0.0-next.2

package/.babelrc.js

@@ -1,8 +1,6 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
-  plugins: [
-    "@babel/plugin-transform-runtime"
-  ],
+  presets: [['@babel/preset-env', { targets: { node: '16' } }], '@babel/preset-typescript'],
+  plugins: ['@babel/plugin-transform-runtime'],
   env: {
     esm: {
       presets: [
@@ -10,6 +8,7 @@ module.exports = {
           '@babel/env',
           {
             modules: false,
+            targets: { chrome: '100' },
           },
         ],
       ],

package/.eslintrc.js

@@ -1,5 +1,11 @@
 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: [],
 };

package/README.md

@@ -45,6 +45,24 @@ It supports:
 
 # Getting Started
 
-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`

package/dist/cjs/components/context.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,30 +7,24 @@ exports.createRegistrationContext = createRegistrationContext;
 exports.createRenderContext = createRenderContext;
 exports.useContext = useContext;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 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) { (0, _defineProperty2["default"])(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; }
-
-var CONTEXT_KEY = "storybook-registration-context";
+const CONTEXT_KEY = "storybook-registration-context";
 
-function createRenderContext() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  (0, _svelte.setContext)(CONTEXT_KEY, _objectSpread({
+function createRenderContext(props = {}) {
+  (0, _svelte.setContext)(CONTEXT_KEY, {
     render: true,
-    register: function register() {},
+    register: () => {},
     meta: {},
-    args: {}
-  }, props));
+    args: {},
+    ...props
+  });
 }
 
 function createRegistrationContext(repositories) {
   (0, _svelte.setContext)(CONTEXT_KEY, {
     render: false,
-    register: function register(story) {
+    register: story => {
       repositories.stories.push(story);
     },
 

package/dist/cjs/constants.js

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

package/dist/cjs/index.js

@@ -7,23 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Meta", {
   enumerable: true,
-  get: function get() {
-    return _Meta["default"];
+  get: function () {
+    return _Meta.default;
   }
 });
 Object.defineProperty(exports, "Story", {
   enumerable: true,
-  get: function get() {
-    return _Story["default"];
+  get: function () {
+    return _Story.default;
   }
 });
 Object.defineProperty(exports, "Template", {
   enumerable: true,
-  get: function get() {
-    return _Template["default"];
+  get: function () {
+    return _Template.default;
   }
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _Meta = _interopRequireDefault(require("./components/Meta.svelte"));
 
@@ -37,4 +37,4 @@ if (module && module.hot && module.hot.decline) {
 
 
 var _default = {};
-exports["default"] = _default;
+exports.default = _default;

package/dist/cjs/jest-transform.js

@@ -1,18 +1,22 @@
 "use strict";
 
-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
   };
   return z;

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

@@ -5,11 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.default = void 0;
 
 var _clientLogger = require("@storybook/client-logger");
 
@@ -21,7 +17,7 @@ var _RegisterContext = _interopRequireDefault(require("../components/RegisterCon
 
 var _RenderContext = _interopRequireDefault(require("../components/RenderContext.svelte"));
 
-var _excluded = ["id", "name", "template", "component", "source"];
+/* eslint-env browser */
 
 /* Called from a webpack loader and a jest transformation.
  *
@@ -33,35 +29,33 @@ var _excluded = ["id", "name", "template", "component", "source"];
  * 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');
-};
+const createFragment = document.createDocumentFragment ? () => document.createDocumentFragment() : () => 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 = {
+var _default = (StoriesComponent, {
+  stories = {},
+  allocatedIds
+}) => {
+  const repositories = {
     meta: null,
     stories: []
   }; // extract all stories
 
   try {
-    var context = new _RegisterContext["default"]({
+    const context = new _RegisterContext.default({
       target: createFragment(),
       props: {
         Stories: StoriesComponent,
-        repositories: repositories
+        repositories
       }
     });
     context.$destroy();
   } catch (e) {
-    _clientLogger.logger.error("Error extracting stories ".concat(e.toString()), e);
+    _clientLogger.logger.error(`Error extracting stories ${e.toString()}`, e);
   }
 
-  var meta = repositories.meta;
+  const {
+    meta
+  } = repositories;
 
   if (!meta) {
     _clientLogger.logger.error('Missing <Meta/> tag');
@@ -69,73 +63,64 @@ var _default = function _default(StoriesComponent, _ref) {
     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));
+    _clientLogger.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 = (0, _objectWithoutProperties2["default"])(story, _excluded);
-      var storyId = (0, _extractId.extractId)(story, allocatedIds);
+    meta,
+    stories: repositories.stories.filter(story => !story.isTemplate).reduce((all, story) => {
+      const {
+        id,
+        name,
+        template,
+        component,
+        source = false,
+        ...props
+      } = story;
+      const storyId = (0, _extractId.extractId)(story, allocatedIds);
 
       if (!storyId) {
         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.default,
           props: {
             Stories: StoriesComponent,
             storyName: name,
             templateId: template,
-            args: args,
-            storyContext: storyContext,
+            args,
+            storyContext,
             sourceComponent: component || globalComponent
           }
         };
       };
 
       storyFn.storyName = name;
-      Object.entries(props).forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_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 || {}, {
@@ -145,7 +130,7 @@ var _default = function _default(StoriesComponent, _ref) {
         });
       }
 
-      var snippet;
+      let snippet;
 
       if (source === true || source === false && !hasArgs) {
         snippet = rawSource;
@@ -170,4 +155,4 @@ var _default = function _default(StoriesComponent, _ref) {
   };
 };
 
-exports["default"] = _default;
+exports.default = _default;

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

@@ -6,22 +6,42 @@ var _collectStories = _interopRequireDefault(require("./collect-stories"));
 
 var _TestStories = _interopRequireDefault(require("../components/__tests__/TestStories.svelte"));
 
-describe('parse-stories', function () {
-  test('Extract Stories', function () {
-    var data = (0, _collectStories["default"])(_TestStories["default"], {
+describe('parse-stories', () => {
+  test('Extract Stories', () => {
+    const data = (0, _collectStories.default)(_TestStories.default, {
       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    ");
+    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",
+          },
+        },
+      }
+    `);
   });
 });

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

@@ -8,19 +8,16 @@ 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);
 } // extract a story id
 
 
-function extractId(_ref) {
-  var id = _ref.id,
-      name = _ref.name;
-  var allocatedIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
+function extractId({
+  id,
+  name
+}, allocatedIds = []) {
   if (id) {
     return id;
   }
@@ -29,12 +26,10 @@ function extractId(_ref) {
     throw new Error("Id or Name should be specified");
   }
 
-  var generated = name.replace(/\W+(.|$)/g, function (_, chr) {
-    return chr.toUpperCase();
-  });
+  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));
+    _clientLogger.logger.warn(`Story name conflict with exports - Please add an explicit id for story ${name}`);
 
     generated += hashCode(name);
   }

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

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