Skip to content

Brr: Better ux for inserting reactive elements in the DOM - #64

Open
panglesd wants to merge 8 commits into
let-def:masterfrom
panglesd:better-ux-for-inserting-el-in-dom
Open

Brr: Better ux for inserting reactive elements in the DOM#64
panglesd wants to merge 8 commits into
let-def:masterfrom
panglesd:better-ux-for-inserting-el-in-dom

Conversation

@panglesd

@panglesd panglesd commented Jul 18, 2026

Copy link
Copy Markdown
Collaborator

Yo! I finally worked on this.

The way elements are inserted in the DOM in the brr-lwd examples is not ideal. It requires you to understand more of Lwd's API than necessary, as well as request_animation_frame. Moreover it would not work as is for actually reactive elements (only for reactive children, which is the case in the examples).

So this PR introduces two ways to insert reactive elements in the DOM directly into the brr-lwd API. The examples are updated to use the two ways. EDIT: based on what I use on slipshow, I added append_child and prepend_child.

The API mimicks two standard way of inserting nodes in the DOM, insert_siblings and set_children, but with reactive siblings/children.

The main difference is that insert_siblings is insert_sibling: not plural, it takes a single element instead of a t col.
It is not really possible to have an insert_siblings `Replace el seq, as if we replace el by a reactive sequence that is first empty (so we just remove el) and then non-empty, we lost our anchor to know where to add the new elements.

We could still add the following API:

val insert_siblings : [ `Before | `After ] -> t -> t col -> root

and I suggest to do so but in another PR, as it requires to refactor update_children quite a bit.

@panglesd
panglesd force-pushed the better-ux-for-inserting-el-in-dom branch from ada7f98 to a53c4ae Compare July 18, 2026 15:15
@panglesd
panglesd requested review from voodoos and removed request for voodoos July 19, 2026 06:49
Comment thread examples/cssclasstest-brr/main.ml Outdated
Comment thread lib/brr-lwd/elwd.ml
panglesd added a commit to panglesd/slipshow that referenced this pull request Jul 19, 2026
Comment thread lib/brr-lwd/elwd.ml
Comment on lines +450 to +454
let root = Lwd.observe children in
let c = Lwd.quick_sample root in
El.set_children el (Lwd_seq.to_list c);
Lwd.quick_release root;
update_children el children

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Well there is a bug here. Update_children expects no children at the beginning, so it will add them (again) and we end up with a duplicated initial value.
The fix is probably:

Suggested change
let root = Lwd.observe children in
let c = Lwd.quick_sample root in
El.set_children el (Lwd_seq.to_list c);
Lwd.quick_release root;
update_children el children
update_children el children

panglesd added a commit to panglesd/slipshow that referenced this pull request Jul 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants