@storybook/addon-docs 6.4.0-rc.9 → 6.4.3

package/dist/cjs/blocks/Story.js

@@ -6,16 +6,8 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.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.array.slice.js");
 
 require("core-js/modules/es.array.from.js");
@@ -33,6 +25,16 @@ require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.object.assign.js");
 
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/es.object.to-string.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.array.concat.js");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -151,9 +153,15 @@ var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalle
 
 exports.getStoryProps = getStoryProps;
 
-var Story = function Story(props) {
-  var _global$FEATURES;
+function makeGate() {
+  var open;
+  var gate = new Promise(function (r) {
+    open = r;
+  });
+  return [gate, open];
+}
 
+var Story = function Story(props) {
   var context = (0, _react.useContext)(_DocsContext.DocsContext);
 
   var channel = _addons.addons.getChannel();
@@ -200,37 +208,62 @@ var Story = function Story(props) {
     };
   }, [story]);
 
+  var _makeGate = makeGate(),
+      _makeGate2 = _slicedToArray(_makeGate, 2),
+      storyFnRan = _makeGate2[0],
+      onStoryFnRan = _makeGate2[1];
+
+  var _makeGate3 = makeGate(),
+      _makeGate4 = _slicedToArray(_makeGate3, 2),
+      rendered = _makeGate4[0],
+      onRendered = _makeGate4[1];
+
+  (0, _react.useEffect)(onRendered);
+
   if (!story) {
     return /*#__PURE__*/_react.default.createElement(_components.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, function () {
-    return channel.emit(_coreEvents.default.STORY_RENDERED, storyId);
-  });
+  var storyProps = getStoryProps(props, story, context, onStoryFnRan);
 
   if (!storyProps) {
     return null;
   }
 
-  if (_global.default !== null && _global.default !== void 0 && (_global$FEATURES = _global.default.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></span>"; // FIXME: height/style/etc. lifted from PureStory
-
-    var height = storyProps.height;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      id: storyBlockIdFromId(story.id)
-    }, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
-      components: _components.resetComponents
-    }, height ? /*#__PURE__*/_react.default.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
-      ref: storyRef,
-      "data-name": story.name,
-      dangerouslySetInnerHTML: {
-        __html: htmlContents
-      }
-    })));
+  if (storyProps.inline) {
+    var _global$FEATURES;
+
+    // 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.
+    if (!(_global.default !== null && _global.default !== void 0 && (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender)) {
+      // We need to wait for two things before we can consider the story rendered:
+      //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
+      //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
+      //      call to the story function.
+      //  (b) The story function needs to actually have been called.
+      //      Certain frameworks (i.e.angular) don't actually render the component in the very first
+      //      React render cycle, so we need to wait for the framework to actually do that
+      Promise.all([storyFnRan, rendered]).then(function () {
+        channel.emit(_coreEvents.default.STORY_RENDERED, storyId);
+      });
+    } else {
+      // We do this so React doesn't complain when we replace the span in a secondary render
+      var htmlContents = "<span></span>"; // FIXME: height/style/etc. lifted from PureStory
+
+      var height = storyProps.height;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: storyBlockIdFromId(story.id)
+      }, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
+        components: _components.resetComponents
+      }, height ? /*#__PURE__*/_react.default.createElement("style", null, "#story--".concat(story.id, " { min-height: ").concat(height, "; transform: translateZ(0); overflow: auto }")) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
+        ref: storyRef,
+        "data-name": story.name,
+        dangerouslySetInnerHTML: {
+          __html: htmlContents
+        }
+      })));
+    }
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/esm/blocks/Story.js

@@ -12,14 +12,15 @@ 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 "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.promise.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.concat.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.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';
@@ -99,9 +100,15 @@ export var getStoryProps = function getStoryProps(_ref4, story, context, onStory
   });
 };
 
-var Story = function Story(props) {
-  var _global$FEATURES;
+function makeGate() {
+  var open;
+  var gate = new Promise(function (r) {
+    open = r;
+  });
+  return [gate, open];
+}
 
+var Story = function Story(props) {
   var context = useContext(DocsContext);
   var channel = addons.getChannel();
   var storyRef = useRef();
@@ -146,37 +153,62 @@ var Story = function Story(props) {
     };
   }, [story]);
 
+  var _makeGate = makeGate(),
+      _makeGate2 = _slicedToArray(_makeGate, 2),
+      storyFnRan = _makeGate2[0],
+      onStoryFnRan = _makeGate2[1];
+
+  var _makeGate3 = makeGate(),
+      _makeGate4 = _slicedToArray(_makeGate3, 2),
+      rendered = _makeGate4[0],
+      onRendered = _makeGate4[1];
+
+  useEffect(onRendered);
+
   if (!story) {
     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, function () {
-    return channel.emit(Events.STORY_RENDERED, storyId);
-  });
+  var storyProps = getStoryProps(props, story, context, onStoryFnRan);
 
   if (!storyProps) {
     return null;
   }
 
-  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></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, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
-      ref: storyRef,
-      "data-name": story.name,
-      dangerouslySetInnerHTML: {
-        __html: htmlContents
-      }
-    })));
+  if (storyProps.inline) {
+    var _global$FEATURES;
+
+    // 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.
+    if (!(global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender)) {
+      // We need to wait for two things before we can consider the story rendered:
+      //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
+      //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
+      //      call to the story function.
+      //  (b) The story function needs to actually have been called.
+      //      Certain frameworks (i.e.angular) don't actually render the component in the very first
+      //      React render cycle, so we need to wait for the framework to actually do that
+      Promise.all([storyFnRan, rendered]).then(function () {
+        channel.emit(Events.STORY_RENDERED, storyId);
+      });
+    } else {
+      // We do this so React doesn't complain when we replace the span in a secondary render
+      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, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
+        ref: storyRef,
+        "data-name": story.name,
+        dangerouslySetInnerHTML: {
+          __html: htmlContents
+        }
+      })));
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {

package/dist/modern/blocks/Story.js

@@ -76,9 +76,15 @@ export const getStoryProps = ({
   });
 };
 
