@storybook/addon-docs 7.0.0-alpha.1 → 7.0.0-alpha.2

package/dist/cjs/shared.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SourceType = exports.SNIPPET_RENDERED = exports.PARAM_KEY = exports.PANEL_ID = exports.ADDON_ID = void 0;
-var ADDON_ID = 'storybook/docs';
+const ADDON_ID = 'storybook/docs';
 exports.ADDON_ID = ADDON_ID;
-var PANEL_ID = "".concat(ADDON_ID, "/panel");
+const PANEL_ID = `${ADDON_ID}/panel`;
 exports.PANEL_ID = PANEL_ID;
-var PARAM_KEY = "docs";
+const PARAM_KEY = `docs`;
 exports.PARAM_KEY = PARAM_KEY;
-var SNIPPET_RENDERED = "".concat(ADDON_ID, "/snippet-rendered");
+const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`;
 exports.SNIPPET_RENDERED = SNIPPET_RENDERED;
-var SourceType;
+let SourceType;
 exports.SourceType = SourceType;
 
 (function (SourceType) {

package/dist/esm/blocks/Story.js

@@ -1,10 +1,7 @@
 import React, { useContext, useRef, useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-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';
@@ -26,7 +23,7 @@ export const getStoryId = (props, context) => {
 export const getStoryProps = ({
   height,
   inline
-}, story, context, onStoryFnCalled) => {
+}, story) => {
   const {
     name: storyName,
     parameters
@@ -42,51 +39,21 @@ export const getStoryProps = ({
 
   const {
     inlineStories = false,
-    iframeHeight = 100,
-    prepareForInline
+    iframeHeight = 100
   } = docs;
   const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
-
-  if (storyIsInline && !prepareForInline) {
-    throw new Error(`Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`);
-  }
-
-  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,
     id: story.id,
     height: height || (storyIsInline ? undefined : iframeHeight),
     title: storyName
   }, storyIsInline && {
-    parameters,
-    storyFn: () => prepareForInline(boundStoryFn, context.getStoryContext(story))
+    parameters
   });
 };
 
-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();
   const storyId = getStoryId(props, context);
   const story = useStory(storyId, context);
@@ -102,54 +69,35 @@ 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);
   }
 
-  const storyProps = getStoryProps(props, story, context, onStoryFnRan);
+  const storyProps = getStoryProps(props, story);
 
   if (!storyProps) {
     return null;
   }
 
   if (storyProps.inline) {
-    // 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?.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
-        }
-      })));
-    }
+    // 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/types/blocks/Story.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
 import { Story as PureStory } from '@storybook/components';
 import { StoryId, StoryAnnotations, AnyFramework } from '@storybook/csf';
-import { Story as StoryType } from '@storybook/store';
+import type { Story as StoryType } from '@storybook/store';
 import { DocsContextProps } from './DocsContext';
 export declare const storyBlockIdFromId: (storyId: string) => string;
 declare type PureStoryProps = ComponentProps<typeof PureStory>;
@@ -23,6 +23,6 @@ declare type StoryImportProps = {
 export declare type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
 export declare const lookupStoryId: (storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) => string;
 export declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>, context: DocsContextProps<TFramework>, onStoryFnCalled: () => void) => PureStoryProps;
+export declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: StoryType<TFramework>) => PureStoryProps;
 declare const Story: FunctionComponent<StoryProps>;
 export { Story };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -52,20 +52,21 @@
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.1",
-    "@storybook/api": "7.0.0-alpha.1",
-    "@storybook/components": "7.0.0-alpha.1",
-    "@storybook/core-common": "7.0.0-alpha.1",
-    "@storybook/core-events": "7.0.0-alpha.1",
+    "@storybook/addons": "7.0.0-alpha.2",
+    "@storybook/api": "7.0.0-alpha.2",
+    "@storybook/components": "7.0.0-alpha.2",
+    "@storybook/core-common": "7.0.0-alpha.2",
+    "@storybook/core-events": "7.0.0-alpha.2",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.1",
+    "@storybook/csf-tools": "7.0.0-alpha.2",
+    "@storybook/docs-tools": "7.0.0-alpha.2",
     "@storybook/mdx1-csf": "^0.0.1",
-    "@storybook/node-logger": "7.0.0-alpha.1",
-    "@storybook/postinstall": "7.0.0-alpha.1",
-    "@storybook/preview-web": "7.0.0-alpha.1",
-    "@storybook/source-loader": "7.0.0-alpha.1",
-    "@storybook/store": "7.0.0-alpha.1",
-    "@storybook/theming": "7.0.0-alpha.1",
+    "@storybook/node-logger": "7.0.0-alpha.2",
+    "@storybook/postinstall": "7.0.0-alpha.2",
+    "@storybook/preview-web": "7.0.0-alpha.2",
+    "@storybook/source-loader": "7.0.0-alpha.2",
+    "@storybook/store": "7.0.0-alpha.2",
+    "@storybook/theming": "7.0.0-alpha.2",
     "babel-loader": "^8.2.5",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -101,7 +102,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b90b85210f66da59656c2ef58b0910b156256bea",
+  "gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",