fix types, add a file to test out TS intellisense

helloraee · Jul 3, 2020 · ecf1526 · ecf1526
1 parent bd6b812
commit ecf1526
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/packages/freezeframe/src/constants.ts b/packages/freezeframe/src/constants.ts
@@ -13,6 +13,7 @@ export const classes = {
 };
 
 export const defaultOptions = {
+  selector: classes.SELECTOR,
   responsive: true,
   trigger: 'hover',
   overlay: false,

diff --git a/packages/freezeframe/src/index.ts b/packages/freezeframe/src/index.ts
@@ -1,6 +1,6 @@
 import imagesLoaded from 'imagesloaded';
 import {
-  SelectorOrNotes,
+  SelectorOrNodes,
   Freeze,
   FreezeFrameEvent,
   FreezeFrameOptions,
@@ -13,7 +13,8 @@ import {
   dedupeImages,
   isTouch,
   wrapNode,
-  htmlToNode
+  htmlToNode,
+  error
 } from './utils/index';
 import * as templates from './templates';
 import {
@@ -29,6 +30,8 @@ class Freezeframe {
 
   $images: HTMLImageElement[] = [];
 
+  #target: SelectorOrNodes;
+
   #isTouch: boolean;
 
   private _eventListeners = {
@@ -44,24 +47,34 @@ class Freezeframe {
   }
 
   constructor(
-    selectorOrNodes: any = classes.SELECTOR,
-    options: FreezeFrameOptions
+    target: SelectorOrNodes | FreezeFrameOptions = classes.SELECTOR,
+    options?: FreezeFrameOptions
   ) {
-    this.options = selectorOrNodes instanceof Object && !options
-      ? { ...defaultOptions, ...selectorOrNodes }
-      : { ...defaultOptions, ...options };
-    const target = this.options.selector || selectorOrNodes;
-    this._init(target);
+    if (
+      typeof target === 'string'
+        || target instanceof Element
+        || target instanceof HTMLCollection
+        || target instanceof NodeList
+    ) {
+      this.options = { ...defaultOptions, ...options };
+      this.#target = target;
+    } else if (typeof target === 'object' && !options) {
+      this.options = { ...defaultOptions, ...target };
+      this.#target = this.options.selector;
+    } else {
+      error('Invalid FreezeFrame.js configuration');
+    }
+    this._init(this.#target);
   }
 
-  private _init(selectorOrNodes: SelectorOrNotes): void {
+  private _init(selectorOrNodes: SelectorOrNodes): void {
     this._injectStylesheet();
     this.#isTouch = isTouch();
     this._capture(selectorOrNodes);
     this._load(this.$images);
   }
 
-  private _capture(selectorOrNodes: SelectorOrNotes): void {
+  private _capture(selectorOrNodes: SelectorOrNodes): void {
     this.$images = pipe(
       normalizeElements,
       validateElements,

diff --git a/packages/freezeframe/src/utils/index.ts b/packages/freezeframe/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { SelectorOrNotes, FreezeFrameOptions } from '../../types/index';
+import { SelectorOrNodes, FreezeFrameOptions } from '../../types/index';
 
 export const pipe = (...fns: Function[]) => (
   (...initArgs: any[]) => {
@@ -33,18 +33,18 @@ export const validateFilename = (filePath: string): boolean => {
   return ext === 'gif';
 };
 
-export const normalizeElements = (selectorOrNodes: SelectorOrNotes) => {
+export const normalizeElements = (selectorOrNodes: SelectorOrNodes) => {
   return typeof selectorOrNodes === 'string'
     ? document.querySelectorAll(selectorOrNodes)
     : selectorOrNodes;
 };
 
 export const validateElements = (
-  elements: HTMLElement | HTMLElement[],
+  elements: Element | Element[],
   _: any,
   options: FreezeFrameOptions
 ) => {
-  const list = elements instanceof HTMLElement ? [elements] : elements;
+  const list = elements instanceof Element ? [elements] : elements;
   return Array.from(list).reduce((acc, image) => {
     if (!(image instanceof HTMLImageElement)) {
       const $children = image.querySelectorAll('img');

diff --git a/packages/freezeframe/tests/ts-intellisense/test.ts b/packages/freezeframe/tests/ts-intellisense/test.ts
@@ -0,0 +1,34 @@
+/* eslint-disable no-new */
+import FreezeFrame from '../../src';
+
+// happy paths
+new FreezeFrame();
+new FreezeFrame('.foo');
+new FreezeFrame('#foo');
+new FreezeFrame(document.body);
+new FreezeFrame(document.getElementById('foo'));
+new FreezeFrame(document.getElementsByClassName('foo'));
+new FreezeFrame(document.querySelector('.foo'));
+new FreezeFrame(document.querySelectorAll('.foo'));
+new FreezeFrame({
+  selector: '.foo'
+});
+new FreezeFrame({
+  selector: document.body,
+  responsive: false,
+  trigger: 'click',
+  overlay: false,
+  warnings: false
+});
+
+// sad paths
+new FreezeFrame(true);
+new FreezeFrame(3);
+new FreezeFrame({});
+new FreezeFrame({
+  foo: 3
+});
+new FreezeFrame({
+  selector: 3
+});
+new FreezeFrame('.foo', {});
diff --git a/packages/freezeframe/types/index.ts b/packages/freezeframe/types/index.ts
@@ -1,6 +1,9 @@
-export type SelectorOrNotes = string | HTMLAllCollection
+export type SelectorOrNodes = string
+  | Element
+  | HTMLCollectionOf<Element>
+  | NodeListOf<Element>
 
-export type TriggerType = 'hover' | 'click' | false
+export type TriggerType = string | false
 
 export enum FreezeFrameEventTypes {
   START = 'start',
@@ -9,11 +12,11 @@ export enum FreezeFrameEventTypes {
 }
 
 export interface FreezeFrameOptions {
-  selector?: string,
-  responsive: boolean,
-  trigger: TriggerType,
-  overlay: boolean,
-  warnings: boolean
+  selector: SelectorOrNodes,
+  responsive?: boolean,
+  trigger?: TriggerType,
+  overlay?: boolean,
+  warnings?: boolean
 }
 
 export interface Freeze {