@storybook/addon-docs 6.4.0-beta.3 → 6.4.0-beta.33

package/dist/esm/blocks/Story.js

@@ -1,11 +1,34 @@
+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; }
+
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.array.concat.js";
-import React, { useContext, useRef, useEffect, useMemo } from 'react';
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { resetComponents, Story as PureStory } from '@storybook/components';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import global from 'global';
+import { resetComponents, Story as PureStory, StorySkeleton } from '@storybook/components';
+import { toId, storyNameFromExport } from '@storybook/csf';
+import { addons } from '@storybook/addons';
+import Events from '@storybook/core-events';
 import { CURRENT_SELECTION } from './types';
 import { DocsContext } from './DocsContext';
 import { useStory } from './useStory';
@@ -25,7 +48,7 @@ export var getStoryId = function getStoryId(props, context) {
   var inputId = id === CURRENT_SELECTION ? context.id : id;
   return inputId || lookupStoryId(name, context);
 };
-export var getStoryProps = function getStoryProps(_ref4, story, context) {
+export var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalled) {
   var height = _ref4.height,
       inline = _ref4.inline;
   var storyName = story.name,
@@ -50,9 +73,17 @@ export 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({
@@ -63,7 +94,7 @@ export var getStoryProps = function getStoryProps(_ref4, story, context) {
   }, storyIsInline && {
     parameters: parameters,
     storyFn: function storyFn() {
-      return prepareForInline(boundStoryFn, story);
+      return prepareForInline(boundStoryFn, context.getStoryContext(story));
     }
   });
 };
@@ -72,21 +103,20 @@ var Story = function Story(props) {
   var _global$FEATURES;
 
   var context = useContext(DocsContext);
-  var ref = useRef();
-  var story = 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 = useMemo(registerRenderingStory, [storyId]);
-  useEffect(function () {
-    if (story) storyRendered();
-  }, [story]);
+  var channel = addons.getChannel();
+  var storyRef = useRef();
+  var storyId = getStoryId(props, context);
+  var story = useStory(storyId, context);
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      showLoader = _useState2[0],
+      setShowLoader = _useState2[1];
+
   useEffect(function () {
     var cleanup;
 
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       var componentId = story.componentId,
           id = story.id,
           title = story.title,
@@ -106,8 +136,9 @@ var Story = function Story(props) {
       cleanup = context.renderStoryToElement({
         story: story,
         renderContext: renderContext,
-        element: ref.current
+        element: storyRef.current
       });
+      setShowLoader(false);
     }
 
     return function () {
@@ -116,10 +147,15 @@ var Story = function Story(props) {
   }, [story]);
 
   if (!story) {
-    return /*#__PURE__*/React.createElement("div", null, "Loading...");
-  }
+    return /*#__PURE__*/React.createElement(StorySkeleton, null);
+  } // 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(Events.STORY_RENDERED, storyId);
+  });
 
   if (!storyProps) {
     return null;
@@ -127,15 +163,15 @@ var Story = function Story(props) {
 
   if (global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender) {
     // We do this so React doesn't complain when we replace the span in a secondary render
-    var htmlContents = "<span data-is-loading-indicator=\"true\">loading story...</span>"; // FIXME: height/style/etc. lifted from PureStory
+    var htmlContents = "<span></span>"; // FIXME: height/style/etc. lifted from PureStory
 
     var height = storyProps.height;
     return /*#__PURE__*/React.createElement("div", {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/React.createElement(MDXProvider, {
       components: resetComponents
-    }, height ? /*#__PURE__*/React.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+    }, height ? /*#__PURE__*/React.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
+      ref: storyRef,
       "data-name": story.name,
       dangerouslySetInnerHTML: {
         __html: htmlContents

package/dist/esm/blocks/enhanceSource.js

@@ -25,7 +25,13 @@ import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.function.name.js";
-import { combineParameters } from '@storybook/client-api';
+import { combineParameters } from '@storybook/store'; // ============================================================
+// START @storybook/source-loader/extract-source
+//
+// This code duplicated because tree-shaking isn't working.
+// It's not DRY, but source-loader is on the chopping block for
+// the next version of addon-docs, so it's not the worst sin.
+// ============================================================
 
 /**
  * given a location, extract the text from the full source

package/dist/esm/blocks/useStory.js

@@ -38,7 +38,12 @@ export function useStory(storyId, context) {
   return stories && stories[0];
 }
 export function useStories(storyIds, context) {
-  var _useState = useState({}),
+  var initialStoriesById = context.componentStories().reduce(function (acc, story) {
+    acc[story.id] = story;
+    return acc;
+  }, {});
+
+  var _useState = useState(initialStoriesById),
       _useState2 = _slicedToArray(_useState, 2),
       storiesById = _useState2[0],
       setStories = _useState2[1];
@@ -57,7 +62,7 @@ export 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:
@@ -72,7 +77,7 @@ export function useStories(storyIds, context) {
         return _ref.apply(this, arguments);
       };
     }()));
-  }, storyIds);
+  });
   return storyIds.map(function (storyId) {
     return storiesById[storyId];
   });

package/dist/esm/frameworks/angular/compodoc.js

@@ -274,8 +274,10 @@ var extractDefaultValue = function extractDefaultValue(property) {
 };
 
 var resolveTypealias = function resolveTypealias(compodocType) {
+  var _compodocJson$miscell, _compodocJson$miscell2;
+
   var compodocJson = getCompodocJson();
-  var typeAlias = compodocJson === null || compodocJson === void 0 ? void 0 : compodocJson.miscellaneous.typealiases.find(function (x) {
+  var typeAlias = compodocJson === null || compodocJson === void 0 ? void 0 : (_compodocJson$miscell = compodocJson.miscellaneous) === null || _compodocJson$miscell === void 0 ? void 0 : (_compodocJson$miscell2 = _compodocJson$miscell.typealiases) === null || _compodocJson$miscell2 === void 0 ? void 0 : _compodocJson$miscell2.find(function (x) {
     return x.name === compodocType;
   });
   return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType;

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

@@ -18,62 +18,58 @@ var limit = pLimit(1);
 
 export var prepareForInline = function prepareForInline(storyFn, _ref) {
   var id = _ref.id,
-      parameters = _ref.parameters;
-  return /*#__PURE__*/React.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;
-                }
+      parameters = _ref.parameters,
+      component = _ref.component;
+  var el = React.useRef();
+  React.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 rendererFactory.getRendererInstance("".concat(id, "-").concat(nanoid(10)).toLowerCase(), el.current);
 
-                return _context2.abrupt("return", null);
+                      case 2:
+                        renderer = _context.sent;
 
-              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 rendererFactory.getRendererInstance("".concat(id, "-").concat(nanoid(10)), node);
+                        if (!renderer) {
+                          _context.next = 6;
+                          break;
+                        }
 
-                        case 2:
-                          renderer = _context.sent;
-                          _context.next = 5;
-                          return renderer.render({
-                            forced: false,
-                            parameters: parameters,
-                            storyFnAngular: storyFn(),
-                            targetDOMNode: node
-                          });
+                        _context.next = 6;
+                        return renderer.render({
+                          forced: false,
+                          component: component,
+                          parameters: parameters,
+                          storyFnAngular: storyFn(),
+                          targetDOMNode: el.current
+                        });
 
-                        case 5:
-                        case "end":
-                          return _context.stop();
-                      }
+                      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);
-      }
-
-      return ref;
-    }()
+        }
+      }, _callee2);
+    }))();
+  });
+  return /*#__PURE__*/React.createElement('div', {
+    ref: el
   });
 };

