html
html copied to clipboard
whatwg
Composable lifecycle hooks
Background
Currently web component lifecycle hooks exist as instance functions with special names like connectedCallback(), attributeChangedCallback(), disconnectedCallback() and so on.
This means that composing multiple listeners from different sources has a very poor DX. You basically have to wrap the existing connectedCallback() with a new one that calls it. Remember how event handling was before addEventListener() / attachEvent()? Yes, that. And good luck undoing this operation.
Why would you need to do that?
- Having mixins and utility methods for common custom element behaviors, e.g. defining reflected props
- If any of the custom attributes proposals gets adopted, this will become even more important since each attribute will need its own lifecycle hooks.
Proposed solution
You basically need a lightweight pub/sub mechanism that doesn't carry the baggage of events, but allows independently adding and removing callbacks and passing arguments to them (for attributeChangedCallback()).
As a strawman just to start the conversation, it could look similar to addEventListener() (addLifecycleListener?) with type being connected, disconnected, adopted, attribute.
This can co-exist with the current lifecycle hooks, as long as the order of execution is well defined (presumably the current lifecycle hooks would be executed first).
Sorry thought I could record the problem here is the test scene (using Core tokens and traits only) and a before and after screen sho.t
fvtt-Scene-test-IBXVXLgkLSjQk20g.json
Also found that moving the Big Daemonette of Slaanesh up results in the following errors
Foundry VTT | Deleted ActiveEffect with id [HbqMfCGjqs2VlQQR] in parent ActorDelta [ywx5YROrcPUyF65k]
foundry.js:68326 undefined id [HbqMfCGjqs2VlQQR] does not exist in the EmbeddedCollectionDelta collection.
fetch @ foundry.js:68326
notify @ foundry.js:68223
error @ foundry.js:68260
_handleError @ foundry.js:3468
(anonymous) @ foundry.js:3450
value @ socket.js:532
value @ socket.js:459
L.emit @ index.mjs:136
(anonymous) @ manager.js:207
Promise.then (async)
it @ websocket-constructor.browser.js:5
value @ manager.js:206
L.emit @ index.mjs:136
value @ index.js:131
value @ manager.js:193
L.emit @ index.mjs:136
value @ socket.js:324
L.emit @ index.mjs:136
value @ transport.js:97
value @ transport.js:89
ws.onmessage @ websocket.js:69
commons.js:8114 Uncaught (in promise) Error: undefined. undefined id [HbqMfCGjqs2VlQQR] does not exist in the EmbeddedCollectionDelta collection.
[No packages detected]
at EmbeddedCollectionDelta.get (file:///D:/Program%20Files/Foundry%20Virtual%20Tabletop%20v11/resources/app/common/abstract/embedded-collection.mjs:164:36)
at file:///D:/Program%20Files/Foundry%20Virtual%20Tabletop%20v11/resources/app/dist/database/backend/server-backend.mjs:1:5212
at Array.map (
Just tested with 7.2 this issue has not been fixed. I assume it has been rolled into another task
