Merge pull request #3243 from storybooks/tmeasday/improve-attachment-…

…to-window Bind window access if `window` is defined; add `addons channel` access too
storybookjs · Mar 30, 2018 · b40bdd4 · b40bdd4
1 parent 290c06b
commit b40bdd4
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -97,7 +97,7 @@ module.exports = {
     'no-underscore-dangle': [
       error,
       {
-        allow: ['__STORYBOOK_CLIENT_API__'],
+        allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'],
       },
     ],
   },

diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.js
@@ -27,9 +27,10 @@ const context = { storyStore, reduxStore };
 const clientApi = new ClientApi(context);
 export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
 
+let channel;
 if (isBrowser) {
   // create preview channel
-  const channel = createChannel({ page: 'preview' });
+  channel = createChannel({ page: 'preview' });
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
   });
@@ -40,9 +41,13 @@ if (isBrowser) {
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);
+}
 
-  // Provide access to external scripts
+// Provide access to external scripts if `window` is defined.
+// NOTE this is different to isBrowser, primarily for the JSDOM use case
+if (typeof window !== 'undefined') {
   window.__STORYBOOK_CLIENT_API__ = clientApi;
+  window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
 }
 
 const configApi = new ConfigApi({ ...context, clearDecorators });

diff --git a/app/polymer/src/client/preview/index.js b/app/polymer/src/client/preview/index.js
@@ -29,9 +29,10 @@ const context = { storyStore, reduxStore };
 const clientApi = new ClientApi(context);
 export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
 
+let channel;
 if (isBrowser) {
   // setup preview channel
-  const channel = createChannel({ page: 'preview' });
+  channel = createChannel({ page: 'preview' });
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
   });
@@ -42,9 +43,13 @@ if (isBrowser) {
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);
+}
 
-  // Provide access to external scripts
+// Provide access to external scripts if `window` is defined.
+// NOTE this is different to isBrowser, primarily for the JSDOM use case
+if (typeof window !== 'undefined') {
   window.__STORYBOOK_CLIENT_API__ = clientApi;
+  window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
 }
 
 const configApi = new ConfigApi({ clearDecorators, ...context });

diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.js
@@ -29,9 +29,10 @@ const context = { storyStore, reduxStore };
 const clientApi = new ClientApi(context);
 export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
 
+let channel;
 if (isBrowser) {
   // setup preview channel
-  const channel = createChannel({ page: 'preview' });
+  channel = createChannel({ page: 'preview' });
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
   });
@@ -42,9 +43,13 @@ if (isBrowser) {
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);
+}
 
-  // Provide access to external scripts
+// Provide access to external scripts if `window` is defined.
+// NOTE this is different to isBrowser, primarily for the JSDOM use case
+if (typeof window !== 'undefined') {
   window.__STORYBOOK_CLIENT_API__ = clientApi;
+  window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
 }
 
 const configApi = new ConfigApi({ clearDecorators, ...context });

diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js
@@ -46,9 +46,10 @@ const context = { storyStore, reduxStore, decorateStory };
 const clientApi = new ClientApi(context);
 export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
 
+let channel;
 if (isBrowser) {
   // create preview channel
-  const channel = createChannel({ page: 'preview' });
+  channel = createChannel({ page: 'preview' });
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
   });
@@ -59,9 +60,13 @@ if (isBrowser) {
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);
+}
 
-  // Provide access to external scripts
+// Provide access to external scripts if `window` is defined.
+// NOTE this is different to isBrowser, primarily for the JSDOM use case
+if (typeof window !== 'undefined') {
   window.__STORYBOOK_CLIENT_API__ = clientApi;
+  window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
 }
 
 const configApi = new ConfigApi({ ...context, clearDecorators });
-Original file line number
+Diff line change
@@ Expand Up / @@ -97,7 +97,7 @@ module.exports = { @@
         'no-underscore-dangle': [
           error,
           {
-            allow: ['__STORYBOOK_CLIENT_API__'],
+            allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'],
           },
         ],
       },
@@ Expand Down @@