@storybook/addon-docs 6.4.0-beta.2 → 6.4.0-beta.20

package/dist/cjs/blocks/Story.js

@@ -35,11 +35,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@mdx-js/react");
 
+var _global = _interopRequireDefault(require("global"));
+
 var _components = require("@storybook/components");
 
 var _csf = require("@storybook/csf");
 
-var _global = _interopRequireDefault(require("global"));
+var _addons = require("@storybook/addons");
+
+var _coreEvents = _interopRequireDefault(require("@storybook/core-events"));
 
 var _types = require("./types");
 
@@ -78,7 +82,7 @@ var getStoryId = function getStoryId(props, context) {
 
 exports.getStoryId = getStoryId;
 
-var getStoryProps = function getStoryProps(_ref4, story, context) {
+var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalled) {
   var height = _ref4.height,
       inline = _ref4.inline;
   var storyName = story.name,
@@ -103,9 +107,17 @@ var getStoryProps = function getStoryProps(_ref4, story, context) {
   }
 
   var boundStoryFn = function boundStoryFn() {
-    return story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
-      loaded: {}
-    }));
+    var storyResult = story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
+      loaded: {},
+      abortSignal: undefined,
+      canvasElement: undefined
+    })); // We need to wait until the bound story function has actually been called before we
+    // consider the story rendered. Certain frameworks (i.e. angular) don't actually render
+    // the component in the very first react render cycle, and so we can't just wait until the
+    // `PureStory` component has been rendered to consider the underlying story "rendered".
+
+    onStoryFnCalled();
+    return storyResult;
   };
 
   return Object.assign({
@@ -116,7 +128,7 @@ var getStoryProps = function getStoryProps(_ref4, story, context) {
   }, storyIsInline && {
     parameters: parameters,
     storyFn: function storyFn() {
-      return prepareForInline(boundStoryFn, story);
+      return prepareForInline(boundStoryFn, context.getStoryContext(story));
     }
   });
 };
@@ -127,17 +139,12 @@ var Story = function Story(props) {
   var _global$FEATURES;
 
   var context = (0, _react.useContext)(_DocsContext.DocsContext);
-  var ref = (0, _react.useRef)();
-  var story = (0, _useStory.useStory)(getStoryId(props, context), context); // Ensure we wait until this story is properly rendered in the docs context.
-  // The purpose of this is to ensure that that the `DOCS_RENDERED` event isn't emitted
-  // until all stories on the page have rendered.
 
-  var storyId = context.id,
-      registerRenderingStory = context.registerRenderingStory;
-  var storyRendered = (0, _react.useMemo)(registerRenderingStory, [storyId]);
-  (0, _react.useEffect)(function () {
-    if (story) storyRendered();
-  }, [story]);
+  var channel = _addons.addons.getChannel();
+
+  var ref = (0, _react.useRef)();
+  var storyId = getStoryId(props, context);
+  var story = (0, _useStory.useStory)(storyId, context);
   (0, _react.useEffect)(function () {
     var cleanup;
 
@@ -172,9 +179,14 @@ var Story = function Story(props) {
 
   if (!story) {
     return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
-  }
+  } // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
+  // the `STORY_RENDERED` event when it renders. The modern mode below calls out to
+  // `Preview.renderStoryToDom()` which itself emits the event.
+
 
-  var storyProps = getStoryProps(props, story, context);
+  var storyProps = getStoryProps(props, story, context, function () {
+    return channel.emit(_coreEvents.default.STORY_RENDERED, storyId);
+  });
 
   if (!storyProps) {
     return null;

package/dist/cjs/blocks/enhanceSource.js

@@ -35,7 +35,7 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.split.js");
 
-var _clientApi = require("@storybook/client-api");
+var _store = require("@storybook/store");
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -118,7 +118,7 @@ var enhanceSource = function enhanceSource(story) {
   var input = extract(id, storySource);
   var code = transformSource ? transformSource(input, story) : input;
   return {
-    docs: (0, _clientApi.combineParameters)(docs, {
+    docs: (0, _store.combineParameters)(docs, {
       source: {
         code: code
       }

package/dist/cjs/blocks/useStory.js

@@ -79,7 +79,7 @@ function useStories(storyIds, context) {
               case 2:
                 story = _context.sent;
                 setStories(function (current) {
-                  return Object.assign({}, current, _defineProperty({}, storyId, story));
+                  return current[storyId] === story ? current : Object.assign({}, current, _defineProperty({}, storyId, story));
                 });
 
               case 4:
@@ -94,7 +94,7 @@ function useStories(storyIds, context) {
         return _ref.apply(this, arguments);
       };
     }()));
-  }, storyIds);
+  });
   return storyIds.map(function (storyId) {
     return storiesById[storyId];
   });

package/dist/cjs/frameworks/angular/prepareForInline.js

@@ -34,63 +34,62 @@ var limit = (0, _pLimit.default)(1);
 
 var prepareForInline = function prepareForInline(storyFn, _ref) {
   var id = _ref.id,
-      parameters = _ref.parameters;
-  return /*#__PURE__*/_react.default.createElement('div', {
-    ref: function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(node) {
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                if (node) {
-                  _context2.next = 2;
-                  break;
-                }
-
-                return _context2.abrupt("return", null);
-
-              case 2:
-                return _context2.abrupt("return", limit( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-                  var renderer;
-                  return regeneratorRuntime.wrap(function _callee$(_context) {
-                    while (1) {
-                      switch (_context.prev = _context.next) {
-                        case 0:
-                          _context.next = 2;
-                          return _renderer.rendererFactory.getRendererInstance("".concat(id, "-").concat((0, _nanoid.nanoid)(10)), node);
-
-                        case 2:
-                          renderer = _context.sent;
-                          _context.next = 5;
-                          return renderer.render({
-                            forced: false,
-                            parameters: parameters,
-                            storyFnAngular: storyFn(),
-                            targetDOMNode: node
-                          });
-
-                        case 5:
-                        case "end":
-                          return _context.stop();
-                      }
+      parameters = _ref.parameters,
+      component = _ref.component;
+
+  var el = _react.default.useRef();
+
+  _react.default.useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              limit( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+                var renderer;
+                return regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return _renderer.rendererFactory.getRendererInstance("".concat(id, "-").concat((0, _nanoid.nanoid)(10)).toLowerCase(), el.current);
+
+                      case 2:
+                        renderer = _context.sent;
+
+                        if (!renderer) {
+                          _context.next = 6;
+                          break;
+                        }
+
+                        _context.next = 6;
+                        return renderer.render({
+                          forced: false,
+                          component: component,
+                          parameters: parameters,
+                          storyFnAngular: storyFn(),
+                          targetDOMNode: el.current
+                        });
+
+                      case 6:
+                      case "end":
+                        return _context.stop();
                     }
-                  }, _callee);
-                }))));
+                  }
+                }, _callee);
+              })));
 
