81-321ec1e6e6909ebe87df.js.map

{"version":3,"sources":["webpack://gatsby-starter-blog/../src/components/lazy-hydrate.tsx"],"names":["NODE_ENV","lazyHydrate","root","hydrated","image","loading","isLoading","isLoaded","toggleIsLoaded","ref","imgClassName","imgStyle","objectPosition","backgroundColor","objectFit","props","width","height","layout","images","placeholder","wrapperBackgroundColor","current","hasSSRHtml","querySelector","hasNativeLazyLoadSupport","cacheKey","JSON","stringify","hasLoaded","hasImageLoaded","component","React","LayoutWrapper","Placeholder","getPlaceholderProps","MainImage","className","getMainProps","render","hydrate"],"mappings":"gOAqB2BA,SAEXC,IAedC,EACAC,OAdEC,UACAC,YACAC,cACAC,aACAC,mBACAC,QACAC,qBACAC,sBAAW,KACXC,mBACAC,wBACAC,iCACGC,wJAMHC,EAMEZ,EANFY,MACAC,EAKEb,EALFa,OACAC,EAIEd,EAJFc,OACAC,EAGEf,EAHFe,OACAC,EAEEhB,EAFFgB,YACiBC,EACfjB,EADFS,gBAGF,IAAKX,EAAKoB,QACR,OAAO,KAGT,IAAMC,EAAarB,EAAKoB,QAAQE,yCAEhC,IAAIC,UAA8BF,IAAepB,EAASmB,QACxD,OAAO,KAGT,IAAMI,EAAWC,KAAKC,UAAUT,GAC1BU,GAAYC,OAAeJ,GAEjCf,WACEG,YACAF,iBACAC,mBACGF,GAGL,IAAMoB,EACJC,gBAACC,KAAcf,OAAQA,EAAQF,MAAOA,EAAOC,OAAQA,IACjDY,GACAG,gBAACE,sBACKC,OACFf,EACAb,EACAW,EACAF,EACAC,EACAI,KAINW,gBAACI,qBACMrB,GACLC,MAAOA,EACPC,OAAQA,EACRoB,UAAW3B,IACP4B,OACFhC,EACAuB,GAAatB,EACbY,EACAd,EACAG,EACAkB,EACAjB,EACAE,MAWR,OAJiBR,EAASmB,QAAoBiB,SAASC,WAC9CT,EAAW7B,EAAKoB,SACzBnB,EAASmB,WAAU,WAGbpB,EAAKoB,UACPiB,YAAQ,KAAkCrC,EAAKoB","file":"81-321ec1e6e6909ebe87df.js","sourcesContent":["import React, { MutableRefObject } from \"react\"\nimport { hydrate, render } from \"react-dom\"\nimport { GatsbyImageProps } from \"./gatsby-image.browser\"\nimport { LayoutWrapper } from \"./layout-wrapper\"\nimport { Placeholder } from \"./placeholder\"\nimport { MainImageProps, MainImage } from \"./main-image\"\nimport {\n  getMainProps,\n  getPlaceholderProps,\n  hasNativeLazyLoadSupport,\n  hasImageLoaded,\n} from \"./hooks\"\nimport { ReactElement } from \"react\"\n\ntype LazyHydrateProps = Omit<GatsbyImageProps, \"as\" | \"style\" | \"className\"> & {\n  isLoading: boolean\n  isLoaded: boolean // alwaystype SetStateAction<S> = S | ((prevState: S) => S);\n  toggleIsLoaded: (toggle: boolean) => void\n  ref: MutableRefObject<HTMLImageElement | undefined>\n}\n\nconst IS_DEV = process.env.NODE_ENV === `development`\n\nexport function lazyHydrate(\n  {\n    image,\n    loading,\n    isLoading,\n    isLoaded,\n    toggleIsLoaded,\n    ref,\n    imgClassName,\n    imgStyle = {},\n    objectPosition,\n    backgroundColor,\n    objectFit = `cover`,\n    ...props\n  }: LazyHydrateProps,\n  root: MutableRefObject<HTMLElement | undefined>,\n  hydrated: MutableRefObject<boolean>\n): (() => void) | null {\n  const {\n    width,\n    height,\n    layout,\n    images,\n    placeholder,\n    backgroundColor: wrapperBackgroundColor,\n  } = image\n\n  if (!root.current) {\n    return null\n  }\n\n  const hasSSRHtml = root.current.querySelector(`[data-gatsby-image-ssr]`)\n  // On first server hydration do nothing\n  if (hasNativeLazyLoadSupport() && hasSSRHtml && !hydrated.current) {\n    return null\n  }\n\n  const cacheKey = JSON.stringify(images)\n  const hasLoaded = hasImageLoaded(cacheKey)\n\n  imgStyle = {\n    objectFit,\n    objectPosition,\n    backgroundColor,\n    ...imgStyle,\n  }\n\n  const component = (\n    <LayoutWrapper layout={layout} width={width} height={height}>\n      {!hasLoaded && (\n        <Placeholder\n          {...getPlaceholderProps(\n            placeholder,\n            isLoaded,\n            layout,\n            width,\n            height,\n            wrapperBackgroundColor\n          )}\n        />\n      )}\n      <MainImage\n        {...(props as Omit<MainImageProps, \"images\" | \"fallback\">)}\n        width={width}\n        height={height}\n        className={imgClassName}\n        {...getMainProps(\n          isLoading,\n          hasLoaded || isLoaded,\n          images,\n          loading,\n          toggleIsLoaded,\n          cacheKey,\n          ref,\n          imgStyle\n        )}\n      />\n    </LayoutWrapper>\n  )\n\n  // Force render to mitigate \"Expected server HTML to contain a matching\" in develop\n  const doRender = hydrated.current || IS_DEV ? render : hydrate\n  doRender(component, root.current)\n  hydrated.current = true\n\n  return (): void => {\n    if (root.current) {\n      render((null as unknown) as ReactElement, root.current)\n    }\n  }\n}\n"],"sourceRoot":""}