Merge pull request ctrl-freaks#68 from ctrl-freaks/nf/typescript

Port FreezeFrame core to TypeScript

.eslintignore

@@ -1 +1,2 @@
 **/node_modules/**
+**/*.min.js

packages/freezeframe/.eslintrc.js

@@ -6,15 +6,25 @@ module.exports = {
     '@thrivehive/node'
   ],
   plugins: [
-    'babel'
+    'babel',
+    '@typescript-eslint',
   ],
   rules: {
     'guard-for-in': 0,
     'no-restricted-syntax': 0,
     'class-methods-use-this': 0,
     'import/no-extraneous-dependencies': 0,
+    'import/prefer-default-export': 0,
     'babel/semi': 1,
-    'no-underscore-dangle': 0
+    'no-underscore-dangle': 0,
+    '@typescript-eslint/no-unused-vars': 'error'
   },
-  parser: 'babel-eslint'
+  parser: '@typescript-eslint/parser',
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts']
+      }
+    }
+  }
 };

packages/freezeframe/README.md

@@ -11,7 +11,18 @@ animate on mouse hover / mouse click / touch event, or manually via class method
 Version 4.x no longer requires or supports jQuery. If you want to use freezeframe as a jQuery
 plugin, check out [freezeframe v3.0.10](https://github.com/ctrl-freaks/freezeframe.js/tree/archived/3.0.10).
 
+## TypeScript
+
+Freezeframe is now built in TypeScript! The library will still support usage in JavaScript, but if your project uses TypeScript, you'll have access to Freezeframe's type definitions, improved input validation, and depending on your IDE/text editor, autocompletion/intellisense.
+
+To get started using the TypeScript beta:
+
+```sh
+npm install [email protected]
+```
+
 - [Freezeframe.js](#freezeframejs)
+  - [TypeScript](#typescript)
   - [Examples](#examples)
   - [Installation](#installation)
     - [npm](#npm)
@@ -79,7 +90,7 @@ It is also possible to put the `.freezeframe` class on a parent element containi
 If your environment supports commonjs modules (`require`) or es6 module imports (`import`), you can import freezeframe like so:
 
 ```js
-// es6 modules
+// es/ts modules
 import Freezeframe from 'freezeframe';
 
 // or commonjs
@@ -120,13 +131,13 @@ logo.toggle(); // toggle animation
 
 - ### ```selector```
 
-    <code><b>type:</b> string | DOM object</code>  
+    <code><b>type:</b> string | Element | HTMLCollectionOf<Element> | NodeListOf<Element></code>  
     <code><b>default</b>: ".freezeframe"</code>  
 
     The selector used to search for .gifs to freeze.
     Selector may either be passed as the first argument of the Freezeframe constructor, or as a
-    property of the options object. You may pass a string selector or a DOM reference. If a string
-    is passed, we use `querySelectorAll`.
+    property of the options object. You may pass a string selector or a DOM object. If a string
+    is passed, we use `querySelectorAll` to query for the elements.
 
 - ### ```trigger```  
 
@@ -171,7 +182,7 @@ logo.toggle(); // toggle animation
   // String as selector
   new Freezeframe('.foo');
 
-  // DOM reference as selector
+  // DOM object as selector
   new Freezeframe(document.querySelectorAll('.foo'));
 
   // Custom options

packages/freezeframe/demo.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
-rm ../../docs/index.html
-rm ../../docs/freezeframe.min.js
+rm -f ../../docs/index.html
+rm -f ../../docs/freezeframe.min.js
 
 cp ./dist/index.html ../../docs/index.html
 cp ./dist/freezeframe.min.js ../../docs/freezeframe.min.js

packages/freezeframe/dist/src/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const classes: {
+    SELECTOR: string;
+    CONTAINER: string;
+    LOADING_ICON: string;
+    IMAGE: string;
+    CANVAS: string;
+    READY: string;
+    INACTIVE: string;
+    ACTIVE: string;
+    CANVAS_READY: string;
+    RESPONSIVE: string;
+    OVERLAY: string;
+};
+export declare const defaultOptions: {
+    selector: string;
+    responsive: boolean;
+    trigger: string;
+    overlay: boolean;
+    warnings: boolean;
+};
+export declare const styleId = "ff-styles";

packages/freezeframe/dist/src/index.d.ts

@@ -0,0 +1,31 @@
+import { SelectorOrNodes, Freeze, FreezeframeOptions, RequireProps } from '../types';
+declare class Freezeframe {
+    #private;
+    options: FreezeframeOptions;
+    items: Freeze[];
+    $images: HTMLImageElement[];
+    private _eventListeners;
+    private get _stylesInjected();
+    constructor(target?: SelectorOrNodes | RequireProps<FreezeframeOptions, 'selector'>, options?: FreezeframeOptions);
+    private _init;
+    private _capture;
+    private _load;
+    private _setup;
+    private _wrap;
+    private _process;
+    private _ready;
+    private _attach;
+    private _addEventListener;
+    private _removeEventListener;
+    private _injectStylesheet;
+    private _emit;
+    private _toggleOn;
+    private _toggleOff;
+    private _toggle;
+    start(): this;
+    stop(): this;
+    toggle(): this;
+    on(event: string, cb: Function): this;
+    destroy(): void;
+}
+export default Freezeframe;

packages/freezeframe/dist/src/templates.d.ts

@@ -0,0 +1,4 @@
+export declare const stylesheet: () => string;
+export declare const container: () => string;
+export declare const canvas: () => string;
+export declare const overlay: () => string;

packages/freezeframe/dist/src/utils/index.d.ts

@@ -0,0 +1,13 @@
+import { SelectorOrNodes, FreezeframeOptions } from '../../types/index';
+export declare const pipe: (...fns: Function[]) => (...initArgs: any[]) => any;
+export declare const formatMessage: (string: string) => string;
+export declare const error: (message: string, ...args: any[]) => void;
+export declare const warn: (message: string, ...args: any[]) => void;
+export declare const isTouch: () => boolean;
+export declare const parseFilename: (filePath: string) => string;
+export declare const validateFilename: (filePath: string) => boolean;
+export declare const normalizeElements: (selectorOrNodes: SelectorOrNodes) => Element | HTMLCollectionOf<Element> | NodeListOf<Element>;
+export declare const validateElements: (elements: Element | Element[], _: any, options: FreezeframeOptions) => any[];
+export declare const dedupeImages: (images: HTMLImageElement[]) => HTMLImageElement[];
+export declare const htmlToNode: (html: string) => HTMLElement;
+export declare const wrapNode: ($el: HTMLElement, $wrapper: HTMLElement) => void;

packages/freezeframe/dist/types/index.d.ts

@@ -0,0 +1,27 @@
+export declare type RequireProps<T extends {}, K extends keyof T> = Omit<T, K> & {
+    [MK in K]-?: NonNullable<T[MK]>;
+};
+export declare type SelectorOrNodes = string | Element | HTMLCollectionOf<Element> | NodeListOf<Element>;
+export declare type TriggerType = string | false;
+export declare enum FreezeframeEventTypes {
+    START = "start",
+    STOP = "stop",
+    TOGGLE = "toggle"
+}
+export interface FreezeframeOptions {
+    selector?: SelectorOrNodes;
+    responsive?: boolean;
+    trigger?: TriggerType;
+    overlay?: boolean;
+    warnings?: boolean;
+}
+export interface Freeze {
+    $container: HTMLElement;
+    $canvas: HTMLCanvasElement;
+    $image: HTMLImageElement;
+}
+export interface FreezeframeEvent {
+    $image: HTMLImageElement;
+    event: string;
+    listener: EventListenerOrEventListenerObject;
+}

packages/freezeframe/jest.config.js

@@ -1,16 +1,20 @@
 module.exports = {
   collectCoverage: true,
   moduleFileExtensions: [
-    'js'
+    'js',
+    'ts'
   ],
   transform: {
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest'
+
   },
   transformIgnorePatterns: [
     '/node_modules/'
   ],
   moduleNameMapper: {
+    '\\.scss$': 'identity-obj-proxy',
     '^@/(.*)$': '<rootDir>/src/$1',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/tests/assetsTransformer.js'