refactor: use typescript (#25)

* refactor: ts refactor

* refactor: remove src/index.d.ts, remove @ts-ignore

* refactor: add utils.ts

* feat: jest test utils.ts

Author: evinma

.eslintrc.js

@@ -1,9 +1,37 @@
 module.exports = {
-    extends: 'standard',
-    parser: 'babel-eslint',
+    root: true,
+    parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        ecmaFeatures: {
+            legacyDecorators: true,
+        },
+    },
+    env: {
+        es6: true,
+        node: true,
+        jest: true,
+        browser: true,
+    },
+    extends: [
+        'standard',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    plugins: [
+        '@typescript-eslint',
+    ],
     rules: {
-        'indent': [2, 4],
-        'promise/param-names': 0,
-        'comma-dangle': [2, 'always-multiline'],
+        'semi': 'off',
+        'indent': ['error', 4],
+        'promise/param-names': 'off',
+        'comma-dangle': ['error', 'always-multiline'],
+        '@typescript-eslint/semi': ['error', 'never'],
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-member-accessibility': 'off',
+        '@typescript-eslint/member-delimiter-style': ['error', {
+            'multiline': { 'delimiter': 'none' },
+            'singleline': { 'delimiter': 'comma' },
+        }],
     },
 }

babel.config.js

@@ -1,8 +1,22 @@
 module.exports = {
-    presets: [
-        [
-            '@babel/preset-env',
-            { 'modules': false },
-        ],
-    ],
+    env: {
+        test: {
+            presets: [
+                [
+                    '@babel/preset-env',
+                    { targets: { node: 'current' } },
+                ],
+                '@babel/typescript',
+            ],
+        },
+        production: {
+            presets: [
+                [
+                    '@babel/preset-env',
+                    { modules: false },
+                ],
+                '@babel/typescript',
+            ],
+        },
+    },
 }

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    verbose: false,
+    testURL: 'http://localhost',
+    collectCoverage: true,
+    collectCoverageFrom: ['src/**'],
+    transform: {
+        '^.+\\.[j|t]sx?$': 'babel-jest',
+    },
+    transformIgnorePatterns: ['node_modules'],
+    moduleNameMapper: {
+        '@/(.*)$': '<rootDir>/src/$1',
+    },
+    moduleFileExtensions: ['js', 'ts', 'tsx'],
+    snapshotSerializers: [],
+}

package.json

