wait-for-the-element - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

CHANGELOG.md

@@ -5,2 +5,20 @@ # Changelog
 
+## [3.0.0] (2021-07-01)
+
+### Changed
+
+- Change observations are optimized for selectors using attributes; this module will scan your CSS selectors for any attributes and only react to changes of those attributes.
+- Removed unnecessary files from the package making it more lightweight.
+- This module is now transpiled using Babel.
+- The UMD version of this module now exposes itself using the name `wait-for-the-element` instead of `waitForTheElement`.
+
+### Added
+
+- Introduced `waitForTheElementToDisappear()` that will wait for all elements to stop matching a provided selector.
+- Introduced an ESM version of this module that will be used when being imported using `import`.
+
+### Removed
+
+- Removed `tryAndWaitForTheElement()`.
+
 ## [2.2.0] (2019-06-04)
@@ -7,0 +25,0 @@

LICENSE.txt

 MIT License
 
-Copyright (c) 2019 Luke Phillips
+Copyright (c) 2020 - 2021 Luke Phillips
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
     "name" : "wait-for-the-element",
 
-    "version" : "2.2.0",
+    "version" : "3.0.0",
 
-    "description" : "A utility that will fetch an element by waiting for it to exist.",
+    "type" : "module",
 
+    "description" : "A utility library that enables you to efficiently wait for an element to appear or disappear.",
+
     "author" :
