enable strict ts

Author: jscottsmith

src/classes/Bounds.test.ts

@@ -287,7 +287,7 @@ describe.each([
       right: 887.8125,
     },
   ],
-])('Bounds()', (rect, offsets, view, expected) => {
+])('Bounds()', (rect: any, offsets: any, view: any, expected) => {
   test(`returns expected bounds based on rect, offsets, and view`, () => {
     expect(new Bounds(rect, offsets, view)).toEqual(
       expect.objectContaining(expected)

src/classes/Bounds.ts

@@ -1,3 +1,7 @@
+import { ParallaxStartEndOffsets } from '../types';
+import { Rect } from './Rect';
+import { View } from './View';
+
 export class Bounds {
   totalDistY: number;
   totalDistX: number;
@@ -6,7 +10,7 @@ export class Bounds {
   left: number;
   right: number;
 
-  constructor(rect, offsets, view) {
+  constructor(rect: Rect, offsets: ParallaxStartEndOffsets, view: View) {
     const { y0, y1, x1, x0 } = offsets;
 
     // Y offsets

src/classes/Element.ts

@@ -7,24 +7,31 @@ import { isElementInView } from '../helpers/isElementInView';
 import { percentMoved } from '../helpers/percentMoved';
 import { setParallaxStyles } from '../helpers/elementStyles';
 import { createId } from '../utils/createId';
+import {
+  CreateElementOptions,
+  ParallaxElementProperties,
+} from './ParallaxController';
+import { View } from './View';
+import { Scroll } from './Scroll';
+
+type ElementConstructorOptions = CreateElementOptions & {
+  scrollAxis: 'vertical' | 'horizontal';
+};
 
 export class Element {
-  elInner: HTMLElement;
-  elOuter: HTMLElement;
-  // TODO
-  props: any;
+  elInner?: HTMLElement;
+  elOuter?: HTMLElement;
+  props: ParallaxElementProperties;
   scrollAxis: 'vertical' | 'horizontal';
   id: number;
   offsets: ParallaxStartEndOffsets;
-  isInView: boolean;
+  isInView: boolean | null;
   percent: number;
+  rect?: Rect;
+  bounds?: Bounds;
+  updatePosition: (view: View, scroll: Scroll) => Element;
 
-  updatePosition: (view: any, scroll: any) => void;
-
-  rect: Rect;
-  bounds: Bounds;
-
-  constructor(options) {
+  constructor(options: ElementConstructorOptions) {
     this.elInner = options.elInner;
     this.elOuter = options.elOuter;
     this.props = options.props;
@@ -40,19 +47,23 @@ export class Element {
         : this._updatePositionHorizontal;
   }
 
-  updateProps(nextProps) {
+  updateProps(nextProps: ParallaxElementProperties) {
     this.props = { ...this.props, ...nextProps };
     this.offsets = getOffsets(nextProps);
     return this;
   }
 
-  setCachedAttributes(view, scroll) {
+  setCachedAttributes(view: View, scroll: Scroll): Element {
+    if (!this.elOuter) return this;
+
     this.rect = new Rect(this.elOuter, view, scroll);
     this.bounds = new Bounds(this.rect, this.offsets, view);
     return this;
   }
 
-  _updatePositionHorizontal(view, scroll) {
+  _updatePositionHorizontal(view: View, scroll: Scroll): Element {
+    if (!this.bounds || !this.rect || !this.elInner) return this;
+
     this.isInView = isElementInView(
       this.bounds.left,
       this.bounds.right,
@@ -74,7 +85,9 @@ export class Element {
     return this;
   }
 
-  _updatePositionVertical(view, scroll) {
+  _updatePositionVertical(view: View, scroll: Scroll): Element {
+    if (!this.bounds || !this.rect || !this.elInner) return this;
+
     this.isInView = isElementInView(
       this.bounds.top,
       this.bounds.bottom,

src/classes/ParallaxController.ts

@@ -5,7 +5,7 @@ import { Element } from './Element';
 import { VERTICAL } from '../constants';
 import { testForPassiveScroll } from '../utils/testForPassiveScroll';
 
-type ViewElement = HTMLElement | Window;
+export type ViewElement = HTMLElement | Window;
 
 /**
  * -------------------------------------------------------
@@ -26,13 +26,19 @@ export type ParallaxControllerOptions = {
 };
 
 export type ParallaxElementProperties = {
-  disabled: boolean;
+  disabled?: boolean;
   x0: string | number;
   x1: string | number;
   y0: string | number;
   y1: string | number;
 };
 
+export type CreateElementOptions = {
+  elInner?: HTMLElement;
+  elOuter?: HTMLElement;
+  props: ParallaxElementProperties;
+};
+
 export class ParallaxController {
   elements: Element[];
   scrollAxis: 'vertical' | 'horizontal';
@@ -68,7 +74,7 @@ export class ParallaxController {
     this.elements = [];
 
     this._hasScrollContainer = !!scrollContainer;
-    this.viewEl = scrollContainer || window;
+    this.viewEl = scrollContainer ?? window;
 
     // Scroll and View
     const x = this._hasScrollContainer
@@ -81,7 +87,11 @@ export class ParallaxController {
       : window.pageYOffset;
 
     this.scroll = new Scroll(x, y);
-    this.view = new View({ width: 0, height: 0, scrollContainer });
+    this.view = new View({
+      width: 0,
+      height: 0,
+      scrollContainer: this._hasScrollContainer ? scrollContainer : undefined,
+    });
 
     // Ticking
     this._ticking = false;
@@ -112,7 +122,8 @@ export class ParallaxController {
       'update',
       'updateScrollContainer',
       'destroy',
-    ].forEach((method) => {
+    ].forEach((method: string) => {
+      // @ts-expect-error
       this[method] = this[method].bind(this);
     });
   }
@@ -189,7 +200,7 @@ export class ParallaxController {
    * Determines if the element is in view based on the cached
    * attributes, if so set the elements parallax styles.
    */
-  private _updateElementPosition(element) {
+  private _updateElementPosition(element: Element) {
     if (element.props.disabled) return;
     element.updatePosition(this.view, this.scroll);
   }
@@ -233,11 +244,7 @@ export class ParallaxController {
    * @param {object} options
    * @return {object} element
    */
-  createElement(options: {
-    elInner: HTMLElement;
-    elOuter: HTMLElement;
-    props: ParallaxElementProperties;
-  }): Element {
+  createElement(options: CreateElementOptions): Element {
     const newElement = new Element({ ...options, scrollAxis: this.scrollAxis });
     newElement.setCachedAttributes(this.view, this.scroll);
     this.elements = this.elements
@@ -310,6 +317,7 @@ export class ParallaxController {
     if (this.elements) {
       this.elements.forEach((element) => resetStyles(element));
     }
+    // @ts-expect-error
     this.elements = undefined;
   }
 }

src/classes/Scroll.ts

@@ -3,7 +3,8 @@ export class Scroll {
   y: number;
 
   constructor(x: number, y: number) {
-    this.setScroll(x, y);
+    this.x = x;
+    this.y = y;
   }
 
   setScroll(x: number, y: number) {

src/classes/View.ts

@@ -1,5 +1,5 @@
 export class View {
-  scrollContainer: HTMLElement;
+  scrollContainer: HTMLElement | undefined;
   width: number;
   height: number;
 
@@ -10,10 +10,11 @@ export class View {
   }: {
     width: number;
     height: number;
-    scrollContainer: HTMLElement;
+    scrollContainer?: HTMLElement;
   }) {
     this.scrollContainer = scrollContainer;
-    this.setSize(width, height);
+    this.width = width;
+    this.height = height;
   }
 
   setSize(width: number, height: number) {

src/components/Parallax.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { render } from '@testing-library/react';
 import { Parallax } from './Parallax';
 import { ParallaxProvider } from './ParallaxProvider';
@@ -10,14 +10,16 @@ import expectRenderError from '../testUtils/expectRenderError';
 const consoleLog = global.console.log;
 
 describe('Expect the <Parallax> component', () => {
-  const preventError = (e) => e.preventDefault();
+  const preventError = (e: ErrorEvent) => e.preventDefault();
 
   beforeEach(() => {
     window.addEventListener('error', preventError);
   });
 
   afterEach(() => {
     global.console.log = consoleLog;
+    // NOTE: this can probably be removed now
+    // @ts-ignore
     global.ParallaxController = undefined;
 
     window.removeEventListener('error', preventError);
@@ -96,7 +98,7 @@ describe('Expect the <Parallax> component', () => {
     const controller = ParallaxController.init({ scrollAxis: VERTICAL });
     controller.updateElementPropsById = jest.fn();
 
-    function Wrapper(props) {
+    function Wrapper(props: PropsWithChildren<{}>) {
       return (
         <MockProvider controllerMock={controller}>
           {props.children}
@@ -152,7 +154,7 @@ describe('Expect the <Parallax> component', () => {
     const controller = ParallaxController.init({ scrollAxis: VERTICAL });
     controller.resetElementStyles = jest.fn();
 
-    function Wrapper(props) {
+    function Wrapper(props: PropsWithChildren<{}>) {
       return (
         <MockProvider controllerMock={controller}>
           {props.children}

src/components/Parallax.tsx

@@ -1,5 +1,9 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { ParallaxController } from '../classes/ParallaxController';
+import { Element } from '../classes/Element';
+import {
+  CreateElementOptions,
+  ParallaxController,
+} from '../classes/ParallaxController';
 import { useController } from '../hooks/useController';
 
 export interface ParallaxProps {
@@ -39,7 +43,7 @@ export interface ParallaxProps {
   tagOuter?: any;
 }
 
-function useVerifyController(controller) {
+function useVerifyController(controller: ParallaxController) {
   useEffect(() => {
     // Make sure the provided controller is an instance of the Parallax Controller
     const isInstance = controller instanceof ParallaxController;
@@ -54,45 +58,46 @@ function useVerifyController(controller) {
 
 function Parallax(props: PropsWithChildren<ParallaxProps>) {
   const controller = useController();
-  const refInner = useRef();
-  const refOuter = useRef();
+  const refInner = useRef<HTMLElement>();
+  const refOuter = useRef<HTMLElement>();
 
   useVerifyController(controller);
 
-  function _getElementOptions() {
+  function _getElementOptions(): CreateElementOptions {
     return {
       elInner: refInner.current,
       elOuter: refOuter.current,
       props: {
         disabled: props.disabled,
+        // Defaults set in Parallax.defaultProps
+        // @ts-expect-error
         x0: props.x[0],
+        // @ts-expect-error
         x1: props.x[1],
+        // @ts-expect-error
         y0: props.y[0],
+        // @ts-expect-error
         y1: props.y[1],
       },
     };
   }
 
-  const [element, setElement] = useState(null);
+  const [element, setElement] = useState<Element>();
 
   // create element
   useEffect(() => {
-    // @ts-ignore
     const newElement = controller.createElement(_getElementOptions());
     setElement(newElement);
 
-    // @ts-ignore
     return () => controller.removeElementById(newElement.id);
   }, []);
 
   // update element
   useEffect(() => {
     if (element) {
       if (props.disabled) {
-        // @ts-ignore
         controller.resetElementStyles(element);
       } else {
-        // @ts-ignore
         controller.updateElementPropsById(
           element.id,
           _getElementOptions().props

src/components/ParallaxBanner.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+// @ts-ignore
 import renderer from 'react-test-renderer';
 import createNodeMock from '../testUtils/createNodeMock';
 import { ParallaxBanner } from './ParallaxBanner';

src/components/ParallaxBanner.tsx

@@ -36,7 +36,7 @@ export interface BannerLayer {
    */
   image?: string;
   /*
-   * 	Props to apply to the layer element.
+   * Props to apply to the layer element.
    */
   props?: any;
 }