refactor: rewrite some code to avoid anonymous fct in JS compiled code

It looks like TS compiler does not generate the same as babel one and so some code must be rewrite in order to "force" TS compiler to generate JS code that is compatible with SB codebase (and that match tests snapshots).
storybookjs · Apr 5, 2019 · 538ee0f · 538ee0f
1 parent c15dba4
commit 538ee0f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/lib/components/src/ActionBar/ActionBar.tsx b/lib/components/src/ActionBar/ActionBar.tsx
@@ -53,12 +53,21 @@ export interface ActionBarProps {
   actionItems: ActionItem[];
 }
 
-export const ActionBar: FunctionComponent<ActionBarProps> = ({ actionItems, ...props }) => (
-  <Container {...props}>
-    {actionItems.map(({ title, onClick }, index: number) => (
-      <ActionButton key={index} onClick={onClick}>
-        {title}
-      </ActionButton>
-    ))}
-  </Container>
-);
+// Need to define ActionBar using old fashioned `function ActionBar` to avoid TS compiler to
+// generate an anonymous function instead of naming it ActionBar...
+// See https://github.com/storybooks/storybook/pull/6095#issuecomment-477480930
+// tslint:disable-next-line:no-shadowed-variable
+export const ActionBar: FunctionComponent<ActionBarProps> = function ActionBar({
+  actionItems,
+  ...props
+}) {
+  return (
+    <Container {...props}>
+      {actionItems.map(({ title, onClick }, index: number) => (
+        <ActionButton key={index} onClick={onClick}>
+          {title}
+        </ActionButton>
+      ))}
+    </Container>
+  );
+};
diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx
@@ -1,7 +1,7 @@
 // Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
 // Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
 
-import React, { Fragment, FunctionComponent } from 'react';
+import React, { Fragment, FunctionComponent, ReactNode } from 'react';
 import { styled, Global } from '@storybook/theming';
 
 import SimpleBar from 'simplebar-react';
@@ -38,19 +38,25 @@ export interface ScrollAreaProps {
   className?: string;
 }
 
-export const ScrollArea: FunctionComponent<ScrollAreaProps> = ({
+// Need to define ScrollArea using old fashioned `function ScrollArea` to avoid TS compiler to
+// generate an anonymous function instead of naming it ScrollArea...
+// See https://github.com/storybooks/storybook/pull/6095#issuecomment-477480930
+// tslint:disable-next-line:no-shadowed-variable
+export const ScrollArea: FunctionComponent<ScrollAreaProps> = function ScrollArea({
   children,
   vertical,
   horizontal,
   ...props
-}) => (
-  <Fragment>
-    <Global styles={getScrollAreaStyles} />
-    <Scroll vertical={vertical} horizontal={horizontal} {...props}>
-      {children}
-    </Scroll>
-  </Fragment>
-);
+}) {
+  return (
+    <Fragment>
+      <Global styles={getScrollAreaStyles} />
+      <Scroll vertical={vertical} horizontal={horizontal} {...props}>
+        {children}
+      </Scroll>
+    </Fragment>
+  );
+};
 
 ScrollArea.defaultProps = {
   horizontal: false,

diff --git a/lib/components/src/placeholder/placeholder.tsx b/lib/components/src/placeholder/placeholder.tsx
@@ -14,7 +14,11 @@ const Message = styled.div`
   font-size: ${props => props.theme.typography.size.s2 - 1}px;
 `;
 
-export const Placeholder: FunctionComponent = ({ children, ...props }) => {
+// Need to define Placeholder using old fashioned `function Placeholder` to avoid TS compiler to
+// generate an anonymous function instead of naming it Placeholder...
+// See https://github.com/storybooks/storybook/pull/6095#issuecomment-477480930
+// tslint:disable-next-line:no-shadowed-variable
+export const Placeholder: FunctionComponent = function Placeholder({ children, ...props }) {
   const [title, desc] = Children.toArray(children);
   return (
     <Message {...props}>