Renderer React: first example of multiframework support using decorators

.circleci/config.yml

@@ -41,6 +41,7 @@ jobs:
             - dev-kits
             - app
             - lib
+            - renderers
   chromatic:
     <<: *defaults
     steps:
@@ -157,6 +158,7 @@ jobs:
             - addons
             - app
             - lib
+            - renderers
   smoke-tests:
     <<: *defaults
     steps:

addons/storyshots/storyshots-core/src/frameworks/react/getChildren.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import shallow from 'react-test-renderer/shallow';
+
+export default (element: any) => {
+  const renderer = shallow.createRenderer();
+  renderer.render(element);
+  return renderer.getRenderOutput();
+};

addons/storyshots/storyshots-core/src/frameworks/react/renderShallowTree.ts

@@ -1,8 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import shallow from 'react-test-renderer/shallow';
 
+import getChildren from './getChildren';
+
 function getRenderedTree(story: any, context: any, { renderer, serializer }: any) {
-  const storyElement = story.render();
+  const storyElement = getChildren(story.render());
   const shallowRenderer = renderer || shallow.createRenderer();
   const tree = shallowRenderer.render(storyElement);
   return serializer ? serializer(tree) : tree;

addons/storyshots/storyshots-core/src/frameworks/react/renderTree.ts

@@ -1,8 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import reactTestRenderer from 'react-test-renderer';
 
+import getChildren from './getChildren';
+
 function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
-  const storyElement = story.render();
+  const storyElement = getChildren(story.render());
   const currentRenderer = renderer || reactTestRenderer.create;
   const tree = currentRenderer(storyElement, rendererOptions);
 

addons/storyshots/storyshots-core/stories/storyshot.async.test.js

@@ -34,7 +34,7 @@ initStoryshots({
 
         // Assert the expected value and the corresponding snapshot
         expect(wrapper.find('AsyncTestComponent').contains(EXPECTED_VALUE)).toBe(true);
-        expect(toJson(wrapper)).toMatchSpecificSnapshot(snapshotFilename);
+        expect(toJson(wrapper.children())).toMatchSpecificSnapshot(snapshotFilename);
 
         // finally mark test as done
         done();

app/html/src/client/preview/render.ts

@@ -4,15 +4,15 @@ import { RenderMainArgs } from './types';
 
 const rootElement = document.getElementById('root');
 
-export default function renderMain({
+export default async function renderMain({
   storyFn,
   selectedKind,
   selectedStory,
   showMain,
   showError,
   forceRender,
 }: RenderMainArgs) {
-  const element = storyFn();
+  const element = await storyFn();
 
   showMain();
   if (typeof element === 'string') {

app/react/package.json

@@ -39,11 +39,11 @@
     "@storybook/addons": "5.3.0-alpha.17",
     "@storybook/core": "5.3.0-alpha.17",
     "@storybook/node-logger": "5.3.0-alpha.17",
+    "@storybook/renderer-react": "5.3.0-alpha.17",
     "@svgr/webpack": "^4.0.3",
     "@types/webpack-env": "^1.13.7",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
-    "babel-plugin-react-docgen": "^3.0.0",
     "babel-preset-react-app": "^9.0.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",

app/react/src/client/preview/globals.ts

@@ -1,3 +1,4 @@
+import '@storybook/renderer-react/dist/client/globals';
 import { window } from 'global';
 
 if (window) {

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

@@ -0,0 +1,31 @@
+import { document } from 'global';
+import ReactDOM from 'react-dom';
+import { render, register } from '@storybook/renderer-react';
+
+import { RenderMainArgs } from './types';
+
+register(true);
+
+const rootEl = document ? document.getElementById('root') : null;
+
+export default async function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  forceRender,
+}: RenderMainArgs) {
+  const element = storyFn();
+
+  // We need to unmount the existing set of components in the DOM node.
+  // Otherwise, React may not recreate instances for every story run.
+  // This could leads to issues like below:
+  // 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);
+  }
+
+  await render(element, rootEl, { name: selectedStory, kind: selectedKind });
+  showMain();
+}

app/react/src/client/preview/types.ts

@@ -6,7 +6,7 @@ export interface ShowErrorArgs {
 }
 
 export interface RenderMainArgs {
-  storyFn: React.FunctionComponent<any>;
+  storyFn: () => React.ReactElement | null;
   selectedKind: string;
   selectedStory: string;
   showMain: () => void;

app/react/src/server/options.ts

@@ -3,8 +3,8 @@ const packageJson = require('../../package.json');
 export default {
   packageJson,
   frameworkPresets: [
-    require.resolve('./framework-preset-react.js'),
+    require.resolve('@storybook/renderer-react/dist/server/framework-preset-react.js'),
     require.resolve('./framework-preset-cra.js'),
-    require.resolve('./framework-preset-react-docgen.js'),
+    require.resolve('@storybook/renderer-react/dist/server/framework-preset-react-docgen.js'),
   ],
 };

examples/html-kitchen-sink/.storybook/config.js

@@ -1,8 +1,22 @@
+import '@storybook/renderer-react/register';
 import { configure, addParameters, addDecorator } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { useParameter } from '@storybook/client-api';
+import React from 'react';
 
 addDecorator(withA11y);
 
+addDecorator(getStory => {
+  const story = getStory();
+  const framework = useParameter('framework');
+  if (framework !== 'react') {
+    return story;
+  }
+
+  return <ThemeProvider theme={convert(themes.light)}>{story}</ThemeProvider>;
+});
+
 addParameters({
   a11y: {
     config: {},

examples/html-kitchen-sink/.storybook/presets.js

@@ -1 +1,5 @@
-module.exports = ['@storybook/addon-docs/html/preset'];
+module.exports = [
+  '@storybook/renderer-react/dist/server/framework-preset-react',
+  '@storybook/renderer-react/dist/server/framework-preset-react-docgen',
+  '@storybook/addon-docs/html/preset',
+];

examples/html-kitchen-sink/package.json

@@ -32,9 +32,15 @@
     "@storybook/core": "5.3.0-alpha.17",
     "@storybook/core-events": "5.3.0-alpha.17",
     "@storybook/html": "5.3.0-alpha.17",
+    "@storybook/renderer-react": "5.3.0-alpha.17",
     "@storybook/source-loader": "5.3.0-alpha.17",
+    "@storybook/theming": "5.3.0-alpha.17",
     "eventemitter3": "^4.0.0",
     "format-json": "^1.0.3",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "uuid": "^3.3.2"
   }
 }

examples/html-kitchen-sink/stories/react/Logger.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import json from 'format-json';
+import PropTypes from 'prop-types';
+
+import { styled } from '@storybook/theming';
+import EventEmitter from 'eventemitter3';
+import uuid from 'uuid/v4';
+
+const Wrapper = styled.div({
+  padding: 20,
+});
+const Title = styled.h1({
+  margin: 0,
+});
+const Item = styled.div({
+  listStyle: 'none',
+  marginBottom: 10,
+});
+
+export default class Logger extends Component {
+  static propTypes = {
+    emitter: PropTypes.instanceOf(EventEmitter).isRequired,
+    title: PropTypes.string,
+  };
+
+  static defaultProps = {
+    title: 'Logger',
+  };
+
+  state = {
+    events: [],
+  };
+
+  componentDidMount() {
+    const { emitter } = this.props;
+
+    emitter.on(Logger.LOG_EVENT, this.onEventHandler);
+  }
+
+  componentWillUnmount() {
+    const { emitter } = this.props;
+
+    emitter.removeListener(Logger.LOG_EVENT, this.onEventHandler);
+  }
+
+  onEventHandler = ({ name, payload }) => {
+    this.setState(({ events }) => ({
+      events: [...events, { name, id: uuid(), payload }],
+    }));
+  };
+
+  static LOG_EVENT = 'Logger:log';
+
+  render() {
+    const { events } = this.state;
+    const { title } = this.props;
+
+    return (
+      <Wrapper>
+        <Title>{title}</Title>
+        <dl>
+          {events.map(({ id, name, payload }) => (
+            <Item key={id}>
+              <dt>
+                <b>Event name:</b> {name}
+              </dt>
+              <dd>
+                <b>Event payload:</b> {json.plain(payload)}
+              </dd>
+            </Item>
+          ))}
+        </dl>
+      </Wrapper>
+    );
+  }
+}