@folklore/hooks 0.0.80 → 0.0.82

package/dist/cjs.js

@@ -1081,15 +1081,23 @@ const getWindowSize = () => ({
   width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
   height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
 });
-let currentSize = getWindowSize();
+let currentSize = null;
 function useWindowSize({
-  onChange = null
+  onChange = null,
+  onMount = false,
+  memo = false
 } = {}) {
-  const [size, setSize] = react.useState(currentSize);
+  const [size, setSize] = react.useState(onMount ? getWindowSize() : {
+    width: 0,
+    height: 0
+  });
   const sizeRef = react.useRef(size);
+  if (currentSize === null && memo) {
+    currentSize = size;
+  }
   const updateSize = react.useCallback(() => {
     const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+    if (memo && (currentSize.width !== newSize.width || currentSize.height !== newSize.height)) {
       currentSize = newSize;
     }
     if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
@@ -1098,7 +1106,7 @@ function useWindowSize({
       return newSize;
     }
     return null;
-  }, [setSize]);
+  }, [setSize, memo]);
   const onResize = react.useCallback(() => {
     const newSize = updateSize();
     if (newSize !== null && onChange !== null) {
@@ -1179,6 +1187,34 @@ function useScrollTrigger({
   };
 }
 
+function checkWebpSupport() {
+  return new Promise(resolve => {
+    const img = document.createElement('img');
+    img.onload = () => {
+      resolve(img.width > 0 && img.height > 0);
+    };
+    img.onerror = () => {
+      resolve(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp(defaultValue = true) {
+  const [supportsWebp, setSupportsWebp] = react.useState(defaultValue);
+  react.useEffect(() => {
+    let canceled = false;
+    checkWebpSupport().then(newSupport => {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return supportsWebp;
+}
+
 const NO_PLAYER_ERROR$1 = new Error('No player');
 function useVimeoPlayer(id, {
   width = 0,
@@ -1855,16 +1891,27 @@ const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
 });
-let currentScroll = getWindowScroll();
-function useWindowScroll(opts = {}) {
-  const {
-    onChange = null
-  } = opts;
-  const [scroll, setScroll] = react.useState(currentScroll);
+let currentScroll = null;
+function useWindowScroll({
+  onChange = null,
+  onMount = false,
+  memo = false
+} = {}) {
+  const [scroll, setScroll] = react.useState(onMount ? getWindowScroll() : {
+    x: 0,
+    y: 0
+  });
   const scrollRef = react.useRef(scroll);
+  if (currentScroll === null && memo) {
+    currentScroll = scroll;
+  }
   const updateScroll = react.useCallback(() => {
     const newScroll = getWindowScroll();
-    if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) {
+    const {
+      x: currentX,
+      y: currentY
+    } = currentScroll || {};
+    if (memo && (currentX !== newScroll.x || currentY !== newScroll.y)) {
       currentScroll = newScroll;
     }
     if (scrollRef.current.x !== newScroll.x || scrollRef.current.y !== newScroll.y) {
@@ -1873,7 +1920,7 @@ function useWindowScroll(opts = {}) {
       return newScroll;
     }
     return null;
-  }, [setScroll]);
+  }, [setScroll, memo]);
   const onScroll = react.useCallback(() => {
     const newScroll = updateScroll();
     if (newScroll !== null && onChange !== null) {
@@ -1901,6 +1948,7 @@ exports.useObserver = useObserver;
 exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useScrollTrigger = useScrollTrigger;
+exports.useSupportsWebp = useSupportsWebp;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
 exports.useVisualViewport = useVisualViewport;

package/dist/es.js

@@ -1079,15 +1079,23 @@ const getWindowSize = () => ({
   width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
   height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
 });
-let currentSize = getWindowSize();
+let currentSize = null;
 function useWindowSize({
-  onChange = null
+  onChange = null,
+  onMount = false,
+  memo = false
 } = {}) {
-  const [size, setSize] = useState(currentSize);
+  const [size, setSize] = useState(onMount ? getWindowSize() : {
+    width: 0,
+    height: 0
+  });
   const sizeRef = useRef(size);
+  if (currentSize === null && memo) {
+    currentSize = size;
+  }
   const updateSize = useCallback(() => {
     const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+    if (memo && (currentSize.width !== newSize.width || currentSize.height !== newSize.height)) {
       currentSize = newSize;
     }
     if (sizeRef.current.width !== newSize.width || sizeRef.current.height !== newSize.height) {
@@ -1096,7 +1104,7 @@ function useWindowSize({
       return newSize;
     }
     return null;
-  }, [setSize]);
+  }, [setSize, memo]);
   const onResize = useCallback(() => {
     const newSize = updateSize();
     if (newSize !== null && onChange !== null) {
@@ -1177,6 +1185,34 @@ function useScrollTrigger({
   };
 }
 
+function checkWebpSupport() {
+  return new Promise(resolve => {
+    const img = document.createElement('img');
+    img.onload = () => {
+      resolve(img.width > 0 && img.height > 0);
+    };
+    img.onerror = () => {
+      resolve(false);
+    };
+    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
+  });
+}
+function useSupportsWebp(defaultValue = true) {
+  const [supportsWebp, setSupportsWebp] = useState(defaultValue);
+  useEffect(() => {
+    let canceled = false;
+    checkWebpSupport().then(newSupport => {
+      if (!canceled && newSupport !== supportsWebp) {
+        setSupportsWebp(newSupport);
+      }
+    });
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return supportsWebp;
+}
+
 const NO_PLAYER_ERROR$1 = new Error('No player');
 function useVimeoPlayer(id, {
   width = 0,
@@ -1853,16 +1889,27 @@ const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
 });
-let currentScroll = getWindowScroll();
-function useWindowScroll(opts = {}) {
-  const {
-    onChange = null
-  } = opts;
-  const [scroll, setScroll] = useState(currentScroll);
+let currentScroll = null;
+function useWindowScroll({
+  onChange = null,
+  onMount = false,
+  memo = false
+} = {}) {
+  const [scroll, setScroll] = useState(onMount ? getWindowScroll() : {
+    x: 0,
+    y: 0
+  });
   const scrollRef = useRef(scroll);
+  if (currentScroll === null && memo) {
+    currentScroll = scroll;
+  }
   const updateScroll = useCallback(() => {
     const newScroll = getWindowScroll();
-    if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) {
+    const {
+      x: currentX,
+      y: currentY
+    } = currentScroll || {};
+    if (memo && (currentX !== newScroll.x || currentY !== newScroll.y)) {
       currentScroll = newScroll;
     }
     if (scrollRef.current.x !== newScroll.x || scrollRef.current.y !== newScroll.y) {
@@ -1871,7 +1918,7 @@ function useWindowScroll(opts = {}) {
       return newScroll;
     }
     return null;
-  }, [setScroll]);
+  }, [setScroll, memo]);
   const onScroll = useCallback(() => {
     const newScroll = updateScroll();
     if (newScroll !== null && onChange !== null) {
@@ -1885,4 +1932,4 @@ function useWindowScroll(opts = {}) {
   return scroll;
 }
 
-export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useScrollTrigger, useVideoPlayer, useVimeoPlayer, useVisualViewport, useVisualViewport as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
+export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useScrollTrigger, useSupportsWebp, useVideoPlayer, useVimeoPlayer, useVisualViewport, useVisualViewport as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.80",
+    "version": "0.0.82",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6d9d9e7770eaabf06aff6864a4d33d0b6ad99eb2",
+    "gitHead": "565254f67e63bf9f1ccb4ef925633af37682e44d",
     "dependencies": {
         "@folklore/events": "^0.0.10",
         "@folklore/services": "^0.1.44",