◆ define で自分で処理を定義して 差分チェックして更新する

この記事を書いて lit-html だけじゃなくて hyperhtml でやりたいなと思ってやってみました

define 機能を使えば処理を定義できます
この機能を使って自分で input.value と比較して違っていれば更新します

<script type="module">
import { bind, wire, define } from "https://unpkg.com/hyperhtml/esm.js?module"

define("live-value", (node, value) => {
if (node.value !== value) {
node.value = value
}
})

const values = {
text1: "",
text2: "",
}

const onInput = eve => {
values[eve.target.name] = eve.target.value.replace(/[^a-z]/g, "")
update()
}

const update = () => {
bind(document.getElementById("root"))`
<h1>Input [a-z] only</h1>
<div>
<h2>Normal</h2>
<input name="text1" oninput=${onInput} value=${values.text1}>
<p>${values.text1}</p>
</div>
<div>
<h2>Live</h2>
<input name="text2" oninput=${onInput} live-value=${values.text2}>
<p>${values.text2}</p>
</div>
`
}

update()
</script>

<div id="root"></div>

value 以外なら自分で live-*** を作らないといけないのがちょっと不便です
live-prop とかにして渡す値の方にプロパティ名と値を設定するのでもいいかもしれません