Svelte height/width binding does not work in CSB

[pngwn]

🐛 bug report

Preflight Checklist

• I have read the
  Contributing Guidelines
  for this project.
• I agree to follow the
  Code of Conduct
  that this project adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

When using Svelte's element bindings (bind:offsetHeight etc.) an unrecoverable error is thrown in the sandbox when showing and hiding the bound element.

To Reproduce

Use a svelte height/ width binding inside an if block with the default svelte sandbox:

Add the following code to a default svelte template:

<script>
  let offH;
  let open = true;
</script>

<button on:click={() => open = !open}>Toggle</button>

<div>
  {#if open}
  <div bind:clientHeight={offH}>
    <div>Some text.</div>
  </div>
  {/if}
</div>

Link to sandbox: link

[pngwn]

I did some digging.

I originally though there was something strange happening during transpilation but this was false, the other console error is unrelated. Sara mentioned that the version of the compiler may be quite old so I did some digging.

• Codesandbox is using version 3.18.1 (current is 3.29.7)
• While I cannot reproduce the exact error in the svelte REPL, I do get an error when using the same svelte version: REPL link
• Codesandbox and the Svelte REPL render in similar ways, so I'm guessing this issue is the problem. This was fixed in 3.21.0.
• Upgrading the svelte version manually in the CSB sidebar does indeed fix this issue. It is just the default version that causes problems.

[pngwn]

So in short, update the default version of Svelte used by the default template and this problem will go away. I had a look around but I have no idea where these defaults are set (or if they are in code/ in this repo), or I would happily make PR. At a guess it would be easiest to just use @latest for the default template, if people want specific older versions then they can set that explicitly.

[SaraVieira]

Hey

Thank you so much for the digging as I do not have a lot of experience with Svelte, I have updated the default template and now they will all be forked from the latest version.

I will put on my calendar to update the templates every two weeks or something, the reason I am kind of weary of using the latest tag is that we have done that with some templates like vue in the past, and then when somethings were updated in the compiler the default sandbox broke and since I am more in charge of community I will have time to do these things and go there updating the templates to make sure nothing breaks :)

I will leave this open since I want to update the compiler version on Monday and will close with that :)

Thank you again!

[pngwn]

Sounds good! If there is every anything Svelte-ish I can help with, feel free to ping me.

Thanks for sorting this!

[SaraVieira]

Hey!

Did some digging, turns out we get the compiler version from what svelte version you are using so when you update svelte you also update the compiler that runs to compile it
https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/eval/transpilers/svelte/svelte-worker.js#L11

It seems that will not be a problem in the future as long as we keep the svelte version updated.

I will ping you with any issues with Svelte as the help with it would be very much appreciated and again thank you so much for looking into it