-
Notifications
You must be signed in to change notification settings - Fork 0
/
223-9fc56b4dadf91a3d2cab.js.map
1 lines (1 loc) · 11.6 KB
/
223-9fc56b4dadf91a3d2cab.js.map
1
{"version":3,"file":"223-9fc56b4dadf91a3d2cab.js","mappings":"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","sources":["webpack://gatsby-starter-lumen/../src/components/intersection-observer.ts","webpack://gatsby-starter-lumen/../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":["d","u","WeakMap","m","navigator","connection","mozConnection","webkitConnection","g","b","e","t","style","opacity","h","o","n","r","a","i","querySelector","c","s","has","l","this","removeEventListener","currentTarget","Image","src","currentSrc","decode","then","wasCached","catch","addEventListener","Array","from","parentElement","children","forEach","getAttribute","removeAttribute","setAttribute","add","complete","call","v","callback","window","IntersectionObserver","isIntersecting","get","target","delete","rootMargin","effectiveType","saveData","set","observe","unobserve","document","documentElement","dataset","objectFit","objectPosition","async","objectFitPolyfill","f","image","loading","isLoading","isLoaded","imgClassName","imgStyle","backgroundColor","p","y","w","width","j","height","C","layout","E","images","F","placeholder","P","L","className"],"sourceRoot":""}