FIX channel emit failing because it's missing this && ADD roundtrip to correct story && CHANGE roundtrip to useChannel

dev-kits/addon-roundtrip/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@storybook/addons": "5.2.0-alpha.34",
     "@storybook/api": "5.2.0-alpha.34",
+    "@storybook/client-api": "5.2.0-alpha.34",
     "@storybook/client-logger": "5.2.0-alpha.34",
     "@storybook/components": "5.2.0-alpha.34",
     "@storybook/core-events": "5.2.0-alpha.34",

dev-kits/addon-roundtrip/src/index.ts

@@ -1,25 +1,11 @@
-import { addons } from '@storybook/addons';
+import { useChannel } from '@storybook/client-api';
 import { EVENTS } from './constants';
 
-const run = async () => {
-  const channel = await addons.ready();
-
-  channel.on(EVENTS.REQUEST, () => {
-    // do something in the preview context
-    // then report back to the manager
-
-    channel.emit(EVENTS.RESULT, ['from the preview']);
+export const withRoundtrip = (storyFn: () => any) => {
+  const emit = useChannel({
+    [EVENTS.REQUEST]: () => {
+      emit(EVENTS.RESULT, ['from the preview']);
+    },
   });
+  return storyFn();
 };
-
-run();
-
-// import { useChannel } from '@storybook/client-api';
-
-// export const myDecorator = () => {
-
-//   const emit = useChannel({
-//     [EVENTS.REQUEST]: () => {
-//       emit(EVENTS.RESULT, ['from the preview'])}
-//   });
-// };

examples/dev-kits/stories/addon-decorator.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { withDecorator } from '@storybook/addon-decorator';
+import { withRoundtrip } from '@storybook/addon-roundtrip';
 
 storiesOf('addons|decorator', module)
+  .addDecorator(withRoundtrip)
   .addDecorator(withDecorator())
   .add('with decorator', () => (
     <div>This story is wrapped with a decorator that is aware of when a story updates/changes</div>

examples/dev-kits/stories/addon-roundtrip.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import '@storybook/addon-roundtrip';
-
 storiesOf('root|group/component', module).add('variant 1', () => <div>This is variant 1</div>);
 
 storiesOf('addons|parameter', module)

lib/client-api/src/hooks.ts

@@ -287,7 +287,7 @@ export function useChannel(eventMap: EventMap) {
     };
   }, Object.keys(eventMap));
 
-  return channel.emit;
+  return channel.emit.bind(channel);
 }
 
 export function useParameter<S>(parameterKey: string, defaultValue?: S): S | undefined {

lib/ui/src/index.js

@@ -14,9 +14,17 @@ import Provider from './provider';
 ThemeProvider.displayName = 'ThemeProvider';
 HelmetProvider.displayName = 'HelmetProvider';
 
+const getDocsMode = () => {
+  try {
+    // eslint-disable-next-line no-undef
+    return !!DOCS_MODE; // webpack-injected
+  } catch (e) {
+    return false;
+  }
+};
+
 const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
-// eslint-disable-next-line no-undef
-const docsMode = !!DOCS_MODE; // webpack-injected
+const docsMode = getDocsMode();
 
 const Root = ({ provider }) => (
   <Container key="container">