Add `elementReady.subscribe()` #24

qti3e · 2019-07-01T15:19:55Z

This approach uses a WeakMap to store already seen elements (to prevent memory leak) in order to detect new elements, also because checking all the elements to find out new ones might be a bit heavy we do this in half of the requestAnimationFrames, feedback is welcome.

Fixes #22

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

#22: Subscribe to new elements on the page

IssueHunt has been backed by the following sponsors. Become a sponsor

index.js

fregante · 2019-07-01T16:12:00Z

index.d.ts

+     */
+    stop(): void;
+  };
+
 	type StoppablePromise<T> = Promise<T> & {


Perhaps, but the description doesn't match.

type StoppablePromise<T> = Promise<T> & Stoppable;

I actually wanted to do so, but I didn't want to change the doc comments.

qti3e · 2019-07-07T09:42:05Z

@bfred-it Hey! I've made a small change and I guess this PR is ready to be merged.
Please let me know your opinion.

sindresorhus · 2019-07-07T13:45:23Z

index.js

+		if (checkFrame) {
+			const allElements = target.querySelectorAll(selector);
+
+			for (let i = 0; i < allElements.length; ++i) {


Use a for-of loop.

sindresorhus · 2019-07-07T13:45:45Z

index.js

@@ -54,4 +54,52 @@ const elementReady = (selector, {
 	return Object.assign(promise, {stop});
 };

+elementReady.subscribe = (selector, cb, {


Don't use abbreviations. cb => callback.

index.test-d.ts

sindresorhus · 2019-07-07T13:46:25Z

readme.md

+
+Same as `elementReady` options.
+
+#### elementReady.subscribe()#stop()


sindresorhus · 2019-07-07T13:46:44Z

test.js

@@ -187,3 +187,56 @@ test('ensure different promises are returned on second call with the same select
 	document.querySelector('.unicorn').remove();
 	t.is(prependElement(), await elementReady('.unicorn'));
 });
+
+test('subscribe: check if elements are detected', async t => {
+	const e = () => {


Don't use one character variable names.

sindresorhus · 2019-07-07T13:47:54Z

readme.md

+### elementReady.subscribe(selector, cb, options?)
+
+Detect elements as they are added to the DOM.
+


Include some use-cases for this method.

sindresorhus · 2019-07-07T13:49:41Z

index.d.ts

+  /**
+  Called on each new element that matches the selector in the DOM.
+  */
+  type SubscribeCallback<T> = (el: T) => any;


This type is incorrect. According to the JS code, the return value is not used.

Suggested change

type SubscribeCallback<T> = (el: T) => any;

type SubscribeCallback<T> = (element: T) => any;

sindresorhus · 2019-07-07T13:49:51Z

index.d.ts

+  Detect elements as they are added to the DOM.
+
+  @param selector - [CSS selector.](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)
+  @param cb Callback that is called for each new element.


Suggested change

@param cb Callback that is called for each new element.

@param cb - Callback that is called for each new element.

sindresorhus · 2019-07-07T13:50:26Z

index.d.ts

+		/**
+		 Stop checking for new elements.
+
+		 Calling it multiple times does nothing.


Incorrect indentation.

sindresorhus · 2019-07-07T13:51:48Z

index.js

+	stopOnDomReady = true,
+	timeout = Infinity
+} = {}) => {
+	const seen = new WeakSet();


Suggested change

const seen = new WeakSet();

const seenElements = new WeakSet();

sindresorhus · 2019-07-07T13:52:33Z

The implementation looks good, but I think you need to put more effort into the docs and TS definition.

qti3e · 2019-07-08T02:19:58Z

@sindresorhus Sorry for all of this style-guide related issues, I wasn't quite familiar with your coding guide-lines, anyway I've addressed all of your comments.

Also, I made a change to SubscribeOptions, I think SubscribeOptions.stopOnDomReady's default is better to be false as when a user calls this function they want to subscribe to all of the new elements, also they're probably going to use this function after the DOM ready event most of the time.

fregante · 2019-07-08T04:50:31Z

My usage would be exactly to catch elements as the page loads, until the DOM ready
It’s best to match the options for the regular elementReady

qti3e · 2019-07-18T20:12:08Z

ping @bfred-it

sindresorhus · 2019-09-17T06:16:06Z

There are still some unresolved PR comments and some space indentation that needs to be converted to tab indentation.

sindresorhus · 2019-09-17T06:14:54Z

index.test-d.ts

@@ -12,4 +12,17 @@ expectType<elementReady.StoppablePromise<Element | undefined>>(promise);
 expectType<elementReady.StoppablePromise<HTMLDivElement | undefined>>(elementReady('div'));
 expectType<elementReady.StoppablePromise<SVGElement | undefined>>(elementReady('text'));

+
+const {stop} = elementReady.subscribe('.unicorn', e => null);


#24 (comment)

sindresorhus · 2019-09-17T06:15:16Z

index.test-d.ts

+
+elementReady.subscribe('.unicorn', e => expectType<Element>(e));
+elementReady.subscribe('div', e => expectType<HTMLDivElement>(e));
+elementReady.subscribe('text', e => expectType<SVGElement>(e));


And these callbacks should not be inline arrow functions. They don't return anything so it's clearer with normal arrow functions.

To be clear, Sindre means this by "normal arrow functions":

elementReady.subscribe('text', e => { expectType<SVGElement>(e); });

sindresorhus · 2020-02-16T21:15:34Z

@qti3e Ping back :)

qti3e · 2020-02-17T19:03:30Z

@sindresorhus I've been busy working on something, sorry I forgot about this pr since it's been a long time.

sindresorhus · 2020-02-20T09:42:55Z

index.d.ts

+    selector: string,
+    callback: elementReady.SubscribeCallback<ElementName>,
+    options?: elementReady.Options
+  ): Stoppable;


Use tab-indentation.

sindresorhus · 2020-02-20T09:43:48Z

index.test-d.ts

+	expectType<SVGElement>(element)
+});
+
+expectType<() => any>(stop);


This is not correct. It returns void.

sindresorhus · 2020-02-20T09:45:11Z

index.js

+					continue;
+				}
+
+				callback(element);


Can you pass undefined instead of null (which querySelectorAll returns). To be consistent with our other usage of undefined.

sindresorhus · 2020-02-20T09:46:18Z

index.d.ts

+  /**
+  Called on each new element that matches the selector in the DOM.
+  */
+  type SubscribeCallback<T> = (element: T) => void;


The element is not guaranteed to exist so should be optional.

sindresorhus · 2020-02-20T09:47:36Z

test.js

@@ -185,3 +185,56 @@ test('ensure different promises are returned on second call with the same select
 	document.querySelector('.unicorn').remove();
 	t.is(prependElement(), await elementReady('.unicorn'));
 });
+
+test('subscribe: check if elements are detected', async t => {


There needs to be tests for the timeout and stopOnDomReady options with subscribe too.

sindresorhus · 2020-02-20T09:49:02Z

index.js

+	const seenElements = new WeakSet();
+
+	let rafId;
+	let checkFrame = true;


This should should have a should, is, or has prefix. Not clear to me which one fits the best.

sindresorhus · 2020-07-06T14:52:18Z

@qti3e Bump :)

sindresorhus · 2020-08-10T19:17:03Z

Closing for lack of activity.

Implement elementReady.subscribe

d74eea4

qti3e force-pushed the q/sub branch from c904bd9 to d74eea4 Compare July 1, 2019 15:51

fregante reviewed Jul 1, 2019

View reviewed changes

index.js Outdated Show resolved Hide resolved

index.js Outdated Show resolved Hide resolved

reviews

192a1c9

fregante reviewed Jul 1, 2019

View reviewed changes

Replace WeakMap with a WeakSet

6efea53

sindresorhus requested changes Jul 7, 2019

View reviewed changes

sindresorhus changed the title ~~Implement elementReady.subscribe~~ Add elementReady.subscribe() Jul 7, 2019

qti3e force-pushed the q/sub branch from 1f83646 to a6f2f88 Compare July 8, 2019 02:22

Reviews - Update SubscribeOptions.stopOnDomReady's default to false

33b5311

qti3e force-pushed the q/sub branch from a6f2f88 to 33b5311 Compare July 8, 2019 02:36

Revert the change to stopOnDomReady

b7bf791

fregante requested a review from sindresorhus September 10, 2019 20:15

sindresorhus requested changes Sep 17, 2019

View reviewed changes

qti3e added 3 commits February 17, 2020 22:01

Change code according to reviews

734f70c

Merge branch 'master' into q/sub

ecb15e1

Use isDomReady

aa101bb

sindresorhus reviewed Feb 20, 2020

View reviewed changes

index.test-d.ts

expectType<SVGElement>(element)

});

expectType<() => any>(stop);

Copy link

Owner

sindresorhus Feb 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not correct. It returns void.

sindresorhus reviewed Feb 20, 2020

View reviewed changes

sindresorhus mentioned this pull request Aug 10, 2020

Subscribe to new elements on the page #22

Closed

sindresorhus closed this Aug 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `elementReady.subscribe()` #24

Add `elementReady.subscribe()` #24

qti3e commented Jul 1, 2019 •

edited by sindresorhus

Loading

fregante Jul 1, 2019 •

edited

Loading

qti3e Jul 1, 2019

qti3e commented Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus Jul 7, 2019

sindresorhus commented Jul 7, 2019

qti3e commented Jul 8, 2019

fregante commented Jul 8, 2019 •

edited

Loading

qti3e commented Jul 18, 2019

sindresorhus commented Sep 17, 2019

sindresorhus Sep 17, 2019

sindresorhus Sep 17, 2019

fregante Sep 17, 2019

sindresorhus commented Feb 16, 2020

qti3e commented Feb 17, 2020

sindresorhus Feb 20, 2020

sindresorhus Feb 20, 2020

sindresorhus Feb 20, 2020

sindresorhus Feb 20, 2020

sindresorhus Feb 20, 2020

sindresorhus Feb 20, 2020

sindresorhus commented Jul 6, 2020

sindresorhus commented Aug 10, 2020


		Same as `elementReady` options.

		#### elementReady.subscribe()#stop()

		### elementReady.subscribe(selector, cb, options?)

		Detect elements as they are added to the DOM.

	type SubscribeCallback<T> = (el: T) => any;
	type SubscribeCallback<T> = (element: T) => any;

	@param cb Callback that is called for each new element.
	@param cb - Callback that is called for each new element.

	const seen = new WeakSet();
	const seenElements = new WeakSet();

Add elementReady.subscribe() #24

Add elementReady.subscribe() #24

Conversation

qti3e commented Jul 1, 2019 • edited by sindresorhus Loading

Referenced issues

fregante Jul 1, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qti3e commented Jul 7, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Jul 7, 2019

qti3e commented Jul 8, 2019

fregante commented Jul 8, 2019 • edited Loading

qti3e commented Jul 18, 2019

sindresorhus commented Sep 17, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Feb 16, 2020

qti3e commented Feb 17, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Jul 6, 2020

sindresorhus commented Aug 10, 2020

Add `elementReady.subscribe()` #24

Add `elementReady.subscribe()` #24

qti3e commented Jul 1, 2019 •

edited by sindresorhus

Loading

fregante Jul 1, 2019 •

edited

Loading

fregante commented Jul 8, 2019 •

edited

Loading