@folklore/hooks 0.0.83 → 0.0.85

package/dist/{es.js → index.js}

@@ -2,7 +2,7 @@ import raf from 'raf';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { loadDailymotion, loadVimeo, loadYouTube } from '@folklore/services';
 import createDebug from 'debug';
-import EventsManager from '@folklore/events';
+import { EventsManager } from '@folklore/events';
 import { cancelable } from 'cancelable-promise';
 import isNumber from 'lodash/isNumber';
 
@@ -57,7 +57,7 @@ function useCounter(desiredValue, {
 }
 
 const NO_PLAYER_ERROR$3 = new Error('No player');
-function useDailymotionPlayer(id = null, params = {}) {
+function useDailymotionPlayer(idOrUrl, opts = {}) {
   const {
     width = 0,
     height = 0,
@@ -81,14 +81,14 @@ function useDailymotionPlayer(id = null, params = {}) {
       }
       return null;
     }
-  } = params;
+  } = opts;
   const debug = useMemo(() => createDebug('folklore:video:dailymotion'), []);
   const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.dailymotion !== 'undefined');
   const [playerReady, setPlayerReady] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const apiRef = useRef(typeof window !== 'undefined' && typeof window.dailymotion !== 'undefined' ? window.dailymotion : null);
   const ready = apiLoaded && playerReady;
-  const videoId = useMemo(() => getVideoId(id), [id]);
+  const videoId = useMemo(() => getVideoId(idOrUrl), [idOrUrl]);
   const elementRef = useRef(null);
   const playerRef = useRef(null);
   const playerElementRef = useRef(elementRef.current);
@@ -400,7 +400,7 @@ function getOptionsKey({
 }) {
   return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
 }
-function createObserver(Observer, options = {}) {
+function createObserver(Observer, options = null) {
   let subscribers = [];
   const addSubscriber = (element, callback) => {
     const currentSubscriber = subscribers.find(it => it.element === element) || null;
@@ -433,7 +433,7 @@ function createObserver(Observer, options = {}) {
       });
     });
   };
