Feature Requests: van.replace, van.replaceChildren and vanX.list.

[kennycarruthers]

Starting to explore VanJS and having fun! Keep up the good work, great little library taking shape here.

I appreciate the intent of having a very small API surface, but there are a few convenience functions that I would take advantage of, even if they were in van-x or another package:

Naming is just for discussion, I'm not proposing APIs, just features.

• van.replace

Rather than calling van.add to append a VanJS element to an existing DOM element, I'd like to be able to replace an existing DOM element with a VanJS element.

• van.replaceChildren

Given an existing DOM element, I'd like to replace the contents of that element with a VanJS element.

• vanX.list(null | element)

In vanX.list, I'd like to pass in an existing DOM element as the first argument with the option to have the list items either replace the contents of the DOM element or be appended as children. Right now, I have to insert an empty div as the first argument to list().

ex:

const container = document.getElementById('my-container');
vanX.list(container, items, ...)

None of these are necessary, but a small extension to the API for improving DOM manipulation would be something I'd find very useful.

[Tao-VanJS]

Thanks @kennycarruthers for the suggestion!

Regarding the suggested functions to add. I feel that they can already be achieved with existing DOM functions. I'm not sure whether VanJS can offer substantial extra value here. Note that there isn't a notion of VanJS elements. VanJS tag functions just create ordinary DOM elements, and can be used interchangeably in DOM APIs.

• van.replace: this can be achieved with Element.replaceWith.

• van.replaceChildren: this can be achieved with Element.replaceChildren

• vanX.list(null | element): feel that what you need can be achieved with [Element.replaceWith] as well:

const container = document.getElementById('my-container');
container.replaceWith(vanX.list(div, items, ...));

Actually, this might also work:

const container = document.getElementById('my-container');
vanX.list(() => container, items, ...);

Hope it helps :-)

[kennycarruthers]

Ah, stuck in my old ways of .innerHTML but you're right, these should suffice. Feel free to close and thanks for the prompt reply. Cheers.