223-76453a08fb432f53c395.js.map

{"version":3,"file":"223-76453a08fb432f53c395.js","mappings":"4QAAA,IAAI,EAIJ,MAAM,EAAa,IAAIA,QAAJ,EAGhBC,UAAkBC,YAClBD,UAAkBE,eAClBF,UAAkBG,iBAAAA,EAAAA,CAAAA,QAAAA,UAAAA,YAAAA,WAAAA,eAAAA,WAAAA,iBAAAA,kBAAAA,aCoBrB,SAAS,EACPC,EACAC,GAEAD,EAAUE,MAAMC,QAAAA,IAEZF,IACFA,EAAiBC,MAAMC,QAAAA,IAAAA,CAI3B,SAAS,EACPC,EACAC,EACAC,EACAC,EACAC,EACAC,GAEA,MAAM,EAAYL,EAAQM,cAAc,qBAAdA,EAGDN,EAAQM,cAAAA,4BAAAA,EAGhBJ,EAAWK,IAAIN,GAEhC,SAAS,EAAcO,GAErBC,KAAKC,oBAAoB,OAAQC,GAEjC,MAAMC,EAASJ,EAAEK,cAAAA,EACL,IAAIC,MAChBC,EAAIC,IAAMC,EAAOC,WAEbH,EAAII,OAENJ,EACGI,SACAC,MAAK,KAEJC,EAAaZ,KAAMZ,GAAAA,MACnBO,GAAAA,EAAS,CACPkB,UAAWC,GAAAA,IAGdC,OAAMhB,IAELa,EAAaZ,KAAMZ,GAAAA,MACnBQ,GAAAA,EAAUG,EAAE,KAIhBa,EAAaZ,KAAMZ,GAAAA,MACnBO,GAAAA,EAAS,CACPkB,UAAWC,IAAAA,CAiCjB,OA5BA3B,EAAU6B,iBAAiB,OAAQd,GAAAA,MAEnCR,GAAAA,EAAc,CACZmB,UAAWC,IAEbG,MAAMC,KAAK/B,EAAUgC,cAAcC,UAAUC,SAAQC,IACnD,MAAM,EAAMA,EAAMC,aAAa,YAAbA,EACHD,EAAMC,aAAa,eAC9BhB,IACFe,EAAME,gBAAgB,YACtBF,EAAMG,aAAa,MAAOlB,IAExBmB,IACFJ,EAAME,gBAAgB,eACtBF,EAAMG,aAAa,SAAUC,GAAAA,IAIjCjC,EAAWkC,IAAInC,GAIXL,EAAUyC,UACZ1B,EAAc2B,KAAK1C,EAAW,CAC5BiB,cAAejB,IAIZ,KACDA,GACFA,EAAUc,oBAAoB,OAAQC,EAAAA,CAAAA,CAAAA,SAAAA,EAM1CX,EACAC,EACAC,EACAJ,EACAK,EACAC,EACAC,GAEA,KAAKkC,EAAAA,EAAAA,KAA4B,CAC/B,IAAI,EACJ,MAAM,GDrHRC,ECqHwC,KACpCC,EAAUC,EACR1C,EACAC,EACAC,EACAC,EACAC,EACAC,EAAAA,EAAAA,yBAAAA,QDhHDsC,IACHA,EAAuB,IAAIC,sBACzBC,IACEA,EAAQf,SAAQgB,IAAAA,IAAAA,EACVA,EAAMC,iBAAAA,OAAAA,EAERC,EAAWC,IAAIH,EAAM7B,UAAAA,IAErB+B,EAAWE,OAAOJ,EAAM7B,QAAAA,GAAAA,GAI9B,CACEkC,WAAW,QAAXA,MAvBiB1D,OAAAA,EAAAA,EAAY2D,gBAAAA,MAwBC3D,GAAAA,EAAY4D,SAAAA,SAAAA,YAAAA,SAOxBrD,GAKtB,OAHAgD,EAAWM,IAAItD,EAASwC,GACxBG,EAAqBY,QAAQvD,GAAAA,WAGvB2C,GAAwB3C,IAC1BgD,EAAWE,OAAOlD,GAClB2C,EAAqBa,UAAUxD,GAAAA,CAAAA,GAAAA,WAjCjC,OADAwC,IAAAA,WAAAA,CAAAA,GAAAA,ECwHgBiB,EAAGzD,GAAAA,IAAAA,EAAAA,EASrB,MAAM,cAAN,SAN8B0D,gBAAgB5D,QAC5CE,EAAQ2D,QAAQC,UAAAA,OAAAA,EAAY9D,EAAM8D,WAAAA,EAAAA,QAClC5D,EAAQ2D,QAAQE,eAAAA,IAAAA,OAAAA,EAAoB/D,EAAM+D,gBAAAA,EAAAA,WAnIhDC,eAA6B9D,GAAAA,sBAAAA,cAAAA,EAAAA,EAAAA,KAAAA,KAAAA,EAAAA,EAAAA,KAAAA,EAAAA,KAAAA,KAOzB+D,OAAeC,kBAAkBhE,EAAAA,CAPrC8D,CAoIoB9D,IAGT,KACDyC,GACFA,IAGFe,GAAAA,CAAAA,CAAAA,ID7IJhB,ECiJA,OAAO,EACLxC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAAA,CAAAA,SAAAA,EAAAA,GAAAA,IAIgC4D,MAClCA,EADkCC,QAElCA,EAAAA,OAFkCC,UAGlCA,EAHkCC,SAIlCA,EAJkCC,aAKlCA,EALkCC,SAMlCA,EAAW,CAAC,EANsBT,eAOlCA,EAPkCU,gBAQlCA,EARkCX,UASlCA,EAAAA,SAAAA,EACGY,GAAAA,EAAAA,EAAAA,GAAAA,EAAAA,GAEH,MAAMC,MACJA,EADIC,OAEJA,EAFIC,OAGJA,EAHIC,OAIJA,EAJIC,YAKJA,EACAN,gBAAiBO,GACfb,EASJ,OAPAK,GAAAA,EAAAA,EAAAA,GAAAA,CACEV,UAAAA,EACAC,eAAAA,EACAU,gBAAAA,GACGD,IAAAA,EAAAA,EAAAA,IAIHS,EAAAA,cAACC,EAAAA,EAAAA,CAAcL,OAAQA,EAAQF,MAAOA,EAAOC,OAAQA,GACnDK,EAAAA,cAACE,EAAAA,GAAAA,EAAAA,EAAAA,GAAAA,CAAAA,GACKC,EAAAA,EAAAA,GACFL,EACAT,EACAO,EACAF,EACAC,EACAI,EACAlB,EACAC,KAIJkB,EAAAA,cAACI,EAAAA,GAAAA,EAAAA,EAAAA,GAAAA,CAAAA,EACMX,EAAAA,CAILC,MAAOA,EACPC,OAAQA,EACRU,UAAWf,IACPgB,EAAAA,EAAAA,GAAalB,EAAWC,EAAUQ,EAAQV,EAASI,MAAAA,C","sources":["webpack://gatsby-starter-blog/../src/components/intersection-observer.ts","webpack://gatsby-starter-blog/../src/components/lazy-hydrate.tsx"],"sourcesContent":["let intersectionObserver: IntersectionObserver\n\nexport type Unobserver = () => void\n\nconst ioEntryMap = new WeakMap<HTMLElement, () => void>()\n/* eslint-disable @typescript-eslint/no-explicit-any  */\nconst connection =\n  (navigator as any).connection ||\n  (navigator as any).mozConnection ||\n  (navigator as any).webkitConnection\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\n// These match the thresholds used in Chrome's native lazy loading\n// @see https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds\nconst FAST_CONNECTION_THRESHOLD = `1250px`\nconst SLOW_CONNECTION_THRESHOLD = `2500px`\n\nexport function createIntersectionObserver(\n  callback: () => void\n): (element: HTMLElement) => Unobserver {\n  const connectionType = connection?.effectiveType\n\n  // if we don't support intersectionObserver we don't lazy load (Sorry IE 11).\n  if (!(`IntersectionObserver` in window)) {\n    return function observe(): Unobserver {\n      callback()\n      return function unobserve(): void {}\n    }\n  }\n\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            // Get the matching entry's callback and call it\n            ioEntryMap.get(entry.target as HTMLElement)?.()\n            // We only need to call it once\n            ioEntryMap.delete(entry.target as HTMLElement)\n          }\n        })\n      },\n      {\n        rootMargin:\n          connectionType === `4g` && !connection?.saveData\n            ? FAST_CONNECTION_THRESHOLD\n            : SLOW_CONNECTION_THRESHOLD,\n      }\n    )\n  }\n\n  return function observe(element: HTMLElement): Unobserver {\n    // Store a reference to the callback mapped to the element being watched\n    ioEntryMap.set(element, callback)\n    intersectionObserver.observe(element)\n\n    return function unobserve(): void {\n      if (intersectionObserver && element) {\n        ioEntryMap.delete(element)\n        intersectionObserver.unobserve(element)\n      }\n    }\n  }\n}\n","import React from \"react\"\nimport { renderToStaticMarkup } from \"react-dom/server\"\nimport { LayoutWrapper } from \"./layout-wrapper\"\nimport { Placeholder } from \"./placeholder\"\nimport { MainImage } from \"./main-image\"\nimport {\n  hasNativeLazyLoadSupport,\n  getMainProps,\n  getPlaceholderProps,\n} from \"./hooks\"\nimport { createIntersectionObserver } from \"./intersection-observer\"\nimport type { MainImageProps } from \"./main-image\"\nimport type { GatsbyImageProps } from \"./gatsby-image.browser\"\n\ntype LazyHydrateProps = Omit<GatsbyImageProps, \"as\" | \"style\" | \"className\"> & {\n  isLoading: boolean\n  isLoaded: boolean\n}\n\nasync function applyPolyfill(element: HTMLImageElement): Promise<void> {\n  if (!(`objectFitPolyfill` in window)) {\n    await import(\n      // @ts-ignore typescript can't find the module for some reason ¯\\_(ツ)_/¯\n      /* webpackChunkName: \"gatsby-plugin-image-objectfit-polyfill\" */ `objectFitPolyfill`\n    )\n  }\n  ;(window as any).objectFitPolyfill(element)\n}\n\nfunction toggleLoaded(\n  mainImage: HTMLElement,\n  placeholderImage: HTMLElement\n): void {\n  mainImage.style.opacity = `1`\n\n  if (placeholderImage) {\n    placeholderImage.style.opacity = `0`\n  }\n}\n\nfunction startLoading(\n  element: HTMLElement,\n  cacheKey: string,\n  imageCache: Set<string>,\n  onStartLoad: GatsbyImageProps[\"onStartLoad\"],\n  onLoad: GatsbyImageProps[\"onLoad\"],\n  onError: GatsbyImageProps[\"onError\"]\n): () => void {\n  const mainImage = element.querySelector(\n    `[data-main-image]`\n  ) as HTMLImageElement\n  const placeholderImage = element.querySelector<HTMLElement>(\n    `[data-placeholder-image]`\n  )\n  const isCached = imageCache.has(cacheKey)\n\n  function onImageLoaded(e): void {\n    // eslint-disable-next-line @babel/no-invalid-this\n    this.removeEventListener(`load`, onImageLoaded)\n\n    const target = e.currentTarget\n    const img = new Image()\n    img.src = target.currentSrc\n\n    if (img.decode) {\n      // Decode the image through javascript to support our transition\n      img\n        .decode()\n        .then(() => {\n          // eslint-disable-next-line @babel/no-invalid-this\n          toggleLoaded(this, placeholderImage)\n          onLoad?.({\n            wasCached: isCached,\n          })\n        })\n        .catch(e => {\n          // eslint-disable-next-line @babel/no-invalid-this\n          toggleLoaded(this, placeholderImage)\n          onError?.(e)\n        })\n    } else {\n      // eslint-disable-next-line @babel/no-invalid-this\n      toggleLoaded(this, placeholderImage)\n      onLoad?.({\n        wasCached: isCached,\n      })\n    }\n  }\n\n  mainImage.addEventListener(`load`, onImageLoaded)\n\n  onStartLoad?.({\n    wasCached: isCached,\n  })\n  Array.from(mainImage.parentElement.children).forEach(child => {\n    const src = child.getAttribute(`data-src`)\n    const srcSet = child.getAttribute(`data-srcset`)\n    if (src) {\n      child.removeAttribute(`data-src`)\n      child.setAttribute(`src`, src)\n    }\n    if (srcSet) {\n      child.removeAttribute(`data-srcset`)\n      child.setAttribute(`srcset`, srcSet)\n    }\n  })\n\n  imageCache.add(cacheKey)\n\n  // Load times not always fires - mostly when it's a 304\n  // We check if the image is already completed and if so we trigger onload.\n  if (mainImage.complete) {\n    onImageLoaded.call(mainImage, {\n      currentTarget: mainImage,\n    })\n  }\n\n  return (): void => {\n    if (mainImage) {\n      mainImage.removeEventListener(`load`, onImageLoaded)\n    }\n  }\n}\n\nexport function swapPlaceholderImage(\n  element: HTMLElement,\n  cacheKey: string,\n  imageCache: Set<string>,\n  style: React.CSSProperties,\n  onStartLoad: GatsbyImageProps[\"onStartLoad\"],\n  onLoad: GatsbyImageProps[\"onLoad\"],\n  onError: GatsbyImageProps[\"onError\"]\n): () => void {\n  if (!hasNativeLazyLoadSupport()) {\n    let cleanup\n    const io = createIntersectionObserver(() => {\n      cleanup = startLoading(\n        element,\n        cacheKey,\n        imageCache,\n        onStartLoad,\n        onLoad,\n        onError\n      )\n    })\n    const unobserve = io(element)\n\n    // Polyfill \"object-fit\" if unsupported (mostly IE)\n    if (!(`objectFit` in document.documentElement.style)) {\n      element.dataset.objectFit = style.objectFit ?? `cover`\n      element.dataset.objectPosition = `${style.objectPosition ?? `50% 50%`}`\n      applyPolyfill(element as HTMLImageElement)\n    }\n\n    return (): void => {\n      if (cleanup) {\n        cleanup()\n      }\n\n      unobserve()\n    }\n  }\n\n  return startLoading(\n    element,\n    cacheKey,\n    imageCache,\n    onStartLoad,\n    onLoad,\n    onError\n  )\n}\n\nexport function renderImageToString({\n  image,\n  loading = `lazy`,\n  isLoading,\n  isLoaded,\n  imgClassName,\n  imgStyle = {},\n  objectPosition,\n  backgroundColor,\n  objectFit = `cover`,\n  ...props\n}: LazyHydrateProps): string {\n  const {\n    width,\n    height,\n    layout,\n    images,\n    placeholder,\n    backgroundColor: wrapperBackgroundColor,\n  } = image\n\n  imgStyle = {\n    objectFit,\n    objectPosition,\n    backgroundColor,\n    ...imgStyle,\n  }\n\n  return renderToStaticMarkup(\n    <LayoutWrapper layout={layout} width={width} height={height}>\n      <Placeholder\n        {...getPlaceholderProps(\n          placeholder,\n          isLoaded,\n          layout,\n          width,\n          height,\n          wrapperBackgroundColor,\n          objectFit,\n          objectPosition\n        )}\n      />\n\n      <MainImage\n        {...(props as Omit<\n          MainImageProps,\n          \"images\" | \"fallback\" | \"onLoad\" | \"onError\"\n        >)}\n        width={width}\n        height={height}\n        className={imgClassName}\n        {...getMainProps(isLoading, isLoaded, images, loading, imgStyle)}\n      />\n    </LayoutWrapper>\n  )\n}\n"],"names":["WeakMap","navigator","connection","mozConnection","webkitConnection","mainImage","placeholderImage","style","opacity","element","cacheKey","imageCache","onStartLoad","onLoad","onError","querySelector","has","e","this","removeEventListener","onImageLoaded","t","currentTarget","Image","img","src","target","currentSrc","decode","then","toggleLoaded","wasCached","isCached","catch","addEventListener","Array","from","parentElement","children","forEach","child","getAttribute","removeAttribute","setAttribute","srcSet","add","complete","call","hasNativeLazyLoadSupport","callback","cleanup","startLoading","intersectionObserver","IntersectionObserver","entries","entry","isIntersecting","ioEntryMap","get","delete","rootMargin","effectiveType","saveData","set","observe","unobserve","io","documentElement","dataset","objectFit","objectPosition","async","window","objectFitPolyfill","image","loading","isLoading","isLoaded","imgClassName","imgStyle","backgroundColor","props","width","height","layout","images","placeholder","wrapperBackgroundColor","React","LayoutWrapper","Placeholder","getPlaceholderProps","MainImage","className","getMainProps"],"sourceRoot":""}