@html directive hydration bug

mquandalle commented 3 years ago

Describe the bug

This bug is difficult to describe in prose, I recommend looking at the reproduction first.

When a {@html myContent} directive is used after two conditions {#if}, the content isn't rendered on the client-side. The content is still rendered on the server causing the content to blink.

As showed in the reproduction, the issue only arise when the myContent isn't wrapped in html tags, which is normally supported in svelte.

Reproduction

https://github.com/mquandalle/repro-sveltekit-html-directive-bug/blob/master/src/routes/index.svelte

Logs

No response

System Info

System:
    OS: Linux 5.11 Pop!_OS 21.04
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 471.12 MB / 15.40 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v16.0.0/bin/yarn
    npm: 7.10.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
  Browsers:
    Firefox: 90.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.144 
    svelte: ^3.34.0 => 3.42.1

Severity

annoyance

Additional Information

No response

mquandalle commented 3 years ago

@benmccann You moved this issue from SvelteKit to Svelte, but it seems to only occur in SvelteKit — the reproduction works fine in the Svelte sandbox https://svelte.dev/repl/cc160f42f9bb4d06a2a36a3314abfa9c?version=3.42.1

I encountered this issue while migrating an app from Sapper to SvelteKit, so the issue seems specific to kit.

benmccann commented 3 years ago

The REPL isn't equivalent. SvelteKit renders it on the server and then hydrates it on the client, which the REPL isn't doing.

This sounds like it's a hydration bug. @hbirler FYI in case you're interested

mquandalle commented 3 years ago

I tried multiple versions of Svelte with my reproduction and indeed, it seems that this bug is a recent regression in Svelte/core :

no bug with 3.38.0
bug with 3.39.0 and following

I don't find any obvious change that has caused this issue from the changelog. I guess we could add a test and git bisect between 3.38 and 3.39 to find the culprit commit.

EstebanBorai commented 2 years ago

Hi! Any news on this? I'm having the same issue using svelte@3.48.0 and @sveltejs/kit@1.0.0-next.348.

Glad to help! Thanks in advance.

micha-lmxt commented 1 year ago

After each #if it claims one white space during hydration because of the lines breaks. Workaround here is simply removing the lines break. This seemed to work:

{#if false} hello{/if}
{#if false} hello{/if}{@html example}

mquandalle commented 1 year ago

This bug is fixed with the latest beta of Svelte v4 4.0.0-next.0 🎉

I think this was fixed in #7426.

Repro: https://stackblitz.com/edit/sveltejs-kit-template-default-36zqxr?file=src/routes/+page.svelte,package.json&terminal=dev

sveltejs / svelte