Giter Club home page Giter Club logo

Comments (32)

jorgebucaran avatar jorgebucaran commented on May 4, 2024 2

@dodekeract Ah, what @tunnckoCore said. Good job on catching that!

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024 1

@tunnckoCore Me neither, but I suspect @dodekeract is embedding the bundle.js in the <head> section.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024 1

@jbucaran That's one way to put it, yes.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

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)
  ]
})

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

tunnckoCore avatar tunnckoCore commented on May 4, 2024

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.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract Is the problem the <script async>?

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@jbucaran No, it also appears without async.

Actually, now that I tested that it always happens when no async is used.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@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>

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract So, the problem may be in your other HTML, right?

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

screen shot 2017-02-08 at 20 49 32

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract How should we handle this without adding the <script> to the last line of the HTML?

Hmm. Can you post the entire code? Both your HTML and the script. You can use the details/summary tags, so it doesn't matter if it's long.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

I'll have to create a completely minimal repro then. Current code has some stuff I can't share that's not related to hyperapp.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract I just want to see the location where you are embedding the bundle.js that contains both hyperapp and your application.

from hyperapp.

tunnckoCore avatar tunnckoCore commented on May 4, 2024

Still can't understand what we are talking about.

I'll have to create a completely minimal repro then.

👍

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@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

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@jbucaran Which is why I'm asking which event I'm supposed to use, as load seems to break the subs. 😉

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract Yup, now I see that's what you were asking :)

Isn't the solution not embedding bundle.js inside <head>?

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

tunnckoCore avatar tunnckoCore commented on May 4, 2024

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.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@jbucaran @tunnckoCore broken.root.html is also broken.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract Of course broken.root.html is broken. You are calling document.getElementById inside <head>.

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@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.

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

@dodekeract So the problem is simply you need subscriptions and you're loading HyperApp via the <head> tag?

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

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?

from hyperapp.

FlorianWendelborn avatar FlorianWendelborn commented on May 4, 2024

@jbucaran Is there any reason why we can't just treat "render app()" as the first sub?

from hyperapp.

jorgebucaran avatar jorgebucaran commented on May 4, 2024

Locking as the entire discussion is now out-of-date.

from hyperapp.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.