question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reactivity of dynamic <svelte:component> props

See original GitHub issue

Describe the bug Spread props seem to loose reactivity when used in conjunction with dynamic component.

First reported on stack overflow: https://stackoverflow.com/questions/58262342/reactivity-of-dynamic-sveltecomponent-props?noredirect=1#comment102908014_58262342

To Reproduce https://svelte.dev/repl/c30956f32d514063b7694711a3637093?version=3.12.1

Expected behavior I was expecting the Main component to start with rendring the Banner component, and then the Header component. when the timeout expires.

  • Svelte version (Please check you can reproduce the issue with the latest release!) Cf. REPL.

Severity Not a big issue, the switching I want can be done with if/then/else. That is actually what I do right now. But it would be pretty cool if you could switch a component AND its props at will. Example from the documentation shows how to switch component but only with static props.

Additional context I basically wanted to select a component based on a route parameter, and also to select the props for that component through the same logic.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
brucoucommented, Oct 16, 2019

One note though, I wonder if the Svelte compiler could issue a warning when it sees props being used in an expression that is not made reactive with $:? Would be a nice-to-have thing, not really indispensable but still that may help.

0reactions
brucoucommented, Oct 16, 2019

Alright, there is no bug there, I found where I went wrong in my original implementation mentioned in SO, I forgot a $: before one of the statement, so it was not reactive anymore… Closing this. Thanks for the help.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Reactivity of dynamic <svelte:component> props
I use spread props as recommended but that does not seem to be working. Context: I am writing the Conduit RealWorld app with...
Read more >
Dynamic behavior in Svelte: working with variables and props
Our Todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
Read more >
Reactivity / Declarations • Svelte Tutorial
Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on other reactive values....
Read more >
Spread Props in Component removes Reactivity #3521 - GitHub
Using the spread operator in a #each loop in variable deconstruction and use the spread props feature along side other explicit props, makes...
Read more >
How to actually pass Svelte component through props?
How to actually pass Svelte component through props ?✨❓ Svelte Question Time ❓✨"You have a Svelte question, I have an answer" In the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found