-const Story = props => {
-  var _global$FEATURES;
+function makeGate() {
+  let open;
+  const gate = new Promise(r => {
+    open = r;
+  });
+  return [gate, open];
+}
 
+const Story = props => {
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
   const storyRef = useRef();
@@ -117,38 +123,56 @@ const Story = props => {
 
     return () => cleanup && cleanup();
   }, [story]);
+  const [storyFnRan, onStoryFnRan] = makeGate();
+  const [rendered, onRendered] = makeGate();
+  useEffect(onRendered);
 
   if (!story) {
     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, () => channel.emit(Events.STORY_RENDERED, storyId));
+  const storyProps = getStoryProps(props, story, context, onStoryFnRan);
 
   if (!storyProps) {
     return null;
   }
 
-  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></span>`; // FIXME: height/style/etc. lifted from PureStory
-
-    const {
-      height
-    } = storyProps;
-    return /*#__PURE__*/React.createElement("div", {
-      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, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
-      ref: storyRef,
-      "data-name": story.name,
-      dangerouslySetInnerHTML: {
-        __html: htmlContents
-      }
-    })));
+  if (storyProps.inline) {
+    var _global$FEATURES;
+
+    // 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.
+    if (!(global !== null && global !== void 0 && (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.modernInlineRender)) {
+      // We need to wait for two things before we can consider the story rendered:
+      //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
+      //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
+      //      call to the story function.
+      //  (b) The story function needs to actually have been called.
+      //      Certain frameworks (i.e.angular) don't actually render the component in the very first
+      //      React render cycle, so we need to wait for the framework to actually do that
+      Promise.all([storyFnRan, rendered]).then(() => {
+        channel.emit(Events.STORY_RENDERED, storyId);
+      });
+    } else {
+      // We do this so React doesn't complain when we replace the span in a secondary render
+      const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
+
+      const {
+        height
+      } = storyProps;
+      return /*#__PURE__*/React.createElement("div", {
+        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, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
+        ref: storyRef,
+        "data-name": story.name,
+        dangerouslySetInnerHTML: {
+          __html: htmlContents
+        }
+      })));
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-rc.9",
+  "version": "6.4.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -63,21 +63,21 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.4.0-rc.9",
-    "@storybook/api": "6.4.0-rc.9",
-    "@storybook/builder-webpack4": "6.4.0-rc.9",
-    "@storybook/client-logger": "6.4.0-rc.9",
-    "@storybook/components": "6.4.0-rc.9",
-    "@storybook/core": "6.4.0-rc.9",
-    "@storybook/core-events": "6.4.0-rc.9",
+    "@storybook/addons": "6.4.3",
+    "@storybook/api": "6.4.3",
+    "@storybook/builder-webpack4": "6.4.3",
+    "@storybook/client-logger": "6.4.3",
+    "@storybook/components": "6.4.3",
+    "@storybook/core": "6.4.3",
+    "@storybook/core-events": "6.4.3",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-rc.9",
-    "@storybook/node-logger": "6.4.0-rc.9",
-    "@storybook/postinstall": "6.4.0-rc.9",
-    "@storybook/preview-web": "6.4.0-rc.9",
-    "@storybook/source-loader": "6.4.0-rc.9",
-    "@storybook/store": "6.4.0-rc.9",
-    "@storybook/theming": "6.4.0-rc.9",
+    "@storybook/csf-tools": "6.4.3",
+    "@storybook/node-logger": "6.4.3",
+    "@storybook/postinstall": "6.4.3",
+    "@storybook/preview-web": "6.4.3",
+    "@storybook/source-loader": "6.4.3",
+    "@storybook/store": "6.4.3",
+    "@storybook/theming": "6.4.3",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -106,11 +106,11 @@
     "@babel/core": "^7.12.10",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.4.0-rc.9",
-    "@storybook/html": "6.4.0-rc.9",
-    "@storybook/react": "6.4.0-rc.9",
-    "@storybook/vue": "6.4.0-rc.9",
-    "@storybook/web-components": "6.4.0-rc.9",
+    "@storybook/angular": "6.4.3",
+    "@storybook/html": "6.4.3",
+    "@storybook/react": "6.4.3",
+    "@storybook/vue": "6.4.3",
+    "@storybook/web-components": "6.4.3",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
@@ -140,12 +140,12 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.4.0-rc.9",
-    "@storybook/html": "6.4.0-rc.9",
-    "@storybook/react": "6.4.0-rc.9",
-    "@storybook/vue": "6.4.0-rc.9",
-    "@storybook/vue3": "6.4.0-rc.9",
-    "@storybook/web-components": "6.4.0-rc.9",
+    "@storybook/angular": "6.4.3",
+    "@storybook/html": "6.4.3",
+    "@storybook/react": "6.4.3",
+    "@storybook/vue": "6.4.3",
+    "@storybook/vue3": "6.4.3",
+    "@storybook/web-components": "6.4.3",
     "lit": "^2.0.0",
     "lit-html": "^1.4.1 || ^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
@@ -202,7 +202,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d5236ddaafc17b739a8b546fd65603dd09142344",
+  "gitHead": "3e8133aa834b15a7c7021c6e5e090016491b5218",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",