VNode is not immutable #1124
Description
Hyperapp's VNode is not an "immutable type", which may lead to hard-to-detect issues
(especially for developers who are used to React).
For example, in the following case:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script type="module">
import { h, text, app } from "https://unpkg.com/hyperapp"
// It looks like a Functional Component, but it is not.
const SelectView = (opt_list, selected) =>
h('div', {}, [
h('label', {},
opt_list.find(item =>
item[0] === selected
)[1] // mutable node used once
),
h('ul', {},
opt_list.map(item =>
h('li',
{ onclick: [SelectAction, item[0]] },
item[1] // mutable node used twice
)
),
),
])
const SelectAction = (old_state, payload) => ({
selected: payload
})
app({
init: {
selected: 1,
},
node: document.getElementById("app"),
view: state =>
SelectView(
[
[1, text('item 1')], // mutable node
[2, text('item 2')],
[3, text('item 3')],
],
state.selected,
)
,
})
</script>
</body>
</html>When the user clicks an option, the label in SelectView does not update correctly,
because the label's children are used multiple times (twice).
Of course, my own understanding may be limited, and it is possible that this behavior is intentionally designed by Hyperapp’s author(s), but perhaps this could be mentioned in the documentation.