The author proposes this API:

  function Component({ showMessage }) {
    h('div', () => {
      h('h1', {
        text: 'Hey there',
        visible: showMessage
      })
    })
  }

I don't think it is better than the current React API `r = React.createElement`

  const Component = ({ showMessage }) => 
      r('div', null,
        showMessage && r('h1', null, 'Hey there'))

imo the readability of the proposed solution is not the best, especially for more complex things... it isn't clear to me if he is proposing that to be "under the hood" (like react's createElement), but if not i don't think it's a better solution (even though i understand the problem of using "custom syntax" but it's pretty normal when you are building "on top" of APIs.

I am getting through the same phase of rewriting my OSS [1] in vanilla JS [2], the solution I settled down on is to write components in pure es6 like this:

  export default function(render) {
      const $page = createElement(`
          

              whatever here
          
      `);
       render($page);

       $page.addEventListener("xxxx");
       onDestroy(/* remove listeners */);
  }

Yes I sort of had to write my own mini framework but it's well under 100 lines of codes [0] with the idea that maintaining that 100 lines of codes is gonna be a massive win compared to keeping up with any "modern framework" npm hell

The core idea is that instead of trying to pretend some cool ideas like HOC or render props, we call a dog a dog and say "decorator pattern" and just use the pattern directly [3] and when we need to compose things we do so as well [4]

ref:

- [0] the skeleton I started to settle on a nice API before starting the full rewrite https://mickael-kerjean.github.io/skeleton/example/index.htm...

- [1] original oss project which I'm migrating: https://github.com/mickael-kerjean/filestash

- [2] current state of the rewrite where you can see this pattern in action https://github.com/mickael-kerjean/filestash-rewrite/tree/ma...

- [3] https://github.com/mickael-kerjean/filestash-rewrite/blob/ma...

- [4] https://github.com/mickael-kerjean/filestash-rewrite/blob/ma...