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

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

@@ -1,11 +1,81 @@
-import "core-js/modules/web.dom-collections.for-each.js";
+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.object.to-string.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.from.js";
 import { hasDocgen, extractComponentProps } from '../../lib/docgen';
 import { convert } from '../../lib/convert';
 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];
+}
+
 export var extractArgTypes = function extractArgTypes(component) {
   if (!hasDocgen(component)) {
     return null;
@@ -14,18 +84,31 @@ export var extractArgTypes = function extractArgTypes(component) {
   var results = {};
   SECTIONS.forEach(function (section) {
     var props = 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' ? 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' ? convert(docgenInfo) : {
+          name: 'void'
+        };
+      }
+
       results[name] = {
         name: name,
         description: description,

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

@@ -20,6 +20,9 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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; }
 
+import "regenerator-runtime/runtime.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.array.map.js";
@@ -33,7 +36,6 @@ import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 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";
@@ -42,11 +44,13 @@ import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.function.name.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); }); }; }
+
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
-import prettier from 'prettier/standalone';
-import prettierHtml from 'prettier/parser-html';
 import { SourceType, SNIPPET_RENDERED } from '../../shared';
 export var skipSourceRender = function skipSourceRender(context) {
   var _context$parameters$d;
@@ -87,13 +91,46 @@ export var sourceDecorator = function sourceDecorator(storyFn, context) {
       try {
         var storyNode = lookupStoryInstance(this, storyComponent);
         var code = vnodeToString(storyNode._vnode);
-        channel.emit(SNIPPET_RENDERED, (context || {}).id, prettier.format("<template>".concat(code, "</template>"), {
-          parser: 'vue',
-          plugins: [prettierHtml],
-          // Because the parsed vnode missing spaces right before/after the surround tag,
-          // we always get weird wrapped code without this option.
-          htmlWhitespaceSensitivity: 'ignore'
-        }));
+
+        var emitFormattedTemplate = /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+            var prettier, prettierHtml;
+            return regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return import('prettier/standalone');
+
+                  case 2:
+                    prettier = _context.sent;
+                    _context.next = 5;
+                    return import('prettier/parser-html');
+
+                  case 5:
+                    prettierHtml = _context.sent;
+                    channel.emit(SNIPPET_RENDERED, (context || {}).id, prettier.format("<template>".concat(code, "</template>"), {
+                      parser: 'vue',
+                      plugins: [prettierHtml],
+                      // Because the parsed vnode missing spaces right before/after the surround tag,
+                      // we always get weird wrapped code without this option.
+                      htmlWhitespaceSensitivity: 'ignore'
+                    }));
+
+                  case 7:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function emitFormattedTemplate() {
+            return _ref.apply(this, arguments);
+          };
+        }();
+
+        emitFormattedTemplate();
       } catch (e) {
         logger.warn("Failed to generate dynamic story source: ".concat(e));
       }
@@ -104,17 +141,17 @@ export var sourceDecorator = function sourceDecorator(storyFn, context) {
 export function vnodeToString(vnode) {
   var _vnode$data, _vnode$componentOptio, _vnode$data2;
 
-  var attrString = [].concat(_toConsumableArray((_vnode$data = vnode.data) !== null && _vnode$data !== void 0 && _vnode$data.slot ? [['slot', vnode.data.slot]] : []), [['class', stringifyClassAttribute(vnode)]], _toConsumableArray((_vnode$componentOptio = vnode.componentOptions) !== null && _vnode$componentOptio !== void 0 && _vnode$componentOptio.propsData ? Object.entries(vnode.componentOptions.propsData) : []), _toConsumableArray((_vnode$data2 = vnode.data) !== null && _vnode$data2 !== void 0 && _vnode$data2.attrs ? Object.entries(vnode.data.attrs) : [])).filter(function (_ref, index, list) {
-    var _ref2 = _slicedToArray(_ref, 1),
-        name = _ref2[0];
+  var attrString = [].concat(_toConsumableArray((_vnode$data = vnode.data) !== null && _vnode$data !== void 0 && _vnode$data.slot ? [['slot', vnode.data.slot]] : []), [['class', stringifyClassAttribute(vnode)]], _toConsumableArray((_vnode$componentOptio = vnode.componentOptions) !== null && _vnode$componentOptio !== void 0 && _vnode$componentOptio.propsData ? Object.entries(vnode.componentOptions.propsData) : []), _toConsumableArray((_vnode$data2 = vnode.data) !== null && _vnode$data2 !== void 0 && _vnode$data2.attrs ? Object.entries(vnode.data.attrs) : [])).filter(function (_ref2, index, list) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+        name = _ref3[0];
 
     return list.findIndex(function (item) {
       return item[0] === name;
     }) === index;
-  }).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        name = _ref4[0],
-        value = _ref4[1];
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        name = _ref5[0],
+        value = _ref5[1];
 
     return stringifyAttr(name, value);
   }).filter(Boolean).join(' ');
@@ -181,14 +218,14 @@ function normalizeClassBinding(binding) {
   }
 
   if (_typeof(binding) === 'object') {
-    return Object.entries(binding).filter(function (_ref5) {
-      var _ref6 = _slicedToArray(_ref5, 2),
-          active = _ref6[1];
+    return Object.entries(binding).filter(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+          active = _ref7[1];
 
       return !!active;
-    }).map(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 1),
-          className = _ref8[0];
+    }).map(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 1),
+          className = _ref9[0];
 
       return className;
     });

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

