The reason type must be static with two-way binding is that the code Svelte generates is different for different kinds of input. For example, number and range inputs must have their values coerced to a number, some inputs need change event listeners instead of input events or vice versa, and so on. But you can … Read more
Yes, absolutely. For one thing, the store API is very simple and nothing prevents you from subscribing to the store yourself to know the value: import myStore from ‘./stores’ myStore.subscribe(value => { // do something with the new value // you could store it for future reference… }) And, if you just want to know … Read more
Answering my own question thanks to Theo from SvelteKit Discord: Use $$app-navigation import { goto } from ‘$app/navigation’; function routeToPage(route: string, replaceState: boolean) { goto(`/${route}`, { replaceState }) } replaceState == true will replace the route instead of adding to the browser history. So, when you click back, you will not go back to the … Read more
The following approach has these advantages: One central point to maintain all your icons for your app Reduced network requests for fetching SVG icons Reusable icons throughout the app without having duplicate svg elements Have a dedicated Icon.svelte component setup like this: <script> export let name; export let width = “1rem”; export let height = … Read more
The sveltejs/template uses sirv-cli. You can add –port or -p in your start:dev script in package.json. Instead of: “start:dev”: “sirv public –single –dev” Use: “start:dev”: “sirv public –single –dev –port 5555” You can see more of sirv-cli options: https://github.com/lukeed/sirv/tree/master/packages/sirv-cli
When you assign variables using $: you cannot assign them as part of other variables declared using let, const, or var. When you do assignments using $:, you can only use them in other variables assigned using $:. In the code posted above, you need to change the following lines: let namesWithA = bandmembers.filter(d => … Read more
You can manually create a subscription to your store and persist the changes to localStorage and also use the potential value in localStorage as default value. Example <script> import { writable } from “svelte/store”; const store = writable(localStorage.getItem(“store”) || “”); store.subscribe(val => localStorage.setItem(“store”, val)); </script> <input bind:value={$store} />
You can use {#each …}, like: {#each Array(3) as _, i} <li>{i + 1}</li> {/each}
TL;DR Just wrap the handler function in another function. For elegancy, use arrow function. You have to use a function declaration and then call the handler with arguments. Arrow function are elegant and good for this scenario. WHY do I need another function wrapper? If you would use just the handler and pass the parameters, … Read more