Add a modernInlineRender that renders the story using the framework's renderToDOM

Replaces https://github.com/storybookjs/storybook/pull/14911

addons/docs/src/blocks/Story.tsx

@@ -1,8 +1,18 @@
-import React, { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  ElementType,
+  ComponentProps,
+  useContext,
+  useRef,
+  useEffect,
+} from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { resetComponents, Story as PureStory } from '@storybook/components';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import { Args, BaseAnnotations } from '@storybook/addons';
+import { Story as StoryType } from '@storybook/client-api/dist/ts3.9/new/types';
+import global from 'global';
 import { CURRENT_SELECTION } from './types';
 
 import { DocsContext, DocsContextProps } from './DocsContext';
@@ -41,18 +51,32 @@ export const lookupStoryId = (
     storyNameFromExport(mdxStoryNameToKey[storyName])
   );
 
-export const getStoryProps = (
-  props: StoryProps,
-  context: DocsContextProps<any>
-): PureStoryProps => {
+// TODO -- this can be async
+export const getStory = (props: StoryProps, context: DocsContextProps<any>): StoryType<any> => {
   const { id } = props as StoryRefProps;
   const { name } = props as StoryDefProps;
   const inputId = id === CURRENT_SELECTION ? context.id : id;
   const previewId = inputId || lookupStoryId(name, context);
-  const story = context.storyById(previewId);
+  return context.storyById(previewId);
+};
 
-  const { height, inline } = props;
-  const { storyFn, name: storyName, parameters } = story;
+export const getStoryProps = (
+  { height, inline }: StoryProps,
+  story: StoryType<any>,
+  context: DocsContextProps<any>
+): PureStoryProps => {
+  const defaultIframeHeight = 100;
+
+  if (!story) {
+    return {
+      id: story.id,
+      inline: false,
+      height: height || defaultIframeHeight.toString(),
+      title: undefined,
+    };
+  }
+
+  const { name: storyName, parameters } = story;
   const { docs = {} } = parameters;
 
   if (docs.disable) {
@@ -72,32 +96,60 @@ export const getStoryProps = (
   return {
     parameters,
     inline: storyIsInline,
-    id: previewId,
-    // TODO -- how can `storyFn` be undefined?
-    storyFn:
-      prepareForInline && boundStoryFn ? () => prepareForInline(boundStoryFn, story) : boundStoryFn,
+    id: story.id,
+    storyFn: prepareForInline ? () => prepareForInline(boundStoryFn, story) : boundStoryFn,
     height: height || (storyIsInline ? undefined : iframeHeight),
     title: storyName,
   };
 };
 
-const Story: FunctionComponent<StoryProps> = (props) => (
-  <DocsContext.Consumer>
-    {(context) => {
-      const storyProps = getStoryProps(props, context);
-      if (!storyProps) {
-        return null;
-      }
-      return (
-        <div id={storyBlockIdFromId(storyProps.id)}>
-          <MDXProvider components={resetComponents}>
-            <PureStory {...storyProps} />
-          </MDXProvider>
-        </div>
-      );
-    }}
-  </DocsContext.Consumer>
-);
+const Story: FunctionComponent<StoryProps> = (props) => {
+  const context = useContext(DocsContext);
+  const ref = useRef();
+  const story = getStory(props, context);
+  const { id, title, name } = story;
+  const renderContext = {
+    id,
+    title,
+    kind: title,
+    name,
+    story: name,
+    // TODO -- shouldn't this be true sometimes? How to react to arg changes
+    forceRender: false,
+    // TODO what to do when these fail?
+    showMain: () => {},
+    showError: () => {},
+    showException: () => {},
+  };
+  useEffect(() => {
+    if (story && ref.current) {
+      setTimeout(() => {
+        context.renderStoryToElement({ story, renderContext, element: ref.current as Element });
+      }, 1000);
+    }
+    return () => story?.cleanup();
+  }, [story]);
+
+  if (global?.FEATURES.modernInlineRender) {
+    return (
+      <div ref={ref} data-name={story.name}>
+        <span data-is-loading-indicator="true">loading story...</span>
+      </div>
+    );
+  }
+
+  const storyProps = getStoryProps(props, story, context);
+  if (!storyProps) {
+    return null;
+  }
+  return (
+    <div id={storyBlockIdFromId(storyProps.id)}>
+      <MDXProvider components={resetComponents}>
+        <PureStory {...storyProps} />
+      </MDXProvider>
+    </div>
+  );
+};
 
 Story.defaultProps = {
   children: null,

app/react/src/client/preview/render.tsx

@@ -6,8 +6,6 @@ import { StoryContext, RenderContext } from './types';
 
 const { document, FRAMEWORK_OPTIONS } = global;
 
-const rootEl = document ? document.getElementById('root') : null;
-
 const render = (node: ReactElement, el: Element) =>
   new Promise((resolve) => {
     ReactDOM.render(node, el, resolve);
@@ -47,13 +45,10 @@ class ErrorBoundary extends Component<{
 
 const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
 
-export default async function renderMain({
-  storyContext,
-  unboundStoryFn,
-  showMain,
-  showException,
-  forceRender,
-}: RenderContext) {
+export default async function renderMain(
+  { storyContext, unboundStoryFn, showMain, showException, forceRender }: RenderContext,
+  domElement: Element
+) {
   const Story = unboundStoryFn as FunctionComponent<StoryContext>;
 
   const content = (
@@ -71,8 +66,8 @@ export default async function renderMain({
   // https://github.com/storybookjs/react-storybook/issues/81
   // But forceRender means that it's the same story, so we want too keep the state in that case.
   if (!forceRender) {
-    ReactDOM.unmountComponentAtNode(rootEl);
+    ReactDOM.unmountComponentAtNode(domElement);
   }
 
-  await render(element, rootEl);
+  await render(element, domElement);
 }

examples/react-ts/main.ts

@@ -23,6 +23,7 @@ const config: StorybookConfig = {
     postcss: false,
     previewCsfV3: true,
     buildStoriesJson: true,
+    modernInlineRender: true,
   },
 };
 

lib/client-api/src/new/types.ts

@@ -171,7 +171,11 @@ export interface DocsContextProps<StoryFnReturnType> {
   name: string;
   storyById: (id: StoryId) => Story<StoryFnReturnType>;
   componentStories: () => Story<StoryFnReturnType>[];
-  renderStoryToElement: (story: Story<StoryFnReturnType>) => void;
+  renderStoryToElement: (args: {
+    story: Story<StoryFnReturnType>;
+    renderContext: RenderContextWithoutStoryContext;
+    element: Element;
+  }) => void;
 
   // TODO -- we need this for the `prepareForInline` docs approach
   bindStoryFn: (story: Story<StoryFnReturnType>) => LegacyStoryFn<StoryFnReturnType>;

lib/core-common/src/types.ts

@@ -264,6 +264,11 @@ export interface StorybookConfig {
      * Activate preview of CSF v3.0
      */
     previewCsfV3?: boolean;
+
+    /**
+     * Activate modern inline rendering
+     */
+    modernInlineRender?: boolean;
   };
   /**
    * Tells Storybook where to find stories.