Hyperapp: Which event should be used to start the code?
When I used window.addEventListener('load', () => app(...)) the subs didn't work correctly, as they never seemed to receive the event. How should we handle this without adding the <script> to the last line of the HTML?
Note: It should work with both <script async ...> and <script> if possible.
FlorianWendelborn
All 32 comments
Subscriptions are functions that run only once when the DOM is ready.
I guess by the time the subscription was called, the window.load event had already fired.
Yes
app({
subscriptions: [
myFunction
]
})
No
app({
subscriptions: [
_ => window.addEventListener('load', myFunction)
]
})
jorgebucaran
on 8 Feb 2017
@jbucaran My bad, I thought it's obvious that ... is the whole hyperapp stuff (() => app(...)). Won't it crash when it can't find the DOM yet? React didn't like being called before the 'onload' event.
FlorianWendelborn
on 8 Feb 2017
Which event should be used to start the code?
What mean "to start the code"? You don't need anything. App should be called before the dom-is-ready. If something in your app should happen when DOM-is-ready put it into subscriptions.
Won't it crash when it can't find the DOM yet?
No.
tunnckoCore
on 8 Feb 2017
@tunnckoCore I just removed the event listener and it caused a crash, as usual.
Uncaught TypeError: Cannot read property 'appendChild' of null
at 108.module.exports (some-script…:104)
at Object.475 (some-script…:1184)
at __webpack_require__ (some-script…:20)
at some-script…:66
at some-script…:69
Crash points to document.body.appendChild in hyperapp's source.
EDIT: Actually, now it's crashing only about 50% of the time. Sometimes it just works. Code doesn't have anything complicated whatsoever though. It's even less than the counter example.
Source
import {app, html} from 'hyperapp/hx'
app({
view: () => html`
<div style=${{
position: 'fixed',
bottom: '8px',
right: '8px',
backgroundColor: 'yellow'
}}>
View
</div>`
})
<html>
<head>
...
<script src="https://some-domain/some-path.js" async crossOrigin="anonymous"></script>
</head>
<body>
</body>
</html>
Transpiled by babel and packed by webpack.
FlorianWendelborn
on 8 Feb 2017
@dodekeract Is the problem the
@jbucaran No, it also appears without async.
Actually, now that I tested that it always happens when no async is used.
FlorianWendelborn
on 8 Feb 2017
@dodekeract Can you break down the problem into a smaller problem?
First, try with this HTML
<!doctype html>
<html>
<body>
<script src="/bundle.js"></script>
</body>
</html>
@jbucaran Loads reliably without crashing. Problem is that I can't use that as the script will be used/embedded by third parties and I can't force them to include it at the bottom of the page.
So with the current code-base I wouldn't be able to use subs at all, since they don't trigger after load.
FlorianWendelborn
on 8 Feb 2017
@dodekeract So, the problem may be in your other HTML, right?
jorgebucaran
on 8 Feb 2017
jorgebucaran
on 8 Feb 2017
@jbucaran I don't think so. I actually only moved the script down, didn't change the src= part or anything else.
Looks like a classic "body isn't available yet" issue to me. Especially since it sometimes (probably when not read from memory-cache) works when using async.
FlorianWendelborn
on 8 Feb 2017
@dodekeract How should we handle this without adding the
@tunnckoCore Me neither, but I suspect @dodekeract is embedding the bundle.js in the <head> section.
jorgebucaran
on 8 Feb 2017
@jbucaran @tunnckoCore https://github.com/dodekeract/hyperapp-issue-61
npm run build && npm run start
index.html and onload.html work while broken.html doesn't work.
And yes, I do embed it in the head, as specified in my initial summary/details. It's not possible for me to force all users to embed it at the end of the website and I don't think it's a good solution to the problem anyway.
FlorianWendelborn
on 8 Feb 2017
@dodekeract Thanks for creating a demo repo.
It seems you are embedding the bundle.js in the <head> tag, when you shouldn't.
When you run app(...), HyperApp will try to call document.appendChild(vnode) somewhere during the patch process, but document will be undefined, hence the error:
Cannot read property 'appendChild' of null
@jbucaran Which is why I'm asking which event I'm supposed to use, as load seems to break the subs. 😉
FlorianWendelborn
on 8 Feb 2017
@dodekeract Yup, now I see that's what you were asking :)
Isn't the solution _not_ embedding bundle.js inside <head>?
jorgebucaran
on 8 Feb 2017
@jbucaran not possible in my use-case and I think that's actually more of a workaround. Until now I always used window.addEventListener('load') with an async script.
FlorianWendelborn
on 8 Feb 2017
First to mention that app() does not return anything, so
window.addEventListener('load', app({
in index.onload.js is wrong thing.
Second, set something in the body and try to add opts.root.
tunnckoCore
on 8 Feb 2017
@tunnckoCore Whoops, that's a typo, pushed the fix to the repo. However it actually did solve the crash. Don't ask me why though.
FlorianWendelborn
on 8 Feb 2017
@dodekeract Ah, what @tunnckoCore said. Good job on catching that!
jorgebucaran
on 8 Feb 2017
@jbucaran @tunnckoCore broken.root.html is also broken.
FlorianWendelborn
on 8 Feb 2017
@dodekeract Of course broken.root.html is broken. You are calling document.getElementById inside <head>.
jorgebucaran
on 8 Feb 2017
@jbucaran I'm aware of that. I didn't expect it to work. As I said I can't expect the script to be at the end of the body in my use-case, as it's mainly embedded by third-parties.
FlorianWendelborn
on 8 Feb 2017
@dodekeract So the problem is simply you need subscriptions and you're loading HyperApp via the <head> tag?
jorgebucaran
on 8 Feb 2017
@jbucaran That's one way to put it, yes.
FlorianWendelborn
on 8 Feb 2017
Okay, gotcha. Let's track this in #62.
The fix involves adding a bit of code to app.js. We need to check whether the DOM has already loaded before adding the DOMContentLoaded listener to document.
@dodekeract Can you work on a PR?
jorgebucaran
on 8 Feb 2017
@jbucaran Is there any reason why we can't just treat "render app()" as the first sub?
FlorianWendelborn
on 8 Feb 2017
Locking as the entire discussion is now out-of-date.
jorgebucaran
on 31 Aug 2018
Related issues
zhaotoday
·
3Comments
jscriptcoder
·
4Comments
jorgebucaran
·
4Comments
Mytrill
·
4Comments
zaceno
·
3Comments
Most helpful comment
@dodekeract Ah, what @tunnckoCore said. Good job on catching that!