scroll-into-view-if-needed - npm Package Compare versions

Comparing version 2.2.31 to 3.0.0

package.json

 {
   "name": "scroll-into-view-if-needed",
-  "version": "2.2.31",
+  "version": "3.0.0",
   "description": "Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center",
@@ -27,85 +27,45 @@ "keywords": [
   "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
-      "types": "./typings/index.d.ts",
+      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./es/index.js",
-      "require": "./index.js",
-      "default": "./es/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "index.js",
-  "module": "es/index.js",
-  "typings": "typings/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
   "files": [
-    "es",
-    "typings",
-    "umd"
+    "dist",
+    "src"
   ],
   "scripts": {
     "prebuild": "npm run clean",
-    "build": "npm run build:d.ts && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd.min",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src -d . --extensions '.ts'",
-    "build:d.ts": "tsc --emitDeclarationOnly",
-    "build:es": "cross-env BABEL_ENV=es babel src -d es --extensions '.ts'",
-    "build:umd": "cross-env BABEL_ENV=umd NODE_ENV=development rollup -c -f umd -o umd/scroll-into-view-if-needed.js",
-    "build:umd.min": "cross-env BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/scroll-into-view-if-needed.min.js",
-    "clean": "rimraf 'umd' 'es' 'typings'",
-    "dev": "concurrently 'tsc --noEmit --watch' 'tsc --noEmit -p tests/typescript --watch' 'npm run build:cjs --watch' 'npm run build:es --watch' 'npm run build:umd --watch' 'npm run build:umd.min --watch'",
-    "lint": "eslint ./integration-examples",
-    "precommit": "lint-staged",
+    "build": "pkg build --strict",
+    "clean": "npx rimraf 'dist'",
     "prepublishOnly": "npm run build",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tests/typescript"
+    "typecheck": "tsc && tsc --noEmit -p tests/typescript"
   },
-  "browserify": {
-    "transform": [
-      "loose-envify"
-    ]
-  },
+  "browserslist": [
+    "> 0.2% and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
+    "maintained node versions"
+  ],
   "prettier": {
     "semi": false,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": ".babelrc",
-        "options": {
-          "parser": "json"
-        }
-      }
-    ]
+    "singleQuote": true
   },
   "dependencies": {
-    "compute-scroll-into-view": "^1.0.20"
+    "compute-scroll-into-view": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-external-helpers": "^7.18.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
+    "@sanity/pkg-utils": "^1.20.1",
     "@sanity/semantic-release-preset": "^2.0.2",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-add-module-exports": "^1.0.4",
-    "babel-plugin-dev-expression": "^0.2.3",
-    "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.11",
-    "flowgen": "^1.20.1",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.5.0",
     "prettier": "^2.8.0",
     "prettier-plugin-packagejson": "^2.3.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslint": "^5.20.1",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.9.3"
@@ -115,3 +75,3 @@ },
     {
-      "path": "./umd/scroll-into-view-if-needed.min.js",
+      "path": "./dist/index.js",
       "maxSize": "3.3 kB",
@@ -118,0 +78,0 @@ "compression": "none"

README.md

@@ -5,3 +5,3 @@ [![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)
 [![size][size-badge]][unpkg-dist]
-[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
+[![module formats: cjs, and es][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)
@@ -15,6 +15,43 @@ [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?style=flat-square&badge_key=ejZ6OUtTaS9rZFFOYzlkeHlwTzMwSWxpR0FzWFcwOW5TS3ROTmlSdXMrVT0tLVhrVk9La2lCb1o4Y05mcmNXVnAvdkE9PQ==--d17668b8aba5091e4ef3a58927b8209e50b0a788)](https://www.browserstack.com/automate/public-build/ejZ6OUtTaS9rZFFOYzlkeHlwTzMwSWxpR0FzWFcwOW5TS3ROTmlSdXMrVT0tLVhrVk9La2lCb1o4Y05mcmNXVnAvdkE9PQ==--d17668b8aba5091e4ef3a58927b8209e50b0a788)
 
-## [Demo](https://scroll-into-view.dev)
+- [Demo](#demo)
+- [Install](#install)
+- [Usage](#usage)
+  - [Ponyfill smooth scrolling](#ponyfill-smooth-scrolling)
+    - [Load time](#load-time)
+    - [Consistency](#consistency)
+    - [Quality](#quality)
+- [API](#api)
+  - [scrollIntoView(target, \[options\])](#scrollintoviewtarget-options)
+  - [options](#options)
+    - [behavior](#behavior)
+      - [`'auto'`](#auto)
+      - [`'smooth'`](#smooth)
+      - [`Function`](#function)
+    - [block](#block)
+    - [inline](#inline)
+    - [scrollMode](#scrollmode)
+    - [boundary](#boundary)
+    - [skipOverflowHiddenElements](#skipoverflowhiddenelements)
+- [TypeScript support](#typescript-support)
+- [Breaking API changes from v1](#breaking-api-changes-from-v1)
+  - [v1](#v1)
+  - [v2](#v2)
+  - [centerIfNeeded](#centerifneeded)
+    - [v1](#v1-1)
+    - [v2](#v2-1)
+  - [duration](#duration)
+    - [v1](#v1-2)
+    - [v2](#v2-2)
+  - [easing](#easing)
+  - [handleScroll](#handlescroll)
+  - [offset](#offset)
+  - [scrollIntoViewIfNeeded(target, \[centerIfNeeded\], \[animateOptions\], \[finalElement\], \[offsetOptions\])](#scrollintoviewifneededtarget-centerifneeded-animateoptions-finalelement-offsetoptions)
+- [Related packages](#related-packages)
+- [Who's using this](#whos-using-this)
+- [Sponsors](#sponsors)
 
-## Install
+# [Demo](https://scroll-into-view.dev)
 
+# Install
+
 ```bash
@@ -24,17 +61,14 @@ npm i scroll-into-view-if-needed
 
-The UMD build is also available on [unpkg](https://unpkg.com/scroll-into-view-if-needed/umd/):
+You can also use it from a CDN:
 
-```html
-<script src="https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js"></script>
+```js
+const { default: scrollIntoView } = await import(
+  'https://esm.sh/scroll-into-view-if-needed'
+)
 ```
 
-You can find the library on `window.scrollIntoView`.
+# Usage
 
-## Usage
-
 ```js
-// es6 import
 import scrollIntoView from 'scroll-into-view-if-needed'
-// or es5
-const scrollIntoView = require('scroll-into-view-if-needed')
 
@@ -63,3 +97,3 @@ const node = document.getElementById('hero')
 
-### Ponyfill smooth scrolling
+## Ponyfill smooth scrolling
 
@@ -82,3 +116,3 @@ What does ponyfilling smooth scrolling mean, and why is it implemented in [`smooth-scroll-into-view-if-needed`](https://github.com/scroll-into-view/smooth-scroll-into-view-if-needed) instead?
 
-##### Load time
+### Load time
 
@@ -93,3 +127,3 @@ In many scenarios smooth scrolling can be used as a progressive enhancement. If the user is on a browser that don't implement smooth scrolling it'll simply scroll instantly and your bundlesize is only as large as it has to be.
 
-##### Consistency
+### Consistency
 
@@ -104,3 +138,3 @@ If a consistent smooth scrolling experience is a priority and you really don't want any surprises between different browsers and enviroments. In other words don't want to be affected by how a vendor might implement native smooth scrolling, then [`smooth-scroll-into-view-if-needed`](https://github.com/scroll-into-view/smooth-scroll-into-view-if-needed) is your best option. It ensures the same smooth scrolling experience for every browser.
 
-##### Quality
+### Quality
 
@@ -121,13 +155,13 @@ If you want to use native smooth scrolling when it's available, and fallback to the smooth scrolling ponyfill:
 
-## API
+# API
 
-### scrollIntoView(target, [options])
+## scrollIntoView(target, [options])
 
 > New API introduced in `v1.3.0`
 
-### options
+## options
 
 Type: `Object`
 
-#### behavior
+### behavior
 
@@ -138,3 +172,3 @@ Type: `'auto' | 'smooth' | Function`<br> Default: `'auto'`
 
-##### `'auto'`
+#### `'auto'`
 
@@ -165,7 +199,7 @@ The auto option unlocks a few interesting opportunities.
 
-##### `'smooth'`
+#### `'smooth'`
 
 Using `behavior: 'smooth'` is the easiest way to smooth scroll an element as it does not require any CSS, just a browser that implements it. [More information.](#ponyfill-smooth-scrolling)
 
-##### `Function`
+#### `Function`
 
@@ -202,3 +236,3 @@ When given a function then this library will only calculate what should be scrolled and leave it up to you to perform the actual scrolling.
 
-#### [block](https://scroll-into-view.dev/#scroll-alignment)
+### [block](https://scroll-into-view.dev/#scroll-alignment)
 
@@ -211,3 +245,3 @@ Type: `'start' | 'center' | 'end' | 'nearest'`<br> Default: `'center'`
 
-#### [inline](https://scroll-into-view.dev/#scroll-alignment)
+### [inline](https://scroll-into-view.dev/#scroll-alignment)
 
@@ -220,3 +254,3 @@ Type: `'start' | 'center' | 'end' | 'nearest'`<br> Default: `'nearest'`
 
-#### [scrollMode](https://scroll-into-view.dev/#scrolling-if-needed)
+### [scrollMode](https://scroll-into-view.dev/#scrolling-if-needed)
 
@@ -229,3 +263,3 @@ Type: `'always' | 'if-needed'`<br> Default: `'always'`
 
-#### [boundary](https://scroll-into-view.dev/#limit-propagation)
+### [boundary](https://scroll-into-view.dev/#limit-propagation)
 
@@ -238,3 +272,3 @@ Type: `Element | Function`
 
-#### skipOverflowHiddenElements
+### skipOverflowHiddenElements
 
@@ -284,3 +318,3 @@ Type: `Boolean`<br> Default: `false`
 ```typescript
-import scrollIntoView, { Options } from 'scroll-into-view-if-needed'
+import scrollIntoView, { type Options } from 'scroll-into-view-if-needed'
 
@@ -303,3 +337,3 @@ interface CustomOptions extends Options {
 
-##### v1
+### v1
 
@@ -313,3 +347,3 @@ ```js
 
-##### v2
+### v2
 
@@ -323,3 +357,3 @@ ```js
 
-#### centerIfNeeded
+## centerIfNeeded
 
@@ -330,3 +364,3 @@ The old `Element.scrollIntoView` api only had two settings, align to top or bottom. [`Element.scrollIntoViewIfNeeded`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded) had two more, align to the center or nearest edge.
 
-##### v1
+### v1
 
@@ -344,3 +378,3 @@ ```js
 
-##### v2
+### v2
 
@@ -354,7 +388,7 @@ ```js
 
-#### duration
+## duration
 
 [More information.](#ponyfill-smooth-scrolling)
 
-##### v1
+### v1
 
@@ -367,3 +401,3 @@ ```js
 
-##### v2
+### v2
 
@@ -378,7 +412,7 @@ ```js
 
-#### easing
+## easing
 
 This feature is removed, but you can achieve the same thing by implementing [`behavior: Function`](#function).
 
-#### handleScroll
+## handleScroll
 
@@ -401,3 +435,3 @@ This is replaced with [`behavior: Function`](#function) with one key difference. Instead of firing once per element that should be scrolled, the new API only fire once and instead give you an array so you can much easier batch and scroll multiple elements at the same time. Or sync scrolling with another element if that's the kind of stuff you're into, I don't judge.
 
-#### offset
+## offset
 
@@ -407,3 +441,3 @@ This was always a buggy feature and warned against using in v1 as it might get dropped.
 
-### scrollIntoViewIfNeeded(target, [centerIfNeeded], [animateOptions], [finalElement], [offsetOptions])
+## scrollIntoViewIfNeeded(target, [centerIfNeeded], [animateOptions], [finalElement], [offsetOptions])
 
@@ -432,8 +466,8 @@ This API signature were warned to be dropped in `v2.0.0`, and it was.
 
-[gzip-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js?compression=gzip&label=gzip%20size&style=flat-square
-[size-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/umd/scroll-into-view-if-needed.min.js?label=size&style=flat-square
-[unpkg-dist]: https://unpkg.com/scroll-into-view-if-needed/umd/
-[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square
+[gzip-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/dist/index.js?compression=gzip&label=gzip%20size&style=flat-square
+[size-badge]: http://img.badgesize.io/https://unpkg.com/scroll-into-view-if-needed/dist/index.js?label=size&style=flat-square
+[unpkg-dist]: https://unpkg.com/scroll-into-view-if-needed/dist/
+[module-formats-badge]: https://img.shields.io/badge/module%20formats-cjs%2C%20esm-green.svg?style=flat-square
 
-## Sponsors
+# Sponsors
 
@@ -440,0 +474,0 @@ Thanks to [BrowserStack](https://www.browserstack.com) for sponsoring cross browser and device testing 😄

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37259

increased by9.39%

Dev dependency count

7

decreased by-76.67%

Number of lines in readme file

450

increased by8.17%

Is type module

Yes

Worsened metrics

Lines of code

162

decreased by-27.03%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcompute-scroll-into-view@2.0.4(transitive)

• - Removedcompute-scroll-into-view@1.0.20(transitive)

• Updatedcompute-scroll-into-view@^2.0.0