-              case 3:
-              case "end":
-                return _context2.stop();
-            }
+            case 1:
+            case "end":
+              return _context2.stop();
           }
-        }, _callee2);
-      }));
-
-      function ref(_x) {
-        return _ref2.apply(this, arguments);
-      }
+        }
+      }, _callee2);
+    }))();
+  });
 
-      return ref;
-    }()
+  return /*#__PURE__*/_react.default.createElement('div', {
+    ref: el
   });
 };
 

package/dist/cjs/frameworks/common/config.js

@@ -1,19 +1,103 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.argTypesEnhancers = exports.parameters = void 0;
 
-var _blocks = require("../../blocks");
+require("regenerator-runtime/runtime.js");
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.object.to-string.js");
 
 var _enhanceArgTypes = require("./enhanceArgTypes");
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 var parameters = {
   docs: {
     inlineStories: false,
-    container: _blocks.DocsContainer,
-    page: _blocks.DocsPage,
+    getContainer: function () {
+      var _getContainer = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return Promise.resolve().then(function () {
+                  return _interopRequireWildcard(require('../../blocks'));
+                });
+
+              case 2:
+                return _context.abrupt("return", _context.sent.DocsContainer);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function getContainer() {
+        return _getContainer.apply(this, arguments);
+      }
+
+      return getContainer;
+    }(),
+    getPage: function () {
+      var _getPage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return Promise.resolve().then(function () {
+                  return _interopRequireWildcard(require('../../blocks'));
+                });
+
+              case 2:
+                return _context2.abrupt("return", _context2.sent.DocsPage);
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      function getPage() {
+        return _getPage.apply(this, arguments);
+      }
+
+      return getPage;
+    }(),
     iframeHeight: 100
   }
 };

package/dist/cjs/frameworks/react/react-argtypes.stories.js

@@ -40,7 +40,7 @@ var _react2 = require("@storybook/react");
 
 var _components = require("@storybook/components");
 
-var _clientApi = require("@storybook/client-api");
+var _store = require("@storybook/store");
 
 var _extractArgTypes = require("./extractArgTypes");
 
