From ecf15267c4b00866d6fc2b22780246c9de3e6086 Mon Sep 17 00:00:00 2001 From: Nick Ford Date: Fri, 3 Jul 2020 12:57:28 -0400 Subject: [PATCH] fix types, add a file to test out TS intellisense --- packages/freezeframe/src/constants.ts | 1 + packages/freezeframe/src/index.ts | 35 +++++++++++++------ packages/freezeframe/src/utils/index.ts | 8 ++--- .../freezeframe/tests/ts-intellisense/test.ts | 34 ++++++++++++++++++ packages/freezeframe/types/index.ts | 17 +++++---- 5 files changed, 73 insertions(+), 22 deletions(-) create mode 100644 packages/freezeframe/tests/ts-intellisense/test.ts diff --git a/packages/freezeframe/src/constants.ts b/packages/freezeframe/src/constants.ts index 14f3967..417d20a 100644 --- 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 index 4657b8f..c4f4503 100644 --- 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 index 90d3df0..fa8e389 100644 --- 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 new file mode 100644 index 0000000..fe6cdc8 --- /dev/null +++ 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 index 9f8aeb0..a8a3c01 100644 --- 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 + | NodeListOf -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 {