@storybook/web-components 6.5.7 → 7.0.0-alpha.0

package/README.md

@@ -1,71 +1 @@
-# Storybook for web-components
-
----
-
-Storybook for web-components is a UI development environment for your plain web-component snippets.
-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-app
-npx sb init -t web_components
-```
-
-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/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want.
-
-# Hot Module Reloading (HMR)
-
-As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast.
-
-# Setup es6/7 dependencies
-
-By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation".
-
-For example if you have a library called `my-library` which is in ES2017 then you can add it like so
-
-```js
-// .storybook/main.js
-
-module.exports = {
-  webpackFinal: async (config) => {
-    // find web-components rule for extra transpilation
-    const webComponentsRule = config.module.rules.find(
-      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
-    );
-    // add your own `my-library`
-    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
-
-    return config;
-  },
-};
-```
-
-By default the following folders are included
-
-- `src/*.js`
-- `packages/*/src/*.js`
-- `node_modules/lit-html/*.js`
-- `node_modules/lit-element/*.js`
-- `node_modules/@open-wc/*.js`
-- `node_modules/@polymer/*.js`
-- `node_modules/@vaadin/*.js`
-
-As you can see the `src` folder is also included.
-The reason for that is as it has some extra configuration to allow for example `import.meta`.
-If you use a different folder you will need to make sure webpack/babel can handle it.
-
-# FAQ
-
-- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry`
-  => please see <a href="#user-content-setup-page-reload-via-hmr">Setup page reload via HMR</a>
+# Storybook web-components 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: 'web-components'
+}, _config.parameters);
+exports.parameters = parameters;

package/dist/cjs/{client/docs → docs}/custom-elements.js

@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractComponentDescription = exports.extractArgTypesFromElements = exports.extractArgTypes = void 0;
 
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/web.dom-collections.for-each.js");
-
 require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
@@ -21,6 +15,12 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
 require("core-js/modules/es.array.find.js");
 
 require("core-js/modules/es.object.assign.js");
@@ -29,28 +29,6 @@ var _clientLogger = require("@storybook/client-logger");
 
 var _ = require("..");
 
-function mapData(data, category) {
-  return data && data.filter(function (item) {
-    return item && item.name;
-  }).reduce(function (acc, item) {
-    if (item.kind === 'method') return acc;
-
-    switch (category) {
-      case 'events':
-        mapEvent(item).forEach(function (argType) {
-          acc[argType.name] = argType;
-        });
-        break;
-
-      default:
-        acc[item.name] = mapItem(item, category);
-        break;
-    }
-
-    return acc;
-  }, {});
-}
-
 function mapItem(item, category) {
   var _item$type, _item$type2;
 
@@ -94,6 +72,28 @@ function mapEvent(item) {
   }, mapItem(item, 'events')];
 }
 
+function mapData(data, category) {
+  return data && data.filter(function (item) {
+    return item && item.name;
+  }).reduce(function (acc, item) {
+    if (item.kind === 'method') return acc;
+
+    switch (category) {
+      case 'events':
+        mapEvent(item).forEach(function (argType) {
+          acc[argType.name] = argType;
+        });
+        break;
+
+      default:
+        acc[item.name] = mapItem(item, category);
+        break;
+    }
+
+    return acc;
+  }, {});
+}
+
 var getMetaDataExperimental = function getMetaDataExperimental(tagName, customElements) {
   if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
     return null;
@@ -135,13 +135,6 @@ var getMetaDataV1 = function getMetaDataV1(tagName, customElements) {
   return metadata;
 };
 
-var extractArgTypesFromElements = function extractArgTypesFromElements(tagName, customElements) {
-  var metaData = getMetaData(tagName, customElements);
-  return metaData && Object.assign({}, mapData(metaData.attributes, 'attributes'), mapData(metaData.members, 'properties'), mapData(metaData.properties, 'properties'), mapData(metaData.events, 'events'), mapData(metaData.slots, 'slots'), mapData(metaData.cssProperties, 'css custom properties'), mapData(metaData.cssParts, 'css shadow parts'));
-};
-
-exports.extractArgTypesFromElements = extractArgTypesFromElements;
-
 var getMetaData = function getMetaData(tagName, manifest) {
   if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
     return getMetaDataExperimental(tagName, manifest);
@@ -150,6 +143,13 @@ var getMetaData = function getMetaData(tagName, manifest) {
   return getMetaDataV1(tagName, manifest);
 };
 
+var extractArgTypesFromElements = function extractArgTypesFromElements(tagName, customElements) {
+  var metaData = getMetaData(tagName, customElements);
+  return metaData && Object.assign({}, mapData(metaData.attributes, 'attributes'), mapData(metaData.members, 'properties'), mapData(metaData.properties, 'properties'), mapData(metaData.events, 'events'), mapData(metaData.slots, 'slots'), mapData(metaData.cssProperties, 'css custom properties'), mapData(metaData.cssParts, 'css shadow parts'));
+};
+
+exports.extractArgTypesFromElements = extractArgTypesFromElements;
+
 var extractArgTypes = function extractArgTypes(tagName) {
   var cem = (0, _.getCustomElements)();
   return extractArgTypesFromElements(tagName, cem);

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

@@ -41,7 +41,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -51,7 +51,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var prepareForInline = function prepareForInline(storyFn) {
   var Story = /*#__PURE__*/function (_React$Component) {

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

@@ -15,6 +15,8 @@ var _addons = require("@storybook/addons");
 
 var _docsTools = require("@storybook/docs-tools");
 
+/* eslint-disable no-underscore-dangle */
+
 /* global window */
 // Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
 var LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parameters = void 0;
 Object.defineProperty(exports, "renderToDOM", {
   enumerable: true,
   get: function get() {
@@ -11,9 +10,4 @@ Object.defineProperty(exports, "renderToDOM", {
   }
 });
 
-var _render = require("./render");
-
-var parameters = {
-  framework: 'web-components'
-};
-exports.parameters = parameters;
+var _render = require("./render");

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

@@ -7,7 +7,7 @@ exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = expo
 
 require("core-js/modules/es.array.concat.js");
 
-var _core = require("@storybook/core");
+var _coreClient = require("@storybook/core-client");
 
 require("./globals");
 
@@ -15,7 +15,7 @@ var _render = require("./render");
 
 /* eslint-disable prefer-destructuring */
 var framework = 'web-components';
-var api = (0, _core.start)(_render.renderToDOM);
+var api = (0, _coreClient.start)(_render.renderToDOM);
 
 var storiesOf = function storiesOf(kind, m) {
   return api.clientApi.storiesOf(kind, m).addParameters({

package/dist/esm/config.js

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

package/dist/{modern/client → esm}/docs/custom-elements.js

@@ -1,32 +1,9 @@
-import "core-js/modules/es.array.reduce.js";
 import { logger } from '@storybook/client-logger';
 import { getCustomElements, isValidComponent, isValidMetaData } from '..';
 
-function mapData(data, category) {
-  return data && data.filter(item => item && item.name).reduce((acc, item) => {
-    if (item.kind === 'method') return acc;
-
-    switch (category) {
-      case 'events':
-        mapEvent(item).forEach(argType => {
-          acc[argType.name] = argType;
-        });
-        break;
-
-      default:
-        acc[item.name] = mapItem(item, category);
-        break;
-    }
-
-    return acc;
-  }, {});
-}
-
 function mapItem(item, category) {
-  var _item$type, _item$type2;
-
   const type = category === 'properties' ? {
-    name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
+    name: item.type?.text || item.type
   } : {
     name: 'void'
   };
@@ -38,7 +15,7 @@ function mapItem(item, category) {
     table: {
       category,
       type: {
-        summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
+        summary: item.type?.text || item.type
       },
       defaultValue: {
         summary: item.default !== undefined ? item.default : item.defaultValue
@@ -63,6 +40,26 @@ function mapEvent(item) {
   }, mapItem(item, 'events')];
 }
 
+function mapData(data, category) {
+  return data && data.filter(item => item && item.name).reduce((acc, item) => {
+    if (item.kind === 'method') return acc;
+
+    switch (category) {
+      case 'events':
+        mapEvent(item).forEach(argType => {
+          acc[argType.name] = argType;
+        });
+        break;
+
+      default:
+        acc[item.name] = mapItem(item, category);
+        break;
+    }
+
+    return acc;
+  }, {});
+}
+
 const getMetaDataExperimental = (tagName, customElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
@@ -78,17 +75,13 @@ const getMetaDataExperimental = (tagName, customElements) => {
 };
 
 const getMetaDataV1 = (tagName, customElements) => {
-  var _customElements$modul;
-
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
   }
 
   let metadata;
-  customElements === null || customElements === void 0 ? void 0 : (_customElements$modul = customElements.modules) === null || _customElements$modul === void 0 ? void 0 : _customElements$modul.forEach(_module => {
-    var _module$declarations;
-
-    _module === null || _module === void 0 ? void 0 : (_module$declarations = _module.declarations) === null || _module$declarations === void 0 ? void 0 : _module$declarations.forEach(declaration => {
+  customElements?.modules?.forEach(_module => {
+    _module?.declarations?.forEach(declaration => {
       if (declaration.tagName === tagName) {
         metadata = declaration;
       }
@@ -102,19 +95,18 @@ const getMetaDataV1 = (tagName, customElements) => {
   return metadata;
 };
 
-export const extractArgTypesFromElements = (tagName, customElements) => {
-  const metaData = getMetaData(tagName, customElements);
-  return metaData && Object.assign({}, mapData(metaData.attributes, 'attributes'), mapData(metaData.members, 'properties'), mapData(metaData.properties, 'properties'), mapData(metaData.events, 'events'), mapData(metaData.slots, 'slots'), mapData(metaData.cssProperties, 'css custom properties'), mapData(metaData.cssParts, 'css shadow parts'));
-};
-
 const getMetaData = (tagName, manifest) => {
-  if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
+  if (manifest?.version === 'experimental') {
     return getMetaDataExperimental(tagName, manifest);
   }
 
   return getMetaDataV1(tagName, manifest);
 };
 
+export const extractArgTypesFromElements = (tagName, customElements) => {
+  const metaData = getMetaData(tagName, customElements);
+  return metaData && Object.assign({}, mapData(metaData.attributes, 'attributes'), mapData(metaData.members, 'properties'), mapData(metaData.properties, 'properties'), mapData(metaData.events, 'events'), mapData(metaData.slots, 'slots'), mapData(metaData.cssProperties, 'css custom properties'), mapData(metaData.cssParts, 'css shadow parts'));
+};
 export const extractArgTypes = tagName => {
   const cem = getCustomElements();
   return extractArgTypesFromElements(tagName, cem);

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import React from 'react';
 import { render } from 'lit-html';
 export const prepareForInline = storyFn => {

package/dist/esm/docs/sourceDecorator.js

@@ -0,0 +1,45 @@
+/* eslint-disable no-underscore-dangle */
+
+/* global window */
+import { render } from 'lit-html';
+import { addons, useEffect } from '@storybook/addons';
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
+// Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
+const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
+
+function skipSourceRender(context) {
+  const sourceParams = context?.parameters.docs?.source;
+  const isArgsStory = context?.parameters.__isArgsStory; // always render if the user forces it
+
+  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?.code || sourceParams?.type === SourceType.CODE;
+}
+
+function applyTransformSource(source, context) {
+  const {
+    transformSource
+  } = context.parameters.docs ?? {};
+  if (typeof transformSource !== 'function') return source;
+  return transformSource(source, context);
+}
+
+export function sourceDecorator(storyFn, context) {
+  const story = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
+  let source;
+  useEffect(() => {
+    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+  });
+
+  if (!skipSourceRender(context)) {
+    const container = window.document.createElement('div');
+    render(story, container);
+    source = applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''), context);
+  }
+
+  return story;
+}

package/dist/esm/preview/config.js

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

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

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-destructuring */
-import { start } from '@storybook/core';
+import { start } from '@storybook/core-client';
 import './globals';
 import { renderToDOM } from './render';
 const framework = 'web-components';

package/dist/types/config.d.ts

@@ -0,0 +1,17 @@
+export declare const parameters: {
+    docs: {
+        extractArgTypes: (tagName: string) => {
+            [x: string]: import("lib/api/dist/types").ArgType;
+        };
+        extractComponentDescription: (tagName: string) => string;
+        inlineStories: boolean;
+        prepareForInline: (storyFn: import("@storybook/csf").PartialStoryFn<import(".").WebComponentsFramework, import("@storybook/csf").Args>) => import("react").CElement<{}, import("react").Component<{}, {}, any>>;
+        source: {
+            type: import("lib/docs-tools/dist/types").SourceType;
+            language: string;
+        };
+    };
+    framework: string;
+};
+export { decorators, argTypesEnhancers } from './docs/config';
+export * from './preview/config';

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

@@ -4,7 +4,7 @@ export declare const decorators: (typeof sourceDecorator)[];
 export declare const parameters: {
     docs: {
         extractArgTypes: (tagName: string) => {
-            [x: string]: import("@storybook/api").ArgType;
+            [x: string]: import("lib/api/dist/types").ArgType;
         };
         extractComponentDescription: (tagName: string) => string;
         inlineStories: boolean;
@@ -15,4 +15,4 @@ export declare const parameters: {
         };
     };
 };
-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/types/preview/config.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { TemplateResult, SVGTemplateResult } from 'lit-html';
-export type { RenderContext } from '@storybook/core';
+export type { RenderContext } from '@storybook/core-client';
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
 export declare type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 export interface IStorybookStory {