@@ -1,44 +1,80 @@
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.function.name.js";
+import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.array.find.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.assign.js";
 import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
 import { logger } from '@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 (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;

package/dist/modern/blocks/ArgsTable.js

@@ -139,11 +139,9 @@ export const StoryTable = props => {
     const story = useStory(storyId, context); // eslint-disable-next-line prefer-const
 
     let [args, updateArgs, resetArgs] = useArgs(storyId, context);
-
-    if (!story) {
-      return /*#__PURE__*/React.createElement("div", null, "Loading...");
-    }
-
+    if (!story) return /*#__PURE__*/React.createElement(PureArgsTable, {
+      isLoading: true
+    });
     const argTypes = filterArgTypes(story.argTypes, include, exclude);
     const mainLabel = getComponentName(component) || 'Story';
     let tabs = {

package/dist/modern/blocks/Canvas.js

@@ -3,7 +3,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { toId, storyNameFromExport } from '@storybook/csf';
-import { resetComponents, Preview as PurePreview } from '@storybook/components';
+import { resetComponents, Preview as PurePreview, PreviewSkeleton } from '@storybook/components';
 import { DocsContext } from './DocsContext';
 import { SourceContext } from './SourceContainer';
 import { getSourceProps, SourceState } from './Source';
@@ -72,7 +72,8 @@ export const Canvas = props => {
   const {
     children
   } = props;
-  return isLoading ? null : /*#__PURE__*/React.createElement(MDXProvider, {
+  if (isLoading) return /*#__PURE__*/React.createElement(PreviewSkeleton, null);
+  return /*#__PURE__*/React.createElement(MDXProvider, {
     components: resetComponents
   }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
 };

package/dist/modern/blocks/DocsStory.js

@@ -42,6 +42,7 @@ export const DocsStory = ({
   }), /*#__PURE__*/React.createElement(Canvas, {
     withToolbar: withToolbar
   }, /*#__PURE__*/React.createElement(Story, {
-    id: id
+    id: id,
+    parameters: parameters
   })));
 };

package/dist/modern/blocks/Source.js

@@ -50,7 +50,7 @@ const getSnippet = (snippet, story) => {
 
   const userCode = (_parameters$docs2 = parameters.docs) === null || _parameters$docs2 === void 0 ? void 0 : (_parameters$docs2$sou = _parameters$docs2.source) === null || _parameters$docs2$sou === void 0 ? void 0 : _parameters$docs2$sou.code;
 
-  if (userCode) {
+  if (userCode !== undefined) {
     return userCode;
   } // if user has explicitly set this as dynamic, use snippet
 

package/dist/modern/blocks/Story.js

@@ -1,8 +1,10 @@
-import React, { useContext, useRef, useEffect, useMemo } from 'react';
+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';
@@ -24,7 +26,7 @@ export const getStoryId = (props, context) => {
 export const getStoryProps = ({
   height,
   inline
-}, story, context) => {
+}, story, context, onStoryFnCalled) => {
   const {
     name: storyName,
     parameters
@@ -49,9 +51,19 @@ export const getStoryProps = ({
     throw new Error(`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`);
   }
 
-  const boundStoryFn = () => story.unboundStoryFn(Object.assign({}, context.getStoryContext(story), {
-    loaded: {}
-  }));
+  const boundStoryFn = () => {
+    const 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({
     inline: storyIsInline,
@@ -60,7 +72,7 @@ export const getStoryProps = ({
     title: storyName
   }, storyIsInline && {
     parameters,
-    storyFn: () => prepareForInline(boundStoryFn, story)
+    storyFn: () => prepareForInline(boundStoryFn, context.getStoryContext(story))
   });
 };
 
@@ -68,23 +80,15 @@ const Story = props => {
   var _global$FEATURES;
 
   const context = useContext(DocsContext);
-  const ref = useRef();
-  const 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.
-
-  const {
-    id: storyId,
-    registerRenderingStory
-  } = context;
-  const storyRendered = useMemo(registerRenderingStory, [storyId]);
-  useEffect(() => {
-    if (story) storyRendered();
-  }, [story]);
+  const channel = addons.getChannel();
+  const storyRef = useRef();
+  const storyId = getStoryId(props, context);
+  const story = useStory(storyId, context);
+  const [showLoader, setShowLoader] = useState(true);
   useEffect(() => {
     let cleanup;
 
-    if (story && ref.current) {
+    if (story && storyRef.current) {
       const {
         componentId,
         id,
@@ -106,18 +110,22 @@ const Story = props => {
       cleanup = context.renderStoryToElement({
         story,
         renderContext,
-        element: ref.current
+        element: storyRef.current
       });
+      setShowLoader(false);
     }
 
     return () => cleanup && cleanup();
   }, [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.
+
 
-  const storyProps = getStoryProps(props, story, context);
+  const storyProps = getStoryProps(props, story, context, () => channel.emit(Events.STORY_RENDERED, storyId));
 
   if (!storyProps) {
     return null;
@@ -125,7 +133,7 @@ const 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
-    const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`; // FIXME: height/style/etc. lifted from PureStory
+    const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
 
     const {
       height
@@ -134,8 +142,8 @@ const Story = props => {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/React.createElement(MDXProvider, {
       components: resetComponents
-    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
+    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${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/modern/blocks/enhanceSource.js

@@ -1,4 +1,10 @@
-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/modern/blocks/useStory.js

@@ -1,17 +1,28 @@
+import "core-js/modules/es.array.reduce.js";
 import { useState, useEffect } from 'react';
 export function useStory(storyId, context) {
   const stories = useStories([storyId], context);
   return stories && stories[0];
 }
 export function useStories(storyIds, context) {
-  const [storiesById, setStories] = useState({});
+  const initialStoriesById = context.componentStories().reduce((acc, story) => {
+    acc[story.id] = story;
+    return acc;
+  }, {});
+  const [storiesById, setStories] = useState(initialStoriesById);
   useEffect(() => {
     Promise.all(storyIds.map(async storyId => {
+      // loadStory will be called every single time useStory is called
+      // because useEffect does not use storyIds as an input. This is because
+      // HMR can change the story even when the storyId hasn't changed. However, it
+      // will be a no-op once the story has loaded. Furthermore, the `story` will
+      // have an exact equality when the story hasn't changed, so it won't trigger
+      // any unnecessary re-renders
       const story = await context.loadStory(storyId);
-      setStories(current => Object.assign({}, current, {
+      setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
         [storyId]: story
       }));
     }));
-  }, storyIds);
+  });
   return storyIds.map(storyId => storiesById[storyId]);
 }

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

@@ -225,8 +225,10 @@ const extractDefaultValue = property => {
 };
 
 const resolveTypealias = compodocType => {
+  var _compodocJson$miscell, _compodocJson$miscell2;
+
   const compodocJson = getCompodocJson();
-  const typeAlias = compodocJson === null || compodocJson === void 0 ? void 0 : compodocJson.miscellaneous.typealiases.find(x => x.name === compodocType);
+  const 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(x => x.name === compodocType);
   return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType;
 };
 

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

@@ -9,23 +9,28 @@ const limit = pLimit(1);
 
 export const prepareForInline = (storyFn, {
   id,
-  parameters
+  parameters,
+  component
 }) => {
-  return /*#__PURE__*/React.createElement('div', {
-    ref: async node => {
-      if (!node) {
-        return null;
-      }
+  const el = React.useRef();
+  React.useEffect(() => {
+    (async () => {
+      limit(async () => {
+        const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`.toLowerCase(), el.current);
 
-      return limit(async () => {
-        const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`, node);
-        await renderer.render({
-          forced: false,
-          parameters,
-          storyFnAngular: storyFn(),
-          targetDOMNode: node
-        });
+        if (renderer) {
+          await renderer.render({
+            forced: false,
+            component,
+            parameters,
+            storyFnAngular: storyFn(),
+            targetDOMNode: el.current
+          });
+        }
       });
-    }
+    })();
+  });
+  return /*#__PURE__*/React.createElement('div', {
+    ref: el
   });
 };