Rendered view is appended to the `root` element instead of replacing its contents

I noticed that when a hyperapp app initializes, the rendered view is appended to the root element, leaving any existing content in place. I kind of expected it to replace the existing content. Doing that would allow stuff like showing the user an informative message if the app code fails to run:

<!-- index.html -->
<div id="root">
Please ensure you've enabled JavaScript and your browser is up to date.
</div>

// main.js
app({
  root: document.getElementById('root'),
  /* ... */
});

Any chance the rendering behavior can be changed so the view completely replaces the content of the root element?

EDIT: Currently, I’m working around this by doing

events: {
    load: function() {
      document.getElementById('root').innerHTML = ''
    }
  }

[zaceno]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

Would work for part of that case (JavaScript turned off)

[jorgebucaran]

@benchristel what influenced your decision to change it?

This way we can provide hydration by default. Since we take over your root, we can make assumptions about it, like, if it has any children we assume those were server side rendered and attempt to hydrate nodes.

EDIT: So, it’s not that the previous behavior was wrong, but it meant hydration was clumsy and you needed to pass a function (former @hyperapp/hydrate module) to the app() call. The current behavior means you just sit down and do nothing since it’s built-in. 😆