New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
wait-for-the-element
Advanced tools
wait-for-the-element - npm Package Compare versions
Comparing version 2.0.0 to 2.1.0
@@ -5,2 +5,12 @@ # Changelog | ||
| ## [2.1.0] (2018-12-05) | ||
| ### Added | ||
| - Introduced documentation to the Typescript type definitons. | ||
| ### Changed | ||
| - The type definitions for `waitForTheElement()` and `tryAndWaitForTheElement()` now enforces that the return type must extend `Element`. | ||
| ## [2.0.0] (2018-09-25) | ||
@@ -10,7 +20,7 @@ | ||
| - The module no longer exports a function. | ||
| - The module no longer exports a function. | ||
| ### Added | ||
| - Introduced the `tryAndWaitForTheElement()` function that will return `null` instead of throwing an error when a matching element is not found in time. | ||
| - Introduced the `tryAndWaitForTheElement()` function that will return `null` instead of throwing an error when a matching element is not found in time. | ||
@@ -17,0 +27,0 @@ ## [1.0.0] (2018-09-25) |
| { | ||
| "name" : "wait-for-the-element", | ||
| "version" : "2.0.0", | ||
| "version" : "2.1.0", | ||
@@ -31,12 +31,13 @@ "description" : "A utility that will fetch an element by waiting for it to exist.", | ||
| "browserify" : "16.2.3", | ||
| "watchify" : "3.11.0", | ||
| "mocha" : "5.2.0", | ||
| "chai" : "4.1.2", | ||
| "chai" : "4.2.0", | ||
| "chai-as-promised" : "7.1.1", | ||
| "eslint" : "5.6.0", | ||
| "eslint" : "5.9.0", | ||
| "eslint-plugin-import" : "2.14.0", | ||
| "eslint-plugin-promise" : "3.8.0", | ||
| "eslint-config-protect-me-from-my-stupidity" : "~2.1.1", | ||
| "karma" : "3.0.0", | ||
| "eslint-plugin-promise" : "4.0.1", | ||
| "eslint-config-protect-me-from-my-stupidity" : "~3.1.2", | ||
| "karma" : "3.1.1", | ||
| "karma-mocha" : "1.3.0", | ||
| "karma-browserify" : "5.3.0", | ||
| "karma-browserify" : "6.0.0", | ||
| "karma-source-map-support" : "1.3.0", | ||
@@ -58,3 +59,3 @@ "karma-chrome-launcher" : "2.2.0", | ||
| { | ||
| "lint" : "eslint 'src/**/*.js' 'tests/**/*.js'", | ||
| "lint" : "eslint \"src/**/*.js\" \"tests/**/*.js\"", | ||
| "unit" : "karma start --single-run", | ||
@@ -61,0 +62,0 @@ "test" : "npm run lint && npm run unit" |
@@ -15,9 +15,9 @@ # WaitForTheElement | ||
| { | ||
| let element = await waitForTheElement('.element-that-may-appear-later', { | ||
| timeout : 5000 | ||
| }); | ||
| let element = await waitForTheElement('.selector-for-an-element-that-may-appear-later', { | ||
| timeout : 5000 | ||
| }); | ||
| } | ||
| catch (error) | ||
| { | ||
| throw new Error('Took more than 5 seconds to find the element.'); | ||
| throw new Error('Took more than 5 seconds to find the element.'); | ||
| } | ||
@@ -31,4 +31,4 @@ ``` | ||
| let element = await tryAndWaitForTheElement('.element-that-may-appear-later', { | ||
| timeout : 5000 | ||
| let element = await tryAndWaitForTheElement('.selector-for-an-element-that-may-appear-later', { | ||
| timeout : 5000 | ||
| }); | ||
@@ -38,3 +38,3 @@ | ||
| { | ||
| console.log('Took more than 5 seconds to find the element.'); | ||
| console.log('Took more than 5 seconds to find the element.'); | ||
| } | ||
@@ -49,8 +49,8 @@ ``` | ||
| - `timeout` - Determines the maximum amount of time you want to wait for (in milliseconds). Defaults to 2.5 seconds. | ||
| - `scope` - Determines the scope you want to search in. Defaults to the entire document. | ||
| - `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. | ||
| ### Compatibility | ||
| This project uses mutation observers to improve performance, which are subject to [browser support](https://caniuse.com/#feat=mutationobserver). | ||
| This project uses mutation observers to improve performance, which is subject to [browser support](https://caniuse.com/#feat=mutationobserver). | ||
@@ -57,0 +57,0 @@ ## Getting started |
| 'use strict'; | ||
| /** | ||
| * Retrieves a matching element from a DOM mutation. | ||
| * | ||
| * @private | ||
| * | ||
| * @returns {Element} The matching element from the mutation, otherwise `null`. | ||
| * | ||
| * @param {MutationRecord} mutation The DOM mutation. | ||
| * @param {String} selector The selector that the element must match. | ||
| */ | ||
| // - - - - - - - - - - - - - - - - - - - - - - - - - - - - | ||
| function getMatchingElementFromMutation (mutation, selector) | ||
@@ -44,29 +36,2 @@ { | ||
| /** | ||
| * Fetches an element by waiting for it to exist. | ||
| * | ||
| * Example usage: | ||
| * | ||
| * ``` | ||
| * try | ||
| * { | ||
| * let element = await waitForTheElement('.element-that-may-appear-later', { | ||
| * timeout : 5000 | ||
| * }); | ||
| * } | ||
| * catch (error) | ||
| * { | ||
| * throw new Error('Took more than 5 seconds to find the element.'); | ||
| * } | ||
| * ``` | ||
| * | ||
| * @returns {Promise<Element>} A promise that will be fulfilled with the matching element. | ||
| * | ||
| * @param {String} selector The selector of the element to fetch. | ||
| * @param {Object} [options] Some options to control how the element is searched for. | ||
| * @param {Number} [options.timeout = 2500] Determines the maximum amount of time you want to wait for (in milliseconds). | ||
| * @param {Element} [options.scope = document] Determines the scope you want to search in. | ||
| * | ||
| * @throws {Error} When a matching element isn't found in time. | ||
| */ | ||
| function waitForTheElement (selector, { | ||
@@ -124,27 +89,2 @@ timeout = 2500, scope = document | ||
| /** | ||
| * Fetches an element by waiting for it to exist. | ||
| * | ||
| * This works the same way as `waitForTheElement()`, but returns `null` instead of throwing an error. | ||
| * | ||
| * Example usage: | ||
| * | ||
| * ``` | ||
| * let element = await tryAndWaitForTheElement('.element-that-may-appear-later', { | ||
| * timeout : 5000 | ||
| * }); | ||
| * | ||
| * if (element === null) | ||
| * { | ||
| * console.log('Took more than 5 seconds to find the element.'); | ||
| * } | ||
| * ``` | ||
| * | ||
| * @returns {Promise<Element>} A promise that will be fulfilled with the matching element or `null` if a matching element could not be found. | ||
| * | ||
| * @param {String} selector The selector of the element. | ||
| * @param {Object} [options] Some options to control how the element is searched for. | ||
| * @param {Number} [options.timeout = 2500] Determines the maximum amount of time you want to wait for (in milliseconds). | ||
| * @param {Element} [options.scope = document] Determines the scope you want to search in. | ||
| */ | ||
| function tryAndWaitForTheElement (selector, options) | ||
@@ -151,0 +91,0 @@ { |
@@ -1,5 +0,15 @@ | ||
| export interface WaitForTheElementOptions | ||
| /** | ||
| * Options that define how an element should be searched for. | ||
| */ | ||
| export interface ElementSearchOptions | ||
| { | ||
| /** | ||
| * The maximum amount of time (in milliseconds) to wait for a matching element to exist. | ||
| */ | ||
| timeout? : number; | ||
| scope? : Element; | ||
| /** | ||
| * The root element to start searching from. | ||
| */ | ||
| scope? : Element; | ||
| } | ||
@@ -9,6 +19,58 @@ | ||
| export function waitForTheElement<T> (selector : string, options? : WaitForTheElementOptions) : Promise<T>; | ||
| /** | ||
| * Fetches an element by waiting for it to exist. | ||
| * | ||
| * Example usage: | ||
| * | ||
| * ``` js | ||
| * try | ||
| * { | ||
| * let element = await waitForTheElement('.selector-for-an-element-that-may-appear-later', { | ||
| * timeout : 5000 | ||
| * }); | ||
| * } | ||
| * catch (error) | ||
| * { | ||
| * throw new Error('Took more than 5 seconds to find the element.'); | ||
| * } | ||
| * ``` | ||
| * | ||
| * By default it will search the entire document and wait for 2.5 seconds. | ||
| * | ||
| * @param selector The selector of the element to fetch. This can be any selector that `document.querySelector()` supports. | ||
| * @param options Options that define how the element should be searched for. | ||
| * | ||
| * @typeParam E The type of the element you expect to be found. | ||
| * | ||
| * @returns A promise that will resolve with an element matching `selector`, or reject with an error if an element isn't found in time. | ||
| */ | ||
| export function waitForTheElement<E extends Element> (selector : string, options? : ElementSearchOptions) : Promise<E>; | ||
| // - - - - - - - - - - - - - - - - - - - - - - - - - - - - | ||
| export function tryAndWaitForTheElement<T> (selector : string, options? : WaitForTheElementOptions) : Promise<T | null>; | ||
| /** | ||
| * Fetches an element by waiting for it to exist, but returns `null` instead of throwing an error. | ||
| * | ||
| * Example usage: | ||
| * | ||
| * ``` js | ||
| * let element = await tryAndWaitForTheElement('.selector-for-an-element-that-may-appear-later', { | ||
| * timeout : 5000 | ||
| * }); | ||
| * | ||
| * if (element === null) | ||
| * { | ||
| * console.log('Took more than 5 seconds to find the element.'); | ||
| * } | ||
| * ``` | ||
| * | ||
| * By default it will search the entire document and wait for 2.5 seconds. | ||
| * | ||
| * @param selector The selector of the element to fetch. This can be any selector that `document.querySelector()` supports. | ||
| * @param options Options that define how the element should be searched for. | ||
| * | ||
| * @typeParam E The type of the element you expect to be found. | ||
| * | ||
| * @returns A promise that will resolve with an element matching `selector`, or `null` if an element isn't found in time. | ||
| */ | ||
| export function tryAndWaitForTheElement<E extends Element> (selector : string, options? : ElementSearchOptions) : Promise<E | null>; |
No alert changes
Worsened metrics
- Total package byte prevSize
9811
-6.34%- Dev dependency count
16
6.67%- Number of package files
6
-25%- Lines of code
142
-18.39%No dependency changes