react-atom-trigger 1.0.17 → 1.1.0

package/README.md

@@ -60,6 +60,20 @@ So, if you already have some scroll event listener, just provide it to AtomTrigg
 ## Utility hooks
 For someone who wants everything out-of-the-box, `useWindowDimensions`, `useWindowScroll` and `useContainerScroll` hooks are also available for import.
 
+## Build
+This package is built with `tsdown`.
+
+Build output:
+
+```text
+lib/index.js
+lib/index.es.js
+lib/index.d.ts
+```
+
+## UMD global
+When the UMD bundle is loaded directly in the browser, the library is exposed as `window.reactAtomTrigger`.
+
 ## Examples
 It is sometimes better to tweak and see for yourself: [CodeSandbox examples](https://codesandbox.io/examples/package/react-atom-trigger).
 
@@ -68,4 +82,3 @@ It is sometimes better to tweak and see for yourself: [CodeSandbox examples](htt
 
 
 
-

package/lib/index.d.ts

@@ -1,3 +1,49 @@
-export { default as AtomTrigger } from './AtomTrigger';
-export * from './AtomTrigger';
-export * from './utils';
+import React from "react";
+
+//#region src/AtomTrigger.types.d.ts
+type ScrollEvent = {
+  scrollX: number;
+  scrollY: number;
+};
+type Dimensions = {
+  width: number;
+  height: number;
+};
+type DebugInfo = {
+  timesTriggered: {
+    leftViewport: number;
+    enteredViewport: number;
+  };
+  trigger: 'entered' | 'left';
+};
+interface IAtomTriggerProps {
+  scrollEvent: ScrollEvent;
+  behavior?: 'default' | 'enter' | 'leave';
+  callback: () => unknown;
+  getDebugInfo?: (data: DebugInfo) => void;
+  triggerOnce?: boolean;
+  className?: string;
+  dimensions: Dimensions;
+  offset?: [number, number, number, number];
+}
+//#endregion
+//#region src/AtomTrigger.d.ts
+declare const AtomTrigger: React.FC<IAtomTriggerProps>;
+//#endregion
+//#region src/utils.d.ts
+type Options = {
+  passiveEventListener?: boolean;
+  eventListenerTimeoutMs?: number;
+};
+declare function log<T>(log: T, color?: string): void;
+declare function useWindowDimensions(options?: Options | undefined): Dimensions;
+declare function useContainerScroll({
+  containerRef,
+  options
+}: {
+  containerRef?: React.RefObject<HTMLDivElement>;
+  options?: Options;
+}): ScrollEvent;
+declare function useWindowScroll(options?: Options): ScrollEvent;
+//#endregion
+export { AtomTrigger, Options, log, useContainerScroll, useWindowDimensions, useWindowScroll };

package/lib/index.es.js

@@ -1 +1 @@
-import e from"react";const t=({scrollEvent:t,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:s,behavior:i="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=e.useRef(null),[f,d]=e.useState(void 0),a=e.useRef(void 0),[p,v]=e.useState({leftViewport:0,enteredViewport:0});return e.useLayoutEffect((()=>{if(l.current){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?d("inViewport"):e.top>c.height-n?d("bottom"):d("top")}}),[l,t,c,u]),e.useLayoutEffect((()=>{if(void 0===a.current&&void 0!==f&&(a.current=f),"inViewport"===f&&("bottom"===a.current||"top"===a.current)){if("enter"===i&&(!o||o&&p.enteredViewport)||"default"===i&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),v(e)}a.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===a.current&&(a.current=f,"leave"===i&&(!o||o&&0===p.leftViewport)||"default"===i&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),v(e)}}),[f,r,o,i,n]),e.createElement("div",{ref:l,style:{display:"table"},className:s})};function r(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())}function n(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function o(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function s(t){const[r,n]=e.useState(o()),s=e.useRef(null),i=e.useRef(!1),c=t?.eventListenerTimeoutMs||15;return e.useEffect((()=>{const e=o();function r(){s.current&&clearTimeout(s.current),s.current=setTimeout((()=>n(o())),c)}return n(e),window.addEventListener("resize",r,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("resize",r)}}),[]),r}function i({containerRef:t,options:r}){const[o,s]=e.useState(n()),i=e.useRef(null),c=e.useRef(!1);return e.useEffect((()=>{const e=e=>{const t=e.target;i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{s({scrollX:t.scrollLeft,scrollY:t.scrollTop})}),r?.eventListenerTimeoutMs||15)},n=t?.current;return n&&(n&&!1===c.current&&n.addEventListener("scroll",e,{passive:r?.passiveEventListener}),c.current=!0),()=>{c&&n&&n.removeEventListener("scroll",e)}}),[t]),o}function c(t){const[r,o]=e.useState(n()),s=e.useRef(null),i=e.useRef(!1);return e.useEffect((()=>{const e=()=>{s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=n();o({scrollX:e,scrollY:t})}),t?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",e,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("scroll",e)}}),[]),r}export{t as AtomTrigger,r as log,i as useContainerScroll,s as useWindowDimensions,c as useWindowScroll};
+import e from"react";const t=({scrollEvent:t,callback:n,getDebugInfo:r,triggerOnce:i=!1,className:a,behavior:o=`default`,dimensions:s,offset:c=[0,0,0,0]})=>{let l=e.useRef(null),[u,d]=e.useState(void 0),f=e.useRef(void 0),[p,m]=e.useState({leftViewport:0,enteredViewport:0});return e.useLayoutEffect(()=>{if(l.current){let e=l.current.getBoundingClientRect(),[t,n,r,i]=c;e.top>t&&e.bottom<s.height-r&&e.left>i&&e.right<s.width-n?d(`inViewport`):e.top>s.height-r?d(`bottom`):d(`top`)}},[l,t,s,c]),e.useLayoutEffect(()=>{if(f.current===void 0&&u!==void 0&&(f.current=u),u===`inViewport`&&(f.current===`bottom`||f.current===`top`)){if(o===`enter`&&(!i||i&&p.enteredViewport)||o===`default`&&(!i||i&&(p.enteredViewport<1||p.leftViewport<1))){n&&n();let e={...p,enteredViewport:p.enteredViewport+1};r&&r({timesTriggered:e,trigger:`entered`}),m(e)}f.current=u}if((u===`top`||u===`bottom`)&&f.current===`inViewport`&&(f.current=u,o===`leave`&&(!i||i&&p.leftViewport===0)||o===`default`&&(!i||i&&(p.leftViewport<1||p.enteredViewport<1)))){n&&n();let e={...p,leftViewport:p.leftViewport+1};r&&r({timesTriggered:e,trigger:`left`}),m(e)}},[u,n,i,o,r]),e.createElement(`div`,{ref:l,style:{display:`table`},className:a})};function n(e,t){}function r(){let{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function i(){let{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function a(t){let[n,r]=e.useState(i()),a=e.useRef(null),o=e.useRef(!1),s=t?.eventListenerTimeoutMs||15;return e.useEffect(()=>{r(i());function e(){a.current&&clearTimeout(a.current),a.current=setTimeout(()=>r(i()),s)}return window.addEventListener(`resize`,e,{passive:t?.passiveEventListener}),o.current=!0,()=>{o&&window.removeEventListener(`resize`,e)}},[]),n}function o({containerRef:t,options:n}){let[i,a]=e.useState(r()),o=e.useRef(null),s=e.useRef(!1);return e.useEffect(()=>{let e=e=>{let t=e.target;o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{a({scrollX:t.scrollLeft,scrollY:t.scrollTop})},n?.eventListenerTimeoutMs||15)},r=t?.current;return r&&(r&&s.current===!1&&r.addEventListener(`scroll`,e,{passive:n?.passiveEventListener}),s.current=!0),()=>{s&&r&&r.removeEventListener(`scroll`,e)}},[t]),i}function s(t){let[n,i]=e.useState(r()),a=e.useRef(null),o=e.useRef(!1);return e.useEffect(()=>{let e=()=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{let{scrollX:e,scrollY:t}=r();i({scrollX:e,scrollY:t})},t?.eventListenerTimeoutMs||20)};return window.addEventListener(`scroll`,e,{passive:t?.passiveEventListener}),o.current=!0,()=>{o&&window.removeEventListener(`scroll`,e)}},[]),n}export{t as AtomTrigger,n as log,o as useContainerScroll,a as useWindowDimensions,s as useWindowScroll};

package/lib/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-atom-trigger"]={},e.React)}(this,(function(e,t){"use strict";function r(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function n(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}e.AtomTrigger=({scrollEvent:e,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:i,behavior:s="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=t.useRef(null),[f,d]=t.useState(void 0),a=t.useRef(void 0),[p,g]=t.useState({leftViewport:0,enteredViewport:0});return t.useLayoutEffect((()=>{if(l.current){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?d("inViewport"):e.top>c.height-n?d("bottom"):d("top")}}),[l,e,c,u]),t.useLayoutEffect((()=>{if(void 0===a.current&&void 0!==f&&(a.current=f),"inViewport"===f&&("bottom"===a.current||"top"===a.current)){if("enter"===s&&(!o||o&&p.enteredViewport)||"default"===s&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),g(e)}a.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===a.current&&(a.current=f,"leave"===s&&(!o||o&&0===p.leftViewport)||"default"===s&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),g(e)}}),[f,r,o,s,n]),t.createElement("div",{ref:l,style:{display:"table"},className:i})},e.log=function(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())},e.useContainerScroll=function({containerRef:e,options:n}){const[o,i]=t.useState(r()),s=t.useRef(null),c=t.useRef(!1);return t.useEffect((()=>{const t=e=>{const t=e.target;s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{i({scrollX:t.scrollLeft,scrollY:t.scrollTop})}),n?.eventListenerTimeoutMs||15)},r=e?.current;return r&&(r&&!1===c.current&&r.addEventListener("scroll",t,{passive:n?.passiveEventListener}),c.current=!0),()=>{c&&r&&r.removeEventListener("scroll",t)}}),[e]),o},e.useWindowDimensions=function(e){const[r,o]=t.useState(n()),i=t.useRef(null),s=t.useRef(!1),c=e?.eventListenerTimeoutMs||15;return t.useEffect((()=>{const t=n();function r(){i.current&&clearTimeout(i.current),i.current=setTimeout((()=>o(n())),c)}return o(t),window.addEventListener("resize",r,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("resize",r)}}),[]),r},e.useWindowScroll=function(e){const[n,o]=t.useState(r()),i=t.useRef(null),s=t.useRef(!1);return t.useEffect((()=>{const t=()=>{i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=r();o({scrollX:e,scrollY:t})}),e?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",t,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("scroll",t)}}),[]),n}}));
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.reactAtomTrigger={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let l=({scrollEvent:e,callback:n,getDebugInfo:r,triggerOnce:i=!1,className:a,behavior:o=`default`,dimensions:s,offset:c=[0,0,0,0]})=>{let l=t.default.useRef(null),[u,d]=t.default.useState(void 0),f=t.default.useRef(void 0),[p,m]=t.default.useState({leftViewport:0,enteredViewport:0});return t.default.useLayoutEffect(()=>{if(l.current){let e=l.current.getBoundingClientRect(),[t,n,r,i]=c;e.top>t&&e.bottom<s.height-r&&e.left>i&&e.right<s.width-n?d(`inViewport`):e.top>s.height-r?d(`bottom`):d(`top`)}},[l,e,s,c]),t.default.useLayoutEffect(()=>{if(f.current===void 0&&u!==void 0&&(f.current=u),u===`inViewport`&&(f.current===`bottom`||f.current===`top`)){if(o===`enter`&&(!i||i&&p.enteredViewport)||o===`default`&&(!i||i&&(p.enteredViewport<1||p.leftViewport<1))){n&&n();let e={...p,enteredViewport:p.enteredViewport+1};r&&r({timesTriggered:e,trigger:`entered`}),m(e)}f.current=u}if((u===`top`||u===`bottom`)&&f.current===`inViewport`&&(f.current=u,o===`leave`&&(!i||i&&p.leftViewport===0)||o===`default`&&(!i||i&&(p.leftViewport<1||p.enteredViewport<1)))){n&&n();let e={...p,leftViewport:p.leftViewport+1};r&&r({timesTriggered:e,trigger:`left`}),m(e)}},[u,n,i,o,r]),t.default.createElement(`div`,{ref:l,style:{display:`table`},className:a})};function u(e,t){}function d(){let{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function f(){let{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function p(e){let[n,r]=t.default.useState(f()),i=t.default.useRef(null),a=t.default.useRef(!1),o=e?.eventListenerTimeoutMs||15;return t.default.useEffect(()=>{r(f());function t(){i.current&&clearTimeout(i.current),i.current=setTimeout(()=>r(f()),o)}return window.addEventListener(`resize`,t,{passive:e?.passiveEventListener}),a.current=!0,()=>{a&&window.removeEventListener(`resize`,t)}},[]),n}function m({containerRef:e,options:n}){let[r,i]=t.default.useState(d()),a=t.default.useRef(null),o=t.default.useRef(!1);return t.default.useEffect(()=>{let t=e=>{let t=e.target;a.current&&clearTimeout(a.current),a.current=setTimeout(()=>{i({scrollX:t.scrollLeft,scrollY:t.scrollTop})},n?.eventListenerTimeoutMs||15)},r=e?.current;return r&&(r&&o.current===!1&&r.addEventListener(`scroll`,t,{passive:n?.passiveEventListener}),o.current=!0),()=>{o&&r&&r.removeEventListener(`scroll`,t)}},[e]),r}function h(e){let[n,r]=t.default.useState(d()),i=t.default.useRef(null),a=t.default.useRef(!1);return t.default.useEffect(()=>{let t=()=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{let{scrollX:e,scrollY:t}=d();r({scrollX:e,scrollY:t})},e?.eventListenerTimeoutMs||20)};return window.addEventListener(`scroll`,t,{passive:e?.passiveEventListener}),a.current=!0,()=>{a&&window.removeEventListener(`scroll`,t)}},[]),n}e.AtomTrigger=l,e.log=u,e.useContainerScroll=m,e.useWindowDimensions=p,e.useWindowScroll=h});

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "module": "lib/index.es.js",
   "typings": "lib/index.d.ts",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "innrVoice <innrvoice@icloud.com>",
   "repository": {
@@ -16,31 +16,18 @@
     "url": "https://github.com/innrvoice/react-atom-trigger/issues"
   },
   "scripts": {
-    "build": "rimraf lib && rollup -c rollup.config.js"
+    "build": "tsdown",
+    "lint": "oxlint . --ignore-pattern node_modules --ignore-pattern lib"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "0.4.4",
     "@types/node": "^20.6.3",
     "@types/react": "^19.0.12",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "oxlint": "^1.50.0",
     "prettier": "^3.4.2",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.37.0",
-    "rollup-plugin-node-externals": "^8.0.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "tsdown": "^0.21.0-beta.2",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3"
   },
@@ -54,10 +41,7 @@
   "files": [
     "lib"
   ],
-  "volta": {
-    "node": "20.18.1"
-  },
-  "resolutions": {
-    "glob": "11.1.0"
+  "engines": {
+    "node": ">=20.19.0"
   }
 }

package/lib/AtomTrigger.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { IAtomTriggerProps } from './AtomTrigger.types';
-declare const AtomTrigger: React.FC<IAtomTriggerProps>;
-export default AtomTrigger;

package/lib/AtomTrigger.types.d.ts

@@ -1,25 +0,0 @@
-export type ScrollEvent = {
-    scrollX: number;
-    scrollY: number;
-};
-export type Dimensions = {
-    width: number;
-    height: number;
-};
-export type DebugInfo = {
-    timesTriggered: {
-        leftViewport: number;
-        enteredViewport: number;
-    };
-    trigger: 'entered' | 'left';
-};
-export interface IAtomTriggerProps {
-    scrollEvent: ScrollEvent;
-    behavior?: 'default' | 'enter' | 'leave';
-    callback: () => unknown;
-    getDebugInfo?: (data: DebugInfo) => void;
-    triggerOnce?: boolean;
-    className?: string;
-    dimensions: Dimensions;
-    offset?: [number, number, number, number];
-}

package/lib/utils.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Dimensions, ScrollEvent } from './AtomTrigger.types';
-export type Options = {
-    passiveEventListener?: boolean;
-    eventListenerTimeoutMs?: number;
-};
-export declare function log<T>(log: T, color?: string): void;
-export declare function useWindowDimensions(options?: Options | undefined): Dimensions;
-export declare function useContainerScroll({ containerRef, options, }: {
-    containerRef?: React.RefObject<HTMLDivElement>;
-    options?: Options;
-}): ScrollEvent;
-export declare function useWindowScroll(options?: Options): ScrollEvent;