-  const observer = new Observer(onUpdate, options);
+  const observer = new Observer(onUpdate, options || {});
   const unsubscribe = (element, callback = null) => {
     subscribers = removeSubscriber(element, callback);
     if (typeof observer.unobserve === 'undefined') {
@@ -480,18 +480,18 @@ function getObserver(Observer = null, options = {}) {
   }
   return observers[observerKey];
 }
-function useObserver(Observer, opts = {}, initialEntry = {}) {
+function useObserver(Observer, opts, initialEntry) {
   const {
     root = null,
     rootMargin = null,
     threshold: defaultThreshold = null,
     disabled = false
-  } = opts;
+  } = opts || {};
   const [entry, setEntry] = useState(initialEntry);
   const threshold = useMemo(() => defaultThreshold, [defaultThreshold]);
   const nodeRef = useRef(null);
-  const currentElement = useRef(null);
-  const elementChanged = nodeRef.current !== currentElement.current;
+  const currentElementRef = useRef(null);
+  const elementChanged = nodeRef.current !== currentElementRef.current;
   useEffect(() => {
     if (disabled) {
       return () => {};
@@ -519,7 +519,7 @@ function useObserver(Observer, opts = {}, initialEntry = {}) {
       unsubscribe = localUnsubscribe;
       subscribe(nodeElement, callback);
     }
-    currentElement.current = nodeElement;
+    currentElementRef.current = nodeElement;
     return () => {
       if (unsubscribe !== null) {
         unsubscribe(nodeElement, callback);
@@ -535,6 +535,7 @@ function useObserver(Observer, opts = {}, initialEntry = {}) {
 /**
  * Intersection Observer
  */
+
 const defaultThreshold = [0, 1.0];
 const intersectionObserverInitialEntry = {
   target: null,
@@ -546,34 +547,31 @@ const intersectionObserverInitialEntry = {
   boundingClientRect: null,
   rootBounds: null
 };
-function useIntersectionObserver({
-  root = null,
-  rootMargin = '0px',
-  threshold = defaultThreshold,
-  disabled = false
-} = {}) {
+function useIntersectionObserver(opts = {}) {
   return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, {
-    root,
-    rootMargin,
-    threshold,
-    disabled
+    root: null,
+    rootMargin: '0px',
+    threshold: defaultThreshold,
+    disabled: false,
+    ...opts
   }, intersectionObserverInitialEntry);
 }
 
 /**
  * Resize Observer
  */
+
 const resizeObserverInitialEntry = {
   target: null,
   contentRect: null,
   contentBoxSize: null,
-  borderBoxSize: null
+  borderBoxSize: null,
+  devicePixelContentBoxSize: null
 };
-function useResizeObserver({
-  disabled = false
-} = {}) {
+function useResizeObserver(opts = {}) {
   return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, {
-    disabled
+    disabled: false,
+    ...opts
   }, resizeObserverInitialEntry);
 }
 
@@ -668,7 +666,7 @@ const useItemsPaginated = (loader, {
   onError = null,
   query = null
 } = {}) => {
-  const lastState = useRef(null);
+  const lastStateRef = useRef(null);
   const initialState = useMemo(() => {
     const finalInitialPages = initialPages !== null ? initialPages.map(it => getPageFromResponse(it)) : null;
     const finalLastPage = finalInitialPages !== null ? finalInitialPages.reduce((currentLastPage, {
@@ -783,7 +781,7 @@ const useItemsPaginated = (loader, {
 
   // Reset all on query change
   useEffect(() => {
-    const hadState = lastState.current !== null;
+    const hadState = lastStateRef.current !== null;
     if (hadState) {
       currentPagesRef.current = null;
       updateState({
@@ -796,8 +794,8 @@ const useItemsPaginated = (loader, {
     }
   }, [query]);
   useEffect(() => {
-    const hadState = lastState.current !== null;
-    lastState.current = initialState;
+    const hadState = lastStateRef.current !== null;
+    lastStateRef.current = initialState;
     if (hadState) {
       currentPagesRef.current = initialState.pages;
       setState(initialState);
@@ -885,15 +883,16 @@ function usePlayerCurrentTime(player, {
 }
 
 const NO_PLAYER_ERROR$2 = new Error('No player');
-function useNativeVideoPlayer(url, {
-  width = 0,
-  height = 0,
-  duration = 0,
-  muted: providedMuted = false,
-  initialMuted = false,
-  timeUpdateInterval = 1000,
-  onTimeUpdate: customOnTimeUpdate = null
-} = {}) {
+function useNativeVideoPlayer(url, opts = null) {
+  const {
+    width = 0,
+    height = 0,
+    duration = 0,
+    muted: providedMuted = false,
+    initialMuted = false,
+    timeUpdateInterval = 1000,
+    onTimeUpdate: customOnTimeUpdate = null
+  } = opts || {};
   const debug = useMemo(() => createDebug('folklore:video:native'), []);
   const elementRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
@@ -1075,10 +1074,12 @@ function useNativeVideoPlayer(url, {
   };
 }
 
-const getWindowSize = () => ({
-  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-});
+function getWindowSize() {
+  return {
+    width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+  };
+}
 let currentSize = null;
 function useWindowSize({
   onChange = null,
@@ -1118,9 +1119,10 @@ function useWindowSize({
   return size;
 }
 
+const defaultTriggers = [0.25, 0.5, 0.75, 1];
 function useScrollTrigger({
   disabled = false,
-  triggers = [0.1, 0.25, 0.5, 0.75, 0.9, 1.0],
+  triggers = defaultTriggers,
   useElementScroll = false,
   onTrigger = null
 } = {}) {
@@ -1214,26 +1216,27 @@ function useSupportsWebp(defaultValue = true) {
 }
 
 const NO_PLAYER_ERROR$1 = new Error('No player');
-function useVimeoPlayer(id, {
-  width = 0,
-  height = 0,
-  duration = 0,
-  autoplay = false,
-  autopause = true,
-  byline = false,
-  controls = false,
-  muted: providedMuted = false,
-  initialMuted = false,
-  timeUpdateInterval = 1000,
-  onTimeUpdate: customOnTimeUpdate = null,
-  getVideoId = url => {
-    if (url === null || url.match(/^[0-9]+$/) !== null) {
-      return url;
-    }
-    const match = url.match(/\/[0-9]+/);
-    return match !== null ? match[1] : null;
-  }
-} = {}) {
+function useVimeoPlayer(idOrUrl, opts = {}) {
+  const {
+    width = 0,
+    height = 0,
+    duration = 0,
+    autoplay = false,
+    autopause = true,
+    byline = false,
+    controls = false,
+    muted: providedMuted = false,
+    initialMuted = false,
+    timeUpdateInterval = 1000,
+    onTimeUpdate: customOnTimeUpdate = null,
+    getVideoId = url => {
+      if (url === null || url.match(/^[0-9]+$/) !== null) {
+        return url;
+      }
+      const match = url.match(/\/[0-9]+/);
+      return match !== null ? match[1] : null;
+    }
+  } = opts || {};
   const debug = useMemo(() => createDebug('folklore:video:vimeo'), []);
   const [apiLoaded, setApiLoaded] = useState(false);
   const apiRef = useRef(null);
@@ -1241,7 +1244,7 @@ function useVimeoPlayer(id, {
   const playerRef = useRef(null);
   const playerElementRef = useRef(elementRef.current);
   const elementHasChanged = elementRef.current !== playerElementRef.current;
-  const videoId = useMemo(() => getVideoId(id), [id]);
+  const videoId = useMemo(() => getVideoId(idOrUrl), [idOrUrl]);
   const [ready, setReady] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const [volume, setVolumeState] = useState(initialMuted || providedMuted ? 0 : 1);
@@ -1260,7 +1263,7 @@ function useVimeoPlayer(id, {
   // Load SDK
   useEffect(() => {
     let canceled = false;
-    if (!apiLoaded && id !== null) {
+    if (!apiLoaded && videoId !== null) {
       debug('Load API');
       loadVimeo().then(api => {
         if (!canceled) {
@@ -1273,7 +1276,7 @@ function useVimeoPlayer(id, {
     return () => {
       canceled = true;
     };
-  }, [id]);
+  }, [videoId]);
   const play = useCallback(() => {
     const {
       current: player
@@ -1514,26 +1517,27 @@ function useVimeoPlayer(id, {
 }
 
 const NO_PLAYER_ERROR = new Error('No player');
-function useYouTubePlayer(id, {
-  width = 0,
-  height = 0,
-  duration = 0,
-  autoplay = false,
-  controls = true,
-  timeUpdateInterval = 1000,
-  muted: providedMuted = false,
-  initialMuted = false,
-  onVolumeChange: customOnVolumeChange = null,
-  onTimeUpdate: customOnTimeUpdate = null,
-  getVideoId = url => {
-    if (url === null || url.match(/^https?:/) === null) {
-      return url;
-    }
-    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = url.match(regExp);
-    return match !== null ? match[7] : null;
-  }
-} = {}) {
+function useYouTubePlayer(idOrUrl, opts = null) {
+  const {
+    width = 0,
+    height = 0,
+    duration = 0,
+    autoplay = false,
+    controls = true,
+    timeUpdateInterval = 1000,
+    muted: providedMuted = false,
+    initialMuted = false,
+    onVolumeChange: customOnVolumeChange = null,
+    onTimeUpdate: customOnTimeUpdate = null,
+    getVideoId = url => {
+      if (url === null || url.match(/^https?:/) === null) {
+        return url;
+      }
+      const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+      const match = url.match(regExp);
+      return match !== null ? match[7] : null;
+    }
+  } = opts || {};
   const debug = useMemo(() => createDebug('folklore:video:youtube'), []);
   const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined');
   const apiRef = useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null);
@@ -1544,7 +1548,7 @@ function useYouTubePlayer(id, {
     playerElementRef.current = elementRef.current;
   }
   const elementHasChanged = elementRef.current !== playerElementRef.current;
-  const videoId = useMemo(() => getVideoId(id), [id]);
+  const videoId = useMemo(() => getVideoId(idOrUrl), [idOrUrl]);
   const [ready, setReady] = useState(false);
   const [muted, setMuted] = useState(initialMuted || providedMuted);
   const [playState, setPlayState] = useState({
@@ -1754,23 +1758,23 @@ function useYouTubePlayer(id, {
   };
 }
 
-function useVideoPlayer(params) {
-  const {
-    service = null,
-    videoId = null,
-    url = null,
-    onLoaded: customOnLoaded = null,
-    onPlay: customOnPlay = null,
-    onPause: customOnPause = null,
-    onEnd: customOnEnd = null,
-    onMetadataChange: customOnMetadataChange = null,
-    onBufferStart: customOnBufferStart = null,
-    onBufferEnded: customOnBufferEnded = null
-  } = params || {};
-  const dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, params);
-  const youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, params);
-  const vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, params);
-  const nativePlayer = useNativeVideoPlayer(url, params);
+function useVideoPlayer({
+  service = null,
+  videoId = null,
+  url = null,
+  onLoaded: customOnLoaded = null,
+  onPlay: customOnPlay = null,
+  onPause: customOnPause = null,
+  onEnd: customOnEnd = null,
+  onMetadataChange: customOnMetadataChange = null,
+  onBufferStart: customOnBufferStart = null,
+  onBufferEnded: customOnBufferEnded = null,
+  ...opts
+} = {}) {
+  const dailymotionPlayer = useDailymotionPlayer(service === 'dailymotion' ? videoId || url : null, opts);
+  const youtubePlayer = useYouTubePlayer(service === 'youtube' ? videoId || url : null, opts);
+  const vimeoPlayer = useVimeoPlayer(service === 'vimeo' ? videoId || url : null, opts);
+  const nativePlayer = useNativeVideoPlayer(['dailymotion', 'youtube', 'vimeo'].indexOf(service) === -1 ? url : null, opts);
   let player = null;
   if (service === 'dailymotion') {
     player = dailymotionPlayer;
@@ -1836,15 +1840,11 @@ function useVisualViewport() {
     width: windowWidth,
     height: windowHeight
   } = useWindowSize();
-  const [{
-    width: viewportWidth,
-    height: viewportHeight,
-    ...viewport
-  }, setViewport] = useState({
+  const [viewport, setViewport] = useState({
     width: windowWidth,
     height: windowHeight
   });
-  const updateViewport = useCallback((viewPort = null) => {
+  const updateViewport = useCallback((newViewport = null) => {
     const {
       width: newWidth = 0,
       height: newHeight = 0,
@@ -1852,7 +1852,7 @@ function useVisualViewport() {
       offsetLeft: newOffsetLeft = 0,
       pageLeft: newPageLeft = 0,
       pageTop: newPageTop = 0
-    } = viewPort || window.visualViewport || {};
+    } = newViewport || window.visualViewport || {};
     setViewport({
       width: newWidth,
       height: newHeight,
@@ -1877,18 +1877,25 @@ function useVisualViewport() {
       window.visualViewport.removeEventListener('scroll', onUpdate);
     };
   }, [updateViewport]);
+  const {
+    width: viewportWidth,
+    height: viewportHeight,
+    ...otherViewport
+  } = viewport;
   return {
     width: viewportWidth || windowWidth,
     height: viewportHeight || windowHeight,
-    ...viewport,
+    ...otherViewport,
     updateViewport
   };
 }
 
-const getWindowScroll = () => ({
-  x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
-  y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
-});
+function getWindowScroll() {
+  return {
+    x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
+    y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
+  };
+}
 let currentScroll = null;
 function useWindowScroll({
   onChange = null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.83",
+    "version": "0.0.85",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -27,16 +27,22 @@
             "email": "nrb@folklore.email"
         }
     ],
-    "main": "dist/cjs.js",
-    "module": "dist/es.js",
+    "type": "module",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "default": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
     "files": [
         "dist"
     ],
     "sideEffects": false,
     "scripts": {
-        "clean": "rm -rf dist",
-        "build": "rollup --bundleConfigAsCjs --config ../../rollup.config.js",
-        "prepublishOnly": "npm run clean && npm run build"
+        "build": "../../scripts/prepare-package.sh --types",
+        "prepublishOnly": "npm run build"
     },
     "devDependencies": {
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -49,11 +55,11 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "81b41a4e0ac8ae61d302f97611771b1613a904c7",
+    "gitHead": "d1ea3212d18c8203657536bc2b80caeb284403e2",
     "dependencies": {
-        "@folklore/events": "^0.0.10",
-        "@folklore/services": "^0.1.44",
-        "@folklore/utils": "^0.1.4",
+        "@folklore/events": "^0.0.12",
+        "@folklore/services": "^0.1.46",
+        "@folklore/utils": "^0.1.6",
         "cancelable-promise": "^4.3.1",
         "debug": "^4.3.4",
         "lodash": "^4.17.21",