@micromag/core 0.3.807 → 0.3.811

package/es/hooks.js

@@ -2144,6 +2144,24 @@ function useSpringValue(wantedProgress, immediate, params) {
   return immediate ? wantedProgress : progress;
 }
 
+function useSupportsWebp() {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    supportsWebp = _useState2[0],
+    setSupportsWebp = _useState2[1];
+  useEffect(function () {
+    var img = document.createElement('img');
+    img.onload = function () {
+      setSupportsWebp(img.width > 0 && img.height > 0);
+    };
+    img.onerror = function () {
+      setSupportsWebp(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  }, []);
+  return supportsWebp;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$width = _ref.width,
@@ -2431,4 +2449,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDevicePixelRatio, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, usePlaceholderStyle, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDevicePixelRatio, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, usePlaceholderStyle, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSupportsWebp, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/utils.js

@@ -514,22 +514,27 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
     _ref$resolution = _ref.resolution,
     resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
     _ref$maxDiff = _ref.maxDiff,
-    maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff;
+    maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff,
+    _ref$supportsWebp = _ref.supportsWebp,
+    supportsWebp = _ref$supportsWebp === void 0 ? false : _ref$supportsWebp;
   var _ref2 = media || {},
     _ref2$sizes = _ref2.sizes,
     sizes = _ref2$sizes === void 0 ? null : _ref2$sizes,
     _ref2$url = _ref2.url,
     defaultUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$webp_url = _ref2.webp_url,
+    defaultWebpUrl = _ref2$webp_url === void 0 ? null : _ref2$webp_url,
     _ref2$metadata = _ref2.metadata,
     _ref2$metadata2 = _ref2$metadata === void 0 ? {} : _ref2$metadata,
     imgWidth = _ref2$metadata2.width,
     imgHeight = _ref2$metadata2.height;
+  var finalDefaultUrl = supportsWebp && defaultWebpUrl !== null ? defaultWebpUrl : defaultUrl;
   if (sizes === null || containerWidth === null && containerHeight === null) {
-    return defaultUrl;
+    return finalDefaultUrl;
   }
   var finalSizes = _objectSpread({
     original: {
-      url: defaultUrl,
+      url: finalDefaultUrl,
       width: imgWidth,
       height: imgHeight
     }
@@ -542,10 +547,16 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
         currentSize = acc.size;
       var _finalSizes$key = finalSizes[key],
         url = _finalSizes$key.url,
+        _finalSizes$key$webp_ = _finalSizes$key.webp_url,
+        webpUrl = _finalSizes$key$webp_ === void 0 ? null : _finalSizes$key$webp_,
         _finalSizes$key$width = _finalSizes$key.width,
         width = _finalSizes$key$width === void 0 ? null : _finalSizes$key$width,
         _finalSizes$key$heigh = _finalSizes$key.height,
         height = _finalSizes$key$heigh === void 0 ? null : _finalSizes$key$heigh;
+      var sizeUrl = supportsWebp && webpUrl !== null ? webpUrl : url;
+      console.log({
+        sizeUrl: sizeUrl
+      });
       var diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
       var diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
       var isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
@@ -566,9 +577,12 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
       diff <= maxDiff && !currentIsLarger && isLarger ||
       // Image is larger than previous
       diff <= maxDiff && !currentIsLarger && !isLarger && sizeIsLarger) {
+        console.log({
+          sizeUrl: sizeUrl
+        });
         return {
           key: key,
-          url: url,
+          url: sizeUrl,
           diff: diff,
           isLarger: isLarger
         };
@@ -576,12 +590,19 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
       return acc;
     }, {
       key: null,
-      url: defaultUrl,
+      url: finalDefaultUrl,
       diff: Infinity,
       isLarger: false,
       size: 0
     }),
     finalUrl = _Object$keys$reduce.url;
+  console.log({
+    finalUrl: finalUrl,
+    finalDefaultUrl: finalDefaultUrl,
+    supportsWebp: supportsWebp,
+    defaultWebpUrl: defaultWebpUrl,
+    defaultUrl: defaultUrl
+  });
   return finalUrl;
 };
 

package/lib/hooks.js

@@ -2146,6 +2146,24 @@ function useSpringValue(wantedProgress, immediate, params) {
   return immediate ? wantedProgress : progress;
 }
 
+function useSupportsWebp() {
+  var _useState = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    supportsWebp = _useState2[0],
+    setSupportsWebp = _useState2[1];
+  react.useEffect(function () {
+    var img = document.createElement('img');
+    img.onload = function () {
+      setSupportsWebp(img.width > 0 && img.height > 0);
+    };
+    img.onerror = function () {
+      setSupportsWebp(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  }, []);
+  return supportsWebp;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$width = _ref.width,
@@ -2470,6 +2488,7 @@ exports.useResizeObserver = useResizeObserver;
 exports.useScreenSizeFromElement = useScreenSizeFromElement;
 exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
 exports.useSpringValue = useSpringValue;
+exports.useSupportsWebp = useSupportsWebp;
 exports.useSwipe = useSwipe;
 exports.useThemeParser = useThemeParser;
 exports.useTrackEvent = useTrackEvent;

package/lib/utils.js

@@ -515,22 +515,27 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
     _ref$resolution = _ref.resolution,
     resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
     _ref$maxDiff = _ref.maxDiff,
-    maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff;
+    maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff,
+    _ref$supportsWebp = _ref.supportsWebp,
+    supportsWebp = _ref$supportsWebp === void 0 ? false : _ref$supportsWebp;
   var _ref2 = media || {},
     _ref2$sizes = _ref2.sizes,
     sizes = _ref2$sizes === void 0 ? null : _ref2$sizes,
     _ref2$url = _ref2.url,
     defaultUrl = _ref2$url === void 0 ? null : _ref2$url,
+    _ref2$webp_url = _ref2.webp_url,
+    defaultWebpUrl = _ref2$webp_url === void 0 ? null : _ref2$webp_url,
     _ref2$metadata = _ref2.metadata,
     _ref2$metadata2 = _ref2$metadata === void 0 ? {} : _ref2$metadata,
     imgWidth = _ref2$metadata2.width,
     imgHeight = _ref2$metadata2.height;
+  var finalDefaultUrl = supportsWebp && defaultWebpUrl !== null ? defaultWebpUrl : defaultUrl;
   if (sizes === null || containerWidth === null && containerHeight === null) {
-    return defaultUrl;
+    return finalDefaultUrl;
   }
   var finalSizes = _objectSpread({
     original: {
-      url: defaultUrl,
+      url: finalDefaultUrl,
       width: imgWidth,
       height: imgHeight
     }
@@ -543,10 +548,16 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
         currentSize = acc.size;
       var _finalSizes$key = finalSizes[key],
         url = _finalSizes$key.url,
+        _finalSizes$key$webp_ = _finalSizes$key.webp_url,
+        webpUrl = _finalSizes$key$webp_ === void 0 ? null : _finalSizes$key$webp_,
         _finalSizes$key$width = _finalSizes$key.width,
         width = _finalSizes$key$width === void 0 ? null : _finalSizes$key$width,
         _finalSizes$key$heigh = _finalSizes$key.height,
         height = _finalSizes$key$heigh === void 0 ? null : _finalSizes$key$heigh;
+      var sizeUrl = supportsWebp && webpUrl !== null ? webpUrl : url;
+      console.log({
+        sizeUrl: sizeUrl
+      });
       var diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
       var diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
       var isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
@@ -567,9 +578,12 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
       diff <= maxDiff && !currentIsLarger && isLarger ||
       // Image is larger than previous
       diff <= maxDiff && !currentIsLarger && !isLarger && sizeIsLarger) {
+        console.log({
+          sizeUrl: sizeUrl
+        });
         return {
           key: key,
-          url: url,
+          url: sizeUrl,
           diff: diff,
           isLarger: isLarger
         };
@@ -577,12 +591,19 @@ var getOptimalImageUrl = function getOptimalImageUrl() {
       return acc;
     }, {
       key: null,
-      url: defaultUrl,
+      url: finalDefaultUrl,
       diff: Infinity,
       isLarger: false,
       size: 0
     }),
     finalUrl = _Object$keys$reduce.url;
+  console.log({
+    finalUrl: finalUrl,
+    finalDefaultUrl: finalDefaultUrl,
+    supportsWebp: supportsWebp,
+    defaultWebpUrl: defaultWebpUrl,
+    defaultUrl: defaultUrl
+  });
   return finalUrl;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.807",
+    "version": "0.3.811",
     "private": false,
     "description": "",
     "keywords": [
@@ -167,5 +167,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5aee5186c7e3b3dc6fe0f11e848943f21c33a195"
+    "gitHead": "80a754e5a50e86fa1e195015112ea0ff39008da8"
 }