fix: update build tooling

BREAKING CHANGE:
drops umd builds, and ships more modern syntax with ESM as baseline

Author: stipsan

.gitignore

@@ -60,14 +60,8 @@ typings/
 # next.js build output
 .next
 
-# Typescript stuff
-typings
-src/*.js
-
 lerna-debug.log
 dist
-es
-umd
 reports
 /index.js
 junit.xml

README.md

@@ -2,7 +2,7 @@
 [![npm version](https://img.shields.io/npm/v/compute-scroll-into-view.svg?style=flat-square)](https://www.npmjs.com/package/compute-scroll-into-view)
 [![gzip size][gzip-badge]][unpkg-dist]
 [![size][size-badge]][unpkg-dist]
-[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
+[![module formats: cjs, esm][module-formats-badge]][unpkg-dist]
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
 
 ![compute-scroll-into-view](https://user-images.githubusercontent.com/81981/43024153-a2cc212c-8c6d-11e8-913b-b4d62efcf105.png)
@@ -12,41 +12,49 @@ Use this if you want the smallest possible bundlesize and is ok with implementin
 
 Scrolling SVG elements are supported, as well as Shadow DOM elements. The [VisualViewport](https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport) API is also supported, ensuring scrolling works properly on modern devices. Quirksmode is also supported as long as you polyfill [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/document/scrollingElement).
 
+- [Install](#install)
+- [Usage](#usage)
+- [API](#api)
+  - [compute(target, options)](#computetarget-options)
+  - [options](#options)
+    - [block](#block)
+    - [inline](#inline)
+    - [scrollMode](#scrollmode)
+    - [boundary](#boundary)
+    - [skipOverflowHiddenElements](#skipoverflowhiddenelements)
+
 ## Install
 
 ```bash
 npm i compute-scroll-into-view
 ```
 
-The UMD build is also available on [unpkg](https://unpkg.com/compute-scroll-into-view/umd/):
+You can also use it from an CDN:
 
-```html
-<script src="https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js"></script>
+```js
+const { default: compute } = await import(
+  'https://esm.sh/compute-scroll-into-view'
+)
 ```
 
-You can find the library on `window.computeScrollIntoView`.
-
 ## Usage
 
 ```js
-// es6 import
-import computeScrollIntoView from 'compute-scroll-into-view'
-// or es5
-const computeScrollIntoView = require('compute-scroll-into-view')
+import compute from 'compute-scroll-into-view'
 
 const node = document.getElementById('hero')
 
 // same behavior as Element.scrollIntoView({block: "nearest", inline: "nearest"})
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-const actions = computeScrollIntoView(node, {
+const actions = compute(node, {
   scrollMode: 'if-needed',
   block: 'nearest',
   inline: 'nearest',
 })
 
 // same behavior as Element.scrollIntoViewIfNeeded(true)
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
-const actions = computeScrollIntoView(node, {
+const actions = compute(node, {
   scrollMode: 'if-needed',
   block: 'center',
   inline: 'center',
@@ -61,7 +69,7 @@ actions.forEach(({ el, top, left }) => {
 
 ## API
 
-### computeScrollIntoView(target, options)
+### compute(target, options)
 
 ### options
 
@@ -102,7 +110,7 @@ By passing a boundary you can short-circuit this loop depending on your needs:
 You can also pass a function to do more dynamic checks to override the scroll scoping:
 
 ```js
-const actions = computeScrollIntoView(target, {
+const actions = compute(target, {
   boundary: (parent) => {
     // By default `overflow: hidden` elements are allowed, only `overflow: visible | clip` is skipped as
     // this is required by the CSSOM spec
@@ -123,11 +131,6 @@ By default the [spec](https://drafts.csswg.org/cssom-view/#scrolling-box) states
 
 This package follows the convention [adopted by Firefox](https://hg.mozilla.org/integration/fx-team/rev/c48c3ec05012#l7.18) of setting a boolean option to _not_ scroll all nodes with `overflow: hidden` set.
 
-# TypeScript support
-
-This library ships with library definitions for TypeScript.
-
-[gzip-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?compression=gzip&label=gzip%20size&style=flat-square
-[size-badge]: http://img.badgesize.io/https://unpkg.com/compute-scroll-into-view/umd/compute-scroll-into-view.min.js?label=size&style=flat-square
-[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/umd/
-[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
+[gzip-badge]: https://img.badgesize.io/https:/unpkg.com/compute-scroll-into-view/dist/index.js?label=gzip%20size&compression=gzip&style=flat-square
+[size-badge]: https://img.badgesize.io/https:/unpkg.com/compute-scroll-into-view/dist/index.js?label=size&style=flat-square
+[unpkg-dist]: https://unpkg.com/compute-scroll-into-view/dist/

integration/body.html

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <style>
   *,
   *:before,

integration/deeply_nested_overflow.html

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <style>
   html,
   body {

integration/iframe.html

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <iframe
   srcdoc="
     <div class='container' style='height: 100vh'></div>

integration/jest.config.js renamed to integration/jest.config.cjs

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <style>
   html,
   body {

integration/nested_overflow.html

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <style>
   html,
   body {

integration/overflow_auto.html

@@ -4,8 +4,7 @@
   name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
 />
-<script src="../umd/compute-scroll-into-view.min.js"></script>
-<script src="./utils.js"></script>
+<script type="module" src="./utils.js"></script>
 <style>
   html,
   body {

integration/target_same_height.html

@@ -1,3 +1,6 @@
+import compute from '../dist/index.js'
+window.computeScrollIntoView = compute
+
 window.mapActions = (item) => ({
   el: (item.el.tagName.toLowerCase() + '.' + item.el.className).replace(
     /\.$/,