Prettier

Author: Brian Vaughn

fixtures/devtools/regression/server.js

@@ -5,7 +5,7 @@ const http = require('http');
 const serveStatic = require('serve-static');
 
 // Serve fixtures folder
-const serve = serveStatic(__dirname, { index: 'index.html' });
+const serve = serveStatic(__dirname, {index: 'index.html'});
 
 // Create server
 const server = http.createServer(function onRequest(req, res) {

fixtures/devtools/regression/shared.js

@@ -10,7 +10,7 @@ const minor =
   pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
 
 // Convenience wrapper to organize API features in DevTools.
-function Feature({ children, label, version }) {
+function Feature({children, label, version}) {
   return (
     <div className="Feature">
       <div className="FeatureHeader">
@@ -60,10 +60,10 @@ switch (major) {
         }
       case 6:
         // memo
-        function LabelComponent({ label }) {
+        function LabelComponent({label}) {
           return <label>{label}</label>;
         }
-        const AnonymousMemoized = React.memo(({ label }) => (
+        const AnonymousMemoized = React.memo(({label}) => (
           <label>{label}</label>
         ));
         const Memoized = React.memo(LabelComponent);
@@ -91,8 +91,8 @@ switch (major) {
           getResourceKey
         );
         class Suspending extends React.Component {
-          state = { useSuspense: false };
-          useSuspense = () => this.setState({ useSuspense: true });
+          state = {useSuspense: false};
+          useSuspense = () => this.setState({useSuspense: true});
           render() {
             if (this.state.useSuspense) {
               const text = Resource.read(['loaded', 2000]);
@@ -141,9 +141,9 @@ switch (major) {
       case 4:
         // unstable_Profiler
         class ProfilerChild extends React.Component {
-          state = { count: 0 };
+          state = {count: 0};
           incrementCount = () =>
-            this.setState(prevState => ({ count: prevState.count + 1 }));
+            this.setState(prevState => ({count: prevState.count + 1}));
           render() {
             return (
               <div>
@@ -159,8 +159,7 @@ switch (major) {
           <Feature
             key="unstable_Profiler"
             label="unstable_Profiler"
-            version="16.4+"
-          >
+            version="16.4+">
             <Profiler id="count" onRender={onRender}>
               <div>
                 <ProfilerChild />
@@ -230,8 +229,7 @@ switch (major) {
           <Feature
             key="AsyncMode/ConcurrentMode"
             label="AsyncMode/ConcurrentMode"
-            version="16.3+"
-          >
+            version="16.3+">
             <ConcurrentMode>
               <div>
                 unstable_AsyncMode was added in 16.3, renamed to
@@ -271,13 +269,13 @@ function Even() {
 
 // Simple stateful app shared by all React versions
 class SimpleApp extends React.Component {
-  state = { count: 0 };
+  state = {count: 0};
   incrementCount = () => {
-    const updaterFn = prevState => ({ count: prevState.count + 1 });
+    const updaterFn = prevState => ({count: prevState.count + 1});
     trace('Updating count', performance.now(), () => this.setState(updaterFn));
   };
   render() {
-    const { count } = this.state;
+    const {count} = this.state;
     return (
       <div>
         {count % 2 === 0 ? (
@@ -299,7 +297,7 @@ apps.push(
 );
 
 // This component, with the version prop, helps organize DevTools at a glance.
-function TopLevelWrapperForDevTools({ version }) {
+function TopLevelWrapperForDevTools({version}) {
   let header = <h1>React {version}</h1>;
   if (version.includes('canary')) {
     const commitSha = version.match(/.+canary-(.+)/)[1];

fixtures/devtools/shell/app/DeeplyNestedComponents/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 
 function wrapWithHoc(Component, index) {
   function HOC() {

fixtures/devtools/shell/app/EditableProps/index.js

@@ -13,20 +13,20 @@ import React, {
   useState,
 } from 'react';
 
-const initialData = { foo: 'FOO', bar: 'BAR' };
+const initialData = {foo: 'FOO', bar: 'BAR'};
 
 function reducer(state, action) {
   switch (action.type) {
     case 'swap':
-      return { foo: state.bar, bar: state.foo };
+      return {foo: state.bar, bar: state.foo};
     default:
       throw new Error();
   }
 }
 
-type StatefulFunctionProps = {| name: string |};
+type StatefulFunctionProps = {|name: string|};
 
-function StatefulFunction({ name }: StatefulFunctionProps) {
+function StatefulFunction({name}: StatefulFunctionProps) {
   const [count, updateCount] = useState(0);
   const debouncedCount = useDebounce(count, 1000);
   const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
@@ -35,7 +35,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
 
   const [data, dispatch] = useReducer(reducer, initialData);
   const handleUpdateReducerClick = useCallback(
-    () => dispatch({ type: 'swap' }),
+    () => dispatch({type: 'swap'}),
     []
   );
 
@@ -60,8 +60,8 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
 const BoolContext = createContext(true);
 BoolContext.displayName = 'BoolContext';
 
-type Props = {| name: string, toggle: boolean |};
-type State = {| cities: Array<string>, state: string |};
+type Props = {|name: string, toggle: boolean|};
+type State = {|cities: Array<string>, state: string|};
 
 class StatefulClass extends Component<Props, State> {
   static contextType = BoolContext;
@@ -71,7 +71,7 @@ class StatefulClass extends Component<Props, State> {
     state: 'California',
   };
 
-  handleChange = ({ target }) =>
+  handleChange = ({target}) =>
     this.setState({
       state: target.value,
     });
@@ -94,8 +94,8 @@ class StatefulClass extends Component<Props, State> {
 const MemoizedStatefulClass = memo(StatefulClass);
 const MemoizedStatefulFunction = memo(StatefulFunction);
 
-const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(
-  ({ name }, ref) => {
+const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
+  ({name}, ref) => {
     const [count, updateCount] = useState(0);
     const debouncedCount = useDebounce(count, 1000);
     const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [

fixtures/devtools/shell/app/Hydration/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useDebugValue, useState } from 'react';
+import React, {Fragment, useDebugValue, useState} from 'react';
 
 const div = document.createElement('div');
 const exmapleFunction = () => {};
@@ -110,7 +110,7 @@ export default function Hydration() {
   );
 }
 
-function DehydratableProps({ array, object }: any) {
+function DehydratableProps({array, object}: any) {
   return (
     <ul>
       <li>array: {JSON.stringify(array, null, 2)}</li>

fixtures/devtools/shell/app/Iframe/index.js

@@ -1,6 +1,6 @@
 /** @flow */
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 
 export default function Iframe() {
@@ -16,7 +16,7 @@ export default function Iframe() {
   );
 }
 
-const iframeStyle = { border: '2px solid #eee', height: 80 };
+const iframeStyle = {border: '2px solid #eee', height: 80};
 
 function Frame(props) {
   const [element, setElement] = React.useState(null);

fixtures/devtools/shell/app/InspectableElements/Contexts.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { createContext, Component, Fragment, useContext } from 'react';
+import React, {createContext, Component, Fragment, useContext} from 'react';
 import PropTypes from 'prop-types';
 
 function someNamedFunction() {}
@@ -10,7 +10,7 @@ const contextData = {
   bool: true,
   func: someNamedFunction,
   number: 123,
-  object: { outer: { inner: {} } },
+  object: {outer: {inner: {}}},
   string: 'abc',
   symbol: Symbol.for('symbol'),
   null: null,

fixtures/devtools/shell/app/InspectableElements/CustomHooks.js

@@ -17,7 +17,7 @@ const object = {
   null: null,
   undefined: undefined,
   array: ['a', 'b', 'c'],
-  object: { foo: 1, bar: 2, baz: 3 },
+  object: {foo: 1, bar: 2, baz: 3},
 };
 
 function useNestedInnerHook() {

fixtures/devtools/shell/app/InspectableElements/InspectableElements.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';

fixtures/devtools/shell/app/InspectableElements/NestedProps.js

@@ -22,7 +22,7 @@ export default function ObjectProps() {
       }}
       array={['first', 'second', 'third']}
       objectInArray={[object]}
-      arrayInObject={{ array: ['first', 'second', 'third'] }}
+      arrayInObject={{array: ['first', 'second', 'third']}}
       deepObject={{
         // Known limitation: we won't go deeper than several levels.
         // In the future, we might offer a way to request deeper access on demand.

fixtures/devtools/shell/app/InteractionTracing/index.js

@@ -1,7 +1,7 @@
 // @flow
 
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {
   unstable_trace as trace,
   unstable_wrap as wrap,
@@ -11,54 +11,66 @@ export default function InteractionTracing() {
   const [count, setCount] = useState(0);
   const [shouldCascade, setShouldCascade] = useState(false);
 
-  const handleUpdate = useCallback(() => {
-    trace('count', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          setCount(count + 1);
-        }),
-        count * 100
-      );
-    });
-  }, [count]);
-
-  const handleCascadingUpdate = useCallback(() => {
-    trace('cascade', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          batchedUpdates(() => {
+  const handleUpdate = useCallback(
+    () => {
+      trace('count', performance.now(), () => {
+        setTimeout(
+          wrap(() => {
             setCount(count + 1);
-            setShouldCascade(true);
-          });
-        }),
-        count * 100
-      );
-    });
-  }, [count]);
+          }),
+          count * 100
+        );
+      });
+    },
+    [count]
+  );
 
-  const handleMultiple = useCallback(() => {
-    trace('first', performance.now(), () => {
-      trace('second', performance.now(), () => {
+  const handleCascadingUpdate = useCallback(
+    () => {
+      trace('cascade', performance.now(), () => {
         setTimeout(
           wrap(() => {
-            setCount(count + 1);
+            batchedUpdates(() => {
+              setCount(count + 1);
+              setShouldCascade(true);
+            });
           }),
           count * 100
         );
       });
-    });
-  }, [count]);
+    },
+    [count]
+  );
 
-  useEffect(() => {
-    if (shouldCascade) {
-      setTimeout(
-        wrap(() => {
-          setShouldCascade(false);
-        }),
-        count * 100
-      );
-    }
-  }, [count, shouldCascade]);
+  const handleMultiple = useCallback(
+    () => {
+      trace('first', performance.now(), () => {
+        trace('second', performance.now(), () => {
+          setTimeout(
+            wrap(() => {
+              setCount(count + 1);
+            }),
+            count * 100
+          );
+        });
+      });
+    },
+    [count]
+  );
+
+  useEffect(
+    () => {
+      if (shouldCascade) {
+        setTimeout(
+          wrap(() => {
+            setShouldCascade(false);
+          }),
+          count * 100
+        );
+      }
+    },
+    [count, shouldCascade]
+  );
 
   return (
     <Fragment>

fixtures/devtools/shell/app/PriorityLevels/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, {Fragment, useCallback, useState} from 'react';
 import {
   unstable_IdlePriority as IdlePriority,
   unstable_LowPriority as LowPriority,

fixtures/devtools/shell/app/ReactNativeWeb/index.js

@@ -1,7 +1,7 @@
 // @flow
 
-import React, { Fragment, useState } from 'react';
-import { Button, Text, View } from 'react-native-web';
+import React, {Fragment, useState} from 'react';
+import {Button, Text, View} from 'react-native-web';
 
 export default function ReactNativeWeb() {
   const [backgroundColor, setBackgroundColor] = useState('blue');
@@ -17,13 +17,13 @@ export default function ReactNativeWeb() {
             '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
           }
         </Text>
-        <Text style={{ textAlign: 'left' }}>
+        <Text style={{textAlign: 'left'}}>
           left left left left left left left left left left left left left left
           left
         </Text>
         <Button
           onPress={toggleColor}
-          style={{ backgroundColor }}
+          style={{backgroundColor}}
           title={`Switch background color to "${
             backgroundColor === 'purple' ? 'green' : 'purple'
           }"`}