jorgebucaran / superfine

Absolutely minimal view layer for building web interfaces
https://git.io/super
MIT License
1.57k stars 78 forks source link

element handlers don't work on root nodes #186

Closed whaaaley closed 3 years ago

whaaaley commented 3 years ago

Not a huge deal at all. I was just throwing together a demo and ran into this issue. It's probably fine that it works this way but I thought I'd report this just in case it wasn't intended.

Repro: https://codepen.io/dustindowell/pen/YzNgdzM

Edit: Further debugging. It might not be element handlers, it might just be that the root node has to be the same tag as what you're mounting to.

Repro 2: Change line 51 from main to div https://codepen.io/dustindowell/pen/yLgwGOo

jorgebucaran commented 3 years ago

The problem is that you are patching the <div id=app>, replacing it with a button, then running getElementById("app") again, at which point the element is no longer in the DOM.

<script type=module>
  import { h, text, patch } from "https://unpkg.com/superfine"

  const viewFixed = (state) =>
    h("div", {}, [
      h("button", {
          onclick: () => 
            render({ ...state, foo: state.foo + 1 }),
        },
        text("testing: " + state.foo)
      ),
    ])

  const render = (state) => 
    patch(document.getElementById("app"), viewFixed(state))

  render({ foo: 0 })
</script>

<div id=app></div>

This works because it leaves the <div> intact. Notice I didn't have to set id=app because Superfine will simply recycle the given <div> containing id=app.