darkwiiplayer/skooma-js
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

Update documentation (more events + class hierarchy)

Browse source
This commit is contained in:
Talia 2024-10-09 22:31:09 +02:00
parent a07bebf211
commit 2147cabd1c
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E
1 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
render.md
View file

@ -148,10 +148,20 @@ const button = html.button(state, {
}) })
``` ```
Note that to keep the replacement logic simple, it is not currently possible to **Note** that to keep the replacement logic simple, it is not currently possible
insert use document fragments, as these could insert several top-level children to insert use document fragments, as these could insert several top-level
into a component that would then all have to be replaced. When an observable children into a component that would then all have to be replaced. When an
contains or changes to a document fragment, skooma will raise an error. observable contains or changes to a document fragment, skooma will raise an
error.
When replacing a reactive child, the following events are dispatched:
- `skooma:beforereplace` (cancelable) on the element being replaced while it is
still in the DOM.
- `skooma:afterreplace` on the old element after it was removed from the DOM and
replaced with a new one.
- `skooma:replaced` (bubbles) on the new event after it has replaced the old one
and inserted into the DOM.
Before replacing an element, a `"replace"` event is emitted from the old Before replacing an element, a `"replace"` event is emitted from the old
element. This event bubbles and is cancelable, and can thus be used both to element. This event bubbles and is cancelable, and can thus be used both to
@ -171,4 +181,18 @@ const input_1 = html.input({ type: "number", value: state })
const input_2 = html.input({ type: "number", value: state }) const input_2 = html.input({ type: "number", value: state })
``` ```
TODO: events as for reactive children When a reactive attribute is updated to a new value, a `skooma:attribute` event
is dispatched on the element. Canceling the event will prevent the attribute
from being changed.
The element has the properties `attribute`, `to` and `from`, representing the
attribute name new and old values.
## Custom Renderers
Skooma uses a class hierarchy to handle the complexity of generating DOM nodes.
The `Renderer` class provides the more generic utility functions to build custom
renderers for targets other than the DOM.
This allows building custom renderers that can work on the back-end by
outputting elements in a virtual dom or even plain HTML.