@storybook/svelte 6.5.6 → 7.0.0-alpha.0

package/README.md

@@ -1,32 +1 @@
-# Storybook for Svelte
-
-Storybook for Svelte is a UI development environment for your Svelte components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-svelte-app
-npx sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
----
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
-
-## TODOs
-
-- [ ] Support `addon-info`
-- [ ] Support Svelte markup directly in stories
-- [ ] Add Svelte storybook generator
-- [ ] Provide stories that show advanced Svelte use cases
-- [ ] Hydratable
-- [ ] Advanced mount options
+# Storybook Svelte renderer

package/dist/cjs/config.js

@@ -0,0 +1,51 @@
+"use strict";
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  decorators: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function get() {
+    return _config.argTypesEnhancers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function get() {
+    return _config.decorators;
+  }
+});
+exports.parameters = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _config = require("./docs/config");
+
+var _config2 = require("./preview/config");
+
+Object.keys(_config2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _config2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _config2[key];
+    }
+  });
+});
+var parameters = Object.assign({
+  framework: 'svelte'
+}, _config.parameters);
+exports.parameters = parameters;

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

@@ -54,6 +54,7 @@ Object.defineProperty(exports, "storiesOf", {
 
 var _preview = require("./preview");
 
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
+var _module, _module$hot;
+
+// optimization: stop HMR propagation in webpack
+(_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();

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

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "decorateStory", {
     return _decorators.decorateStory;
   }
 });
-exports.parameters = void 0;
 Object.defineProperty(exports, "render", {
   enumerable: true,
   get: function get() {
@@ -25,9 +24,4 @@ Object.defineProperty(exports, "renderToDOM", {
 
 var _render = require("./render");
 
-var _decorators = require("./decorators");
-
-var parameters = {
-  framework: 'svelte'
-};
-exports.parameters = parameters;
+var _decorators = require("./decorators");

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
 
-var _core = require("@storybook/core");
+var _coreClient = require("@storybook/core-client");
 
 var _decorators = require("./decorators");
 
@@ -13,7 +13,7 @@ require("./globals");
 
 var _render = require("./render");
 
-var _start = (0, _core.start)(_render.renderToDOM, {
+var _start = (0, _coreClient.start)(_render.renderToDOM, {
   decorateStory: _decorators.decorateStory,
   render: _render.render
 }),

package/dist/esm/config.js

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

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

@@ -21,19 +21,17 @@ export const extractArgTypes = component => {
 export const createArgTypes = docgen => {
   const results = {};
   docgen.data.forEach(item => {
-    var _item$type, _item$type2;
-
     results[item.name] = {
       control: parseTypeToControl(item.type),
       name: item.name,
       description: item.description,
       type: {
         required: hasKeyword('required', item.keywords),
-        name: (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text
+        name: item.type?.text
       },
       table: {
         type: {
-          summary: (_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text
+          summary: item.type?.text
         },
         defaultValue: {
           summary: item.defaultValue
@@ -56,11 +54,9 @@ export const createArgTypes = docgen => {
     };
   });
   docgen.slots.forEach(item => {
-    var _item$params;
-
     results[`slot_${item.name}`] = {
       name: item.name,
-      description: [item.description, (_item$params = item.params) === null || _item$params === void 0 ? void 0 : _item$params.map(p => `\`${p.name}\``).join(' ')].filter(p => p).join('\n\n'),
+      description: [item.description, item.params?.map(p => `\`${p.name}\``).join(' ')].filter(p => p).join('\n\n'),
       type: {
         name: 'other',
         value: 'void'

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import { addons, useEffect } from '@storybook/addons';
 import { once } from '@storybook/client-logger';
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -8,18 +9,16 @@ import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
  */
 
 const skipSourceRender = context => {
-  var _context$parameters$d;
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory; // always render if the user forces it
 
-  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
-  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
-
-  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.DYNAMIC) {
+  if (sourceParams?.type === SourceType.DYNAMIC) {
     return false;
   } // never render if the user is forcing the block to render code, or
   // if the user provides code, or if it's not an args story.
 
 
-  return !isArgsStory || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 /**
  * Transform a key/value to a svelte declaration as string.
@@ -142,7 +141,7 @@ function getWrapperProperties(component) {
 
   return {
     wrapper: true,
-    slotProperty: slotProp === null || slotProp === void 0 ? void 0 : slotProp.name
+    slotProperty: slotProp?.name
   };
 }
 /**
@@ -188,6 +187,6 @@ export const sourceDecorator = (storyFn, context) => {
     component = ctxtComponent;
   }
 
-  source = generateSvelteSource(component, args, context === null || context === void 0 ? void 0 : context.argTypes, slotProperty);
+  source = generateSvelteSource(component, args, context?.argTypes, slotProperty);
   return story;
 };

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, forceReRender, raw } from './preview'; // optimization: stop HMR propagation in webpack
+
+module?.hot?.decline();

package/dist/esm/preview/config.js

@@ -0,0 +1,2 @@
+export { render, renderToDOM } from './render';
+export { decorateStory } from './decorators';

package/dist/{modern/client → esm}/preview/decorators.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import { sanitizeStoryContextUpdate } from '@storybook/store'; // eslint-disable-next-line import/no-extraneous-dependencies
 
 import SlotDecorator from '@storybook/svelte/templates/SlotDecorator.svelte';

package/dist/{modern/client → esm}/preview/index.js

@@ -1,4 +1,4 @@
-import { start } from '@storybook/core';
+import { start } from '@storybook/core-client';
 import { decorateStory } from './decorators';
 import './globals';
 import { render, renderToDOM } from './render';

package/dist/types/config.d.ts

@@ -0,0 +1,11 @@
+export declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").StoryFn<import("@storybook/csf").AnyFramework, import("@storybook/csf").Args>) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<any>, any>;
+        extractArgTypes: import("lib/docs-tools/dist/types").ArgTypesExtractor;
+        extractComponentDescription: typeof import("./docs/extractComponentDescription").extractComponentDescription;
+    };
+    framework: string;
+};
+export { decorators, argTypesEnhancers } from './docs/config';
+export * from './preview/config';

package/dist/{ts3.9/client → types}/docs/config.d.ts

@@ -8,4 +8,4 @@ export declare const parameters: {
     };
 };
 export declare const decorators: ((storyFn: any, context: import("@storybook/csf").StoryContext<import("@storybook/csf").AnyFramework, import("@storybook/csf").Args>) => any)[];
-export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/addons").Parameters | import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args>)[];
+export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("lib/addons/dist/types").Parameters)[];

package/dist/{esm/client/preview/config.js → types/preview/config.d.ts}

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

package/dist/{ts3.9/client → types}/preview/index.d.ts

@@ -3,7 +3,7 @@ declare const forceReRender: (() => never) | (() => void);
 export declare const setAddon: ((addon: any) => void) | (() => never), addDecorator: (() => never) | ((decorator: import("@storybook/csf").DecoratorFunction<import("./types").SvelteFramework, import("@storybook/csf").Args>) => void), addParameters: (({ globals, globalTypes, ...parameters }: import("@storybook/csf").Parameters & {
     globals?: import("@storybook/csf").Globals;
     globalTypes?: import("@storybook/csf").GlobalTypes;
-}) => void) | (() => never), clearDecorators: (() => void) | (() => never), getStorybook: (() => never) | (() => import("@storybook/client-api/dist/ts3.9/ClientApi").GetStorybookKind<import("./types").SvelteFramework>[]), raw: (() => never) | (() => import("@storybook/store").BoundStory<import("./types").SvelteFramework>[]);
-export declare const storiesOf: (kind: string, m: any) => import("@storybook/addons").StoryApi<any>;
+}) => void) | (() => never), clearDecorators: (() => void) | (() => never), getStorybook: (() => never) | (() => import("lib/client-api/dist/types/ClientApi").GetStorybookKind<import("./types").SvelteFramework>[]), raw: (() => never) | (() => import("lib/store/dist/types").BoundStory<import("./types").SvelteFramework>[]);
+export declare const storiesOf: (kind: string, m: any) => import("lib/addons/dist/types").StoryApi<any>;
 export declare const configure: (loadable: any, m: any) => void;
 export { forceReRender };

package/dist/{ts3.9/client → types}/preview/types.d.ts

@@ -1,4 +1,4 @@
-export type { RenderContext } from '@storybook/core';
+export type { RenderContext } from '@storybook/core-client';
 export interface ShowErrorArgs {
     title: string;
     description: string;

package/package.json

@@ -1,41 +1,28 @@
 {
   "name": "@storybook/svelte",
-  "version": "6.5.6",
-  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
+  "version": "7.0.0-alpha.0",
+  "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/svelte",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/svelte",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/svelte"
+    "directory": "renderers/svelte"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/client/index.js",
-  "module": "dist/esm/client/index.js",
-  "types": "dist/ts3.9/client/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "bin/**/*",
     "dist/**/*",
     "templates/**/*",
     "README.md",
@@ -46,36 +33,25 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.6",
-    "@storybook/client-logger": "6.5.6",
-    "@storybook/core": "6.5.6",
-    "@storybook/core-common": "6.5.6",
+    "@storybook/addons": "7.0.0-alpha.0",
+    "@storybook/client-logger": "7.0.0-alpha.0",
+    "@storybook/core-client": "7.0.0-alpha.0",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "6.5.6",
-    "@storybook/node-logger": "6.5.6",
-    "@storybook/store": "6.5.6",
+    "@storybook/docs-tools": "7.0.0-alpha.0",
+    "@storybook/store": "7.0.0-alpha.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
-    "loader-utils": "^2.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
-    "sveltedoc-parser": "4.1.0",
-    "ts-dedent": "^2.0.0",
-    "webpack": ">=4.0.0 <6.0.0"
+    "sveltedoc-parser": "4.1.0"
   },
   "devDependencies": {
-    "@types/loader-utils": "^2.0.0",
-    "@types/webpack-env": "^1.16.0",
-    "svelte": "^3.31.2",
-    "svelte-loader": "^3.0.0",
-    "webpack": "4"
+    "svelte": "^3.31.2"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "svelte": "^3.1.0",
-    "svelte-loader": "*"
+    "svelte": "^3.1.0"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -83,6 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "65d10a3c52180f606d635d82a9ca41686a9aa81f",
-  "sbmodern": "dist/modern/client/index.js"
+  "gitHead": "c82d897ea765da8cf4fbbcc2af1f28c808a93e23"
 }

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/config';

package/bin/build.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-
-require('../dist/cjs/server/build');

package/bin/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../dist/cjs/server');

package/dist/cjs/server/build.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _server = require("@storybook/core/server");
-
-var _options = _interopRequireDefault(require("./options"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _server.buildStatic)(_options.default);

package/dist/cjs/server/framework-preset-svelte-docs.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.previewAnnotations = void 0;
-exports.webpackFinal = webpackFinal;
-
-require("core-js/modules/es.promise.js");
-
-var _path = _interopRequireDefault(require("path"));
-
-var _coreCommon = require("@storybook/core-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-async function webpackFinal(webpackConfig, options) {
-  var svelteOptions = await options.presets.apply('svelteOptions', {}, options);
-  webpackConfig.module.rules.push({
-    test: /\.svelte$/,
-    loader: _path.default.resolve(`${__dirname}/svelte-docgen-loader`),
-    enforce: 'post',
-    options: svelteOptions
-  });
-  return webpackConfig;
-}
-
-var previewAnnotations = function (entry = []) {
-  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/docs/config')];
-};
-
-exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/framework-preset-svelte.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.babelDefault = babelDefault;
-exports.previewAnnotations = void 0;
-exports.webpack = webpack;
-
-require("core-js/modules/es.promise.js");
-
-var _coreCommon = require("@storybook/core-common");
-
-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; }
-
-async function webpack(config, options) {
-  var _await$options$preset = await options.presets.apply('svelteOptions', {}, options),
-      _await$options$preset2 = _await$options$preset.preprocess,
-      preprocess = _await$options$preset2 === void 0 ? undefined : _await$options$preset2,
-      _await$options$preset3 = _await$options$preset.loader,
-      loader = _await$options$preset3 === void 0 ? {} : _await$options$preset3;
-
-  var mainFields = config.resolve.mainFields || ['browser', 'module', 'main'];
-  return _objectSpread(_objectSpread({}, config), {}, {
-    module: _objectSpread(_objectSpread({}, config.module), {}, {
-      rules: [...config.module.rules, {
-        test: /\.(svelte|html)$/,
-        loader: require.resolve('svelte-loader'),
-        options: _objectSpread({
-          preprocess: preprocess
-        }, loader)
-      }]
-    }),
-    resolve: _objectSpread(_objectSpread({}, config.resolve), {}, {
-      extensions: [...config.resolve.extensions, '.svelte'],
-      alias: config.resolve.alias,
-      mainFields: ['svelte', ...mainFields]
-    })
-  });
-}
-
-async function babelDefault(config) {
-  return _objectSpread(_objectSpread({}, config), {}, {
-    presets: [...((config === null || config === void 0 ? void 0 : config.presets) || [])],
-    plugins: [...((config === null || config === void 0 ? void 0 : config.plugins) || [])]
-  });
-}
-
-var previewAnnotations = function (entry = []) {
-  return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
-};
-
-exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/index.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _server = require("@storybook/core/server");
-
-var _options = _interopRequireDefault(require("./options"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _server.buildDev)(_options.default);

package/dist/cjs/server/options.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _readPkgUp = require("read-pkg-up");
-
-var _default = {
-  packageJson: (0, _readPkgUp.sync)({
-    cwd: __dirname
-  }).packageJson,
-  framework: 'svelte',
-  frameworkPresets: [require.resolve('./preset.js')]
-};
-exports.default = _default;

package/dist/cjs/server/preset.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.addons = void 0;
-var addons = [require.resolve('./framework-preset-svelte'), require.resolve('./framework-preset-svelte-docs')];
-exports.addons = addons;