Update Prettier (#1124)

* Update Prettier * Add quoteProps to prettier config
Shopify · Oct 16, 2019 · 5cfa5a8 · 5cfa5a8
1 parent 8e90e1d
commit 5cfa5a8
Show file tree

Hide file tree

Showing 46 changed files with 689 additions and 789 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "arrowParens": "avoid",
   "singleQuote": true,
   "bracketSpacing": false,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "quoteProps": "as-needed"
 }
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "jest-transform-graphql": "^2.1.0",
     "lerna": "^2.9.0",
     "plop": "^2.0.0",
-    "prettier": "^1.14.0",
+    "prettier": "~1.17.1",
     "puppeteer": "^1.20.0",
     "react": "16.9.0-alpha.0",
     "react-apollo": "^3.1.2",

diff --git a/packages/address/src/AddressFormatter.ts b/packages/address/src/AddressFormatter.ts
@@ -41,17 +41,17 @@ export default class AddressFormatter {
   }
 
   /* Returns the address ordered in an array based based on the country code
-  * Eg.:
-  *   [
-  *     'Shopify',
-  *     'First Name Last Name',
-  *     'Address 1',
-  *     'address2',
-  *     'Montréal',
-  *     'Canada Quebec H2J 4B7',
-  *     '514 444 3333'
-  *   ]
-  */
+   * Eg.:
+   *   [
+   *     'Shopify',
+   *     'First Name Last Name',
+   *     'Address 1',
+   *     'address2',
+   *     'Montréal',
+   *     'Canada Quebec H2J 4B7',
+   *     '514 444 3333'
+   *   ]
+   */
   async format(address: Address): Promise<string[]> {
     const country = await this.getCountry(address.country);
     const layout = country.formatting.show || DEFAULT_SHOW_LAYOUT;
@@ -61,17 +61,17 @@ export default class AddressFormatter {
   }
 
   /* Returns an array that shows how to order fields based on the country code
-  * Eg.:
-  *   [
-  *     ['company'],
-  *     ['firstName', 'lastName'],
-  *     ['address1'],
-  *     ['address2'],
-  *     ['city'],
-  *     ['country', 'province', 'zip'],
-  *     ['phone']
-  *   ]
-  */
+   * Eg.:
+   *   [
+   *     ['company'],
+   *     ['firstName', 'lastName'],
+   *     ['address1'],
+   *     ['address2'],
+   *     ['city'],
+   *     ['country', 'province', 'zip'],
+   *     ['phone']
+   *   ]
+   */
   async getOrderedFields(countryCode: string): Promise<FieldName[][]> {
     const country = await this.getCountry(countryCode);
 

diff --git a/packages/async/src/types.ts b/packages/async/src/types.ts
@@ -26,5 +26,5 @@ export interface WindowWithRequestIdleCallback {
     callback: RequestIdleCallback,
     opts?: RequestIdleCallbackOptions,
   ): RequestIdleCallbackHandle;
-  cancelIdleCallback: ((handle: RequestIdleCallbackHandle) => void);
+  cancelIdleCallback: (handle: RequestIdleCallbackHandle) => void;
 }
diff --git a/packages/enzyme-utilities/src/test/fixtures/Toggle.tsx b/packages/enzyme-utilities/src/test/fixtures/Toggle.tsx
@@ -15,23 +15,20 @@ export function Toggle({onToggle, deferred}: Props) {
   const [active, setActive] = React.useState(true);
   const statusMarkup = active ? 'active' : 'inactive';
 
-  const handleClick = React.useCallback(
-    () => {
-      if (deferred) {
-        return new Promise(resolve => {
-          setTimeout(() => {
-            setActive(!active);
-            onToggle();
-            resolve();
-          }, DEFERRED_TIMEOUT);
-        });
-      }
-      setActive(!active);
-      onToggle();
-      return Promise.resolve();
-    },
-    [active, deferred, onToggle],
-  );
+  const handleClick = React.useCallback(() => {
+    if (deferred) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          setActive(!active);
+          onToggle();
+          resolve();
+        }, DEFERRED_TIMEOUT);
+      });
+    }
+    setActive(!active);
+    onToggle();
+    return Promise.resolve();
+  }, [active, deferred, onToggle]);
 
   return (
     <button type="button" onClick={handleClick}>

diff --git a/packages/graphql-persisted/src/tests/utilities.ts b/packages/graphql-persisted/src/tests/utilities.ts
@@ -40,7 +40,7 @@ export function executeOnce(link: ApolloLink, query: DocumentNode) {
   });
 }
 
