Merge pull request #5669 from storybooks/fix/storyFn-consistency

Fix/story fn consistency
storybookjs · Feb 20, 2019 · 57e9190 · 57e9190
2 parents 8f13674 + 8e1ad0b
commit 57e9190
Show file tree

Hide file tree

Showing 35 changed files with 220 additions and 167 deletions.
diff --git a/addons/actions/src/preview/decorateAction.ts b/addons/actions/src/preview/decorateAction.ts
@@ -5,7 +5,7 @@ import { ActionOptions, DecoratorFunction, HandlerFunction } from '../models';
 
 const applyDecorators = (decorators: DecoratorFunction[], actionCallback: HandlerFunction) => {
   return (..._args: any[]) => {
-    const decorated = decorators.reduce((args, fn) => fn(args), _args);
+    const decorated = decorators.reduce((args, storyFn) => storyFn(args), _args);
     actionCallback(...decorated);
   };
 };

diff --git a/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts
@@ -56,11 +56,11 @@ const actionsSubscription = (...args: any[]) => {
   return lastSubscription;
 };
 
-export const createDecorator = (actionsFn: any) => (...args: any[]) => (story: () => any) => {
+export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
   if (root != null) {
     addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
   }
-  return story();
+  return storyFn();
 };
 
 export const withActions = createDecorator(actions);
