migrate to typescript

.eslintignore

@@ -1,2 +1,2 @@
 node_modules/
-dist/
+build/

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "extends": "@magloft/eslint-config",
+  "globals": { "MagloftApi": "readonly" },
+  "parserOptions": { "project": "./tsconfig.json" }
+}

.gitignore

@@ -1,3 +1,3 @@
 .DS_Store
-/node_modules/*
-dist/easy-parallax.js
+node_modules
+build

.npmignore

@@ -1,4 +1,8 @@
 .eslintignore
-.eslintrc.json
-dist/index.html
-webpack.config.js
+.eslintrc
+index.html
+rollup.config.js
+tsconfig.json
+.vscode/
+src/
+*.log

.vscode/settings.json

@@ -0,0 +1,29 @@
+{
+  "editor.rulers": [80],
+  "editor.tabCompletion": "on",
+  "editor.tabSize": 2,
+  "editor.trimAutoWhitespace": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true,
+    "source.fixAll.eslint": true
+  },
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/node_modules": true,
+    "**/build": true
+  },
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+  "typescript.preferences.quoteStyle": "single",
+  "eslint.run": "onType",
+  "eslint.nodePath": "./node_modules",
+  "eslint.validate": ["javascript", "typescript"],
+  "typescript.format.semicolons": "remove",
+  "json.format.enable": false,
+  "html.format.enable": false,
+  "scss.format.enable": false
+}

dist/index.html → index.html

@@ -84,17 +84,15 @@ <h2>Chapter 4</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus animi ea eos inventore ab expedita quia ipsam iure cumque enim, veritatis tenetur in. Quidem impedit autem quam, suscipit laudantium ipsam?</p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus animi ea eos inventore ab expedita quia ipsam iure cumque enim, veritatis tenetur in. Quidem impedit autem quam, suscipit laudantium ipsam?</p>
     </div>
-    <script type="text/javascript" src="easy-parallax.js"></script>
-    <script type="text/javascript">
-      const stage = easyParallax()
+    <script type="module">
+      import { EasyParallax } from './build/esm/index.js'
+      const stage = EasyParallax()
 
       function createWidget(element, html) {
         const shadow = element.attachShadow({ mode: 'open' })
         shadow.innerHTML = html
         return element
       }
-      // stage.add(createWidget(document.querySelector('.shadow'), `<img src="https://mms.magloft.dev/1hz5BhXNCNozrwa6/fiIoS2O5CbHIe2Et" /><style>img{display:block;width: 100%;max-width:100%;}</style>`).shadowRoot.querySelector('img'))
-      // stage.add(createWidget(document.querySelector('.shadow'), `<div class="parallax" style="background-image: url(https://mms.magloft.dev/1hz5BhXNCNozrwa6/fiIoS2O5CbHIe2Et);"></div><style>.parallax{height:300px;background-position: center center;background-size: cover;background-repeat: no-repeat;}</style>`).shadowRoot.querySelector('div'))
       const widget = createWidget(document.querySelector('.shadow'), `<style>:host{height:300px;background-position: center center;background-size: cover;background-repeat: no-repeat;}</style>`)
       widget.style.backgroundImage = 'url(https://mms.magloft.com/0000000000000000/0000000000000006)'
       stage.add(widget)

package.json

@@ -1,36 +1,21 @@
 {
   "name": "easy-parallax",
-  "version": "3.0.0",
-  "main": "dist/easy-parallax.js",
-  "types": "dist/easy-parallax.d.ts",
+  "version": "4.0.0",
   "author": "Tobias Strebitzer <tobias.strebitzer@magloft.com>",
   "license": "MIT",
+  "types": "build/cjs/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
   "scripts": {
-    "watch": "webpack --config webpack.config.js --mode=development --watch",
-    "serve": "webpack-dev-server -d --config webpack.config.js --mode=development",
-    "dev": "webpack --config webpack.config.js -d --watch",
-    "prepack": "webpack --config webpack.config.js --mode=production",
-    "postpack": "rm dist/easy-parallax.js"
+    "clean": "rimraf build",
+    "build": "rollup -c",
+    "watch": "yarn build --watch",
+    "prepack": "yarn clean && yarn build",
+    "lint": "eslint 'src/**/*.ts'"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
-    "babel-loader": "^8.0.6",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
-    "sass-loader": "^7.1.0",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.5.5"
+    "@magloft/eslint-config": "~1.0.10",
+    "@magloft/devkit-core": "~1.0.10",
+    "@magloft/devkit-rollup": "~1.0.10"
   }
 }

rollup.config.js

@@ -0,0 +1,26 @@
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
+import { terser } from 'rollup-plugin-terser'
+
+const packageJson = require('./package.json')
+
+export default {
+  input: './src/index.ts',
+  output: [
+    { file: packageJson.main, format: 'cjs', sourcemap: true, name: 'easy-parallax', inlineDynamicImports: true },
+    { file: packageJson.module, format: 'esm', sourcemap: true, inlineDynamicImports: true }
+  ],
+  plugins: [
+    external(),
+    resolve(),
+    commonjs(),
+    json(),
+    typescript(),
+    postcss({ modules: true, inject: false, extract: true }),
+    terser()
+  ]
+}

src/Parallax.js → src/Parallax.ts

@@ -1,12 +1,32 @@
+import { Stage } from './Stage'
 import { getStyle, setStyles } from './util'
 
 const POSITION = 'absolute'
 