package/dist/esm/frameworks/angular/sourceDecorator.js

@@ -1,7 +1,13 @@
+import "regenerator-runtime/runtime.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+
+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); }); }; }
+
 import { addons, useEffect } from '@storybook/addons';
 import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
-import prettierHtml from 'prettier/parser-html';
-import prettier from 'prettier/standalone';
 import { SNIPPET_RENDERED, SourceType } from '../../shared';
 export var skipSourceRender = function skipSourceRender(context) {
   var _context$parameters$d;
@@ -16,16 +22,58 @@ export var skipSourceRender = function skipSourceRender(context) {
 
   return (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
 };
+var prettyUpInternal;
 
-var prettyUp = function prettyUp(source) {
-  return prettier.format(source, {
-    parser: 'angular',
-    plugins: [prettierHtml],
-    htmlWhitespaceSensitivity: 'ignore'
-  });
-};
+var makePrettyUp = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var prettierHtml, prettier;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!prettyUpInternal) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return", prettyUpInternal);
+
+          case 2:
+            _context.next = 4;
+            return import('prettier/parser-html');
+
+          case 4:
+            prettierHtml = _context.sent;
+            _context.next = 7;
+            return import('prettier/standalone');
+
+          case 7:
+            prettier = _context.sent;
+
+            prettyUpInternal = function prettyUpInternal(source) {
+              return prettier.format(source, {
+                parser: 'angular',
+                plugins: [prettierHtml],
+                htmlWhitespaceSensitivity: 'ignore'
+              });
+            };
+
+            return _context.abrupt("return", prettyUpInternal);
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function makePrettyUp() {
+    return _ref.apply(this, arguments);
+  };
+}();
 /**
- * Svelte source decorator.
+ * Angular source decorator.
  * @param storyFn Fn
  * @param context  StoryContext
  */