@@ -1,15 +1,20 @@
 {
     "name": "tua-body-scroll-lock",
-    "version": "0.2.2",
+    "version": "0.3.0",
     "description": "🔐Body scroll locking that just works with everything",
     "main": "dist/tua-bsl.umd.js",
     "module": "dist/tua-bsl.esm.js",
     "unpkg": "dist/tua-bsl.umd.js",
     "jsdelivr": "dist/tua-bsl.umd.js",
-    "typings": "src/index.d.ts",
+    "typings": "dist/index.d.ts",
     "scripts": {
+        "cov": "open coverage/lcov-report/index.html",
+        "type-check": "tsc --noEmit",
+        "type-check:watch": "npm run type-check -- --watch",
         "lint": "eslint --fix ./",
         "start": "rollup -c -w",
+        "test": "npm run type-check && cross-env NODE_ENV=test jest",
+        "test:tdd": "cross-env NODE_ENV=test jest --watch",
         "build": "npm run lint && rollup -c && cp index.html dist/index.html",
         "next": "npm --no-git-tag-version version prerelease",
         "next:m": "npm --no-git-tag-version version preminor",
@@ -40,24 +45,34 @@
     "devDependencies": {
         "@babel/core": "^7.3.3",
         "@babel/preset-env": "^7.3.1",
+        "@babel/preset-typescript": "^7.3.3",
         "@commitlint/cli": "^7.5.2",
         "@commitlint/config-conventional": "^7.5.0",
+        "@types/jest": "^24.0.17",
+        "@typescript-eslint/eslint-plugin": "^1.13.0",
+        "@typescript-eslint/parser": "^1.13.0",
         "all-contributors-cli": "^6.3.0",
         "babel-eslint": "^10.0.1",
+        "babel-jest": "^24.8.0",
+        "cross-env": "^5.2.0",
         "eslint-config-standard": "^12.0.0",
         "eslint-plugin-import": "^2.16.0",
         "eslint-plugin-node": "^8.0.1",
         "eslint-plugin-promise": "^4.0.1",
         "eslint-plugin-standard": "^4.0.0",
         "gh-pages": "^2.0.1",
         "husky": "^1.3.1",
+        "jest": "^24.8.0",
+        "jest-environment-jsdom-thirteen": "^1.0.1",
         "lint-staged": "^8.1.4",
         "rollup": "^1.2.2",
         "rollup-plugin-babel": "^4.3.2",
         "rollup-plugin-eslint": "^5.0.0",
         "rollup-plugin-json": "^3.1.0",
         "rollup-plugin-replace": "^2.1.0",
-        "rollup-plugin-terser": "^5.0.0"
+        "rollup-plugin-terser": "^5.0.0",
+        "rollup-plugin-typescript2": "^0.22.1",
+        "typescript": "^3.5.3"
     },
     "repository": {
         "type": "git",

rollup.config.js

@@ -3,6 +3,7 @@ import replace from 'rollup-plugin-replace'
 import { eslint } from 'rollup-plugin-eslint'
 import { terser } from 'rollup-plugin-terser'
 import { DEFAULT_EXTENSIONS } from '@babel/core'
+import typescript from 'rollup-plugin-typescript2'
 
 const pkg = require('./package.json')
 
@@ -48,8 +49,14 @@ const genConfig = (opts) => {
     const isProd = /min\.js$/.test(opts.file)
 
     const config = {
-        input: 'src/index.js',
-        plugins: [eslint({ include: '**/*.js' })],
+        input: 'src/index.ts',
+        plugins: [
+            typescript({
+                cacheRoot: `${require('os').tmpdir()}/.rpt2_cache`,
+                useTsconfigDeclarationDir: true,
+            }),
+            eslint({ include: '**/*.js' }),
+        ],
         output: {
             file: opts.file,
             name: 'bodyScrollLock',

src/index.d.ts

@@ -1,36 +1,20 @@
+import {
+    $,
+    isServer,
+    detectOS,
+    getEventListenerOptions,
+} from './utils'
+
+type OverflowHiddenPcStyleType = 'overflow' | 'boxSizing' | 'paddingRight'
+type OverflowHiddenMobileStyleType = 'top' | 'width' | 'height' | 'overflow' | 'position'
+
 let lockedNum = 0
 let initialClientY = 0
-let unLockCallback = null
+let unLockCallback: any = null
 let documentListenerAdded = false
 
-const isServer = typeof window === 'undefined'
-const lockedElements = []
-
-const $ = !isServer && document.querySelector.bind(document)
-
-let eventListenerOptions
-if (!isServer) {
-    const testEvent = '__TUA_BSL_TEST_PASSIVE__'
-    const passiveTestOptions = {
-        get passive () {
-            eventListenerOptions = { passive: false }
-        },
-    }
-    window.addEventListener(testEvent, null, passiveTestOptions)
-    window.removeEventListener(testEvent, null, passiveTestOptions)
-}
-
-const detectOS = () => {
-    const ua = navigator.userAgent
-    const ipad = /(iPad).*OS\s([\d_]+)/.test(ua)
-    const iphone = !ipad && /(iPhone\sOS)\s([\d_]+)/.test(ua)
-    const android = /(Android);?[\s/]+([\d.]+)?/.test(ua)
-
-    const os = android ? 'android' : 'ios'
-    const ios = iphone || ipad
-
-    return { os, ios, ipad, iphone, android }
-}
+const lockedElements: HTMLElement[] = []
+const eventListenerOptions = getEventListenerOptions({ passive: false })
 
 const setOverflowHiddenPc = () => {
     const $body = $('body')
@@ -42,7 +26,7 @@ const setOverflowHiddenPc = () => {
     $body.style.paddingRight = `${scrollBarWidth}px`
 
     return () => {
-        ;['overflow', 'boxSizing', 'paddingRight'].forEach((x) => {
+        ;['overflow', 'boxSizing', 'paddingRight'].forEach((x: OverflowHiddenPcStyleType) => {
             $body.style[x] = bodyStyle[x] || ''
         })
     }
@@ -68,21 +52,21 @@ const setOverflowHiddenMobile = () => {
         $html.style.height = htmlStyle.height || ''
         $html.style.overflow = htmlStyle.overflow || ''
 
-        ;['top', 'width', 'height', 'overflow', 'position'].forEach((x) => {
+        ;['top', 'width', 'height', 'overflow', 'position'].forEach((x: OverflowHiddenMobileStyleType) => {
             $body.style[x] = bodyStyle[x] || ''
         })
 
         window.scrollTo(0, scrollTop)
     }
 }
 
-const preventDefault = (event) => {
+const preventDefault = (event: TouchEvent) => {
     if (!event.cancelable) return
 
     event.preventDefault()
 }
 
-const handleScroll = (event, targetElement) => {
+const handleScroll = (event: TouchEvent, targetElement: HTMLElement) => {
     const clientY = event.targetTouches[0].clientY - initialClientY
 
     if (targetElement) {
@@ -99,7 +83,7 @@ const handleScroll = (event, targetElement) => {
     return true
 }
 
-const checkTargetElement = (targetElement) => {
+const checkTargetElement = (targetElement?: HTMLElement) => {
     if (targetElement) return
     if (targetElement === null) return
     if (process.env.NODE_ENV === 'production') return
@@ -110,8 +94,8 @@ const checkTargetElement = (targetElement) => {
     )
 }
 
-const lock = (targetElement) => {
-    if (isServer) return
+const lock = (targetElement?: HTMLElement) => {
+    if (isServer()) return
 
     checkTargetElement(targetElement)
 
@@ -136,30 +120,38 @@ const lock = (targetElement) => {
             documentListenerAdded = true
         }
     } else if (lockedNum <= 0) {
-        unLockCallback = detectOS().android ? setOverflowHiddenMobile() : setOverflowHiddenPc()
+        unLockCallback = detectOS().android
+            ? setOverflowHiddenMobile()
+            : setOverflowHiddenPc()
     }
 
     lockedNum += 1
 }
 
-const unlock = (targetElement) => {
-    if (isServer) return
+const unlock = (targetElement?: HTMLElement) => {
+    if (isServer()) return
 
     checkTargetElement(targetElement)
     lockedNum -= 1
 
     if (lockedNum > 0) return
-    if (!detectOS().ios) {
-        lockedNum <= 0 && typeof unLockCallback === 'function' && unLockCallback()
+    if (
+        !detectOS().ios &&
+        typeof unLockCallback === 'function'
+    ) {
+        unLockCallback()
         return
     }
 
     // iOS
-    const index = lockedElements.indexOf(targetElement)
-    if (index !== -1) {
-        targetElement.ontouchmove = null
-        targetElement.ontouchstart = null
-        lockedElements.splice(index, 1)
+    if (targetElement) {
+        const index = lockedElements.indexOf(targetElement)
+
+        if (index !== -1) {
+            targetElement.ontouchmove = null
+            targetElement.ontouchstart = null
+            lockedElements.splice(index, 1)
+        }
     }
 
     if (documentListenerAdded) {

src/index.js src/index.ts

@@ -0,0 +1,45 @@
+export const isServer = () => typeof window === 'undefined'
+
+export const $ = (selector: string) => <HTMLElement>document.querySelector(selector)
+
+export interface DetectOSResult { ios: boolean, android: boolean }
+export const detectOS = (ua?: string): DetectOSResult => {
+    ua = ua || navigator.userAgent
+    const ipad = /(iPad).*OS\s([\d_]+)/.test(ua)
+    const iphone = !ipad && /(iPhone\sOS)\s([\d_]+)/.test(ua)
+    const android = /(Android);?[\s/]+([\d.]+)?/.test(ua)
+    const ios = iphone || ipad
+
+    return { ios, android }
+}
+
+export function getEventListenerOptions (options: AddEventListenerOptions): AddEventListenerOptions | boolean {
+    /* istanbul ignore if */
+    if (isServer()) return false
+
+    if (!options) {
+        throw new Error('options must be provided')
+    }
+    let isSupportOptions = false
+    const listenerOptions = <AddEventListenerOptions>{
+        get passive () {
+            isSupportOptions = true
+            return
+        },
+    }
+
+    /* istanbul ignore next */
+    const noop = () => {}
+    const testEvent = '__TUA_BSL_TEST_PASSIVE__'
+    window.addEventListener(testEvent, noop, listenerOptions)
+    window.removeEventListener(testEvent, noop, listenerOptions)
+
+    const { capture } = options
+
+    /* istanbul ignore next */
+    return isSupportOptions
+        ? options
+        : typeof capture !== 'undefined'
+            ? capture
+            : false
+}