This is a really cool approach! I checked out your Mockaton dashboard code and love what you're doing. Here's a simplified example of your pattern that really showcases its elegance:

  // Using your minimal native DOM library (15 lines)
  function TodoApp() {
      return r('div', null,
          r('h1', null, 'Todo List'),
          r('ul', null,
              store.todos.map(todo => 
                  r('li', { 
                      className: todo.done ? 'done' : '',
                      onClick: () => store.toggleTodo(todo.id)
                  }, todo.text)
              )
          ),
          r('input', {
              placeholder: 'Add todo...',
              onKeyDown(e) {
                  if (e.key === 'Enter') {
                      store.addTodo(this.value)
                      this.value = ''
                  }
              }
          })
      )
  }

    // Full re-render on any change - just replace everything!
    store.render = () => document.body.replaceChildren(...TodoApp())

What I love about this: - Zero build step - no JSX transpilation, no bundler needed - Direct DOM access - `this.value` just works, no synthetic events - Brutally simple - the entire "framework" is ~10 lines

You're absolutely right that a native DOM merge API would unlock this pattern completely. I just wish this could happen in the DOM instead of JS, so that we could get the power of the DOM as an intuitive model to think about instead of abstracting it into an amorphous data structure.

The fact that it has no build step and works directly on the DOM is fantastic — very similar to Backbone in terms of being able to understand what's happening under the hood! You can pop open devtools, see exactly what's happening, and modify it on the fly. No virtual DOM, no reconciliation mysteries, just functions returning DOM descriptions that get wholesale replaced.