stable

Clone or download

Read-only

refactor: Use properties to trigger side-effects after render

No functional change expected in pull request replies: - when you click on the "Reply" button, the side-by-side comment placeholder should expand. - when you cancel the reply, the side-by-side comment placeholder should reduce. - Tooltips on references function as before: given there are N references, there are N tooltips for each reference (NĀ² tooltips). This is a problem with the tooltip library and should be fixed separately. Notes: Mutating property B in the getter of property A that depends on B is generally not recommended [0], as it creates a cycle in dependencies. (Get A -> Get B, Set B) is a bad idea. Instead of doing that, we can leverage hybrids' cache system. By declaring properties that depend on `host.content()`, the cache system will register those properties to be dependents of the rendering (`host.content()` is the HTML rendering) and will call them after it has finished (thus eliminating the need for `setTimeout()`). There are two tricks here: 1. The result of `host.content()` is `HostElement = HTMLElement & PullRequestComment`. A given custom element will never change its HTMLElement in its lifetime, and `observe()` reacts on changes in its related `get()`. Therefore, it will be triggered only once, after rendering is done, in `after_render_once_descriptor`. This lets us safely create tooltips only once. 2. In `element_height`, we return the height of the element in `get()`. Whenever it changes, `observe()` will be called. Since it depends on `host.content()` too, it is called whenever the height changes, after rendering is done. This lets us call the `post_rendering_callback` to adjust the opposite comment placeholder safely. [0] https://github.com/hybridsjs/hybrids/issues/202#issuecomment-1318357787 Part of story #29257 have a thread of comments Change-Id: I8db9dcd40dbe2a2b5867b55a07f968b89935b734

Modified Files

Name
M plugins/pullrequest/scripts/pullrequests-app/src/app/comments/PullRequestComment.test.ts +9 āˆ’43 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/src/app/comments/PullRequestComment.ts +37 āˆ’41 Go to diff View file