App React: Ensure that STORY_RENDERED is emitted only after calling s…

…toryFn

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

@@ -7,14 +7,16 @@ import { RenderMainArgs } from './types';
 
 const rootEl = document ? document.getElementById('root') : null;
 
-function render(node: React.ReactElement, el: Element) {
-  ReactDOM.render(
-    process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
-    el
-  );
-}
+const render = (node: React.ReactElement, el: Element) =>
+  new Promise(resolve => {
+    ReactDOM.render(
+      process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
+      el,
+      resolve
+    );
+  });
 
-export default function renderMain({
+export default async function renderMain({
   storyFn: StoryFn,
   selectedKind,
   selectedStory,
@@ -55,6 +57,6 @@ export default function renderMain({
     ReactDOM.unmountComponentAtNode(rootEl);
   }
 
-  render(element, rootEl);
+  await render(element, rootEl);
   showMain();
 }

examples/official-storybook/stories/demo/button.stories.js

@@ -1,10 +1,35 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
+import { useChannel, useState as useStoryState } from '@storybook/client-api';
+
+const withPropsInfo = storyFn => {
+  const [selected, setSelected] = useStoryState(true);
+
+  const emit = useChannel(
+    {
+      REQUEST_PROPS_CHANGE: () => setSelected(!selected),
+    },
+    [selected]
+  );
+
+  console.log('SELECTED:', selected);
+
+  return (
+    <div>
+      {storyFn()}
+      {selected && 'Article'}
+      <button type="button" onClick={() => emit('REQUEST_PROPS_CHANGE')}>
+        Toggle
+      </button>
+    </div>
+  );
+};
 
 export default {
   title: 'Other|Demo/Button',
   component: Button,
+  decorators: [withPropsInfo],
 };
 
 export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;

lib/core/src/client/preview/start.js

@@ -226,8 +226,10 @@ export default function start(render, { decorateStory } = {}) {
       case 'story':
       default: {
         if (getDecorated) {
-          render(renderContext);
-          addons.getChannel().emit(Events.STORY_RENDERED, id);
+          (async () => {
+            await render(renderContext);
+            addons.getChannel().emit(Events.STORY_RENDERED, id);
+          })();
         } else {
           showNopreview();
           addons.getChannel().emit(Events.STORY_MISSING, id);