@@ -30,27 +32,43 @@ {
     {
-        "rollup" : "1.13.1",
-        "rollup-plugin-node-resolve" : "5.0.1",
-        "rollup-plugin-commonjs" : "10.0.0",
-        "rollup-plugin-buble" : "0.19.6",
-        "rollup-plugin-uglify" : "6.0.2",
-        "mocha" : "6.1.4",
-        "chai" : "4.2.0",
+        "rollup" : "2.52.2",
+        "rollup-plugin-terser" : "7.0.2",
+        "@rollup/plugin-node-resolve" : "13.0.0",
+        "@rollup/plugin-commonjs" : "19.0.0",
+        "@rollup/plugin-babel" : "5.3.0",
+        "mocha" : "9.0.1",
+        "chai" : "4.3.4",
         "chai-as-promised" : "7.1.1",
-        "eslint" : "5.16.0",
-        "eslint-plugin-import" : "2.17.3",
-        "eslint-plugin-promise" : "4.1.1",
-        "eslint-config-protect-me-from-my-stupidity" : "~3.2.0",
-        "karma" : "4.1.0",
-        "karma-mocha" : "1.3.0",
+        "eslint" : "7.29.0",
+        "eslint-plugin-import" : "2.23.4",
+        "eslint-plugin-promise" : "5.1.0",
+        "eslint-config-protect-me-from-my-stupidity" : "7.2.2",
+        "karma" : "6.3.4",
+        "karma-mocha" : "2.0.1",
         "karma-mocha-reporter" : "2.2.5",
-        "karma-rollup-preprocessor" : "7.0.0",
-        "karma-chrome-launcher" : "2.2.0",
-        "karma-firefox-launcher" : "1.1.0",
+        "karma-rollup-preprocessor" : "7.0.7",
+        "karma-chrome-launcher" : "3.1.0",
+        "@babel/core" : "7.14.6",
+        "@babel/preset-env" : "7.14.7",
         "timeout-as-promise" : "1.0.0"
     },
 
-    "main" : "src/waitForTheElement.js",
+    "main" : "wait-for-the-element.cjs",
 
-    "browser" : "waitForTheElement.js",
+    "exports" :
+    {
+        "import" : "./wait-for-the-element.js",
+        "require" : "./wait-for-the-element.cjs",
+        "default" : "./wait-for-the-element.cjs"
+    },
 
+    "files" :
+    [
+        "/README.md",
+        "/CHANGELOG.md",
+        "/LICENSE.txt",
+        "/wait-for-the-element.js",
+        "/wait-for-the-element.cjs",
+        "/wait-for-the-element.d.ts"
+    ],
+
     "repository" :
@@ -62,7 +80,9 @@ {
 
+    "license" : "MIT",
+
     "scripts" :
     {
-        "lint" : "eslint \"src/**/*.js\" \"test/**/*.js\"",
-        "unit" : "karma start --single-run",
-        "test" : "npm run lint && npm run unit",
+        "test:lint" : "eslint \"**/*.js\" --ignore-path .gitignore",
+        "test:unit" : "karma start karma.conf.cjs --single-run",
+        "test" : "npm run test:lint && npm run test:unit",
         "build" : "rollup --config",
@@ -72,10 +92,3 @@ "prepack" : "npm run test && npm run build"
 
-    "license" : "MIT",
-
-    "engines" :
-    {
-        "node" : ">=7.0.0"
-    },
-
-    "types" : "waitForTheElement.d.ts"
+    "types" : "wait-for-the-element.d.ts"
 }

README.md

@@ -6,12 +6,28 @@ # WaitForTheElement
 
-A utility that will fetch an element by waiting for it to exist.
+A utility library that enables you to efficiently wait for an element to appear or disappear.
 
 ## Usage
 
+This module can be treated as an ES module:
+
 ``` js
-const { waitForTheElement } = require('wait-for-the-element');
+import { waitForTheElement, waitForTheElementToDisappear } from 'wait-for-the-element';
+```
 
+This module can also be treated as a CommonJS module:
+
+``` js
+const { waitForTheElement, waitForTheElementToDisappear } = require('wait-for-the-element');
+```
+
+### Waiting for an element
+
+You can wait for an element to match a provided selector and retrieve it:
+
+``` js
+let element;
+
 try
 {
-  let element = await waitForTheElement('.selector-for-an-element-that-may-appear-later', {
+  element = await waitForTheElement('.target', {
     timeout : 5000
@@ -22,19 +38,23 @@ });
 {
-  throw new Error('Took more than 5 seconds to find the element.');
+  // After 5 seconds, a matching element still doesn't exist.
 }
 ```
 
-If a match is not found in time, an error will be thrown. Alternatively, you can use `tryAndWaitForTheElement()` which will return `null` if a match is not found. For example:
+**Important Note:** If the selector matches multiple elements, only the first match will be returned.
 
-``` js
-const { tryAndWaitForTheElement } = require('wait-for-the-element');
+### Waiting for an element to disappear
 
-let element = await tryAndWaitForTheElement('.selector-for-an-element-that-may-appear-later', {
-  timeout : 5000
-});
+You can wait for all elements to stop matching a provided selector:
 
-if (element === null)
+``` js
+try
 {
-  console.log('Took more than 5 seconds to find the element.');
+  await waitForTheElementToDisappear('.target', {
+    timeout : 5000
+  });
 }
+catch (error)
+{
+  // After 5 seconds, a matching element still exists.
+}
 ```
@@ -44,13 +64,13 @@
 
-All CSS selectors supported by `document.querySelector()` are supported. If the selector matches multiple elements, only the first match will be returned.
+All functions accept CSS selectors supported by `document.querySelector()`.
 
 ### Options
 
-  - `timeout` - The maximum amount of time (in milliseconds) to wait for a matching element to exist. Defaults to 2.5 seconds.
-  - `scope` - The root element to start searching from. Defaults to the entire document.
+All functions accept an optional settings object that control how elements are searched for:
 
-### Compatibility
+| Options   | Required | Default    | Description                                           |
+| --------- | :------: | :--------: | ----------------------------------------------------- |
+| `timeout` | No       | `2500`     | The maximum amount of time (in milliseconds) to wait. |
+| `scope`   | No       | `document` | The root element to start searching from.             |
 
-This project uses mutation observers to improve performance, which is subject to [browser support](https://caniuse.com/#feat=mutationobserver).
-
 ## Getting started
@@ -68,3 +88,3 @@
 
-You can build a browser entry point that is ES5 compatible and minified:
+You can build UMD and ESM versions of this module that are both ES5 compatible and minified:
 
@@ -80,3 +100,3 @@ ``` sh
 ``` sh
-npm run test
+npm test
 ```
@@ -83,0 +103,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

17650

54.57%

Number of lines in readme file

104

23.81%

Is type module

Yes

NaN

Worsened metrics

Dev dependency count

20

5.26%

Lines of code

102

-30.61%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes