From 74a0c39df9f54a2cfdc45f1ee18c3e58961bc138 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 1 Dec 2021 17:06:18 +1100
Subject: [PATCH 1/2] Don't render w/ `modernInline` if `inlineStories` is
 `false`

---
 addons/docs/src/blocks/Story.tsx | 74 ++++++++++++++++----------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 9e0ef93c17d4..fb69e945e359 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -157,22 +157,6 @@ const Story: FunctionComponent<StoryProps> = (props) => {
   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?.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 <StorySkeleton />;
   }
@@ -182,27 +166,43 @@ const Story: FunctionComponent<StoryProps> = (props) => {
     return null;
   }
 
-  if (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 (
-      <div id={storyBlockIdFromId(story.id)}>
-        <MDXProvider components={resetComponents}>
-          {height ? (
-            <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
-          ) : null}
-          {showLoader && <StorySkeleton />}
-          <div
-            ref={storyRef}
-            data-name={story.name}
-            dangerouslySetInnerHTML={{ __html: htmlContents }}
-          />
-        </MDXProvider>
-      </div>
-    );
+  // 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 (storyProps.inline) {
+    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 (
+        <div id={storyBlockIdFromId(story.id)}>
+          <MDXProvider components={resetComponents}>
+            {height ? (
+              <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
+            ) : null}
+            {showLoader && <StorySkeleton />}
+            <div
+              ref={storyRef}
+              data-name={story.name}
+              dangerouslySetInnerHTML={{ __html: htmlContents }}
+            />
+          </MDXProvider>
+        </div>
+      );
+    }
   }
 
   return (

From ac5d50be814e44bd078ea6d19b6d21ab6678bba4 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 1 Dec 2021 17:07:01 +1100
Subject: [PATCH 2/2] Move comment

---
 addons/docs/src/blocks/Story.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index fb69e945e359..62100e85157f 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -166,10 +166,10 @@ const Story: FunctionComponent<StoryProps> = (props) => {
     return 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.
   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