I believe it uses something like the index of the item as the default when you do not provide a key. This can be validated by using {#each things as thing, index (index)} <Thing current={thing.color}/> {/each} which gives the same behavior as not using a key in the first place. Let’s call the <Thing> that … Read more
No. Component styles are shared between all instances of a component, either because they’re statically extracted to a .css file, or because they’re injected into a single <style> element that all components reference. If it were possible to put variables directly inside the component’s <style>, it would mean that Svelte would need to create encapsulated … Read more
If you are using Sveltekit, you can load fonts locally using the static directory. Store your font files under static/fonts, and then use either a CSS file or a <style> tag to reference your font files. /* fonts.css */ @font-face { font-family: ‘Lora’; font-style: normal; font-weight: 500; src: url(‘/fonts/lora-v20-latin-500.eot’); /* IE9 Compat Modes */ src: … Read more
Two steps, We can inject css into js assets with vite-plugin-css-injected-by-js. We can emit a single js asset by disabling chunks in rollup’s config. Final result, import cssInjectedByJsPlugin from “vite-plugin-css-injected-by-js”; export default defineConfig({ plugins: [cssInjectedByJsPlugin()], build: { rollupOptions: { output: { manualChunks: undefined, }, }, }, }); As suggested by @TheRockerRush below, you may want … Read more
document is not defined on the server, so you need to guard against that in your component so that particular piece of code is only run in the browser. You can use the onMount function which is only run in the browser when the component has been rendered. <script> import { onMount } from ‘svelte’; … Read more
Ouch, tough one. Hang tight. What you’re missing actually is the “linking”, that is resolving import statements in the compiled code to something the browser can use. This is the work that is typically done by the bundler (e.g. Rollup, Webpack…). These imports can come from user (widget developer) code. For example: import { onMount … Read more
The above solutions won’t work. This is the new way: export async function load({ params, url }) { let lang = url.searchParams.get(‘lang’); let q = url.searchParams.get(‘q’); return { lang, q }; } Then, please reach it as this: import { page } from ‘$app/stores’; $page.data.q Thanks to Richard this is much better than acknowledging export … Read more
As of SvelteKit 1.0 the path should be a directory in brackets, e.g. for /blog/<slug> you will add the following: src/routes/blog/[slug] |_ +page.js |_ +page.svelte Then in src/routes/blog/[slug]/+page.js you can add something like export const load = ({ params }) => { return { slug: params.slug } } which will return it as a data … Read more
Rich Harris has a nicer solution You can use use:action: Actions are functions that are called when an element is created. For example: <script> let tasks = []; function addTask() { tasks = […tasks, { title: “” }]; } function init(el){ el.focus() } </script> {#each tasks as task} <input type=”text” bind:value={task.title} use:init /> {/each} <button … Read more
You could e.g. use the filter array method to create a new array without the element ‘hello’: messages = messages.filter(m => m !== ‘hello’);