improved typescript usage

name changes in type declarations
minor code improvements
readme example updated
examples updates with new imports
removed /dist from the repository

Author: olarsson

.gitignore

@@ -21,3 +21,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/dist

.npmignore

@@ -1,4 +1,4 @@
-# react-scrollsy v1.1.9 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
+# react-scrollsy v1.1.10 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
 
 An ambitious light-weight react module written in TypeScript for tracking scroll progress in a performant way. Developed for use with spring based animation libraries such as react-spring, but can be used with or without any library.
 
@@ -23,7 +23,7 @@ Here is a very basic example that tracks the scroll progress of the document.
 ```js
 import { ScrollTrackerDocument, ScrollTracker } from "react-scrollsy";
 
-import { IScrollData, IScrollObject } from "react-scrollsy/dist/types";
+import type { ScrollData, ScrollObject } from "react-scrollsy/dist/types";
 
 import { useRef } from "react";
 
@@ -32,7 +32,7 @@ function App() {
 
   return (
     <ScrollTrackerDocument scrollThrottle={33}> // 1000 ms/30 fps = 33ms, limits the triggered events to 30 fps, optional
-      {({ scrollData }: IScrollData) => {
+      {({ scrollData }: ScrollData) => {
         return (
           <ScrollTracker
             scrollData={scrollData}
@@ -44,7 +44,7 @@ function App() {
                 basedOn: "doc",
               },
             }}>
-            {({ scrollObject }: IScrollObject) => {
+            {({ scrollObject }: ScrollObject) => {
               return <h1 ref={refPageProgress}>Here is the scroll progress: {scrollObject.progress}</h1>;
             }}
           </ScrollTracker>
@@ -62,7 +62,7 @@ export default App;
 You don't use TypeScript? No problem, it's not a requirement. Simply remove the type declarations and it will work just fine. For example:
 
 ```js
