Similar to Typescript: How to branch based on type but this is using Svelte, I am already using run-time type guards per that answer, and Svelte is still throwing errors. I have an array named collectablesInFolders, of type Collectable | Folder. Folders have a folderName property. Collectables don’t have a folderName. I have a runtime… Read More How can I use branch code based on TypeScript types in Svelte?

I have a component with a slot that I want to pass props to. However, while I can pass a variable from the parent directly to the slot, passing it directly from the component that has the slot does not work for some reason. Here is the REPL. And the code: <!– App.svelte –> <script>… Read More Svelte props are not passed to slot

I want to declare an optional prop in svelte with typescript, but I get the following error: "Declaration or statement expected". How can I declare the prop correctly? My Type export enum MyVariants { one = ‘one’, two = ‘two’ } Svelte component <script lang="ts"> export let variant?: MyVariants; </script> Error: ts Declaration or statement… Read More How define an optional prop in svelte with typescript?

Problem In a SvelteJS project, I have a parent component that executes its own click code when the user clicks on it. I also have a child component that is an <input> element of type="checkbox". When the user clicks on the checkbox, the parent element executes its own click code as well. However, I want… Read More How to prevent parent element from executing click code when checkbox is clicked in SvelteJS?

How can I access a component’s properties when that component was created dynamically at runtime? When creating a component in markup I can simply bind:someProperty={someVariable}, but I don’t know of any way to do this when the component is instantiated using new Component() at runtime? How can I get access to this new component’s properties?… Read More How to access properties on a dynamically created component in Svelte

I am trying to create a todo app with stores in svelte. But I am having an error that I wasn’t able to solve. I have tried to use stores to manage all my all tasks data even it in not required but I wanted to see how stores work in svelte but I had… Read More Svelte .set is not a function

A reactive statement isn’t triggering how I expect, in this toy example. I’m updating a variable x in a separate file, and I’d expect this update to trigger a reactive statement in my main app, but it doesn’t. When I use the same logic inside my main app, for variable y, it does trigger the… Read More Svelte reactive statement not triggering, when variable updated asynchronously in another file

I’m trying to build a generic Tabs component for my project with Svelte and TailwindCSS. When a tab is selected, I’d like the current contents to move as if they where being dragged by the new contents. For whatever reason, when the transition starts, the current contents are clipped to an unknown height (it looks… Read More Element clips contents while transitioning

On my project, I’m using PicoCSS as a default style. I have a form on which I want to highlight the fields that have errors whenever there’s some problem while sending it. To do that, I want to conditionally render the aria-invalid tag, because if I set it to "false", it is highlighted in green,… Read More How to conditionally render an HTML property?

I’m having problems with mousein and mouseout events triggering at unexpected times. I am trying to use a GitHub svg icon and listen to when the mouse enters and leaves the icon. I’m not able to replicate it in Svelte’s REPL though. In the REPL, the mouseout event will trigger once however moving my mouse… Read More svelte mouseout event triggering inside element