@@ -45,20 +93,24 @@ export var sourceDecorator = function sourceDecorator(storyFn, context) {
   var component = context.component,
       argTypes = context.argTypes;
   var toEmit;
+  var prettyUpPromise = makePrettyUp();
   useEffect(function () {
-    if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
+    prettyUpPromise.then(function (prettyUp) {
+      if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(toEmit));
+    });
   });
+  prettyUpPromise.then(function (prettyUp) {
+    if (component && !userDefinedTemplate) {
+      var _source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component
+      // In these cases there might exist a template, even if we aren't able to create source from component
 
-  if (component && !userDefinedTemplate) {
-    var source = computesTemplateSourceFromComponent(component, props, argTypes); // We might have a story with a Directive or Service defined as the component
-    // In these cases there might exist a template, even if we aren't able to create source from component
 
-    if (source || template) {
-      toEmit = prettyUp(source || template);
+      if (_source || template) {
+        toEmit = prettyUp(_source || template);
+      }
+    } else if (template) {
+      toEmit = prettyUp(template);
     }
-  } else if (template) {
-    toEmit = prettyUp(template);
-  }
-
+  });
   return story;
 };

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

@@ -1,10 +1,67 @@
-import { DocsContainer, DocsPage } from '../../blocks';
+import "regenerator-runtime/runtime.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+
+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); }); }; }
+
 import { enhanceArgTypes } from './enhanceArgTypes';
 export var parameters = {
   docs: {
     inlineStories: false,
-    container: DocsContainer,
-    page: 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 import('../../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 import('../../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/esm/frameworks/html/sourceDecorator.js

@@ -38,8 +38,15 @@ export function sourceDecorator(storyFn, context) {
   var 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();
   var source;
 
-  if (typeof story === 'string' && !skipSourceRender(context)) {
-    source = applyTransformSource(story, context);
+  if (!skipSourceRender(context)) {
+    if (typeof story === 'string') {
+      source = story;
+    } // eslint-disable-next-line no-undef
+    else if (story instanceof Element) {
+        source = story.outerHTML;
+      }
+
+    if (source) source = applyTransformSource(source, context);
   }
 
   useEffect(function () {

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

@@ -28,7 +28,7 @@ import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues';
 import { storiesOf } from '@storybook/react';
 import { ArgsTable } from '@storybook/components';
-import { inferControls } from '@storybook/client-api';
+import { inferControls } from '@storybook/store';
 import { extractArgTypes } from './extractArgTypes';
 
 var argsTableProps = function argsTableProps(component) {