diff --git a/addons/centered/src/html.js b/addons/centered/src/html.js
@@ -31,15 +31,15 @@ export default function(storyFn) {
   const wrapper = getWrapperDiv();
   wrapper.appendChild(inner);
 
-  const component = storyFn();
+  const element = storyFn();
 
-  if (typeof component === 'string') {
-    inner.innerHTML = component;
-  } else if (component instanceof Node) {
+  if (typeof element === 'string') {
+    inner.innerHTML = element;
+  } else if (element instanceof Node) {
     inner.innerHTML = '';
-    inner.appendChild(component);
+    inner.appendChild(element);
   } else {
-    return component;
+    return element;
   }
 
   return wrapper;

diff --git a/addons/events/src/index.js b/addons/events/src/index.js
@@ -39,9 +39,9 @@ export default options => {
   if (options.children) {
     return WithEvents(options);
   }
-  return story => {
+  return storyFn => {
     addEvents(options);
-    return story();
+    return storyFn();
   };
 };
 

diff --git a/addons/jest/src/index.js b/addons/jest/src/index.js
@@ -38,25 +38,25 @@ export const withTests = userOptions => {
 
   return (...args) => {
     if (typeof args[0] === 'string') {
-      return deprecate((story, { kind }) => {
-        emitAddTests({ kind, story, testFiles: args, options });
+      return deprecate((storyFn, { kind }) => {
+        emitAddTests({ kind, story: storyFn, testFiles: args, options });
 
-        return story();
+        return storyFn();
       }, 'Passing component filenames to the `@storybook/addon-jest` via `withTests` is deprecated. Instead, use the `jest` story parameter');
     }
 
-    const [story, { kind, parameters = {} }] = args;
+    const [storyFn, { kind, parameters = {} }] = args;
     let { jest: testFiles } = parameters;
 
     if (typeof testFiles === 'string') {
       testFiles = [testFiles];
     }
 
     if (testFiles && !testFiles.disable) {
-      emitAddTests({ kind, story, testFiles, options });
+      emitAddTests({ kind, story: storyFn, testFiles, options });
     }
 
-    return story();
+    return storyFn();
   };
 };
 

diff --git a/addons/links/src/preview.js b/addons/links/src/preview.js
@@ -55,8 +55,8 @@ const off = () => {
   }
 };
 
-export const withLinks = story => {
+export const withLinks = storyFn => {
   on();
   addons.getChannel().once(STORY_CHANGED, off);
-  return story();
+  return storyFn();
 };
diff --git a/addons/storyshots/storyshots-core/src/api/index.js b/addons/storyshots/storyshots-core/src/api/index.js
@@ -48,7 +48,7 @@ function testStorySnapshots(options = {}) {
     .filter(({ name }) => (storyNameRegex ? name.match(storyNameRegex) : true))
     .filter(({ kind }) => (storyKindRegex ? kind.match(storyKindRegex) : true))
     .reduce((acc, item) => {
-      const { kind, story: render, parameters } = item;
+      const { kind, storyFn: render, parameters } = item;
       const existing = acc.find(i => i.kind === kind);
       const { fileName } = item.parameters;
 

diff --git a/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.js b/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.js
@@ -13,9 +13,9 @@ function bootstrapADocumentAndReturnANode() {
 function makeSureThatResultIsRenderedSomehow({ context, result, rootElement }) {
   if (!rootElement.firstChild) {
     riotForStorybook.render({
-      story: () => result,
+      storyFn: () => result,
       selectedKind: context.kind,
-      selectedStory: context.story,
+      selectedStory: context.name,
     });
   }
 }

diff --git a/addons/storysource/src/preview.js b/addons/storysource/src/preview.js
@@ -17,8 +17,8 @@ function setStorySource(context, source, locationsMap) {
 }
 
 export function withStorySource(source, locationsMap = {}) {
-  return (story, context) => {
+  return (storyFn, context) => {
     setStorySource(context, source, locationsMap);
-    return story();
+    return storyFn();
   };
 }
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
@@ -4,7 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './components/app.component';
 import { STORY } from './app.token';
-import { NgModuleMetadata, IGetStory, NgStory } from './types';
+import { NgModuleMetadata, IStoryFn, NgStory } from './types';
 
 let platform: any = null;
 let promises: Array<Promise<NgModuleRef<any>>> = [];
@@ -40,8 +40,8 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
   })(componentClass);
 };
 
-const initModule = (currentStory: IGetStory) => {
-  const storyObj = currentStory();
+const initModule = (storyFn: IStoryFn) => {
+  const storyObj = storyFn();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   let AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
@@ -80,6 +80,6 @@ const draw = (newModule: DynamicComponentType): void => {
   }
 };
 
-export const renderNgApp = (story: IGetStory) => {
-  draw(initModule(story));
+export const renderNgApp = (storyFn: IStoryFn) => {
+  draw(initModule(storyFn));
 };
diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts
@@ -19,4 +19,4 @@ export interface NgStory {
   styles?: string[];
 }
 
-export type IGetStory = () => NgStory;
+export type IStoryFn = () => NgStory;
diff --git a/app/angular/src/client/preview/render.js b/app/angular/src/client/preview/render.js
@@ -1,6 +1,6 @@
 import { renderNgApp } from './angular/helpers';
 
-export default function render({ story, showMain }) {
+export default function render({ storyFn, showMain }) {
   showMain();
-  renderNgApp(story);
+  renderNgApp(storyFn);
 }
diff --git a/app/ember/src/client/preview/render.js b/app/ember/src/client/preview/render.js
@@ -50,8 +50,15 @@ function render(options, el) {
     });
 }
 
-export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
-  const element = story();
+export default function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // forceRender,
+}) {
+  const element = storyFn();
 
   if (!element) {
     showError({

diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js
@@ -4,25 +4,25 @@ import { stripIndents } from 'common-tags';
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
-  story,
+  storyFn,
   selectedKind,
   selectedStory,
   showMain,
   showError,
   forceRender,
 }) {
-  const component = story();
+  const element = storyFn();
 
   showMain();
-  if (typeof component === 'string') {
-    rootElement.innerHTML = component;
-  } else if (component instanceof Node) {
+  if (typeof element === 'string') {
+    rootElement.innerHTML = element;
+  } else if (element instanceof Node) {
     if (forceRender === true) {
       return;
     }
 
     rootElement.innerHTML = '';
-    rootElement.appendChild(component);
+    rootElement.appendChild(element);
   } else {
     showError({
       title: `Expecting an HTML snippet or DOM node from the story: "${selectedStory}" of "${selectedKind}".`,

diff --git a/app/marko/src/client/preview/render.js b/app/marko/src/client/preview/render.js
@@ -4,8 +4,15 @@ import { stripIndents } from 'common-tags';
 const rootEl = document.getElementById('root');
 let currLoadedComponent = null; // currently loaded marko widget!
 
-export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
-  const element = story();
+export default function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // forceRender,
+}) {
+  const element = storyFn();
 
   // We need to unmount the existing set of components in the DOM node.
   if (currLoadedComponent) {

diff --git a/app/mithril/src/client/preview/render.js b/app/mithril/src/client/preview/render.js
@@ -6,8 +6,15 @@ import { stripIndents } from 'common-tags';
 
 const rootEl = document.getElementById('root');
 
-export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
-  const element = story();
+export default function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // forceRender,
+}) {
+  const element = storyFn();
 
   if (!element) {
     const error = {

diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js
@@ -5,16 +5,16 @@ import { html, render, TemplateResult } from 'lit-html';
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
-  story,
+  storyFn,
   selectedKind,
   selectedStory,
   showMain,
   showError,
   forceRender,
 }) {
-  const component = story();
+  const element = storyFn();
 
-  if (!component) {
+  if (!element) {
     showError({
       title: `Expecting a Polymer component from the story: "${selectedStory}" of "${selectedKind}".`,
       description: stripIndents`
@@ -26,18 +26,18 @@ export default function renderMain({
   }
 
   showMain();
-  if (typeof component === 'string') {
-    rootElement.innerHTML = component;
-  } else if (component instanceof TemplateResult) {
+  if (typeof element === 'string') {
+    rootElement.innerHTML = element;
+  } else if (element instanceof TemplateResult) {
     // `render` stores the TemplateInstance in the Node and tries to update based on that.
     // Since we reuse `rootElement` for all stories, remove the stored instance first.
     // But forceRender means that it's the same story, so we want too keep the state in that case.
     if (!forceRender) {
       render(html``, rootElement);
     }
-    render(component, rootElement);
+    render(element, rootElement);
   } else {
     rootElement.innerHTML = '';
-    rootElement.appendChild(component);
+    rootElement.appendChild(element);
   }
 }
diff --git a/app/preact/src/client/preview/render.js b/app/preact/src/client/preview/render.js
@@ -6,8 +6,15 @@ import { stripIndents } from 'common-tags';
 let renderedStory;
 const rootElement = document ? document.getElementById('root') : null;
 
-export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
-  const element = story();
+export default function renderMain({
+  storyFn,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  // forceRender,
+}) {
+  const element = storyFn();
 
   if (!element) {
     showError({

diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js
@@ -14,14 +14,14 @@ function render(node, el) {
 }
 
 export default function renderMain({
-  story,
+  storyFn,
   selectedKind,
   selectedStory,
   showMain,
   showError,
   forceRender,
 }) {
-  const element = story();
+  const element = storyFn();
 
   if (!element) {
     showError({

diff --git a/app/riot/src/client/preview/render.js b/app/riot/src/client/preview/render.js
@@ -4,7 +4,7 @@ import { unregister } from 'riot';
 import { render as renderRiot } from './rendering';
 
 export default function renderMain({
-  story,
+  storyFn,
   selectedKind,
   selectedStory,
   showMain = () => {},
@@ -15,15 +15,16 @@ export default function renderMain({
   const rootElement = document.getElementById('root');
   rootElement.innerHTML = '';
   rootElement.dataset.is = 'root';
-  const component = story();
-  const rendered = renderRiot(component);
-  if (!rendered)
+  const element = storyFn();
+  const rendered = renderRiot(element);
+  if (!rendered) {
     showError({
       title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`,
       description: stripIndents`
         Did you forget to return the component snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
       `,
     });
+  }
   return rendered;
 }
diff --git a/app/svelte/src/client/preview/render.js b/app/svelte/src/client/preview/render.js
@@ -42,7 +42,7 @@ function mountView({ Component, target, data, on, Wrapper, WrapperData }) {
 }
 
 export default function render({
-  story,
+  storyFn,
   selectedKind,
   selectedStory,
   showMain,
@@ -58,7 +58,7 @@ export default function render({
     on,
     Wrapper,
     WrapperData,
-  } = story();
+  } = storyFn();
 
   cleanUpPreviousStory();