Upgrade prettier to 2.7.1 (streamlit#5455)

.pre-commit-config.yaml

@@ -44,6 +44,7 @@ repos:
         name: Prettier
         entry: ./scripts/run_in_subdirectory.py frontend/ yarn prettier --write
         files: ^frontend/.*(.js|\.jsx|\.ts|\.tsx)$
+        exclude: /vendor/
         language: node
         pass_filenames: true
       - id: typecheck

frontend/.prettierignore

@@ -0,0 +1 @@
+vendor

frontend/.prettierrc

@@ -1,5 +1,6 @@
 {
   "endOfLine": "lf",
   "semi": false,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
 }

frontend/cypress/support/commands.js

@@ -79,12 +79,8 @@ Cypress.Commands.add("openSettings", () => {
 Cypress.Commands.add("changeTheme", theme => {
   cy.openSettings()
   cy.get('[data-baseweb="modal"] .stSelectbox').then(el => {
-    cy.wrap(el)
-      .find("input")
-      .click()
-    cy.get("li")
-      .contains(theme)
-      .click()
+    cy.wrap(el).find("input").click()
+    cy.get("li").contains(theme).click()
   })
   cy.get('[data-baseweb="modal"] [aria-label="Close"]').click()
 })

frontend/package.json

@@ -182,7 +182,7 @@
     "jest-websocket-mock": "^2.2.0",
     "marked": "^4.0.12",
     "mock-socket": "^9.0.3",
-    "prettier": "^1.18.2",
+    "prettier": "^2.7.1",
     "prop-types": "^15.7.2",
     "react-responsive-carousel": "^3.2.23",
     "react-scripts": "4.0.3",

frontend/src/App.test.tsx

@@ -186,10 +186,7 @@ describe("App", () => {
       scriptName: "scriptName",
     })
 
-    wrapper
-      .find(MainMenu)
-      .props()
-      .screencastCallback()
+    wrapper.find(MainMenu).props().screencastCallback()
 
     expect(props.screenCast.startRecording).toHaveBeenCalledWith(
       "streamlit-scriptName-date"

frontend/src/App.tsx

@@ -305,9 +305,8 @@ export class App extends PureComponent<Props, State> {
       this.closeDialog()
     }
 
-    const {
-      requestedPageScriptHash,
-    } = this.props.hostCommunication.currentState
+    const { requestedPageScriptHash } =
+      this.props.hostCommunication.currentState
     if (requestedPageScriptHash !== null) {
       this.onPageChange(requestedPageScriptHash)
       this.props.hostCommunication.onPageChanged()
@@ -438,13 +437,8 @@ export class App extends PureComponent<Props, State> {
   }
 
   handlePageConfigChanged = (pageConfig: PageConfig): void => {
-    const {
-      title,
-      favicon,
-      layout,
-      initialSidebarState,
-      menuItems,
-    } = pageConfig
+    const { title, favicon, layout, initialSidebarState, menuItems } =
+      pageConfig
 
     MetricsManager.current.enqueue("pageConfigChanged", {
       favicon,
@@ -588,7 +582,8 @@ export class App extends PureComponent<Props, State> {
           customThemeDefined,
         })
 
-        const customComponentCounter = MetricsManager.current.getAndResetCustomComponentCounter()
+        const customComponentCounter =
+          MetricsManager.current.getAndResetCustomComponentCounter()
         Object.entries(customComponentCounter).forEach(([name, count]) => {
           MetricsManager.current.enqueue("customComponentStats", {
             name,
@@ -1276,9 +1271,8 @@ export class App extends PureComponent<Props, State> {
       currentPageScriptHash,
     } = this.state
 
-    const {
-      hideSidebarNav: hostHideSidebarNav,
-    } = this.props.hostCommunication.currentState
+    const { hideSidebarNav: hostHideSidebarNav } =
+      this.props.hostCommunication.currentState
 
     const outerDivClass = classNames("stApp", {
       "streamlit-embedded": isEmbeddedInIFrame(),
@@ -1311,8 +1305,8 @@ export class App extends PureComponent<Props, State> {
           availableThemes: this.props.theme.availableThemes,
           setTheme: this.setAndSendTheme,
           addThemes: this.props.theme.addThemes,
-          sidebarChevronDownshift: this.props.hostCommunication.currentState
-            .sidebarChevronDownshift,
+          sidebarChevronDownshift:
+            this.props.hostCommunication.currentState.sidebarChevronDownshift,
           getBaseUriParts: this.getBaseUriParts,
         }}
       >

frontend/src/ThemedApp.test.tsx

@@ -62,10 +62,7 @@ describe("ThemedApp", () => {
   it("updates theme", () => {
     const wrapper = shallow(<ThemedApp />)
     // @ts-ignore
-    wrapper
-      .find(AppWithScreencast)
-      .props()
-      .theme.setTheme(darkTheme)
+    wrapper.find(AppWithScreencast).props().theme.setTheme(darkTheme)
     const updatedTheme: ThemeConfig = wrapper.find(AppWithScreencast).props()
       .theme.activeTheme
     expect(updatedTheme.name).toBe("Dark")
@@ -78,10 +75,7 @@ describe("ThemedApp", () => {
   it("does not save Auto theme", () => {
     const wrapper = shallow(<ThemedApp />)
     // @ts-ignore
-    wrapper
-      .find(AppWithScreencast)
-      .props()
-      .theme.setTheme(darkTheme)
+    wrapper.find(AppWithScreencast).props().theme.setTheme(darkTheme)
 
     wrapper
       .find(AppWithScreencast)
@@ -105,8 +99,8 @@ describe("ThemedApp", () => {
     app.props().theme.addThemes([darkTheme])
 
     wrapper.update()
-    const newThemes = wrapper.find(AppWithScreencast).props().theme
-      .availableThemes
+    const newThemes = wrapper.find(AppWithScreencast).props()
+      .theme.availableThemes
 
     // Should only have added one theme despite multiple calls adding themes.
     expect(newThemes.length).toBe(initialThemes.length + 1)

frontend/src/components/core/AppView/AppView.tsx

@@ -97,9 +97,8 @@ function AppView(props: AppViewProps): ReactElement {
     return () => window.removeEventListener("hashchange", listener, false)
   }, [])
 
-  const { wideMode, initialSidebarState, embedded } = React.useContext(
-    AppContext
-  )
+  const { wideMode, initialSidebarState, embedded } =
+    React.useContext(AppContext)
   const renderBlock = (node: BlockNode): ReactElement => (
     <StyledAppViewBlockContainer
       className="block-container"

frontend/src/components/core/AppView/styled-components.ts

@@ -75,28 +75,31 @@ export interface StyledAppViewBlockContainerProps {
   isEmbedded: boolean
 }
 
-export const StyledAppViewBlockContainer = styled.div<
-  StyledAppViewBlockContainerProps
->(({ isWideMode, isEmbedded, theme }) => {
-  const topEmbedPadding = isEmbedded ? "1rem" : "6rem"
-  const bottomEmbedPadding = isEmbedded ? "1rem" : "10rem"
-  const wideSidePadding = isWideMode ? "5rem" : theme.spacing.lg
-  return {
-    flex: 1,
-    width: theme.sizes.full,
-    paddingLeft: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
-    paddingRight: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
-    // Increase side padding, if layout = wide and we're not on mobile
-    "@media (min-width: 576px)": {
-      paddingLeft: theme.inSidebar ? theme.spacing.none : wideSidePadding,
-      paddingRight: theme.inSidebar ? theme.spacing.none : wideSidePadding,
-    },
-    paddingTop: theme.inSidebar ? theme.spacing.none : topEmbedPadding,
-    paddingBottom: theme.inSidebar ? theme.spacing.none : bottomEmbedPadding,
-    minWidth: isWideMode ? "auto" : undefined,
-    maxWidth: isWideMode ? "initial" : theme.sizes.contentMaxWidth,
-  }
-})
+export const StyledAppViewBlockContainer =
+  styled.div<StyledAppViewBlockContainerProps>(
+    ({ isWideMode, isEmbedded, theme }) => {
+      const topEmbedPadding = isEmbedded ? "1rem" : "6rem"
+      const bottomEmbedPadding = isEmbedded ? "1rem" : "10rem"
+      const wideSidePadding = isWideMode ? "5rem" : theme.spacing.lg
+      return {
+        flex: 1,
+        width: theme.sizes.full,
+        paddingLeft: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
+        paddingRight: theme.inSidebar ? theme.spacing.none : theme.spacing.lg,
+        // Increase side padding, if layout = wide and we're not on mobile
+        "@media (min-width: 576px)": {
+          paddingLeft: theme.inSidebar ? theme.spacing.none : wideSidePadding,
+          paddingRight: theme.inSidebar ? theme.spacing.none : wideSidePadding,
+        },
+        paddingTop: theme.inSidebar ? theme.spacing.none : topEmbedPadding,
+        paddingBottom: theme.inSidebar
+          ? theme.spacing.none
+          : bottomEmbedPadding,
+        minWidth: isWideMode ? "auto" : undefined,
+        maxWidth: isWideMode ? "initial" : theme.sizes.contentMaxWidth,
+      }
+    }
+  )
 
 export const StyledAppViewFooterLink = styled.a(({ theme }) => ({
   color: theme.colors.fadedText60,

frontend/src/components/core/Block/ElementNodeRenderer.tsx

@@ -90,69 +90,69 @@ import { StyledElementContainer } from "./styled-components"
 const Audio = React.lazy(() => import("src/components/elements/Audio/"))
 const Balloons = React.lazy(() => import("src/components/elements/Balloons/"))
 const Snow = React.lazy(() => import("src/components/elements/Snow/"))
-const ArrowDataFrame = React.lazy(() =>
-  import("src/components/widgets/DataFrame")
+const ArrowDataFrame = React.lazy(
+  () => import("src/components/widgets/DataFrame")
 )
-const ArrowVegaLiteChart = React.lazy(() =>
-  import("src/components/elements/ArrowVegaLiteChart/")
+const ArrowVegaLiteChart = React.lazy(
+  () => import("src/components/elements/ArrowVegaLiteChart/")
 )
 
 // BokehChart render function is sluggish. If the component is not debounced,
 // AutoSizer causes it to rerender multiple times for different widths
 // when the sidebar is toggled, which significantly slows down the app.
-const BokehChart = React.lazy(() =>
-  import("src/components/elements/BokehChart/")
+const BokehChart = React.lazy(
+  () => import("src/components/elements/BokehChart/")
 )
 const DebouncedBokehChart = debounceRender(BokehChart, 100)
 
 const DataFrame = React.lazy(() => import("src/components/elements/DataFrame"))
-const DeckGlJsonChart = React.lazy(() =>
-  import("src/components/elements/DeckGlJsonChart/")
+const DeckGlJsonChart = React.lazy(
+  () => import("src/components/elements/DeckGlJsonChart/")
 )
-const GraphVizChart = React.lazy(() =>
-  import("src/components/elements/GraphVizChart/")
+const GraphVizChart = React.lazy(
+  () => import("src/components/elements/GraphVizChart/")
 )
 const IFrame = React.lazy(() => import("src/components/elements/IFrame/"))
-const ImageList = React.lazy(() =>
-  import("src/components/elements/ImageList/")
+const ImageList = React.lazy(
+  () => import("src/components/elements/ImageList/")
 )
-const PlotlyChart = React.lazy(() =>
-  import("src/components/elements/PlotlyChart/")
+const PlotlyChart = React.lazy(
+  () => import("src/components/elements/PlotlyChart/")
 )
-const VegaLiteChart = React.lazy(() =>
-  import("src/components/elements/VegaLiteChart/")
+const VegaLiteChart = React.lazy(
+  () => import("src/components/elements/VegaLiteChart/")
 )
 const Video = React.lazy(() => import("src/components/elements/Video/"))
 
 // Lazy-load widgets.
 const Button = React.lazy(() => import("src/components/widgets/Button/"))
-const DownloadButton = React.lazy(() =>
-  import("src/components/widgets/DownloadButton/")
+const DownloadButton = React.lazy(
+  () => import("src/components/widgets/DownloadButton/")
 )
-const CameraInput = React.lazy(() =>
-  import("src/components/widgets/CameraInput")
+const CameraInput = React.lazy(
+  () => import("src/components/widgets/CameraInput")
 )
 const Checkbox = React.lazy(() => import("src/components/widgets/Checkbox/"))
-const ColorPicker = React.lazy(() =>
-  import("src/components/widgets/ColorPicker")
+const ColorPicker = React.lazy(
+  () => import("src/components/widgets/ColorPicker")
 )
 const DateInput = React.lazy(() => import("src/components/widgets/DateInput/"))
-const Multiselect = React.lazy(() =>
-  import("src/components/widgets/Multiselect/")
+const Multiselect = React.lazy(
+  () => import("src/components/widgets/Multiselect/")
 )
 const Progress = React.lazy(() => import("src/components/elements/Progress/"))
 const Spinner = React.lazy(() => import("src/components/elements/Spinner/"))
 const Radio = React.lazy(() => import("src/components/widgets/Radio/"))
 const Selectbox = React.lazy(() => import("src/components/widgets/Selectbox/"))
 const Slider = React.lazy(() => import("src/components/widgets/Slider/"))
-const FileUploader = React.lazy(() =>
-  import("src/components/widgets/FileUploader/")
+const FileUploader = React.lazy(
+  () => import("src/components/widgets/FileUploader/")
 )
 const TextArea = React.lazy(() => import("src/components/widgets/TextArea/"))
 const TextInput = React.lazy(() => import("src/components/widgets/TextInput/"))
 const TimeInput = React.lazy(() => import("src/components/widgets/TimeInput/"))
-const NumberInput = React.lazy(() =>
-  import("src/components/widgets/NumberInput/")
+const NumberInput = React.lazy(
+  () => import("src/components/widgets/NumberInput/")
 )
 
 interface ElementNodeRendererProps extends BaseBlockProps {
@@ -375,9 +375,8 @@ const RawElementNodeRenderer = (
       widgetProps.disabled = widgetProps.disabled || buttonProto.disabled
       if (buttonProto.isFormSubmitter) {
         const { formId } = buttonProto
-        const hasInProgressUpload = props.formsData.formsWithUploads.has(
-          formId
-        )
+        const hasInProgressUpload =
+          props.formsData.formsWithUploads.has(formId)
         return (
           <FormSubmitContent
             element={buttonProto}

frontend/src/components/core/MainMenu/MainMenu.test.tsx

@@ -221,10 +221,7 @@ describe("App", () => {
 
       // @ts-ignore
       const menuWrapper = mount(popoverContent(() => {}))
-      const items: any = menuWrapper
-        .find("StatefulMenu")
-        .at(1)
-        .prop("items")
+      const items: any = menuWrapper.find("StatefulMenu").at(1).prop("items")
 
       const deployOption = items.find(
         // @ts-ignore

frontend/src/components/core/MainMenu/MainMenu.tsx

@@ -281,12 +281,8 @@ const SubMenu = ({
 function MainMenu(props: Props): ReactElement {
   const isServerDisconnected = !props.isServerConnected
   const onClickDeployApp = useCallback((): void => {
-    const {
-      showDeployError,
-      closeDialog,
-      isDeployErrorModalOpen,
-      gitInfo,
-    } = props
+    const { showDeployError, closeDialog, isDeployErrorModalOpen, gitInfo } =
+      props
 
     if (!gitInfo) {
       const dialog = NoRepositoryDetected()

frontend/src/components/core/Sidebar/Sidebar.test.tsx

@@ -71,10 +71,7 @@ describe("Sidebar Component", () => {
       initialSidebarState: PageConfig.SidebarState.EXPANDED,
     })
 
-    wrapper
-      .find("StyledSidebarCloseButton")
-      .find("button")
-      .simulate("click")
+    wrapper.find("StyledSidebarCloseButton").find("button").simulate("click")
     expect(wrapper.find("Resizable").prop("isCollapsed")).toBe(true)
   })