RFC for node-reactions #11

ravijayaramappa · 2019-07-19T17:48:35Z

This a proposal for building a library that will allow services to react to a DOM node's lifecycle, synchronously.

caridy · 2019-07-19T20:08:21Z

text/0000-node-reactions.md

+## Invariants
+1. A node can be connected and disconnected from the DOM more than once. Every time the event happens, the qualifying hook should be invoked.
+2. For a given node, more than one service can be registered to react to the same lifecycle event. In which case, each hook should be invoked in the order of registration(FIFO). 
+    2.1 Duplicate hooks for the same event type, for the same node will be ignored. For example, if a service registers the same connectedCallback more than once for the same node, the callback is invoked only once.


is there a particular reason for this? seems to slow down things... while event listeners and other similar mechanisms do not apply this filtering.

Duplicate event listeners on the same node do get filtered out. Here's an example to demonstrate: https://jsbin.com/weyewul/edit?html,js,console,output

caridy · 2019-07-19T20:09:50Z

text/0000-node-reactions.md

+#### Callback
+- Option 1
+    ```js
+    type ReactionCallback = (


I like this better

and it is faster.

pmdartus · 2019-07-22T09:45:19Z

text/0000-node-reactions.md

+- RFC PR: (leave this empty)
+- Lightning Web Component Issue: (leave this empty)
+
+# Summary


Make all the headers level 1 to headers level 2 except for the title.

Suggested change

# Summary

## Summary

pmdartus · 2019-07-22T09:47:24Z

text/0000-node-reactions.md

+
+# Basic example
+
+*Proposal 1*: One simple API that accepts hooks for various lifecycle events


For completeness purposes, we should also add a way to remove the lifecycle hook from the element.

pmdartus · 2019-07-22T09:50:29Z

text/0000-node-reactions.md

+```
+
+# Motivation
+The browser provides ways to react to lifecycle events in the window or document. For example, [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) event signals that the initial HTML document has been loaded and parsed. The [`load`](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event signals that the page is full loaded. Similarly, [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) allows reactions to the resources being unloaded.


IMO making a parallel with MutationObserver would make more sense here.

This section should also highlight why MO doesn't work in order to emulate custom elements since the MO callback is invoked in a microtask while the CEReaction is invoked in place.

pmdartus · 2019-07-22T09:53:16Z

text/0000-node-reactions.md

+
+Web Components supports reacting to the lifecycle of a custom element. Hooks for  lifecycle events are part of the custom component definition. Read the spec [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) for more detail. 
+
+Lightning Web Components(LWC) has support for similar lifecycle events. Of particular interest to this RFC is the `connectedCallback` and `disconnectedCallback`. In LWC, the responsibility of invoking the hooks is distributed between the engine itself and snabdom. The goal of this RFC is to abstract the responsibility of managing the lifecycle into a library and make LWC subscribe to lifecycle events from the node-reactions library.


I don't know if we want to call out snabdom in this paragraph. I am envisioning completely/partially removing snabdom in the future.

yeah... agree, but lets make sure that we mention that today, engine's code is responsible for the hooks, and we don't like that... it is a problem to be solved.

pmdartus · 2019-07-22T09:54:02Z

text/0000-node-reactions.md

+# Motivation
+The browser provides ways to react to lifecycle events in the window or document. For example, [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) event signals that the initial HTML document has been loaded and parsed. The [`load`](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event signals that the page is full loaded. Similarly, [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) allows reactions to the resources being unloaded.
+
+Web Components supports reacting to the lifecycle of a custom element. Hooks for  lifecycle events are part of the custom component definition. Read the spec [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) for more detail. 


Suggested change

Web Components supports reacting to the lifecycle of a custom element. Hooks for lifecycle events are part of the custom component definition. Read the spec [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) for more detail.

Web Components supports reacting to the lifecycle of a custom element. Hooks for lifecycle events are part of the custom component definition. Read the spec [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) for more detail.

pmdartus · 2019-07-22T09:59:22Z

text/0000-node-reactions.md

+ * @param {String} reactionEventType - one of connected, disconnected, adopted etc
+ * @param {Function} callback
+ */
+function reactTo(node, reactionEventType, callback);


I personally like better the approach with a single method used to that can be used for multiple type of node reaction (à la EventTarget.addEventListener(type, cb)).

pmdartus · 2019-07-22T10:02:01Z

text/0000-node-reactions.md

+
+# Alternatives
+
+## MutationObserver


IMO, this section should be in moved to the motivation section.

pmdartus · 2019-07-22T10:02:52Z

text/0000-node-reactions.md

+
+# Unresolved questions
+
+- How will traversal work for native custom elements running in closed shadow mode? In web components, Lifecycle hooks behave the same regardless of mode of shadow DOM. For example: https://jsbin.com/misofod/edit?html,js,console,output


Will we ever need to take care of this case?

pmdartus · 2019-07-22T10:04:49Z

text/0000-node-reactions.md

+
+Why should we *not* do this? Please consider:
+
+- Performance: Traversing the dom is not cheap. We need to think about memoization techniques to prevent repetitive traversal. This is of significant importance since the invocations are synchronous in nature.


Before merging this RFC I would be interested to measure the performance impact of such library on an existing application. Depending on the results we sill be able to better understand the trade-offs here.

it is important to notice that today, LWC is patching the same APIs, this is just a more complete package.

pmdartus · 2019-07-22T10:05:15Z

text/0000-node-reactions.md

+ChildNode.replaceWith
+
+Range.insertNode
+


Suggested change

jodarove · 2019-07-23T05:41:41Z

text/0000-node-reactions.md

+
+# Adoption strategy
+
+The usage of this library in LWC will be an implementation detail of the engine. Component developers should notive no difference in usage.


Suggested change

The usage of this library in LWC will be an implementation detail of the engine. Component developers should notive no difference in usage.

The usage of this library in LWC will be an implementation detail of the engine. Component developers should notice no difference in usage.

ravijayaramappa · 2019-07-28T20:28:15Z

text/0000-node-reactions.md

+2. isConnected works for shadowRoot node and other documentFragments
+3. When a node is moved to a different subtree, invoke its disconnectedCallback first and then the connectedCallback: https://jsbin.com/qawacil/edit?html,js,output
+4. All hooks for a given node is processed first before moving down the subtree: https://jsbin.com/qawacil/edit?html,js,output
+5. Hooks in subtree are invoked even in closed shadow mode.


When a documentFragment is appended to a node, only the children of the documentFragment are connected to the document. So should the connectedCallback of the documentFragment be invoked?

caridy · 2019-09-04T18:23:59Z

text/0000-node-reactions.md

-3. Hooks are invoked synchronously.
-4. In case of an event affecting a subtree, nodes are processed in [preorder(or treeorder)](https://dom.spec.whatwg.org/#concept-tree-order).
+### Invariants
+1. A DOM element can be connected and disconnected from the DOM more than once. Every time the event happens, the qualifying hook should be invoked.


hook -> callback

there are still few places where you call hook instead of callback, can we get them all to be the same?

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

jodarove · 2019-11-21T22:18:02Z

text/0000-node-reactions.md

@@ -0,0 +1,200 @@
+---
+title: Server Side Rendering


did you mean Node reactions?

jodarove · 2019-11-21T22:18:30Z

text/0000-node-reactions.md

+status: DRAFTED
+created_at: 2019-02-12
+updated_at: 2019-05-24
+pr: https://github.com/salesforce/lwc-rfcs/pull/2


text/0000-node-reactions.md

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

ravijayaramappa · 2022-08-09T17:46:48Z

We have abandoned this proposal mainly due to its perf impact. There are alternates being considered like using the native custom element registry for LWCs and use the native connectedCallback and disconnectedCallback.

ravijayaramappa added 2 commits July 18, 2019 18:33

docs: RFC for node-reactions

4bd633d

doc: address feedback from caridy

aee35b1

ravijayaramappa requested review from caridy and pmdartus July 19, 2019 17:48

caridy reviewed Jul 19, 2019

View reviewed changes

pmdartus reviewed Jul 22, 2019

View reviewed changes

jodarove reviewed Jul 23, 2019

View reviewed changes

ravijayaramappa commented Jul 28, 2019

View reviewed changes

ravijayaramappa mentioned this pull request Jul 29, 2019

feat: [WIP] first prototype of node reactions salesforce/lwc#1431

Closed

ravijayaramappa mentioned this pull request Aug 28, 2019

Unexpected Component Lifecycle on LWC OSS in native Shadow DOM mode salesforce/lwc#1452

Closed

ravijayaramappa added 2 commits September 4, 2019 10:24

docs: updates based on poc

9e11c60

docs: minor fixes

f1a07d6

caridy reviewed Sep 4, 2019

View reviewed changes

fix: update "hook" to "callback"

113c73f

ravijayaramappa added a commit to salesforce/lwc that referenced this pull request Sep 11, 2019

feat(engine): @lwc/node-reactions

c581083

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

ravijayaramappa mentioned this pull request Sep 11, 2019

feat(engine): @lwc/node-reactions salesforce/lwc#1504

Closed

ravijayaramappa added a commit to salesforce/lwc that referenced this pull request Oct 2, 2019

feat(engine): @lwc/node-reactions

07f6003

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

update meta for the rfc app

7242610

jodarove reviewed Nov 21, 2019

View reviewed changes

text/0000-node-reactions.md Outdated

@@ -0,0 +1,200 @@

---

title: Server Side Rendering

Copy link

Contributor

jodarove Nov 21, 2019

Choose a reason for hiding this comment

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

did you mean Node reactions?

jodarove reviewed Nov 21, 2019

View reviewed changes

caridy reviewed Nov 22, 2019

View reviewed changes

text/0000-node-reactions.md Outdated Show resolved Hide resolved

caridy reviewed Nov 22, 2019

View reviewed changes

text/0000-node-reactions.md Outdated Show resolved Hide resolved

Apply suggestions from code review

8f90205

ravijayaramappa added a commit to salesforce/lwc that referenced this pull request Feb 29, 2020

feat(engine): @lwc/node-reactions

7a21f71

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

ravijayaramappa mentioned this pull request Feb 29, 2020

feat(engine): @lwc/node-reactions salesforce/lwc#1747

Closed

ravijayaramappa added a commit to salesforce/lwc that referenced this pull request Apr 2, 2020

feat(engine): @lwc/node-reactions

1d2ce32

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

ravijayaramappa added a commit to salesforce/lwc that referenced this pull request Apr 4, 2020

feat(engine): @lwc/node-reactions

910c095

Library to react to dom elements connecting and disconnecting from the document RFC: salesforce/lwc-rfcs#11

pmdartus added the draft label Oct 26, 2021

ravijayaramappa closed this Aug 9, 2022

ravijayaramappa deleted the ravi/master/node-reactions branch August 9, 2022 17:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RFC for node-reactions #11

RFC for node-reactions #11

ravijayaramappa commented Jul 19, 2019 •

edited

Loading

caridy Jul 19, 2019

ravijayaramappa Jul 22, 2019

caridy Jul 19, 2019

caridy Jul 19, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

caridy Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

pmdartus Jul 22, 2019

caridy Sep 4, 2019

pmdartus Jul 22, 2019

jodarove Jul 23, 2019

ravijayaramappa Jul 28, 2019

caridy Sep 4, 2019

caridy Sep 4, 2019

jodarove Nov 21, 2019

jodarove Nov 21, 2019

ravijayaramappa commented Aug 9, 2022


		# Basic example

		Proposal 1: One simple API that accepts hooks for various lifecycle events


		Web Components supports reacting to the lifecycle of a custom element. Hooks for lifecycle events are part of the custom component definition. Read the spec [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) for more detail.

		Lightning Web Components(LWC) has support for similar lifecycle events. Of particular interest to this RFC is the `connectedCallback` and `disconnectedCallback`. In LWC, the responsibility of invoking the hooks is distributed between the engine itself and snabdom. The goal of this RFC is to abstract the responsibility of managing the lifecycle into a library and make LWC subscribe to lifecycle events from the node-reactions library.


		# Unresolved questions

		- How will traversal work for native custom elements running in closed shadow mode? In web components, Lifecycle hooks behave the same regardless of mode of shadow DOM. For example: https://jsbin.com/misofod/edit?html,js,console,output


		Why should we not do this? Please consider:

		- Performance: Traversing the dom is not cheap. We need to think about memoization techniques to prevent repetitive traversal. This is of significant importance since the invocations are synchronous in nature.


		# Adoption strategy

		The usage of this library in LWC will be an implementation detail of the engine. Component developers should notive no difference in usage.

		ChildNode.replaceWith

		Range.insertNode

RFC for node-reactions #11

RFC for node-reactions #11

Conversation

ravijayaramappa commented Jul 19, 2019 • edited Loading

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

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

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

ravijayaramappa commented Aug 9, 2022

ravijayaramappa commented Jul 19, 2019 •

edited

Loading