@storybook/addon-docs 6.4.1 → 6.5.0-alpha.1

package/dist/cjs/blocks/Story.js

@@ -162,8 +162,6 @@ function makeGate() {
 }
 
 var Story = function Story(props) {
-  var _global$FEATURES, _global$FEATURES2;
-
   var context = (0, _react.useContext)(_DocsContext.DocsContext);
 
   var channel = _addons.addons.getChannel();
@@ -220,22 +218,7 @@ var Story = function Story(props) {
       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);
-    });
-  }
+  (0, _react.useEffect)(onRendered);
 
   if (!story) {
     return /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null);
@@ -247,22 +230,40 @@ var Story = function Story(props) {
     return null;
   }
 
-  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
-
-    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/cjs/frameworks/common/preset.js

@@ -119,7 +119,9 @@ function webpack() {
 
   if (transcludeMarkdown) {
     rules = [].concat(_toConsumableArray(rules.filter(function (rule) {
-      return rule.test.toString() !== '/\\.md$/';
+      var _rule$test;
+
+      return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) !== '/\\.md$/';
     })), [{
       test: /\.md$/,
       use: [{

package/dist/esm/blocks/Story.js

@@ -109,8 +109,6 @@ function makeGate() {
 }
 
 var Story = function Story(props) {
-  var _global$FEATURES, _global$FEATURES2;
-
   var context = useContext(DocsContext);
   var channel = addons.getChannel();
   var storyRef = useRef();
@@ -165,22 +163,7 @@ var Story = function Story(props) {
       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);
-    });
-  }
+  useEffect(onRendered);
 
   if (!story) {
     return /*#__PURE__*/React.createElement(StorySkeleton, null);
@@ -192,22 +175,40 @@ var Story = function Story(props) {
     return null;
   }
 
-  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
-
-    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/esm/frameworks/common/preset.js

@@ -93,7 +93,9 @@ export function webpack() {
 
   if (transcludeMarkdown) {
     rules = [].concat(_toConsumableArray(rules.filter(function (rule) {
-      return rule.test.toString() !== '/\\.md$/';
+      var _rule$test;
+
+      return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) !== '/\\.md$/';
     })), [{
       test: /\.md$/,
       use: [{

package/dist/modern/blocks/Story.js

@@ -85,8 +85,6 @@ function makeGate() {
 }
 
 const Story = props => {
-  var _global$FEATURES, _global$FEATURES2;
-
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
   const storyRef = useRef();
@@ -127,22 +125,7 @@ const Story = props => {
   }, [story]);
   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);
-    });
-  }
+  useEffect(onRendered);
 
   if (!story) {
     return /*#__PURE__*/React.createElement(StorySkeleton, null);
@@ -154,24 +137,42 @@ const Story = props => {
     return null;
   }
 
-  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
-
-    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/dist/modern/frameworks/common/preset.js

@@ -62,7 +62,11 @@ export function webpack(webpackConfig = {}, options = {}) {
   let rules = module.rules || [];
 
   if (transcludeMarkdown) {
-    rules = [...rules.filter(rule => rule.test.toString() !== '/\\.md$/'), {
+    rules = [...rules.filter(rule => {
+      var _rule$test;
+
+      return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) !== '/\\.md$/';
+    }), {
       test: /\.md$/,
       use: [{
         loader: resolvedBabelLoader,

package/package.json

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