Svelte: Rendering and Document Loaded

Created on 21 Jun 2017 · 9Comments · Source: sveltejs/svelte

Does Svelte throw an error when rendering is attempted before the document has loaded? In other words, before document.readyState === 'interactive' and DOMContentLoaded has fired?

I recently experienced a bug where my template was not appearing in the DOM. It took a while for me to realise that the problem was because the template was attempting to render _before_ the document had loaded. This was because the render code was being run at the top level of a module, allowing it to run before the document had loaded. The wisdom of running code at the top level might be questionable, but the problem nevertheless arose. Of course, I have not tested this exhaustively, but this seemed to be the cause of the problem. If it is, perhaps Svelte should throw an error when rendering is attempted prior to the document being loaded? The current behaviour seems to be a silent failure, which is undesirable.

enhancement compiler warning help wanted

Source

ChrisTalman

Most helpful comment

Sorry, do you mean that an error for this already exists in dev mode, or that it could be added to it?

That it could be added. Personally I've never really found the need to wait for DOMContentLoaded — either of these works just as well AFAICT:

<body>
  <script defer src='script-that-uses-body.js'></script>
</body>

<body>
  <main></main>
  <script src='script-that-uses-main.js'></script>
</body>

Maybe I've misunderstood how it works, but I haven't waited for ready events since I stopped using jQuery and haven't been any worse off!

Rich-Harris on 23 Jun 2017

👍4

All 9 comments

I could see a dev mode error for this.

PaulBGD on 21 Jun 2017

Hello @PaulBGD. Sorry, do you mean that an error for this already exists in dev mode, or that it could be added to it?

ChrisTalman on 21 Jun 2017

Sorry, do you mean that an error for this already exists in dev mode, or that it could be added to it?

That it could be added. Personally I've never really found the need to wait for DOMContentLoaded — either of these works just as well AFAICT:

<body>
  <script defer src='script-that-uses-body.js'></script>
</body>

<body>
  <main></main>
  <script src='script-that-uses-main.js'></script>
</body>

Maybe I've misunderstood how it works, but I haven't waited for ready events since I stopped using jQuery and haven't been any worse off!

Rich-Harris on 23 Jun 2017

👍4

Closing due to inactivity (also, I don't really think this is a problem that Svelte needs to solve)

Rich-Harris on 25 Feb 2018

I've written a graphing program that we often display more than one on a page. The way we do so is use a specific classname on the elements that have graphs in them. So the code looks like this:

jQuery('.graph').each( function(i,g) {
  new svelte_app({target: document.getElementById(g.id),
    props: {
      logger: false
    }
});

I've been getting a lot of internal Svelte issues, mainly stuff like null is not an object where I assume Svelte is trying to manipulate things that aren't there. Though I guess that jQuery each is always going to return a dom element?

Anyway, in my case I have to wait for the dom to load? I use this code for that

var readyState = document.readyState;
if(readyState === 'complete' || readyState === 'loaded') { 
  paint_graphs();
} else {
  document.addEventListener('DOMContentLoaded', paint_graphs());
}

Are you suggesting I can just put this code at the bottom of the page and the elements I want to use should exist?

kewp on 16 Apr 2020

@kewp Github issues (especially ones which are closed, and over 2 years old) are a poor place to look for support.

Please come and chat to us in the discord if you require assistance, where we will be better positioned to help.

antony on 16 Apr 2020

Hi @antony. Thanks for the reply.

I'm just responding to Rich saying there is no need for using ready events to load Svelte apps. It seemed my situation might be different since I'm loading more than one app at a time.

This must be a question for a lot of people - whether to use ready events or, as Rich suggested, just include the script after everything. Was hoping to start a discussion about this since it's not mentioned anywhere in the documentation or tutorials. I suppose then the discord chat would be good but then nobody else would know about it going forward!

kewp on 16 Apr 2020

@kewp gotcha - it looked like a support question relating to jQuery + dom loaded.

If you think there is some value in improving docs, please do raise a new issue, or better yet, a PR to improve them, though I'd say docs relating to integrating with a third party might be better on the recipes site over at https://github.com/svelte-society/recipes-mvp

antony on 16 Apr 2020

Thanks @antony.

Not sure I understand - integrating with a third party? Think maybe I'm not expressing myself properly. I'm just talking about what everyone needs to do i.e. load a Svelte app somehow into HTML?

I am open to contributing to the documentation but of course I need feedback from core contributors that this is viable... I suppose I can get a sense from the discord channels.

kewp on 16 Apr 2020

Was this page helpful?

0 / 5 - 0 ratings