-type BeforeResult = ((operation: Operation) => void);
+type BeforeResult = (operation: Operation) => void;
 type Result = {data: object} | {errors: {message: string}[]} | Error;
 type MultiResult =
   | Result

diff --git a/packages/graphql-testing/src/links/tests/utilities.ts b/packages/graphql-testing/src/links/tests/utilities.ts
@@ -40,7 +40,7 @@ export function executeOnce(link: ApolloLink, query: DocumentNode) {
   });
 }
 
-type BeforeResult = ((operation: Operation) => void);
+type BeforeResult = (operation: Operation) => void;
 
 export class SimpleLink extends ApolloLink {
   constructor(

diff --git a/packages/koa-performance/src/test/middleware.test.ts b/packages/koa-performance/src/test/middleware.test.ts
@@ -485,7 +485,9 @@ describe('client metrics middleware', () => {
 type DeepPartial<T> = {
   [K in keyof T]?: T[K] extends any[]
     ? T[K]
-    : T[K] extends object ? DeepPartial<T[K]> : T[K]
+    : T[K] extends object
+    ? DeepPartial<T[K]>
+    : T[K]
 };
 
 function createBody({

diff --git a/packages/react-async/src/component.tsx b/packages/react-async/src/component.tsx
@@ -143,16 +143,13 @@ export function createAsyncComponent<
 
     const customPreload = useCustomPreload(props);
 
-    return useCallback(
-      () => {
-        load();
+    return useCallback(() => {
+      load();
 
-        if (customPreload) {
-          customPreload();
-        }
-      },
-      [load, customPreload],
-    );
+      if (customPreload) {
+        customPreload();
+      }
+    }, [load, customPreload]);
   }
 
   function usePrefetch(props: PrefetchOptions) {
@@ -162,16 +159,13 @@ export function createAsyncComponent<
 
     const customPrefetch = useCustomPrefetch(props);
 
-    return useCallback(
-      () => {
-        load();
+    return useCallback(() => {
+      load();
 
-        if (customPrefetch) {
-          customPrefetch();
-        }
-      },
-      [load, customPrefetch],
-    );
+      if (customPrefetch) {
+        customPrefetch();
+      }
+    }, [load, customPrefetch]);
   }
 
   function useKeepFresh(props: KeepFreshOptions) {
@@ -181,16 +175,13 @@ export function createAsyncComponent<
 
     const customKeepFresh = useCustomKeepFresh(props);
 
-    return useCallback(
-      () => {
-        load();
+    return useCallback(() => {
+      load();
 
-        if (customKeepFresh) {
-          customKeepFresh();
-        }
-      },
-      [load, customKeepFresh],
-    );
+      if (customKeepFresh) {
+        customKeepFresh();
+      }
+    }, [load, customKeepFresh]);
   }
 
   function Preload(options: PreloadOptions) {
@@ -203,12 +194,9 @@ export function createAsyncComponent<
   function Prefetch(options: PrefetchOptions) {
     const prefetch = usePrefetch(options);
 
-    useEffect(
-      () => {
-        prefetch();
-      },
-      [prefetch],
-    );
+    useEffect(() => {
+      prefetch();
+    }, [prefetch]);
 
     return null;
   }
@@ -314,16 +302,13 @@ function Loader<T>({
     [load],
   );
 
-  useEffect(
-    () => {
-      if (defer == null || defer === DeferTiming.Mount) {
-        load();
-      } else if (typeof defer === 'function' && defer(props)) {
-        load();
-      }
-    },
-    [defer, load, props],
-  );
+  useEffect(() => {
+    if (defer == null || defer === DeferTiming.Mount) {
+      load();
+    } else if (typeof defer === 'function' && defer(props)) {
+      load();
+    }
+  }, [defer, load, props]);
 
   if (typeof defer === 'function') {
     return null;

diff --git a/packages/react-async/src/hooks.ts b/packages/react-async/src/hooks.ts
@@ -54,43 +54,39 @@ export function useAsync<T>(
   resolver: Resolver<T>,
   {assets, scripts = assets, styles = assets, immediate = true}: Options = {},
 ) {
-  const [value, setValue] = useState<T | Error | null>(
-    () =>
-      immediate || typeof window !== 'undefined' ? resolver.resolved : null,
+  const [value, setValue] = useState<T | Error | null>(() =>
+    immediate || typeof window !== 'undefined' ? resolver.resolved : null,
   );
 
   const mounted = useMountedRef();
 
-  const load = useCallback(
-    async (): Promise<T | Error> => {
-      if (value != null) {
-        return value;
+  const load = useCallback(async (): Promise<T | Error> => {
+    if (value != null) {
+      return value;
+    }
+
+    try {
+      const resolved = await resolver.resolve();
+
+      if (mounted.current) {
+        // It's important to use the function form of setValue here.
+        // Resolved is going to be a function in most cases, since it's
+        // a React component. If you do not set it using the function form,
+        // React treats the component as the function that returns state,
+        // so it sets state with the result of manually calling the component
+        // (so, usually JSX).
+        setValue(() => resolved);
       }
 
-      try {
-        const resolved = await resolver.resolve();
-
-        if (mounted.current) {
-          // It's important to use the function form of setValue here.
-          // Resolved is going to be a function in most cases, since it's
-          // a React component. If you do not set it using the function form,
-          // React treats the component as the function that returns state,
-          // so it sets state with the result of manually calling the component
-          // (so, usually JSX).
-          setValue(() => resolved);
-        }
-
-        return resolved;
-      } catch (error) {
-        if (mounted.current) {
-          setValue(error);
-        }
-
-        return error;
+      return resolved;
+    } catch (error) {
+      if (mounted.current) {
+        setValue(error);
       }
-    },
-    [mounted, resolver, value],
-  );
+
+      return error;
+    }
+  }, [mounted, resolver, value]);
 
   const {id} = resolver;
 
@@ -113,9 +109,12 @@ export function useAsyncAsset(
 ) {
   const async = useContext(AsyncAssetContext);
 
-  useServerEffect(() => {
-    if (async && id) {
-      async.markAsUsed(id, {scripts, styles});
-    }
-  }, async ? async.effect : undefined);
+  useServerEffect(
+    () => {
+      if (async && id) {
+        async.markAsUsed(id, {scripts, styles});
+      }
+    },
+    async ? async.effect : undefined,
+  );
 }
diff --git a/packages/react-async/src/provider.tsx b/packages/react-async/src/provider.tsx
@@ -47,12 +47,9 @@ export function createAsyncContext<Value>({
       assets: AssetTiming.Immediate,
     });
 
-    useEffect(
-      () => {
-        load();
-      },
-      [load],
-    );
+    useEffect(() => {
+      load();
+    }, [load]);
 
     return <Context.Provider value={resolved} {...props} />;
   }
@@ -76,12 +73,9 @@ export function createAsyncContext<Value>({
   function Prefetch() {
     const preload = usePreload();
 
-    useEffect(
-      () => {
-        preload();
-      },
-      [preload],
-    );
+    useEffect(() => {
+      preload();
+    }, [preload]);
 
     return null;
   }

diff --git a/packages/react-cookie/src/hooks.ts b/packages/react-cookie/src/hooks.ts
@@ -20,8 +20,8 @@ export function useCookie(
     throw new Error(NO_MANAGER_ERROR);
   }
 
-  const [cookie, setCookieValue] = useState(
-    () => (manager ? manager.getCookie(key) : undefined),
+  const [cookie, setCookieValue] = useState(() =>
+    manager ? manager.getCookie(key) : undefined,
   );
 
   const setCookie = useCallback(