Migrate to Typescript (#350)

* Migrate to Typescript * Add types and adjust reame Co-authored-by: alpanayotov <[email protected]>
three11 · Nov 28, 2022 · 7561c55 · 7561c55
1 parent d788d63
commit 7561c55
Show file tree

Hide file tree

Showing 17 changed files with 1,070 additions and 2,003 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,15 @@
+{
+	"env": {
+		"node": true,
+		"browser": true
+	},
+	"extends": ["prettier", "plugin:@typescript-eslint/recommended"],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"project": "tsconfig.json",
+		"sourceType": "module"
+	},
+	"plugins": ["@typescript-eslint"],
+	"ignorePatterns": ["*.js", "*.mjs"],
+	"rules": {}
+}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,21 +1,14 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
-on:
-    push:
-        branches: [master]
-    pull_request:
-        branches: [master]
+on: [push, pull_request]
 
 jobs:
     build:
         runs-on: ubuntu-latest
 
         strategy:
             matrix:
-                node-version: [12.x, 14.x, 16.x]
+                node-version: [18.x]
 
         steps:
             - uses: actions/checkout@v3
@@ -24,4 +17,5 @@ jobs:
               with:
                   node-version: ${{ matrix.node-version }}
             - run: yarn
+            - run: yarn lint
             - run: yarn build
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,5 @@ node_modules/
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+dist
diff --git a/.npmignore b/.npmignore
@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Dependency directory
-node_modules/
+node_modules
 
 # Misc
 .DS_Store
@@ -17,27 +17,27 @@ node_modules/
 ehthumbs.db
 Thumbs.db
 
-# EditorConfig
+# Config folders and files
+.github
+_config.yml
+_.config.yml
+.codebeatsettings
 .editorconfig
-
-# Git
-.gitignore
+.eslintrc
 .gitattributes
-
-# CI
-.travis.yml
-
-# lock files
-yarn.lock
-
-# Prettier
-.prettierrc
+.gitignore
+.nvmrc
 .prettierignore
-
-# Config
-.babelrc
-.github
+.prettierrc
+.stylelintignore
+.stylelintrc
+.travis.yml
 .whitesource
 renovate.json
-rollup.config.js
-webpack.config.js
+tsconfig.json
+tslint.json
+yarn.lock
+
+!dist
+demo
+rollup.config.mjs
diff --git a/.travis.yml b/.travis.yml
@@ -5,4 +5,5 @@ node_js:
 install:
     - yarn
 script:
+    - yarn lint
     - yarn build
diff --git a/.whitesource b/.whitesource
@@ -1,8 +1,8 @@
 {
-  "checkRunSettings": {
-    "vulnerableCheckRunConclusionLevel": "success"
-  },
-  "issueSettings": {
-    "minSeverityLevel": "LOW"
-  }
+	"generalSettings": {
+		"shouldScanRepo": true
+	},
+	"checkRunSettings": {
+		"vulnerableCheckRunConclusionLevel": "success"
+	}
 }
