style: sync with prettier

README.md

@@ -297,7 +297,7 @@ import Imgix, { Picture, Source } from "react-imgix";
     htmlAttributes={{ media: "(min-width: 320px)" }}
   />
   <Imgix src={src} imgixParams={{ w: 100 }} />
-</Picture>;
+</Picture>
 ```
 
 In order to reduce the duplication in props, JSX supports object spread for props:

src/HOCs/imgixProvider.jsx

@@ -1,31 +1,33 @@
-import React, { useContext, createContext } from 'react'
+import React, { useContext, createContext } from "react";
 
-const ImgixContext = createContext()
+const ImgixContext = createContext();
 
 /**
  * `useImgixContext()` tries to invoke `React.useContext()`. If no context
- * is available, this function returns `undefined`. 
+ * is available, this function returns `undefined`.
  * @returns The context defined by the closest parent `ImgixProvider`.
  */
 function useImgixContext() {
-  return useContext(ImgixContext)
+  return useContext(ImgixContext);
 }
 
 /**
- * Creates a Provider component that passes `reactImgixProps` as the Context 
- * for child components who use the `useImgixContext()` custom hook or 
+ * Creates a Provider component that passes `reactImgixProps` as the Context
+ * for child components who use the `useImgixContext()` custom hook or
  * `React.useContext()` API.
- * @param {React.Element <typeof Component>} children 
- * @param {Object} reactImgixProps 
+ * @param {React.Element <typeof Component>} children
+ * @param {Object} reactImgixProps
  * @returns React.Element
  */
-function ImgixProvider({children, ...reactImgixProps}) {
-  const value = reactImgixProps
+function ImgixProvider({ children, ...reactImgixProps }) {
+  const value = reactImgixProps;
 
-  if ( children == null || children.length < 1) {
-    console.error("ImgixProvider must have at least one Imgix child component")
+  if (children == null || children.length < 1) {
+    console.error("ImgixProvider must have at least one Imgix child component");
   }
-  return <ImgixContext.Provider value={value}>{children}</ImgixContext.Provider>
+  return (
+    <ImgixContext.Provider value={value}>{children}</ImgixContext.Provider>
+  );
 }
 
-export {ImgixProvider, useImgixContext}
+export { ImgixProvider, useImgixContext };

src/HOCs/index.js

@@ -1,2 +1,2 @@
 export * from "./shouldComponentUpdateHOC";
-export * from "./imgixProvider"
+export * from "./imgixProvider";

src/HOFs/constants.js

@@ -89,4 +89,4 @@ export const PARAMS_EXP_MAP = Object.freeze({
   // Extra
   height: "h",
   width: "w",
-});
+});

src/HOFs/propFormatter.js

@@ -1,15 +1,15 @@
-import * as React from 'react'
-import { PARAMS_EXP_MAP } from "./constants"
+import * as React from "react";
+import { PARAMS_EXP_MAP } from "./constants";
 
 /**
  * Creates a 1-step, or complete, URL from `domain` and `src` Strings.
  *
- * - First, the function checks if src has a defined `domain`. If it does, it 
+ * - First, the function checks if src has a defined `domain`. If it does, it
  * checks to see if `src` has a scheme, and prepends "http" or "https" as needed
  * - Otherwise, formatSrc formats `domain` and `src` Strings.
- *   - First it strips the two strings of the  leading and `/` or trailing `/` 
+ *   - First it strips the two strings of the  leading and `/` or trailing `/`
  *     slash characters.
- *   - Then, it joins the two strings on a `/` character. IE, 
+ *   - Then, it joins the two strings on a `/` character. IE,
  *    `strippedDomain + "/" + strippedSrc`.
  *   - If `domain` String argument `null` or `undefined`, the function returns
  *    the original `src` String.
@@ -20,16 +20,16 @@ import { PARAMS_EXP_MAP } from "./constants"
  */
 export function formatSrc(src, domain, useHTTPS = true) {
   // ignore if already has protocol
-  if (src.indexOf("://") !== -1){
-    return src
+  if (src.indexOf("://") !== -1) {
+    return src;
   } else {
     // prepend domain if defined
     if (domain == null) {
-      return src
+      return src;
     }
-    const strippedDomain = domain ? domain.replace(/^\/|\/$/g, '') : ""
-    const strippedSrc = src.replace(/^\/|\/$/g, '')
-    const prefix = useHTTPS ? "https://" : "http://"
+    const strippedDomain = domain ? domain.replace(/^\/|\/$/g, "") : "";
+    const strippedSrc = src.replace(/^\/|\/$/g, "");
+    const prefix = useHTTPS ? "https://" : "http://";
     return prefix + strippedDomain + "/" + strippedSrc;
   }
 }
@@ -41,16 +41,18 @@ export function formatSrc(src, domain, useHTTPS = true) {
  * - `height`: if undefined or negative gets set to `undefined`.
  * - `src`: concatenated to `domain` if `src` defined and has no domain.
  *
- * @param {Object} props 
+ * @param {Object} props
  * @returns A formatted `props` Object.
  */
 export const formatProps = (props) => {
-  const width = !props.width || props.width <= 1 ? undefined : props.width
-  const height = !props.height || props.height <= 1 ? undefined : props.height
-  const src = props.src ? formatSrc(props.src, props.domain, props.useHttps) : undefined
+  const width = !props.width || props.width <= 1 ? undefined : props.width;
+  const height = !props.height || props.height <= 1 ? undefined : props.height;
+  const src = props.src
+    ? formatSrc(props.src, props.domain, props.useHttps)
+    : undefined;
 
-  return Object.assign( {}, props, { width, height, src,} )
-}
+  return Object.assign({}, props, { width, height, src });
+};
 
 /**
  * Function that shortens params keys according to the imgix spec.
@@ -62,29 +64,29 @@ export const collapseImgixParams = (params) => {
   if (params == null) {
     return params;
   }
-  const compactedParams = {}
+  const compactedParams = {};
   for (const [k, v] of Object.entries(params)) {
     if (PARAMS_EXP_MAP[k]) {
-      compactedParams[PARAMS_EXP_MAP[k]] = v
+      compactedParams[PARAMS_EXP_MAP[k]] = v;
     } else {
-      compactedParams[k] = v
+      compactedParams[k] = v;
     }
   }
-  return compactedParams
-}
+  return compactedParams;
+};
 
 /**
- * `processPropsHOF` takes a Component's props and formats them to adhere to the 
+ * `processPropsHOF` takes a Component's props and formats them to adhere to the
  * ImgixClient's specifications.
- * 
+ *
  * @param {React.Element<typeof Component>} Component - A react component with
  * defined `props`.
- * @returns A React Component who's `props` have been formatted and 
+ * @returns A React Component who's `props` have been formatted and
  * `imgixParams` have been collapsed.
  */
 export const processPropsHOF = (Component) => (props) => {
-  const formattedProps = formatProps(props)
-  const formattedImgixParams = collapseImgixParams(formattedProps.imgixParams)
+  const formattedProps = formatProps(props);
+  const formattedImgixParams = collapseImgixParams(formattedProps.imgixParams);
 
-  return <Component {...formattedProps} imgixParams={formattedImgixParams} />
-}
+  return <Component {...formattedProps} imgixParams={formattedImgixParams} />;
+};

src/HOFs/propMerger.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import { useImgixContext } from "../HOCs"
+import React from "react";
+import { useImgixContext } from "../HOCs";
 
 /**
  * Merges the `src` object into the `destination` object. Destination values are
@@ -37,16 +37,16 @@ import { useImgixContext } from "../HOCs"
  */
 export const mergeProps = (src, destination) => {
   if (src == null && destination !== null) {
-    return destination
+    return destination;
   }
   if (src !== null && destination == null) {
     return src;
   }
   if (src == null && destination == null) {
-    return {}
+    return {};
   }
 
-  const newProps = { ...destination }
+  const newProps = { ...destination };
   const newPropKeys = Object.keys(newProps);
 
   for (const [k, v] of Object.entries(src)) {
@@ -56,29 +56,30 @@ export const mergeProps = (src, destination) => {
     // recursively merge imgixParams and htmlAttributes
     if (k === "imgixParams" || k === "htmlAttributes") {
       if (v !== null) {
-        newProps[k] = mergeProps(src[k], newProps[k])
+        newProps[k] = mergeProps(src[k], newProps[k]);
       }
     }
   }
   return newProps;
-}
+};
 
 /**
- * `mergeComponentPropsHOF` tries to invoke `React.useContext()`. If context is 
- * `undefined`, context is being accessed outside of an `ImgixContext` provider 
+ * `mergeComponentPropsHOF` tries to invoke `React.useContext()`. If context is
+ * `undefined`, context is being accessed outside of an `ImgixContext` provider
  * and the Component is returned as is.
  *
- * Otherwise, it merges a Component's props with the `ImgixContext` props and 
+ * Otherwise, it merges a Component's props with the `ImgixContext` props and
  * return a Component with the merged `props`.
  * @param {React.Element <typeof Component} Component -  with defined `props`.
  * @returns Component with merged `props`.
  */
-export const mergeComponentPropsHOF = (Component) => function mergeComponentPropsHOFInner(props) {
-  const contextProps = useImgixContext();
-  if (contextProps == null) {
-    return <Component {...props} />;
-  }
+export const mergeComponentPropsHOF = (Component) =>
+  function mergeComponentPropsHOFInner(props) {
+    const contextProps = useImgixContext();
+    if (contextProps == null) {
+      return <Component {...props} />;
+    }
 
-  const childProps = mergeProps(contextProps, props);
-  return <Component {...childProps} />;
-}
+    const childProps = mergeProps(contextProps, props);
+    return <Component {...childProps} />;
+  };

src/common.js

@@ -12,5 +12,9 @@ export function compose(...funcs) {
     return funcs[0];
   }
 
-  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+  return funcs.reduce(
+    (a, b) =>
+      (...args) =>
+        a(b(...args))
+  );
 }

src/index.js

@@ -1,9 +1,7 @@
 import ReactImgix, { Picture, Source } from "./react-imgix";
 import { PublicConfigAPI } from "./config";
 import { buildURLPublic as buildURL } from "./constructUrl";
-import {
-  ImgixProvider,
-} from "./HOCs"
+import { ImgixProvider } from "./HOCs";
 
 export { ImgixProvider };
 export { buildURL };

src/react-imgix-bg.jsx

@@ -70,8 +70,8 @@ export const __shouldComponentUpdate = (props, nextProps) => {
   // props have changed (e.g. disableLibraryParam).
   const propsEqual = shallowEqual(props, nextProps, customizer);
 
-  return !(propsEqual);
-}
+  return !propsEqual;
+};
 
 class BackgroundImpl extends React.Component {
   constructor(props) {

src/react-imgix.jsx

@@ -5,7 +5,7 @@ import { config } from "./common";
 import { PACKAGE_VERSION } from "./constants";
 import constructUrl, {
   compactParamKeys,
-  extractClientAndPathComponents
+  extractClientAndPathComponents,
 } from "./constructUrl";
 import extractQueryParams from "./extractQueryParams";
 import { ShouldComponentUpdateHOC } from "./HOCs";
@@ -62,8 +62,8 @@ const REACT_IMGIX_PROP_TYPES = Object.assign(
   SHARED_IMGIX_AND_SOURCE_PROP_TYPES,
   {
     alt: PropTypes.string,
-  });
-
+  }
+);
 
 /**
  * Validates that an aspect ratio is in the format w:h. If false is returned, the aspect ratio is in the wrong format.
@@ -133,7 +133,9 @@ function buildSrc({
   if (disableSrcSet) {
     srcSet = src;
   } else {
-    const sharedSrcSetOptions = Object.assign({}, srcSetOptions, {disablePathEncoding});
+    const sharedSrcSetOptions = Object.assign({}, srcSetOptions, {
+      disablePathEncoding,
+    });
     if (fixedSize) {
       const { width, w, height, h, q, ...urlParams } = srcImgixParams;
       if (q) {
@@ -151,7 +153,14 @@ function buildSrc({
         urlParams["h"] = finalHeight;
       }
 
-      srcSet = buildSrcSet(rawSrc, urlParams, Object.assign({disableVariableQuality: disableQualityByDPR}, sharedSrcSetOptions ));
+      srcSet = buildSrcSet(
+        rawSrc,
+        urlParams,
+        Object.assign(
+          { disableVariableQuality: disableQualityByDPR },
+          sharedSrcSetOptions
+        )
+      );
     } else {
       const { width, w, height, h, ...urlParams } = srcImgixParams;
 
@@ -254,7 +263,7 @@ class ReactImgix extends Component {
     if (!disableSrcSet) {
       childProps[attributeConfig.srcSet] = srcSet;
     }
-    if (this.props.alt) { 
+    if (this.props.alt) {
       childProps.alt = this.props.alt;
     }
 
@@ -288,20 +297,24 @@ class PictureImpl extends Component {
 
     // make sure all of our children have key set, otherwise we get react warnings
     let _children =
-      React.Children.map(children, (child, idx) =>
-        {
-        const childIsReactImgix = child.type?.name === 'mergeComponentPropsHOFInner';
-        return React.cloneElement(child, Object.assign({
-          key: buildKey(idx),
-        },
-          // This prevents props._inPicture being set on other children if
-          // they're passed, such as an <img> component, which will cause a
-          // React error
-          childIsReactImgix && {
-            _inPicture: true,
-          }));
-        }
-      ) || [];
+      React.Children.map(children, (child, idx) => {
+        const childIsReactImgix =
+          child.type?.name === "mergeComponentPropsHOFInner";
+        return React.cloneElement(
+          child,
+          Object.assign(
+            {
+              key: buildKey(idx),
+            },
+            // This prevents props._inPicture being set on other children if
+            // they're passed, such as an <img> component, which will cause a
+            // React error
+            childIsReactImgix && {
+              _inPicture: true,
+            }
+          )
+        );
+      }) || [];
 
     /*
     We need to make sure an <img /> or <Imgix /> is the last child so we look for one in children
@@ -419,4 +432,3 @@ export {
   SourceImpl as __SourceImpl,
   PictureImpl as __PictureImpl, // for testing
 };
-