@@ -67,7 +67,7 @@ var argsTableProps = function argsTableProps(component) {
   var parameters = {
     __isArgsStory: true
   };
-  var rows = (0, _clientApi.inferControls)({
+  var rows = (0, _store.inferControls)({
     argTypes: argTypes,
     parameters: parameters
   });

package/dist/cjs/frameworks/vue/extractArgTypes.js

@@ -1,25 +1,103 @@
 "use strict";
 
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.from.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractArgTypes = void 0;
 
-require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
 
 require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.join.js");
 
-require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.assign.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");
+
 var _docgen = require("../../lib/docgen");
 
 var _convert = require("../../lib/convert");
 
+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; }
+
 var SECTIONS = ['props', 'events', 'slots'];
+/**
+ * Check if "@values" tag is defined within docgenInfo.
+ * If true, then propDef is mutated.
+ */
+
+function isEnum(propDef, docgenInfo) {
+  // cast as any, since "values" doesn't exist in DocgenInfo type
+  var _ref = docgenInfo,
+      type = _ref.type,
+      values = _ref.values;
+  var matched = Array.isArray(values) && values.length && type.name !== 'enum';
+  if (!matched) return false;
+  var enumString = values.join(', ');
+  var summary = propDef.type.summary;
+  summary = summary ? "".concat(summary, ": ").concat(enumString) : enumString;
+  Object.assign(propDef.type, Object.assign({}, propDef.type, {
+    name: 'enum',
+    value: values,
+    summary: summary
+  }));
+  return propDef;
+}
+/**
+ * @returns {Array} result
+ * @returns {PropDef} result.def - propDef
+ * @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
+ *  this is needed to prevent sbType from performing convert(docgenInfo).
+ */
+
+
+function verifyPropDef(propDef, docgenInfo) {
+  var def = propDef;
+  var isChanged = false; // another callback can be added here.
+  // callback is mutually exclusive from each other.
+
+  var callbacks = [isEnum];
+
+  for (var i = 0, len = callbacks.length; i < len; i += 1) {
+    var matched = callbacks[i](propDef, docgenInfo);
+
+    if (matched) {
+      def = matched;
+      isChanged = true;
+    }
+  }
+
+  return [def, isChanged];
+}
 
 var extractArgTypes = function extractArgTypes(component) {
   if (!(0, _docgen.hasDocgen)(component)) {
@@ -29,18 +107,31 @@ var extractArgTypes = function extractArgTypes(component) {
   var results = {};
   SECTIONS.forEach(function (section) {
     var props = (0, _docgen.extractComponentProps)(component, section);
-    props.forEach(function (_ref) {
-      var propDef = _ref.propDef,
-          docgenInfo = _ref.docgenInfo,
-          jsDocTags = _ref.jsDocTags;
-      var name = propDef.name,
-          type = propDef.type,
-          description = propDef.description,
-          defaultSummary = propDef.defaultValue,
-          required = propDef.required;
-      var sbType = section === 'props' ? (0, _convert.convert)(docgenInfo) : {
-        name: 'void'
-      };
+    props.forEach(function (_ref2) {
+      var propDef = _ref2.propDef,
+          docgenInfo = _ref2.docgenInfo,
+          jsDocTags = _ref2.jsDocTags;
+
+      var _verifyPropDef = verifyPropDef(propDef, docgenInfo),
+          _verifyPropDef2 = _slicedToArray(_verifyPropDef, 2),
+          result = _verifyPropDef2[0],
+          isPropDefChanged = _verifyPropDef2[1];
+
+      var name = result.name,
+          type = result.type,
+          description = result.description,
+          defaultSummary = result.defaultValue,
+          required = result.required;
+      var sbType;
+
+      if (isPropDefChanged) {
+        sbType = type;
+      } else {
+        sbType = section === 'props' ? (0, _convert.convert)(docgenInfo) : {
+          name: 'void'
+        };
+      }
+
       results[name] = {
         name: name,
         description: description,

package/dist/cjs/frameworks/web-components/custom-elements.js

@@ -9,13 +9,17 @@ 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.array.find.js");
+require("core-js/modules/es.string.replace.js");
 
-require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.array.find.js");
 
 require("core-js/modules/es.object.assign.js");
 
@@ -25,35 +29,69 @@ var _clientLogger = require("@storybook/client-logger");
 
 function mapData(data, category) {
   return data && data.filter(function (item) {
-    return !!item;
+    return item && item.name;
   }).reduce(function (acc, item) {
-    var _item$type, _item$type2;
-
     if (item.kind === 'method') return acc;
-    var type = category === 'properties' ? {
-      name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
-    } : {
-      name: 'void'
-    };
-    acc[item.name] = {
-      name: item.name,
-      required: false,
-      description: item.description,
-      type: type,
-      table: {
-        category: category,
-        type: {
-          summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
-        },
-        defaultValue: {
-          summary: item.default !== undefined ? item.default : item.defaultValue
-        }
-      }
-    };
+
+    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' ? {
+    name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
+  } : {
+    name: 'void'
+  };
+  return {
+    name: item.name,
+    required: false,
+    description: item.description,
+    type: type,
+    table: {
+      category: category,
+      type: {
+        summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
+      },
+      defaultValue: {
+        summary: item.default !== undefined ? item.default : item.defaultValue
+      }
+    }
+  };
+}
+
+function mapEvent(item) {
+  var name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, function (_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));
+  return [{
+    name: name,
+    action: {
+      name: item.name
+    },
+    table: {
+      disable: true
+    }
+  }, mapItem(item, 'events')];
+}
+
 var getMetaDataExperimental = function getMetaDataExperimental(tagName, customElements) {
   if (!(0, _webComponents.isValidComponent)(tagName) || !(0, _webComponents.isValidMetaData)(customElements)) {
     return null;