diff --git a/README.md b/README.md
@@ -1,15 +1,14 @@
 [![GitHub release](https://img.shields.io/github/release/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/releases/latest)
 [![GitHub issues](https://img.shields.io/github/issues/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/issues)
 [![GitHub last commit](https://img.shields.io/github/last-commit/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/commits/master)
-[![Github file size](https://img.shields.io/github/size/three11/animate-top-offset/dist/animate-top-offset.min.js.svg)](https://github.com/three11/animate-top-offset/)
 [![Build Status](https://travis-ci.org/three11/animate-top-offset.svg?branch=master)](https://travis-ci.org/three11/animate-top-offset)
 [![npm](https://img.shields.io/npm/dt/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset)
 [![npm](https://img.shields.io/npm/v/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset)
 [![Analytics](https://ga-beacon.appspot.com/UA-83446952-1/github.com/three11/animate-top-offset/README.md)](https://github.com/three11/animate-top-offset/)
 
 # Animate Top Offset
 
-Vanilla JS animated scroll to a given offset.
+> Scroll a container to a specific Y offset
 
 ## Install
 
@@ -23,35 +22,19 @@ or
 yarn add @three11/animate-top-offset
 ```
 
-or
-
-Just download this repository and link the files located in dist folder:
-
-```html
-<script src="path-to-animate-top-offset/dist/animate-top-offset.min.js"></script>
-```
-
-or
-
-Include it from Unpkg CDN
-
-```html
-<script src="//unpkg.com/@three11/animate-top-offset/dist/animate-top-offset.min.js"></script>
-```
-
 ## Usage
 
 First, `import` the module:
 
-```javascript
+```ts
 import animateTopOffset from '@three11/animate-top-offset';
 ```
 
 Then use the module:
 
-#### With one element
+### With one element
 
-```javascript
+```ts
 const button = document.getElementById('button');
 
 button.addEventListener('click', event => {
@@ -64,9 +47,9 @@ button.addEventListener('click', event => {
 });
 ```
 
-#### With many elements
+### With many elements
 
-```javascript
+```ts
 const buttons = document.querySelectorAll('.js-scroll-to');
 
 // Instead of Array.from you can spread the buttons: [...buttons]
@@ -77,14 +60,14 @@ Array.from(buttons).forEach(button => {
 		const href = event.target.getAttribute('href');
 		const offset = doc.querySelector(href).offsetTop;
 
-		animateTopOffset(offset);
+		animateTopOffset({ offset });
 	});
 });
 ```
 
 **The examples above assume that you have a modern ES6 setup installed and configured (Webpack, Babel, etc). If not you can always fallback to ES5:**
 
-```javascript
+```ts
 const buttons = document.querySelectorAll('.js-scroll-to');
 
 [].forEach.call(buttons, function (button) {
@@ -101,31 +84,44 @@ const buttons = document.querySelectorAll('.js-scroll-to');
 
 ## Arguments
 
-The function accepts four arguments:
+The function accepts the following options:
 
--   `offset`
--   `container`
--   `speed`
--   `easing`
+| Name        | Type                                                 | Required | Description                    | Default value |
+| ----------- | ---------------------------------------------------- | -------- | ------------------------------ | ------------- |
+| `offset`    | number                                               | false    | Offset to scroll to            | 0             |
+| `container` | `HTMLElement` \| `Window`                            | false    | The element to scroll          | window        |
+| `speed`     | number                                               | false    | Speed of the scroll animation  | 200           |
+| `easing`    | 'easeOutSine' \| 'easeInOutSine' \| 'easeInOutQuint' | false    | Easing of the scroll animation | 'easeOutSine' |
+| `easings`   | Record<string, (pos: number) => number>              | false    | List of easing equations       | See below     |
 
-```javascript
-animateTopOffset(0, window, 2000, 'easeOutSine');
+```ts
+animateTopOffset({ offset: 0, container: window, speed: 2000, easing: 'easeOutSine', easings: easingEquations });
 ```
 
-Default values are:
+**Calling the function with the default values (`animateTopOffset()`) will scroll the window back to top.**
+
+## Easings
 
--   `offset` = 0
--   `container` = `window`
--   `speed` = 2000
--   `easing` = `'easeOutSine'`
+`animateTopOffset` provides the ability to specify a custom list of easing functions.
+The default one contains three easings: 'easeOutSine', 'easeInOutSine' and 'easeInOutQuint'.
 
-**Calling the function with the default values (`animateTopOffset()`) will scroll the window back to top.**
+The shape of the list is the following:
 
-There are three built-in easing functions:
+```ts
+const easingEquations: Record<string, (pos: number) => number> = {
+	easeOutSine: (pos: number) => Math.sin(pos * (Math.PI / 2)),
+	easeInOutSine: (pos: number) => -0.5 * (Math.cos(Math.PI * pos) - 1),
+	easeInOutQuint: (pos: number) => {
+		if ((pos /= 0.5) < 1) {
+			return 0.5 * Math.pow(pos, 5);
+		}
+
+		return 0.5 * (Math.pow(pos - 2, 5) + 2);
+	}
+};
+```
 
--   `'easeOutSine'`
--   `'easeInOutSine'`
--   `'easeInOutQuint'`
+**The easing argument should match one of the keys of the `easings` argument.`**
 
 ## Demo
 

diff --git a/_.config.yml b/_.config.yml
@@ -0,0 +1,14 @@
+plugins:
+    - jekyll-relative-links
+relative_links:
+    enabled: true
+    collections: true
+include:
+    - CONTRIBUTING.md
+    - README.md
+    - LICENSE.md
+    - COPYING.md
+    - CODE_OF_CONDUCT.md
+    - CONTRIBUTING.md
+    - ISSUE_TEMPLATE.md
+    - PULL_REQUEST_TEMPLATE.md
diff --git a/_config.yml b/_config.yml
@@ -1 +1 @@
-theme: jekyll-theme-slate
+theme: jekyll-theme-slate
diff --git a/dist/animate-top-offset.min.js b/dist/animate-top-offset.min.js
diff --git a/package.json b/package.json
@@ -1,21 +1,17 @@
 {
 	"name": "@three11/animate-top-offset",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"description": "Scroll a container to a specific Y offset",
-	"main": "dist/animate-top-offset.min.js",
-	"scripts": {
-		"build": "rollup -c"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/three11/animate-top-offset.git"
-	},
 	"keywords": [
-		"Animated",
-		"Scroll",
-		"JavaScript",
-		"ES2017"
+		"Scroll to",
+		"Animated scroll",
+		"Container scroll"
 	],
+	"homepage": "https://github.com/three11/animate-top-offset#readme",
+	"bugs": {
+		"url": "https://github.com/three11/animate-top-offset/issues"
+	},
+	"license": "GPL-3.0",
 	"authors": [
 		{
 			"name": "Three 11 Ltd",
@@ -33,17 +29,25 @@
 			"role": "Developer"
 		}
 	],
-	"license": "GPL-3.0",
-	"bugs": {
-		"url": "https://github.com/three11/animate-top-offset/issues"
+	"main": "dist/animate-top-offset.js",
+	"types": "dist/animate-top-offset.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "github:three11/animate-top-offset"
 	},
-	"homepage": "https://github.com/three11/animate-top-offset#readme",
+	"scripts": {
+		"lint": "eslint 'src/**/*.ts'",
+		"build": "rollup -c"
+	},
+	"dependencies": {},
 	"devDependencies": {
-		"@babel/cli": "7.19.3",
-		"@babel/core": "7.20.2",
-		"@babel/preset-env": "7.20.2",
-		"rollup": "2.79.1",
-		"rollup-plugin-babel": "4.4.0",
-		"rollup-plugin-terser": "7.0.2"
+		"@rollup/plugin-commonjs": "23.0.3",
+		"@rollup/plugin-typescript": "10.0.0",
+		"@typescript-eslint/eslint-plugin": "5.44.0",
+		"@typescript-eslint/parser": "5.44.0",
+		"eslint": "8.28.0",
+		"eslint-config-prettier": "8.5.0",
+		"rollup": "3.5.0",
+		"typescript": "4.9.3"
 	}
 }
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -0,0 +1,14 @@
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+	input: 'src/animate-top-offset.ts',
+	output: {
+		dir: 'dist',
+		name: 'animateTopOffset',
+		format: 'umd',
+		exports: 'named',
+		sourcemap: true
+	},
+	plugins: [typescript(), commonjs()]
+};