Can VanJS sort without recreating elements?

[lazex]

I want to sort the elements.
I can't find anything like key prop of React.js in VanJS.

I tried following code.

const { div, button, b, span } = van.tags

const App = () => {
	const items = van.state([{ id: 1, text: "foo" }, { id: 2, text: "bar" }])
	const order = van.state("asc")

	return (
		div(
			button(
				{
					onclick: () => { order.val = order.val === "asc" ? "desc" : "asc" }
				},
				"sort"
			),
			() => {
				const sorted = items.val.toSorted((a, b) => {
					if (order.val === "asc") {
						return a.id - b.id
					} else {
						return b.id - a.id
					}
				})
				return div(
					sorted.map(item => {
						return div({ class: "item" }, b(item.id), span(item.text))
					})
				)
			}
		)
	)
}

van.add(document.body, App())

A div element with class item will be recreated each time.
If the elements are recreated, some tags like canvas and video cannot maintain state.

Does VanJS support such cases?

[Tao-VanJS]

Yes, you can sort child elements without re-rendering the root, but in a different approach. Key prop requires DOM diffing, which would significantly increase the complexity of the framework. Instead, VanJS chose to achieve the result with stateful binding. With stateful binding, you can customize how your DOM node reacts to state changes. Here are some examples where stateful binding is utilized:

• Auto-complete: suggestion list is changing the selected item without re-rendering itself.
• VanJS code converter: change the converted code without re-rendering the root DOM (we can't bind the converted result directly to text nodes because it needs to integrate with Prism.js for syntax highlighting).

Thus, you can sort the items without re-rendering the root in a couple lines of custom code with stateful binding, in which way you would have the full transparency and control of how things are rendered.

[lazex]

Thanks for your answer.

[cablehead]

Thanks for asking this @lazex, I had the exact same question! I'm still skimming vanJS's documentation for the first time, and noticed: vanX.list which looks like a prepackaged solution.

[lazex]

It looks good.
Thank you for letting me know.