@storybook/addon-docs 6.4.0-rc.6 → 6.4.0

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,8 +153,16 @@ var getStoryProps = function getStoryProps(_ref4, story, context, onStoryFnCalle
 
 exports.getStoryProps = getStoryProps;
 
+function makeGate() {
+  var open;
+  var gate = new Promise(function (r) {
+    open = r;
+  });
+  return [gate, open];
+}
+
 var Story = function Story(props) {
-  var _global$FEATURES;
+  var _global$FEATURES, _global$FEATURES2;
 
   var context = (0, _react.useContext)(_DocsContext.DocsContext);
 
@@ -200,22 +210,44 @@ var Story = function Story(props) {
     };
   }, [story]);
 
-  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
+  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 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 (story && !(_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);
+    });
+  }
 
-  var storyProps = getStoryProps(props, story, context, function () {
-    return channel.emit(_coreEvents.default.STORY_RENDERED, storyId);
-  });
+  if (!story) {
+    return /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null);
+  }
+
+  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) {
+  if (_global.default !== null && _global.default !== void 0 && (_global$FEATURES2 = _global.default.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.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
 

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,8 +100,16 @@ export var getStoryProps = function getStoryProps(_ref4, story, context, onStory
   });
 };
 
+function makeGate() {
+  var open;
+  var gate = new Promise(function (r) {
+    open = r;
+  });
+  return [gate, open];
+}
+
 var Story = function Story(props) {
-  var _global$FEATURES;
+  var _global$FEATURES, _global$FEATURES2;
 
   var context = useContext(DocsContext);
   var channel = addons.getChannel();
@@ -146,22 +155,44 @@ var Story = function Story(props) {
     };
   }, [story]);
 
-  if (!story) {
-    return /*#__PURE__*/React.createElement(StorySkeleton, null);
-  } // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
+  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 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 (story && !(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);
+    });
+  }
+
+  if (!story) {
+    return /*#__PURE__*/React.createElement(StorySkeleton, null);
+  }
 
-  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) {
+  if (global !== null && global !== void 0 && (_global$FEATURES2 = global.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.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
 

package/dist/modern/blocks/Story.js

@@ -76,8 +76,16 @@ export const getStoryProps = ({
   });
 };
 
+function makeGate() {
+  let open;
+  const gate = new Promise(r => {
+    open = r;
+  });
+  return [gate, open];
+}
+
 const Story = props => {
-  var _global$FEATURES;
+  var _global$FEATURES, _global$FEATURES2;
 
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
@@ -117,21 +125,36 @@ const Story = props => {
 
     return () => cleanup && cleanup();
   }, [story]);
-
-  if (!story) {
-    return /*#__PURE__*/React.createElement(StorySkeleton, null);
-  } // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
+  const [storyFnRan, onStoryFnRan] = makeGate();
+  const [rendered, onRendered] = makeGate();
+  useEffect(onRendered); // 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 (story && !(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);
+    });
+  }
+
+  if (!story) {
+    return /*#__PURE__*/React.createElement(StorySkeleton, null);
+  }
 
-  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) {
+  if (global !== null && global !== void 0 && (_global$FEATURES2 = global.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "6.4.0-rc.6",
+  "version": "6.4.0",
   "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.6",
-    "@storybook/api": "6.4.0-rc.6",
-    "@storybook/builder-webpack4": "6.4.0-rc.6",
-    "@storybook/client-logger": "6.4.0-rc.6",
-    "@storybook/components": "6.4.0-rc.6",
-    "@storybook/core": "6.4.0-rc.6",
-    "@storybook/core-events": "6.4.0-rc.6",
+    "@storybook/addons": "6.4.0",
+    "@storybook/api": "6.4.0",
+    "@storybook/builder-webpack4": "6.4.0",
+    "@storybook/client-logger": "6.4.0",
+    "@storybook/components": "6.4.0",
+    "@storybook/core": "6.4.0",
+    "@storybook/core-events": "6.4.0",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.4.0-rc.6",
-    "@storybook/node-logger": "6.4.0-rc.6",
-    "@storybook/postinstall": "6.4.0-rc.6",
-    "@storybook/preview-web": "6.4.0-rc.6",
-    "@storybook/source-loader": "6.4.0-rc.6",
-    "@storybook/store": "6.4.0-rc.6",
-    "@storybook/theming": "6.4.0-rc.6",
+    "@storybook/csf-tools": "6.4.0",
+    "@storybook/node-logger": "6.4.0",
+    "@storybook/postinstall": "6.4.0",
+    "@storybook/preview-web": "6.4.0",
+    "@storybook/source-loader": "6.4.0",
+    "@storybook/store": "6.4.0",
+    "@storybook/theming": "6.4.0",
     "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.6",
-    "@storybook/html": "6.4.0-rc.6",
-    "@storybook/react": "6.4.0-rc.6",
-    "@storybook/vue": "6.4.0-rc.6",
-    "@storybook/web-components": "6.4.0-rc.6",
+    "@storybook/angular": "6.4.0",
+    "@storybook/html": "6.4.0",
+    "@storybook/react": "6.4.0",
+    "@storybook/vue": "6.4.0",
+    "@storybook/web-components": "6.4.0",
     "@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.6",
-    "@storybook/html": "6.4.0-rc.6",
-    "@storybook/react": "6.4.0-rc.6",
-    "@storybook/vue": "6.4.0-rc.6",
-    "@storybook/vue3": "6.4.0-rc.6",
-    "@storybook/web-components": "6.4.0-rc.6",
+    "@storybook/angular": "6.4.0",
+    "@storybook/html": "6.4.0",
+    "@storybook/react": "6.4.0",
+    "@storybook/vue": "6.4.0",
+    "@storybook/vue3": "6.4.0",
+    "@storybook/web-components": "6.4.0",
     "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": "b2afbb87f07d81f5c3830748490f6dca84d8e470",
+  "gitHead": "7d4d6ab38a9c4ef18968fa3964b5084d87a82b71",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",