Skip to content

Svelte 5: Variable scope issue in the SSR code when using snippets and bind values #11010

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mquandalle opened this issue Mar 31, 2024 · 3 comments
Milestone

Comments

@mquandalle
Copy link

Describe the bug

Compiling the following component works as expected in SSR mode:

<script>
	import Slider from './Slider.svelte';
	const snippetToRender = snippetWithSlider;
	let sliderValue = $state(0)
</script>

{#snippet snippetWithSlider()}
	<Slider />
{/snippet}
compiles to
export default function App($$payload, $$props) {
	$.push(false);

	const snippetToRender = snippetWithSlider; // It works thanks to function hoisting 

	function snippetWithSlider($$payload) {
		$$payload.out += `<!--[-->`;
		Slider($$payload, {});
		$$payload.out += `<!--]-->`;
	}

	$$payload.out += `<!--[-->`;
	snippetToRender($$payload);
	$$payload.out += `<!--]-->`;
	$.pop();
}

But if I add a bind prop:

  <script>
  	import Slider from './Slider.svelte';
  	const snippetToRender = snippetWithSlider;
+ 	let sliderValue = $state(0)
  </script>
  
  {#snippet snippetWithSlider()}
- 	<Slider />
+ 	<Slider bind:value={sliderValue} />
  {/snippet}
  
  {@render snippetToRender()}
compiles to a code that has a bug with `snippetWithSlider` scope
export default function App($$payload, $$props) {
	$.push(true);

	const snippetToRender = snippetWithSlider; // Not in scope 
	let sliderValue = 0;
	let $$settled = true;
	let $$inner_payload;

	function $$render_inner($$payload) {
		function snippetWithSlider($$payload) {
			$$payload.out += `<!--[-->`;

			Slider($$payload, {
				get value() {
					return sliderValue;
				},
				set value($$value) {
					sliderValue = $$value;
					$$settled = false;
				}
			});

			$$payload.out += `<!--]-->`;
		}
  // etc.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE42QwU7DMAyGXyUySGulah3i1jUTvAIgOBAO3epCpDSJErcCVX135LaDaXDYzbb8f_5_D9BogxGK1wFs1SIUcO89ZEBfnpvYoyGEDKLrwoEnZTwE7WmnrCLdehdIPBpdYxBNcK1YrfO5Xc_S1ZYXD85GEtFq75Ge3ANaFsjj5EXTx6yatg2SiFP7XJkOhRTXkSrCZJMqW-a_BuxwtRD-kpJ0ZFa5mNtrWxc94-Rwwh5FvlN2yBf5OEHvwuzvzO9EhAxaV-tGYw0FhQ7H7Odz86lLn8cpB9EfE7LBam84pBh54IPzMUm3Z5FLbX1Hgk9IBaGy76hAtNpKBRuuqk-p4JbLSOilghsFJ_GnwP_leBu_AaLgX0QNAgAA

Logs

No response

System Info

Repl

Severity

annoyance

@mquandalle
Copy link
Author

This issue is fixed.

@mquandalle mquandalle reopened this Apr 9, 2024
@mquandalle
Copy link
Author

Actually the issue is still present, but it should be fixed by #11104. To see the issue look at the "ssr" compiled code in the provided REPL

@dummdidumm
Copy link
Member

Yes should be fixed by it - therefore closing as a duplicate of #11086 (even if yours came first, because this one was closed while I looked at it and now the PR references that issue)

@dummdidumm dummdidumm closed this as not planned Won't fix, can't repro, duplicate, stale Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants