Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Should HyperApp Wait For The DOM Before Rendering?

See original GitHub issue

If you only want to make your vote count please just 👍 or 👎 this comment. I added both so it’s easy to click.

Things that need to be done

Decide if window.addEventListener('load') should be implicit
Add documentation for agreed upon behavior

The Problem

When including app() in a script in <head> hyperapp will crash because it tries to append itself onto the not-yet-existing DOM.

Note: Some might suggest to just include the script at the bottom of the page, however - in some use-cases (like mine) that’s not possible. It also feels like a workaround IMHO.

This can be solved in (at least) 2 ways:

Solution 1

Force users to add window.addEventListener('load', () => app(...)) to their scripts.

import {app, html} from 'hyperapp'

window.addEventListener('load', () => app({
	view: html`<div>Example</div>`
}))

Pro

less implicit behavior, more control/information for the dev

Contra

It just crashes for no reason, even though I copied the whole example! - Frustrated first-time users.

Solution 2

Implicitly do the same as in solution 1.

import {app, html} from 'hyperapp'

app({
	view: html`<div>Example</div>`
})

Pro

more straight-forward code
less stuff to consider/know for the dev

It just works!

Contra

Might be barely considered “Magic”. Should be properly documented. However I don’t see any use-case where hyperapp is supposed to crash. 😄

Meta:

Follow-up issue Initial issue: subs didn’t work when ran by onload

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:14 (9 by maintainers)

Top GitHub Comments

1reaction

tzellmancommented, Feb 9, 2017

Just to show how this fails when attempting to use a script in the head tag, check out this jsbin example. If you open up the console you’ll see that the code fails when the app attempts to create the default root element.

I always attach scripts in the body, so I never see this issue, but #64 seems like a minimal change in order to support also including scripts in the head, which some users may do.

I also believe in the fail-fast mentality, so at the very least it might be worth noting in the docs that users should include scripts just before you need it, and no sooner, i.e. in the body.

0reactions

jorgebucarancommented, Feb 17, 2017

This is implemented since 0.3.0 or 0.4.0, can’t remember.

Top Results From Across the Web

Should HyperApp Wait For The DOM Before Rendering? #69

When including app() in a script in <head> hyperapp will crash because it tries to append itself onto the not-yet-existing DOM.

Does ReactDOM.render wait for the document to be loaded ...

I'm wondering if I need to wait for the document to be loaded (i.e. listen to DOMCOntentLoaded ) before calling ReactDOM.render(...) .

When Has The App Loaded - Gleb Bahmutov

wait ('@todos') happily waits for it before Cypress proceeds to the next command. The test waits for the delayed Ajax call. Render delay...

Use DOM Testing Library to test any JS framework

To use DOM Testing Library with HyperApp, we'll write a custom render function that utilizes the getQueriesForElement function. HyperApp renders and re-renders ......

Render Hyperapp to an HTML String with SSR & Node.js ...

If you call hyperapp.app() on a node that already has this server-rendered markup, Hyperapp will preserve it and only attach event handlers, allowing...