-      {({ scrollData }: IScrollData) => {
+      {({ scrollData }: ScrollData) => {
         return (...);
       }}
 ```
@@ -98,7 +98,7 @@ Creates a function which returns a `scrollData` object as such:
 
 ```js
 <ScrollTrackerDocument>
-  {({ scrollData }: IScrollData) => {
+  {({ scrollData }: ScrollData) => {
     return (
       // ScrollTracker components and other components can go inside here
     );
@@ -130,7 +130,7 @@ Creates a function which returns a `scrollData` object as such:
 <ScrollTrackerCustom
   key={active.toString()} // forces a rerender of the tracker, use this if you for example hide the element with 'display: none'
   scrollingElement='#custom-scroll-container'>
-  {({ scrollData }: IScrollData) => {
+  {({ scrollData }: ScrollData) => {
     return (
       // ScrollTracker components and other components can go inside here
     );
@@ -188,7 +188,7 @@ Creates a function which returns a `scrollObject` object as such:
       basedOn: "", // when using px this can be left empty
     },
   }}>
-  {({ scrollObject }: IScrollObject) => {
+  {({ scrollObject }: ScrollObject) => {
     return (
       // return for example the scrollObject.progress to reflect progress, and any other elements/components that you wish
     )

README.md

@@ -1,6 +1,6 @@
-import { IScrollTrackerObject } from './types';
+import type { ScrollTrackerObject } from './types';
 export declare const defaultConfig: {
     resizeThrottle: number;
     trigger: string;
 };
-export declare const emptyScrollObject: IScrollTrackerObject;
+export declare const emptyScrollObject: ScrollTrackerObject;

dist/config.d.ts

@@ -1,2 +1,2 @@
-import { IScrollDataChildren } from '../types';
-export declare const childrenAsMethod: ({ scrollData, children }: IScrollDataChildren) => any;
+import type { ScrollDataChildren } from '../types';
+export declare const childrenAsMethod: ({ scrollData, children }: ScrollDataChildren) => any;

dist/functions/childrenAsMethod.d.ts

@@ -1,40 +1,52 @@
-import { IScrollDataBase, IScrollTrackerSettingsProperties } from '../types';
-export declare const calcOffset: ({ mode, scrollData, elementScrollHeight, offsetTop, offsetBottom }: {
+import type { ScrollDataBase, ScrollTrackerSettingsProperties } from '../types';
+interface CalcOffset {
     mode: string;
-    scrollData: IScrollDataBase;
+    scrollData: ScrollDataBase;
     elementScrollHeight: number;
-    offsetTop?: IScrollTrackerSettingsProperties | undefined;
-    offsetBottom?: IScrollTrackerSettingsProperties | undefined;
-}) => number;
-export declare const calcDurationInPx: ({ heightDuration, duration }: {
+    offsetTop?: ScrollTrackerSettingsProperties;
+    offsetBottom?: ScrollTrackerSettingsProperties;
+}
+interface CalcDurationInPx {
     heightDuration: number;
-    duration: IScrollTrackerSettingsProperties;
-}) => number;
-export declare const calcHeightDurationAndElementOffset: ({ duration, elementScrollHeight, elementOffsetTopRelativeToContainer, trigger, scrollData }: {
-    duration: IScrollTrackerSettingsProperties;
+    duration: ScrollTrackerSettingsProperties;
+}
+interface CalcHeightDurationAndElementOffset {
+    duration: ScrollTrackerSettingsProperties;
     elementScrollHeight: number;
     elementOffsetTopRelativeToContainer: number;
     trigger: string;
-    scrollData: IScrollDataBase;
-}) => {
-    heightDuration: number;
-    elementOffset: number;
-};
-export declare const calcElementVisibilityReturn: ({ elementOffset, offsetTopVal, durationInPx, offsetBottomVal, scrollData }: {
+    scrollData: ScrollDataBase;
+}
+interface CalcElementVisibilityReturn {
     elementOffset: number;
     offsetTopVal: number;
     durationInPx: number;
     offsetBottomVal: number;
-    scrollData: IScrollDataBase;
-}) => {
+    scrollData: ScrollDataBase;
+}
+interface ElementVisibility {
+    el: HTMLElement;
+    scrollData: ScrollDataBase;
+    trigger: string;
+    offsetTop?: ScrollTrackerSettingsProperties;
+    offsetBottom?: ScrollTrackerSettingsProperties;
+    duration: ScrollTrackerSettingsProperties;
+}
+export declare const calcOffset: ({ mode, scrollData, elementScrollHeight, offsetTop, offsetBottom }: CalcOffset) => number;
+export declare const calcDurationInPx: ({ heightDuration, duration }: CalcDurationInPx) => number;
+export declare const calcHeightDurationAndElementOffset: ({ duration, elementScrollHeight, elementOffsetTopRelativeToContainer, trigger, scrollData }: CalcHeightDurationAndElementOffset) => {
+    heightDuration: number;
+    elementOffset: number;
+};
+export declare const calcElementVisibilityReturn: ({ elementOffset, offsetTopVal, durationInPx, offsetBottomVal, scrollData }: CalcElementVisibilityReturn) => {
     progress: number;
     start: number;
     end: number;
 };
-declare const elementVisibility: (el: HTMLElement, scrollData: IScrollDataBase, trigger: string, offsetTop: IScrollTrackerSettingsProperties | undefined, offsetBottom: IScrollTrackerSettingsProperties | undefined, duration: IScrollTrackerSettingsProperties) => {
+export declare const elementVisibility: ({ el, scrollData, trigger, offsetTop, offsetBottom, duration }: ElementVisibility) => {
     progress: number;
-    scrollData: IScrollDataBase;
+    scrollData: ScrollDataBase;
     start: number;
     end: number;
 };
-export { elementVisibility };
+export {};

dist/functions/elementVisibility.d.ts

@@ -1,8 +1,10 @@
-import { Dispatch } from 'react';
-import { TScrollingElement, TTimeout } from '../types';
-export declare const onScroll: ({ timeout, setProgress, scrollElement, containerHeight }: {
-    timeout: TTimeout;
+import type { Dispatch } from 'react';
+import type { ScrollingElement, Timeout } from '../types';
+interface OnScroll {
+    timeout: Timeout;
     setProgress: Dispatch<number>;
-    scrollElement: TScrollingElement;
+    scrollElement?: ScrollingElement;
     containerHeight: number;
-}) => void;
+}
+export declare const onScroll: ({ timeout, setProgress, scrollElement, containerHeight }: OnScroll) => void;
+export {};

dist/functions/onScroll.d.ts

@@ -8,6 +8,6 @@ export declare const throttleLastCall: <T extends (...args: any[]) => void>(func
 export declare const windowHeight: () => number;
 export declare const getContainerClientHeight: (elem: HTMLElement) => number;
 export declare function waitForElm(selector: any): Promise<HTMLElement>;
-export declare const elOffsetTopRelativeToContainer: (el: HTMLElement | undefined, container: HTMLElement | undefined) => number;
+export declare const elOffsetTopRelativeToContainer: (el?: HTMLElement, container?: HTMLElement) => number;
 export declare const isIOS: () => boolean;
 export declare const correctInnerHeight: () => number;

dist/functions/utils.d.ts

@@ -116,13 +116,7 @@ const W = (e, t) => {
     throw "element/container is not defined.";
   const i = e.getBoundingClientRect(), o = t.scrollTop - t.offsetTop;
   return i.top + o;
-}, $ = () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream, O = () => $() ? k() : D(), x = ({
-  mode: e,
-  scrollData: t,
-  elementScrollHeight: i,
-  offsetTop: o,
-  offsetBottom: n
-}) => {
+}, $ = () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream, O = () => $() ? k() : D(), x = ({ mode: e, scrollData: t, elementScrollHeight: i, offsetTop: o, offsetBottom: n }) => {
   switch (e) {
     case "top":
       if (!o)
@@ -205,7 +199,7 @@ const W = (e, t) => {
     start: r,
     end: s
   };
-}, K = function(e, t, i, o, n, r) {
+}, K = function({ el: e, scrollData: t, trigger: i, offsetTop: o, offsetBottom: n, duration: r }) {
   const s = W(e, t.element), { scrollHeight: u } = e, { heightDuration: c, elementOffset: l } = B({
     duration: r,
     elementScrollHeight: u,
@@ -226,7 +220,6 @@ const W = (e, t) => {
   progress: 0,
   scrollData: {
     containerHeight: 0,
-    element: void 0,
     percentProgress: 0,
     scrollHeight: 0,
     scrollTop: 0
@@ -236,16 +229,16 @@ const W = (e, t) => {
 }, _ = (e, t = q) => typeof e == "function" ? e && e({ scrollObject: t, children: e }) : e, Z = F(({ scrollData: e, children: t, elem: i, settings: o, onStart: n, onEnd: r }) => {
   const { trigger: s = R.trigger, offsetTop: u, offsetBottom: c, duration: l } = o, [d, p] = m(!1), [a, f] = m(!1), [h, g] = m(!1);
   if (w(() => {
-    d && typeof n == "function" && n();
+    d && n && n();
   }, [d]), w(() => {
-    a && typeof r == "function" && r();
+    a && r && r();
   }, [a]), w(() => {
     i != null && i.current && g(!0);
   }, [i]), !h)
     return _(t, q);
-  const T = K(i.current, e, s, u, c, l), { progress: v } = T;
+  const T = K({ el: i.current, scrollData: e, trigger: s, offsetTop: u, offsetBottom: c, duration: l }), { progress: v } = T;
   return v > 0 && v < 1 && d === !1 && typeof n == "function" && p(!0), v <= 0 && d === !0 && typeof n == "function" && p(!1), v >= 1 && a === !1 && typeof r == "function" && f(!0), v < 1 && a === !0 && typeof r == "function" && f(!1), _(t, T);
-}), P = ({ scrollData: e, children: t }) => typeof t == "function" ? t && t({
+}), P = ({ scrollData: e, children: t }) => typeof t == "function" ? t({
   scrollData: {
     scrollTop: e.scrollTop,
     scrollHeight: e.scrollHeight,
@@ -254,12 +247,7 @@ const W = (e, t) => {
     element: e.element
   },
   children: t
-}) : t, Q = ({
-  timeout: e,
-  setProgress: t,
-  scrollElement: i,
-  containerHeight: o
-}) => {
+}) : t, Q = ({ timeout: e, setProgress: t, scrollElement: i, containerHeight: o }) => {
   e && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
     if (!i)
       return;
@@ -316,8 +304,7 @@ const W = (e, t) => {
       scrollTop: 0,
       scrollHeight: 0,
       containerHeight: 0,
-      percentProgress: 0,
-      element: void 0
+      percentProgress: 0
     },
     children: e
   });