search

sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.76k stars 1.95k forks source link

Contents of div containing %sveltekit.body% no longer replaced in SvelteKit 2.5.5 #12097

Open theodorejb opened 7 months ago

theodorejb commented 7 months ago

Describe the bug

I have an SPA mode app using adapter-static.

My app.html file contains the following inside the <body> tag:

<div style="display: contents">
    <div class="loading-animation">
        <div></div>
        <div></div>
    </div>
    %sveltekit.body%
</div>

Up to SvelteKit 2.5.4, the loading-animation div was removed from the DOM when the SvelteKit app finishes loading. However, this no longer works in SvelteKit 2.5.5, and the loading animation continues to display on top of the loaded app.

Reproduction

My top-level +layout.ts file contains:

export const ssr = false;
export const prerender = false;

Logs

No response

System Info

Windows 11, Firefox 124

Severity

blocking an upgrade

Additional Information

I suspect this issue may be caused by https://github.com/sveltejs/kit/pull/12050.

eltigerchino commented 7 months ago

I think this is the right behaviour since no SSR means no hydration, thus no repairing the DOM. It's easy enough to query the document for the loading element and remove it in an onMount callback.

cc: @Rich-Harris was disabling the hydration behaviour on SPA project considered a breaking change?

theodorejb commented 7 months ago

Isn't the Svelte app hydrated to the DOM regardless of whether SSR is enabled? To me it's confusing that siblings of %sveltekit.body% wouldn't always be replaced when it's rendered, especially given that this has always worked before. If this difference is intended, it should at least be documented somewhere.

eltigerchino commented 7 months ago

Isn't the Svelte app hydrated to the DOM regardless of whether SSR is enabled?

Hydration is only required when the page contents have already been rendered by SSR. If the HTML hasn't been rendered yet, it's just client-side rendering.

To me it's confusing that siblings of %sveltekit.body% wouldn't always be replaced when it's rendered, especially given that this has always worked before. If this difference is intended, it should at least be documented somewhere.

Yeah, this makes me think it might have been a breaking change and may be something we need to wait until the next major version for including documentation for it.

theodorejb commented 5 months ago

This is still an issue in the latest version of SvelteKit. It would be good to have a final decision if this is a bug which will be fixed, or intended behavior (anyone with an SPA-mode app needs to manually remove DOM siblings of %sveltekit.body%).

lemmon commented 6 days ago

+1 for this feature