-export default class Parallax {
-  constructor(stage, element, { speed = 0.6, type = 'scroll' } = {}) {
+export interface ParallaxOptions {
+  speed: number
+  type: 'scroll' | 'static'
+}
+
+export class Parallax {
+  public stage: Stage
+  public element: HTMLElement
+  public options: ParallaxOptions
+  public instanceID: number
+  public container!: HTMLElement
+  public image!: HTMLImageElement
+  public useImgTag = false
+  public src!: string
+  public imageElement!: HTMLImageElement
+  public $container!: HTMLElement
+  public parallaxScrollDistance!: number
+  public isElementInViewport!: boolean
+  public $clipStyles?: HTMLElement
+
+  constructor(stage: Stage, element: HTMLElement, options: Partial<ParallaxOptions> = {}) {
     this.stage = stage
     this.element = element
-    this.options = { type, speed }
+    this.options = { speed: options.speed ?? 0.6, type: options.type ?? 'scroll' }
     this.instanceID = this.stage.nextInstanceID()
 
     if (element.tagName === 'IMG') {
@@ -18,33 +38,33 @@ export default class Parallax {
         shadowRoot.insertBefore(this.container, element)
       }
       this.container.appendChild(element)
-      this.image = element
+      this.image = element as HTMLImageElement
       this.useImgTag = true
     } else if (getStyle(element, 'background-image')) {
       this.container = element
       const backgroundImage = getStyle(element, 'background-image')
-      this.src = backgroundImage.match(/^url\(['"]?([^"')]+)['"]?\)$/)[1]
+      this.src = backgroundImage.match(/^url\(['"]?([^"')]+)['"]?\)$/)![1]
       this.useImgTag = false
     }
 
     // find image element
     if (this.image) {
-      this.imageElement = this.image.cloneNode(true)
+      this.imageElement = this.image.cloneNode(true) as HTMLImageElement
       this.useImgTag = true
-      setStyles(this.image, { 'position': 'relative', 'display': 'block', 'max-width': '100%', 'height': 'auto', 'opacity': 0, 'z-index': -100 })
+      setStyles(this.image, { 'position': 'relative', 'display': 'block', 'max-width': '100%', 'height': 'auto', 'opacity': '0', 'z-index': '-100' })
     }
 
     const containerStyles = {
       position: 'absolute',
-      top: 0,
-      left: 0,
+      top: '0',
+      left: '0',
       width: '100%',
       height: '100%',
       overflow: 'hidden',
       pointerEvents: 'none',
       clipPath: 'inset(0px)'
     }
-    let imageStyles = { position: 'absolute' }
+    let imageStyles: Record<string, string> = { position: 'absolute' }
     if (this.options.type === 'static') {
       imageStyles.position = 'fixed'
       imageStyles.left = '0px'
@@ -58,12 +78,12 @@ export default class Parallax {
       setStyles(this.container, { 'position': 'relative' })
     }
     if (getStyle(this.container, 'z-index') === 'auto') {
-      setStyles(this.container, { zIndex: 0 })
+      setStyles(this.container, { zIndex: '0' })
     }
 
     // container for parallax image
     this.$container = this.stage.document.createElement('div')
-    setStyles(this.$container, { ...containerStyles, zIndex: -100 })
+    setStyles(this.$container, { ...containerStyles, zIndex: '-100' })
     this.$container.setAttribute('id', `parallax-container-${this.instanceID}`)
     if (this.container.shadowRoot) {
       this.container.shadowRoot.appendChild(this.$container)
@@ -76,15 +96,15 @@ export default class Parallax {
       imageStyles = Object.assign({
         'object-fit': 'cover',
         'object-position': '50% 50%',
-        'font-family': `object-fit: cover; object-position: 50% 50%;`,
+        'font-family': 'object-fit: cover; object-position: 50% 50%;',
         'max-width': 'none'
       }, containerStyles, imageStyles)
       this.imageElement.onload = () => {
         this.stage.update()
       }
     } else {
       // use div with background image
-      this.imageElement = this.stage.document.createElement('div')
+      this.imageElement = this.stage.document.createElement('div') as HTMLImageElement
       imageStyles = Object.assign({
         'background-position': '50% 50%',
         'background-size': 'cover',
@@ -114,7 +134,7 @@ export default class Parallax {
         this.imageElement.src = this.image.src
       }
     } else {
-      this.container.style.backgroundImage = null
+      this.container.style.backgroundImage = ''
       const backgroundImage = getStyle(this.container, 'background-image')
       this.container.style.backgroundImage = 'none'
       if (this.imageElement.style.backgroundImage !== backgroundImage) {
@@ -181,9 +201,9 @@ export default class Parallax {
     return this.isElementInViewport || false
   }
 
-  onScroll(force) {
+  onScroll(force = false) {
     const rect = this.container.getBoundingClientRect()
-    const styles = {}
+    const styles: Record<string, string> = {}
 
     // check if in viewport
     this.isElementInViewport = rect.bottom >= 0 && rect.right >= 0 && rect.top <= this.stage.height && rect.left <= this.stage.width
@@ -206,7 +226,7 @@ export default class Parallax {
   }
 
   destroy() {
-    this.container.style.zIndex = null
+    this.container.style.zIndex = ''
 
     if (this.useImgTag) {
       setStyles(this.image, { 'position': null, 'display': null, 'max-width': null, 'height': null, 'z-index': null, 'opacity': null })
@@ -216,11 +236,7 @@ export default class Parallax {
       setStyles(this.container, { 'background-image': this.imageElement.style.backgroundImage })
     }
 
-    if (this.$clipStyles && this.$clipStyles.parentNode) {
-      this.$clipStyles.parentNode.removeChild(this.$clipStyles)
-    }
-    if (this.$container && this.$container.parentNode) {
-      this.$container.parentNode.removeChild(this.$container)
-    }
+    if (this.$clipStyles?.parentNode) { this.$clipStyles.parentNode.removeChild(this.$clipStyles) }
+    if (this.$container?.parentNode) { this.$container.parentNode.removeChild(this.$container) }
   }
 }