@storybook/web-components 6.5.9 → 7.0.0-alpha.2

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,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  decorators: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function () {
+    return _config.argTypesEnhancers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function () {
+    return _config.decorators;
+  }
+});
+exports.parameters = void 0;
+
+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 () {
+      return _config2[key];
+    }
+  });
+});
+const parameters = Object.assign({
+  framework: 'web-components'
+}, _config.parameters);
+exports.parameters = parameters;

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

@@ -33,7 +33,8 @@ function isValidMetaData(customElements) {
     return true;
   }
 
-  throw new Error("You need to setup valid meta data in your config.js via setCustomElements().\n    See the readme of addon-docs for web components for more details.");
+  throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`);
 }
 /**
  * @param customElements any for now as spec is not super stable yet

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

@@ -11,16 +11,13 @@ var _customElements = require("./custom-elements");
 
 var _sourceDecorator = require("./sourceDecorator");
 
-var _prepareForInline = require("./prepareForInline");
-
-var decorators = [_sourceDecorator.sourceDecorator];
+const decorators = [_sourceDecorator.sourceDecorator];
 exports.decorators = decorators;
-var parameters = {
+const parameters = {
   docs: {
     extractArgTypes: _customElements.extractArgTypes,
     extractComponentDescription: _customElements.extractComponentDescription,
     inlineStories: true,
-    prepareForInline: _prepareForInline.prepareForInline,
     source: {
       type: _docsTools.SourceType.DYNAMIC,
       language: 'html'
@@ -28,5 +25,5 @@ var parameters = {
   }
 };
 exports.parameters = parameters;
-var argTypesEnhancers = [_docsTools.enhanceArgTypes];
+const argTypesEnhancers = [_docsTools.enhanceArgTypes];
 exports.argTypesEnhancers = argTypesEnhancers;

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

@@ -5,56 +5,14 @@ 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");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.replace.js");
-
-require("core-js/modules/es.array.find.js");
-
-require("core-js/modules/es.object.assign.js");
-
 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;
 
-  var type = category === 'properties' ? {
+  const type = category === 'properties' ? {
     name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
   } : {
     name: 'void'
@@ -63,9 +21,9 @@ function mapItem(item, category) {
     name: item.name,
     required: false,
     description: item.description,
-    type: type,
+    type,
     table: {
-      category: category,
+      category,
       type: {
         summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
       },
@@ -77,14 +35,12 @@ function mapItem(item, category) {
 }
 
 function mapEvent(item) {
-  var name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, function (_match, _separator, chr) {
+  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => {
     return chr ? chr.toUpperCase() : '';
-  }).replace(/^([A-Z])/, function (match) {
-    return match.toLowerCase();
-  });
-  name = "on".concat(name.charAt(0).toUpperCase() + name.substr(1));
+  }).replace(/^([A-Z])/, match => match.toLowerCase());
+  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
   return [{
-    name: name,
+    name,
     action: {
       name: item.name
     },
@@ -94,34 +50,52 @@ function mapEvent(item) {
   }, mapItem(item, 'events')];
 }
 
-var getMetaDataExperimental = function getMetaDataExperimental(tagName, customElements) {
+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 (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
     return null;
   }
 
-  var metaData = customElements.tags.find(function (tag) {
-    return tag.name.toUpperCase() === tagName.toUpperCase();
-  });
+  const metaData = customElements.tags.find(tag => tag.name.toUpperCase() === tagName.toUpperCase());
 
   if (!metaData) {
-    _clientLogger.logger.warn("Component not found in custom-elements.json: ".concat(tagName));
+    _clientLogger.logger.warn(`Component not found in custom-elements.json: ${tagName}`);
   }
 
   return metaData;
 };
 
-var getMetaDataV1 = function getMetaDataV1(tagName, customElements) {
+const getMetaDataV1 = (tagName, customElements) => {
   var _customElements$modul;
 
   if (!(0, _.isValidComponent)(tagName) || !(0, _.isValidMetaData)(customElements)) {
     return null;
   }
 
-  var metadata;
-  customElements === null || customElements === void 0 ? void 0 : (_customElements$modul = customElements.modules) === null || _customElements$modul === void 0 ? void 0 : _customElements$modul.forEach(function (_module) {
+  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(function (declaration) {
+    _module === null || _module === void 0 ? void 0 : (_module$declarations = _module.declarations) === null || _module$declarations === void 0 ? void 0 : _module$declarations.forEach(declaration => {
       if (declaration.tagName === tagName) {
         metadata = declaration;
       }
@@ -129,20 +103,13 @@ var getMetaDataV1 = function getMetaDataV1(tagName, customElements) {
   });
 
   if (!metadata) {
-    _clientLogger.logger.warn("Component not found in custom-elements.json: ".concat(tagName));
+    _clientLogger.logger.warn(`Component not found in custom-elements.json: ${tagName}`);
   }
 
   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) {
+const getMetaData = (tagName, manifest) => {
   if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
     return getMetaDataExperimental(tagName, manifest);
   }
@@ -150,15 +117,22 @@ var getMetaData = function getMetaData(tagName, manifest) {
   return getMetaDataV1(tagName, manifest);
 };
 
-var extractArgTypes = function extractArgTypes(tagName) {
-  var cem = (0, _.getCustomElements)();
+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'));
+};
+
+exports.extractArgTypesFromElements = extractArgTypesFromElements;
+
+const extractArgTypes = tagName => {
+  const cem = (0, _.getCustomElements)();
   return extractArgTypesFromElements(tagName, cem);
 };
 
 exports.extractArgTypes = extractArgTypes;
 
-var extractComponentDescription = function extractComponentDescription(tagName) {
-  var metaData = getMetaData(tagName, (0, _.getCustomElements)());
+const extractComponentDescription = tagName => {
+  const metaData = getMetaData(tagName, (0, _.getCustomElements)());
   return metaData && metaData.description;
 };
 

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

@@ -1,7 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sourceDecorator = sourceDecorator;
+
+var _litHtml = require("lit-html");
+
+var _addons = require("@storybook/addons");
+
+var _docsTools = require("@storybook/docs-tools");
+
+/* 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;
 
@@ -11,37 +23,35 @@ function skipSourceRender(context) {
   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 === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.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 === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.SourceType.CODE;
 }
 
 function applyTransformSource(source, context) {
-  var _context$parameters$d2;
-
   const {
     transformSource
-  } = (_context$parameters$d2 = context.parameters.docs) !== null && _context$parameters$d2 !== void 0 ? _context$parameters$d2 : {};
+  } = context.parameters.docs ?? {};
   if (typeof transformSource !== 'function') return source;
   return transformSource(source, context);
 }
 
-export function sourceDecorator(storyFn, context) {
-  var _context$parameters$d3, _context$parameters$d4;
+function sourceDecorator(storyFn, context) {
+  var _context$parameters$d2, _context$parameters$d3;
 
-  const story = context !== null && context !== void 0 && (_context$parameters$d3 = context.parameters.docs) !== null && _context$parameters$d3 !== void 0 && (_context$parameters$d4 = _context$parameters$d3.source) !== null && _context$parameters$d4 !== void 0 && _context$parameters$d4.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
+  const story = context !== null && context !== void 0 && (_context$parameters$d2 = context.parameters.docs) !== null && _context$parameters$d2 !== void 0 && (_context$parameters$d3 = _context$parameters$d2.source) !== null && _context$parameters$d3 !== void 0 && _context$parameters$d3.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
   let source;
-  useEffect(() => {
-    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+  (0, _addons.useEffect)(() => {
+    if (source) _addons.addons.getChannel().emit(_docsTools.SNIPPET_RENDERED, context.id, source);
   });
 
   if (!skipSourceRender(context)) {
     const container = window.document.createElement('div');
-    render(story, container);
+    (0, _litHtml.render)(story, container);
     source = applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS, ''), context);
   }
 

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

@@ -1,11 +1,5 @@
 "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
 });
@@ -26,79 +20,79 @@ var _exportNames = {
 };
 Object.defineProperty(exports, "addDecorator", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.addDecorator;
   }
 });
 Object.defineProperty(exports, "addParameters", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.addParameters;
   }
 });
 Object.defineProperty(exports, "configure", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.configure;
   }
 });
 Object.defineProperty(exports, "forceReRender", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.forceReRender;
   }
 });
 Object.defineProperty(exports, "getCustomElements", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customElements.getCustomElements;
   }
 });
 Object.defineProperty(exports, "getStorybook", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.getStorybook;
   }
 });
 Object.defineProperty(exports, "isValidComponent", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customElements.isValidComponent;
   }
 });
 Object.defineProperty(exports, "isValidMetaData", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customElements.isValidMetaData;
   }
 });
 Object.defineProperty(exports, "raw", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.raw;
   }
 });
 Object.defineProperty(exports, "setAddon", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.setAddon;
   }
 });
 Object.defineProperty(exports, "setCustomElements", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customElements.setCustomElements;
   }
 });
 Object.defineProperty(exports, "setCustomElementsManifest", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _customElements.setCustomElementsManifest;
   }
 });
 Object.defineProperty(exports, "storiesOf", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _preview.storiesOf;
   }
 });
@@ -117,7 +111,7 @@ Object.keys(_types).forEach(function (key) {
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _types[key];
     }
   });
@@ -125,19 +119,22 @@ Object.keys(_types).forEach(function (key) {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var window = _global.default.window,
-    EventSource = _global.default.EventSource;
+const {
+  window,
+  EventSource
+} = _global.default;
 
 // TODO: disable HMR and do full page loads because of customElements.define
 if (module && module.hot && module.hot.decline) {
   module.hot.decline(); // forcing full reloads for customElements as elements can only be defined once per page
 
-  var hmr = new EventSource('__webpack_hmr');
+  const hmr = new EventSource('__webpack_hmr');
   hmr.addEventListener('message', function fullPageReload(event) {
     try {
       // Only care for built events.  Heartbeats are not parsable so we ignore those
-      var _JSON$parse = JSON.parse(event.data),
-          action = _JSON$parse.action;
+      const {
+        action
+      } = JSON.parse(event.data);
 
       if (action === 'built') {
         window.location.reload();

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

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

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

@@ -4,5 +4,7 @@ var _global = _interopRequireDefault(require("global"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var globalWindow = _global.default.window;
+const {
+  window: globalWindow
+} = _global.default;
 globalWindow.STORYBOOK_ENV = 'web-components';

package/dist/cjs/preview/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.storiesOf = exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
+
+var _coreClient = require("@storybook/core-client");
+
+require("./globals");
+
+var _render = require("./render");
+
+/* eslint-disable prefer-destructuring */
+const framework = 'web-components';
+const api = (0, _coreClient.start)(_render.renderToDOM);
+
+const storiesOf = (kind, m) => {
+  return api.clientApi.storiesOf(kind, m).addParameters({
+    framework
+  });
+};
+
+exports.storiesOf = storiesOf;
+
+const configure = (...args) => api.configure(framework, ...args);
+
+exports.configure = configure;
+const addDecorator = api.clientApi.addDecorator;
+exports.addDecorator = addDecorator;
+const addParameters = api.clientApi.addParameters;
+exports.addParameters = addParameters;
+const clearDecorators = api.clientApi.clearDecorators;
+exports.clearDecorators = clearDecorators;
+const setAddon = api.clientApi.setAddon;
+exports.setAddon = setAddon;
+const forceReRender = api.forceReRender;
+exports.forceReRender = forceReRender;
+const getStorybook = api.clientApi.getStorybook;
+exports.getStorybook = getStorybook;
+const raw = api.clientApi.raw;
+exports.raw = raw;