@amazon-devices/expo-image 2.0.1758683737

package/build/web/hooks.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useBlurhash } from '../utils/blurhash/useBlurhash';
+import { isThumbhashString } from '../utils/resolveSources';
+import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
+export function useThumbhash(source) {
+    const isThumbhash = isThumbhashString(source?.uri || '');
+    const strippedThumbhashString = source?.uri?.replace(/thumbhash:\//, '') ?? '';
+    const thumbhashSource = useMemo(() => (isThumbhash ? { uri: thumbHashStringToDataURL(strippedThumbhashString) } : null), [strippedThumbhashString, isThumbhash]);
+    return thumbhashSource;
+}
+export function useImageHashes(source) {
+    const thumbhash = useThumbhash(source);
+    const blurhash = useBlurhash(source);
+    return useMemo(() => ({
+        resolvedSource: blurhash ?? thumbhash ?? source,
+        isImageHash: !!blurhash || !!thumbhash,
+    }), [blurhash, thumbhash]);
+}
+export function useHeaders(source, cachePolicy, onError) {
+    const [objectURL, setObjectURL] = useState(null);
+    useEffect(() => {
+        (async () => {
+            if (!source?.headers || !source.uri) {
+                return;
+            }
+            try {
+                const result = await fetch(source.uri, {
+                    headers: source.headers,
+                    cache: cachePolicy === 'none' ? 'no-cache' : 'default',
+                    redirect: 'follow',
+                });
+                if (!result.ok) {
+                    throw new Error(`Failed to fetch image: ${result.status} ${result.statusText}`);
+                }
+                const blob = await result.blob();
+                setObjectURL((prevObjURL) => {
+                    if (prevObjURL) {
+                        URL.revokeObjectURL(prevObjURL);
+                    }
+                    return URL.createObjectURL(blob);
+                });
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            }
+            catch (error) {
+                onError?.forEach((e) => e?.({ source }));
+            }
+        })();
+    }, [source]);
+    if (!source?.headers) {
+        return source;
+    }
+    if (!objectURL) {
+        // Avoid fetching a URL without headers if we have headers
+        return null;
+    }
+    return { ...source, uri: objectURL };
+}
+//# sourceMappingURL=hooks.js.map

package/build/web/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/web/hooks.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { OnErrorEvent } from './ImageWrapper.types';\nimport { ImageNativeProps, ImageSource } from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\n\nexport function useThumbhash(source: ImageSource | null | undefined) {\n  const isThumbhash = isThumbhashString(source?.uri || '');\n  const strippedThumbhashString = source?.uri?.replace(/thumbhash:\\//, '') ?? '';\n  const thumbhashSource = useMemo(\n    () => (isThumbhash ? { uri: thumbHashStringToDataURL(strippedThumbhashString) } : null),\n    [strippedThumbhashString, isThumbhash]\n  );\n  return thumbhashSource;\n}\n\nexport function useImageHashes(source: ImageSource | null | undefined) {\n  const thumbhash = useThumbhash(source);\n  const blurhash = useBlurhash(source);\n  return useMemo(\n    () => ({\n      resolvedSource: blurhash ?? thumbhash ?? source,\n      isImageHash: !!blurhash || !!thumbhash,\n    }),\n    [blurhash, thumbhash]\n  );\n}\n\nexport function useHeaders(\n  source: ImageSource | null | undefined,\n  cachePolicy: ImageNativeProps['cachePolicy'],\n  onError?: OnErrorEvent[]\n): ImageSource | null | undefined {\n  const [objectURL, setObjectURL] = useState<string | null>(null);\n  useEffect(() => {\n    (async () => {\n      if (!source?.headers || !source.uri) {\n        return;\n      }\n      try {\n        const result = await fetch(source.uri, {\n          headers: source.headers,\n          cache: cachePolicy === 'none' ? 'no-cache' : 'default',\n          redirect: 'follow',\n        });\n        if (!result.ok) {\n          throw new Error(`Failed to fetch image: ${result.status} ${result.statusText}`);\n        }\n        const blob = await result.blob();\n        setObjectURL((prevObjURL) => {\n          if (prevObjURL) {\n            URL.revokeObjectURL(prevObjURL);\n          }\n          return URL.createObjectURL(blob);\n        });\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      } catch (error) {\n        onError?.forEach((e) => e?.({ source }));\n      }\n    })();\n  }, [source]);\n  if (!source?.headers) {\n    return source;\n  }\n  if (!objectURL) {\n    // Avoid fetching a URL without headers if we have headers\n    return null;\n  }\n  return { ...source, uri: objectURL };\n}\n"]}

package/build/web/imageStyles.d.ts

@@ -0,0 +1,2 @@
+export default function loadStyle(): void;
+//# sourceMappingURL=imageStyles.d.ts.map

package/build/web/imageStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageStyles.d.ts","sourceRoot":"","sources":["../../src/web/imageStyles.tsx"],"names":[],"mappings":"AAgIA,MAAM,CAAC,OAAO,UAAU,SAAS,SAOhC"}

package/build/web/imageStyles.js

@@ -0,0 +1,137 @@
+const style = `
+[data-expoimage] .cross-dissolve {
+  transition-property: opacity;
+  animation-fill-mode: forwards;
+}
+[data-expoimage] .cross-dissolve-start:not(.transitioning) {
+  opacity: 0;
+}
+[data-expoimage] .cross-dissolve-active {
+  opacity: 1;
+}
+[data-expoimage] .cross-dissolve-end {
+  opacity: 0;
+}
+[data-expoimage] .flip-from-left {
+  transition-property: transform, opacity;
+  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
+  transform-origin: center;
+
+}
+[data-expoimage] .flip-from-left-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  perspective: 1000px;
+}
+[data-expoimage] .flip-from-left-start:not(.transitioning) {
+  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-left-active {
+  transform: translateZ(0px) rotateY(0) ;
+  opacity:1;
+}
+[data-expoimage] .flip-from-left-end {
+  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-right {
+  transition-property: transform, opacity;
+  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
+  transform-origin: center;
+}
+[data-expoimage] .flip-from-right-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  perspective: 1000px;
+}
+[data-expoimage] .flip-from-right-start:not(.transitioning) {
+  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-right-active {
+  transform: translateZ(0px) rotateY(0) ;
+  opacity:1;
+}
+[data-expoimage] .flip-from-right-end {
+  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-top {
+  transition-property: transform, opacity;
+  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
+  transform-origin: center;
+}
+[data-expoimage] .flip-from-top-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  perspective: 1000px;
+}
+[data-expoimage] .flip-from-top-start:not(.transitioning) {
+  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-top-active {
+  transform: translateZ(0px) rotateX(0) ;
+  opacity:1;
+}
+[data-expoimage] .flip-from-top-end {
+  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(-180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-bottom {
+  transition-property: transform, opacity;
+  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;
+  transform-origin: center;
+}
+[data-expoimage] .flip-from-bottom-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  perspective: 1000px;
+}
+[data-expoimage] .flip-from-bottom-start:not(.transitioning) {
+  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(-180deg);
+  opacity: 0;
+}
+[data-expoimage] .flip-from-bottom-active {
+  transform: translateZ(0px) rotateX(0) ;
+  opacity:1;
+}
+[data-expoimage] .flip-from-bottom-end {
+  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(180deg);
+  opacity: 0;
+}
+[data-expoimage] .image-timing-linear {
+  --expo-image-timing: linear;
+}
+[data-expoimage] .image-timing-ease-in {
+  --expo-image-timing: ease-in;
+}
+[data-expoimage] .image-timing-ease-out {
+  --expo-image-timing: ease-out;
+}
+[data-expoimage] .image-timing-ease-in-out {
+  --expo-image-timing: ease-in-out;
+}
+`;
+export default function loadStyle() {
+    if (typeof document !== 'undefined') {
+        const styleTag = document.createElement('style');
+        styleTag.innerHTML = style;
+        styleTag.id = 'expo-image-styles';
+        document.head.appendChild(styleTag);
+    }
+}
+//# sourceMappingURL=imageStyles.js.map

package/build/web/imageStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageStyles.js","sourceRoot":"","sources":["../../src/web/imageStyles.tsx"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Hb,CAAC;AACF,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACjD,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC;QAC3B,QAAQ,CAAC,EAAE,GAAG,mBAAmB,CAAC;QAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;AACH,CAAC","sourcesContent":["const style = `\n[data-expoimage] .cross-dissolve {\n  transition-property: opacity;\n  animation-fill-mode: forwards;\n}\n[data-expoimage] .cross-dissolve-start:not(.transitioning) {\n  opacity: 0;\n}\n[data-expoimage] .cross-dissolve-active {\n  opacity: 1;\n}\n[data-expoimage] .cross-dissolve-end {\n  opacity: 0;\n}\n[data-expoimage] .flip-from-left {\n  transition-property: transform, opacity;\n  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;\n  transform-origin: center;\n\n}\n[data-expoimage] .flip-from-left-container {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  perspective: 1000px;\n}\n[data-expoimage] .flip-from-left-start:not(.transitioning) {\n  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-left-active {\n  transform: translateZ(0px) rotateY(0) ;\n  opacity:1;\n}\n[data-expoimage] .flip-from-left-end {\n  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-right {\n  transition-property: transform, opacity;\n  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;\n  transform-origin: center;\n}\n[data-expoimage] .flip-from-right-container {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  perspective: 1000px;\n}\n[data-expoimage] .flip-from-right-start:not(.transitioning) {\n  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-right-active {\n  transform: translateZ(0px) rotateY(0) ;\n  opacity:1;\n}\n[data-expoimage] .flip-from-right-end {\n  transform:  translateZ(calc(var(--expo-image-width,1000px) * -1.25)) rotateY(-180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-top {\n  transition-property: transform, opacity;\n  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;\n  transform-origin: center;\n}\n[data-expoimage] .flip-from-top-container {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  perspective: 1000px;\n}\n[data-expoimage] .flip-from-top-start:not(.transitioning) {\n  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-top-active {\n  transform: translateZ(0px) rotateX(0) ;\n  opacity:1;\n}\n[data-expoimage] .flip-from-top-end {\n  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.5)) rotateX(-180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-bottom {\n  transition-property: transform, opacity;\n  transition-timing-function: var(--expo-image-timing,linear), steps(2, jump-none) !important;\n  transform-origin: center;\n}\n[data-expoimage] .flip-from-bottom-container {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  perspective: 1000px;\n}\n[data-expoimage] .flip-from-bottom-start:not(.transitioning) {\n  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(-180deg);\n  opacity: 0;\n}\n[data-expoimage] .flip-from-bottom-active {\n  transform: translateZ(0px) rotateX(0) ;\n  opacity:1;\n}\n[data-expoimage] .flip-from-bottom-end {\n  transform:  translateZ(calc(var(--expo-image-height,1000px) * -1.25)) rotateX(180deg);\n  opacity: 0;\n}\n[data-expoimage] .image-timing-linear {\n  --expo-image-timing: linear;\n}\n[data-expoimage] .image-timing-ease-in {\n  --expo-image-timing: ease-in;\n}\n[data-expoimage] .image-timing-ease-out {\n  --expo-image-timing: ease-out;\n}\n[data-expoimage] .image-timing-ease-in-out {\n  --expo-image-timing: ease-in-out;\n}\n`;\nexport default function loadStyle() {\n  if (typeof document !== 'undefined') {\n    const styleTag = document.createElement('style');\n    styleTag.innerHTML = style;\n    styleTag.id = 'expo-image-styles';\n    document.head.appendChild(styleTag);\n  }\n}\n"]}

package/build/web/positioning.d.ts

@@ -0,0 +1,11 @@
+import { ImageContentPositionObject } from '../Image.types';
+export declare function ensureValueIsWebUnits(value: string | number): string;
+export declare const absoluteFilledPosition: {
+    readonly width: "100%";
+    readonly height: "100%";
+    readonly position: "absolute";
+    readonly left: 0;
+    readonly top: 0;
+};
+export declare function getObjectPositionFromContentPositionObject(contentPosition?: ImageContentPositionObject): string;
+//# sourceMappingURL=positioning.d.ts.map

package/build/web/positioning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../src/web/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAA6B,MAAM,gBAAgB,CAAC;AAEvF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,UAM3D;AAID,eAAO,MAAM,sBAAsB;;;;;;CAMzB,CAAC;AAEX,wBAAgB,0CAA0C,CACxD,eAAe,CAAC,EAAE,0BAA0B,GAC3C,MAAM,CAyBR"}

package/build/web/positioning.js

@@ -0,0 +1,35 @@
+export function ensureValueIsWebUnits(value) {
+    const trimmedValue = String(value).trim();
+    if (trimmedValue.endsWith('%')) {
+        return trimmedValue;
+    }
+    return `${trimmedValue}px`;
+}
+export const absoluteFilledPosition = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+};
+export function getObjectPositionFromContentPositionObject(contentPosition) {
+    const resolvedPosition = { ...contentPosition };
+    if (!resolvedPosition) {
+        return '50% 50%';
+    }
+    if (resolvedPosition.top == null && resolvedPosition.bottom == null) {
+        resolvedPosition.top = '50%';
+    }
+    if (resolvedPosition.left == null && resolvedPosition.right == null) {
+        resolvedPosition.left = '50%';
+    }
+    return (['top', 'bottom', 'left', 'right']
+        .map((key) => {
+        if (key in resolvedPosition) {
+            return `${key} ${ensureValueIsWebUnits(resolvedPosition[key])}`;
+        }
+        return '';
+    })
+        .join(' ') || '50% 50%');
+}
+//# sourceMappingURL=positioning.js.map

package/build/web/positioning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positioning.js","sourceRoot":"","sources":["../../src/web/positioning.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,qBAAqB,CAAC,KAAsB;IAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1C,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC/B,OAAO,YAAY,CAAC;IACtB,CAAC;IACD,OAAO,GAAG,YAAY,IAAI,CAAC;AAC7B,CAAC;AAID,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;CACE,CAAC;AAEX,MAAM,UAAU,0CAA0C,CACxD,eAA4C;IAE5C,MAAM,gBAAgB,GAAG,EAAE,GAAG,eAAe,EAG5C,CAAC;IACF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,gBAAgB,CAAC,GAAG,IAAI,IAAI,IAAI,gBAAgB,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;QACpE,gBAAgB,CAAC,GAAG,GAAG,KAAK,CAAC;IAC/B,CAAC;IACD,IAAI,gBAAgB,CAAC,IAAI,IAAI,IAAI,IAAI,gBAAgB,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;QACpE,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,OAAO,CACL,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;SAC/B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;QACX,IAAI,GAAG,IAAI,gBAAgB,EAAE,CAAC;YAC5B,OAAO,GAAG,GAAG,IAAI,qBAAqB,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;QAClE,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAC1B,CAAC;AACJ,CAAC","sourcesContent":["import { ImageContentPositionObject, ImageContentPositionValue } from '../Image.types';\n\nexport function ensureValueIsWebUnits(value: string | number) {\n  const trimmedValue = String(value).trim();\n  if (trimmedValue.endsWith('%')) {\n    return trimmedValue;\n  }\n  return `${trimmedValue}px`;\n}\n\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport const absoluteFilledPosition = {\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  left: 0,\n  top: 0,\n} as const;\n\nexport function getObjectPositionFromContentPositionObject(\n  contentPosition?: ImageContentPositionObject\n): string {\n  const resolvedPosition = { ...contentPosition } as Record<\n    KeysOfUnion<ImageContentPositionObject>,\n    ImageContentPositionValue\n  >;\n  if (!resolvedPosition) {\n    return '50% 50%';\n  }\n  if (resolvedPosition.top == null && resolvedPosition.bottom == null) {\n    resolvedPosition.top = '50%';\n  }\n  if (resolvedPosition.left == null && resolvedPosition.right == null) {\n    resolvedPosition.left = '50%';\n  }\n\n  return (\n    ['top', 'bottom', 'left', 'right']\n      .map((key) => {\n        if (key in resolvedPosition) {\n          return `${key} ${ensureValueIsWebUnits(resolvedPosition[key])}`;\n        }\n        return '';\n      })\n      .join(' ') || '50% 50%'\n  );\n}\n"]}

package/build/web/useSourceSelection.d.ts

@@ -0,0 +1,14 @@
+import { ImageProps, ImageSource } from '../Image.types';
+export interface SrcSetSource extends ImageSource {
+    srcset: string;
+    sizes: string;
+    uri: string;
+    type: 'srcset';
+}
+type UseSourceSelectionReturn = {
+    containerRef: (element: HTMLDivElement) => void;
+    source: ImageSource | SrcSetSource | null;
+};
+export default function useSourceSelection(sources?: ImageSource[], responsivePolicy?: ImageProps['responsivePolicy'], measurementCallback?: (target: HTMLElement, size: DOMRect) => void): UseSourceSelectionReturn;
+export {};
+//# sourceMappingURL=useSourceSelection.d.ts.map

package/build/web/useSourceSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSourceSelection.d.ts","sourceRoot":"","sources":["../../src/web/useSourceSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAoCzD,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAEd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,QAAQ,CAAC;CAChB;AAmDD,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,OAAO,CAAC,EAAE,WAAW,EAAE,EACvB,gBAAgB,GAAE,UAAU,CAAC,kBAAkB,CAAY,EAC3D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GACjE,wBAAwB,CA8C1B"}

package/build/web/useSourceSelection.js

@@ -0,0 +1,98 @@
+import React, { useState, useRef } from 'react';
+import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
+function findBestSourceForSize(sources, size) {
+    if (sources?.length === 1) {
+        return sources[0];
+    }
+    return ([...(sources || [])]
+        // look for the smallest image that's still larger then a container
+        ?.map((source) => {
+        if (!size) {
+            return { source, penalty: 0, covers: false };
+        }
+        const { width, height } = typeof source === 'object' ? source : { width: null, height: null };
+        if (width == null || height == null) {
+            return { source, penalty: 0, covers: false };
+        }
+        if (width < size.width || height < size.height) {
+            return {
+                source,
+                penalty: Math.max(size.width - width, size.height - height),
+                covers: false,
+            };
+        }
+        return { source, penalty: (width - size.width) * (height - size.height), covers: true };
+    })
+        .sort((a, b) => a.penalty - b.penalty)
+        .sort((a, b) => Number(b.covers) - Number(a.covers))[0]?.source ?? null);
+}
+function getCSSMediaQueryForSource(source) {
+    return `(max-width: ${source.webMaxViewportWidth ?? source.width}px) ${source.width}px`;
+}
+function selectSource(sources, size, responsivePolicy) {
+    if (sources == null || sources.length === 0) {
+        return null;
+    }
+    if (sources.length === 1) {
+        return sources[0];
+    }
+    if (responsivePolicy !== 'static') {
+        return findBestSourceForSize(sources, size);
+    }
+    const staticSupportedSources = sources
+        .filter((s) => s.uri && s.width != null && !isBlurhashString(s.uri) && !isThumbhashString(s.uri))
+        .sort((a, b) => (a.webMaxViewportWidth ?? a.width ?? 0) - (b.webMaxViewportWidth ?? b.width ?? 0));
+    if (staticSupportedSources.length === 0) {
+        console.warn("You've set the `static` responsivePolicy but none of the sources have the `width` properties set. Make sure you set both `width` and `webMaxViewportWidth` for best results when using static responsiveness. Falling back to the `initial` policy.");
+        return findBestSourceForSize(sources, size);
+    }
+    const srcset = staticSupportedSources
+        ?.map((source) => `${source.uri} ${source.width}w`)
+        .join(', ');
+    const sizes = `${staticSupportedSources
+        ?.map(getCSSMediaQueryForSource)
+        .join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;
+    return {
+        srcset,
+        sizes,
+        uri: staticSupportedSources[staticSupportedSources.length - 1]?.uri ?? '',
+        type: 'srcset',
+    };
+}
+export default function useSourceSelection(sources, responsivePolicy = 'static', measurementCallback) {
+    const hasMoreThanOneSource = (sources?.length ?? 0) > 1;
+    // null - not calculated yet, DOMRect - size available
+    const [size, setSize] = useState(null);
+    const resizeObserver = useRef(null);
+    React.useEffect(() => {
+        return () => {
+            resizeObserver.current?.disconnect();
+        };
+    }, []);
+    const containerRef = React.useCallback((element) => {
+        // we can't short circuit here since we need to read the size for better animated transitions
+        if (!hasMoreThanOneSource && !measurementCallback) {
+            return;
+        }
+        const rect = element?.getBoundingClientRect();
+        measurementCallback?.(element, rect);
+        setSize(rect);
+        if (responsivePolicy === 'live') {
+            resizeObserver.current?.disconnect();
+            if (!element) {
+                return;
+            }
+            resizeObserver.current = new ResizeObserver((entries) => {
+                setSize(entries[0].contentRect);
+                measurementCallback?.(entries[0].target, entries[0].contentRect);
+            });
+            resizeObserver.current.observe(element);
+        }
+    }, [hasMoreThanOneSource, responsivePolicy]);
+    const source = selectSource(sources, size, responsivePolicy);
+    return React.useMemo(() => ({
+        containerRef,
+        source,
+    }), [source]);
+}
+//# sourceMappingURL=useSourceSelection.js.map

package/build/web/useSourceSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSourceSelection.js","sourceRoot":"","sources":["../../src/web/useSourceSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { ImageProps, ImageSource } from '../Image.types';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\n\nfunction findBestSourceForSize(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null\n): ImageSource | null {\n  if (sources?.length === 1) {\n    return sources[0];\n  }\n  return (\n    [...(sources || [])]\n      // look for the smallest image that's still larger then a container\n      ?.map((source) => {\n        if (!size) {\n          return { source, penalty: 0, covers: false };\n        }\n        const { width, height } =\n          typeof source === 'object' ? source : { width: null, height: null };\n        if (width == null || height == null) {\n          return { source, penalty: 0, covers: false };\n        }\n        if (width < size.width || height < size.height) {\n          return {\n            source,\n            penalty: Math.max(size.width - width, size.height - height),\n            covers: false,\n          };\n        }\n        return { source, penalty: (width - size.width) * (height - size.height), covers: true };\n      })\n      .sort((a, b) => a.penalty - b.penalty)\n      .sort((a, b) => Number(b.covers) - Number(a.covers))[0]?.source ?? null\n  );\n}\n\nexport interface SrcSetSource extends ImageSource {\n  srcset: string;\n  sizes: string;\n  // used as key and a fallback in case srcset is not supported\n  uri: string;\n  type: 'srcset';\n}\n\nfunction getCSSMediaQueryForSource(source: ImageSource) {\n  return `(max-width: ${source.webMaxViewportWidth ?? source.width}px) ${source.width}px`;\n}\n\nfunction selectSource(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null,\n  responsivePolicy: ImageProps['responsivePolicy']\n): ImageSource | SrcSetSource | null {\n  if (sources == null || sources.length === 0) {\n    return null;\n  }\n\n  if (sources.length === 1) {\n    return sources[0];\n  }\n\n  if (responsivePolicy !== 'static') {\n    return findBestSourceForSize(sources, size);\n  }\n  const staticSupportedSources = sources\n    .filter(\n      (s) => s.uri && s.width != null && !isBlurhashString(s.uri) && !isThumbhashString(s.uri)\n    )\n    .sort(\n      (a, b) => (a.webMaxViewportWidth ?? a.width ?? 0) - (b.webMaxViewportWidth ?? b.width ?? 0)\n    );\n\n  if (staticSupportedSources.length === 0) {\n    console.warn(\n      \"You've set the `static` responsivePolicy but none of the sources have the `width` properties set. Make sure you set both `width` and `webMaxViewportWidth` for best results when using static responsiveness. Falling back to the `initial` policy.\"\n    );\n    return findBestSourceForSize(sources, size);\n  }\n\n  const srcset = staticSupportedSources\n    ?.map((source) => `${source.uri} ${source.width}w`)\n    .join(', ');\n  const sizes = `${staticSupportedSources\n    ?.map(getCSSMediaQueryForSource)\n    .join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;\n  return {\n    srcset,\n    sizes,\n    uri: staticSupportedSources[staticSupportedSources.length - 1]?.uri ?? '',\n    type: 'srcset',\n  };\n}\n\ntype UseSourceSelectionReturn = {\n  containerRef: (element: HTMLDivElement) => void;\n  source: ImageSource | SrcSetSource | null;\n};\n\nexport default function useSourceSelection(\n  sources?: ImageSource[],\n  responsivePolicy: ImageProps['responsivePolicy'] = 'static',\n  measurementCallback?: (target: HTMLElement, size: DOMRect) => void\n): UseSourceSelectionReturn {\n  const hasMoreThanOneSource = (sources?.length ?? 0) > 1;\n  // null - not calculated yet, DOMRect - size available\n  const [size, setSize] = useState<null | DOMRect>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserver.current?.disconnect();\n    };\n  }, []);\n\n  const containerRef = React.useCallback(\n    (element: HTMLDivElement) => {\n      // we can't short circuit here since we need to read the size for better animated transitions\n      if (!hasMoreThanOneSource && !measurementCallback) {\n        return;\n      }\n      const rect = element?.getBoundingClientRect();\n      measurementCallback?.(element, rect);\n      setSize(rect);\n\n      if (responsivePolicy === 'live') {\n        resizeObserver.current?.disconnect();\n        if (!element) {\n          return;\n        }\n        resizeObserver.current = new ResizeObserver((entries) => {\n          setSize(entries[0].contentRect);\n          measurementCallback?.(entries[0].target as any, entries[0].contentRect);\n        });\n        resizeObserver.current.observe(element);\n      }\n    },\n    [hasMoreThanOneSource, responsivePolicy]\n  );\n\n  const source = selectSource(sources, size, responsivePolicy);\n\n  return React.useMemo(\n    () => ({\n      containerRef,\n      source,\n    }),\n    [source]\n  );\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modules": ["ImageModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.image.ExpoImageModule"]
+  }
+}