Core: Allow a teardown function to be returned from renderToDOM

addons/docs/src/blocks/Story.tsx

@@ -120,6 +120,7 @@ function makeGate(): [Promise<void>, () => void] {
 }
 
 const Story: FunctionComponent<StoryProps> = (props) => {
+  console.log('Story');
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
   const storyRef = useRef();

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

@@ -147,4 +147,6 @@ export async function renderToDOM(
   }
 
   await renderElement(element, domElement);
+
+  return () => unmountElement(domElement);
 }

examples/react-ts/.storybook/main.ts

@@ -37,7 +37,7 @@ const config: StorybookConfig = {
   },
   features: {
     postcss: false,
-    // modernInlineRender: true,
+    modernInlineRender: true,
     storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
     buildStoriesJson: true,
     babelModeV7: true,

examples/react-ts/src/button.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, ButtonHTMLAttributes } from 'react';
+import React, { ComponentType, ButtonHTMLAttributes, useEffect } from 'react';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
@@ -12,8 +12,15 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ComponentType;
 }
 
-export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => (
-  <button type="button" {...props}>
-    {Icon ? <Icon /> : null} {label}
-  </button>
-);
+export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => {
+  useEffect(() => {
+    const fn = () => console.log(`click ${label}`);
+    global.window.document.querySelector('body')?.addEventListener('click', fn);
+    return () => global.window.document.querySelector('body')?.removeEventListener('click', fn);
+  });
+  return (
+    <button type="button" {...props}>
+      {Icon ? <Icon /> : null} {label}
+    </button>
+  );
+};

examples/react-ts/src/button2.stories.tsx

@@ -0,0 +1,10 @@
+import { Button } from './button';
+
+export default {
+  component: Button,
+  title: 'button2',
+};
+
+export const one = { args: { label: 'one' } };
+export const two = { args: { label: 'two' } };
+export const three = { args: { label: 'three' } };

examples/react-ts/src/button3.stories.tsx

@@ -0,0 +1,9 @@
+import { Button } from './button';
+
+export default {
+  component: Button,
+  title: 'button3',
+};
+
+export const four = { args: { label: 'four' } };
+export const five = { args: { label: 'five' } };

lib/preview-web/src/Preview.tsx

@@ -23,6 +23,7 @@ import {
   StoryIndex,
   PromiseLike,
   WebProjectAnnotations,
+  RenderToDOM,
 } from '@storybook/store';
 
 import { StoryRender } from './StoryRender';
@@ -45,7 +46,7 @@ export class Preview<TFramework extends AnyFramework> {
 
   importFn?: ModuleImportFn;
 
-  renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'];
+  renderToDOM: RenderToDOM<TFramework>;
 
   storyRenders: StoryRender<TFramework>[] = [];
 

lib/preview-web/src/PreviewWeb.mockdata.ts

@@ -7,7 +7,7 @@ import {
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
-import { StoryIndex } from '@storybook/store';
+import { StoryIndex, TeardownRenderToDOM } from '@storybook/store';
 import { RenderPhase } from './PreviewWeb';
 
 export const componentOneExports = {
@@ -32,12 +32,13 @@ export const importFn = jest.fn(async (path) => {
   return path === './src/ComponentOne.stories.js' ? componentOneExports : componentTwoExports;
 });
 
+export const teardownRenderToDOM: jest.Mock<TeardownRenderToDOM> = jest.fn();
 export const projectAnnotations = {
   globals: { a: 'b' },
   globalTypes: {},
   decorators: [jest.fn((s) => s())],
   render: jest.fn(),
-  renderToDOM: jest.fn(),
+  renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM),
 };
 export const getProjectAnnotations = () => projectAnnotations;