Updates

These posts are aggregated from Svelte GitHub Repository.

  • Svelte Philosophy

    This is an attempt to articulate the Svelte philosophy — our bedrock principles, that guide our design decisions.

  • Better integration with enhanced:img

    Hi! I am looking for an optimal way to use suggested enhanced:img plugin. So I created following component as an integration: 

    // Image.svelte
<script lang="ts">
  
    import type { Picture } from 'vite-imagetools';
    import { onMount } from "svelte";

  let { 
    src, useSrcAsImportPath = false, sizes = '', alt = '', 
    className = '', style = '', loading = 'lazy', decoding = 'async', fetchpriority = 'auto' } = $props()
  
  let contents: Picture | string = $state('');

  async function loadContents() {
    if(useSrcAsImportPath) {
      contents = (await import(src)).default;
    } else {
      contents = src
    }
   
  }

  onMount(loadContents)
</script>

{#if contents}
  <enhanced:img src={contents} {alt} {fetchpriority} {loading} {decoding} {sizes} class={className} {style}/>
{/if}

    Above can be used in two main ways (in theory):

    Official, default - using payload already imported in +page.svelte or +page.ts and exported by load() function inside data object.

          <div class='img-container'>
        <Image src={data.heroImage} alt='hero' />
      </div>

    As dynamic import (preferable, but funky)

          <div class='img-container'>
        <Image 
          useSrcAsImportPath={true}
          src={'$lib/images/blog-posts.png?enhanced&w=400&blur=15&format=webp'}  
        />
      </div>

    The second option works but with Vite warnings:

    The above dynamic import cannot be analyzed by Vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

    Vite basically needs dynamic imports to start with ./ or ../ and end with file extension, and ?enhanced... query breaks this rule. Also using $lib/... would be preferable, but this format makes Vite unhappy too.

    Official guide on "per image transforms" also breaks above Vite rule.

    I am looking for solution that would 'decouple' referencing the original image (import) and the ?enhanced... part. So I can define enhanced image settings it in the place of using it, not at import). Is there a better way to achieve this than in current faulty integration?

    Another thing is that enhanced:img is replaced by <picture><source ... /> <img ... /></picture> which i find difficult to style precisely without boilerplate code (props drilling, funky css).

    I'd appreciate suggestions of improving my code to make it more clean and tailored for specific layout on a page. How do you use enhanced:img? Thanks!

    sources: https://svelte.dev/docs/kit/images https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img

  • Breaking change of store subscriber vs $ prefix on v5?

    I found a behaviour doesn't match between v5 and v4. Is this change intentional, or better to report as a bug?

    Here is the code:

    <script>
    import { writable } from 'svelte/store';

    const value = writable(100);
    value.subscribe((newValue) => console.log(newValue, $value));
</script>

<input bind:value={$value} type="number" />

    When I change the input from 100 to 101, v5 shows "101, 100" while v4 shows "101, 101". (I understand it wouldn't be a good idea to mix up using both newValue and $value anyway)

    Also please let me know if I overlooked an announcement about this

  • Usage of svelte-ignore should be mentioned in diagnostics

    A minor nit pick(opinion)

    For warnings like these:

    Diagnostics:
1. Elements with the 'button' interactive role must have a tabindex value
   https://svelte.dev/e/a11y_interactive_supports_focus [a11y_interactive_supports_focus]
2. Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
   https://svelte.dev/e/a11y_click_events_have_key_events [a11y_click_events_have_key_events]

    It would be helpful to also include svelte-ignore usage(at the bottom):

    Diagnostics:
1. Elements with the 'button' interactive role must have a tabindex value
   https://svelte.dev/e/a11y_interactive_supports_focus [a11y_interactive_supports_focus]
2. Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
   https://svelte.dev/e/a11y_click_events_have_key_events [a11y_click_events_have_key_events]
   
Use <!-- svelte-ignore <warning-code> --> to supress this.
Use <!-- svelte-ignore a11y_interactive_supports_focus --> to supress this.  
Use <!-- svelte-ignore a11y_click_events_have_key_events --> to supress this.

  • svelte 5 için daisyui arasındaki uyumluluk

    svelte 5 için daisy ui için en iyi stabil sürümü nedir

  • Preserving event listeners when rendering with `svelte/server`

    Hi. I'm trying to get raw HTML from a Svelte component to use with Elysia to return HTML from routes.

    I see two ways:

    • Define as a custom element
    • Render with svelte/server

    The first option works with event listeners. However, I don't understand how to pass props to the components this way.

    <svelte:options
  customElement={{
    props: {
      options: { attribute: "options", reflect: true, type: "Object" },
    },
    shadow: "none",
    tag   : "props-element",
  }}
/>

<script lang="ts">
  const { options }: { options: Array<Record<"value", number>> } = $props()
</script>

<div class="flex flex-col gap-2">
  {#each options as option}
    <p>{option.value * 2}</p>
  {/each}
</div>

     `<props-element options="[{value:2},{value:5}]"></props-element>`

    Uncaught SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)

    The second option has props attribute in the config:

    const options = ["1","2"]
render(Parent, {props: {options}}).body

    But doesn't preserve event listeners. It seems to completely remove on... attributes.

    Update: It seems I wasn't complying with JSON.parse:

     `<props-element options='[{"value":2},{"value":5}]'></props-element>`

    Seems strange to use these stringify shenanigans though.

  • Big function in parent or in children component?

    I have a component parent (Team.svelte) and a component children (Player.svelte).

    The question: can I create a big function like the one below in the child components or should I create it in the parent and pass down it as prop to al children?

    I mean for best performances what is the correct way?

    Or should I create it in a module=context of the children component (but maybe is not possible because I need some variables)?

    I'm worried to create it in the children (Player.svelte) component because I'm afraid it gets created for each player at runtime instead of one time only in the parent (Team.svelte).

    What is the idiomatic way in Svelte 5?

    const bigFunction = createQuery(() => ({
    queryKey: [someKey],
    queryFn: someFunc,
    enabled: check,
}));

  • Props type inference in Svelte 5: infer most, specify some?

    Hello, I'm doing a sizeable Svelte 4 -> 5 migration, and I've encountered some components which have many props with default values.

    In Svelte 4, Svelte/TS could infer the types of the props using their default values. For those props that did not have a default value, it was possible to explicitly specify their type while keeping inference for the rest.

    I haven't found a way to do this in Svelte 5 without explicitly specifying the type for each property. Am I missing something?

    Here's an excerpt from the codebase with a few default values:

    Svelte 4:

      export let accept: string | string[]; // <-- notice this is the only prop with a specific type definition
  export let disabled = false;
  export let maxSize = Infinity;
  export let minSize = 0;
  export let multiple = true;

    In Svelte 5, two changes are needed, as far as I could find:

    1. Every property has to be explicitly specified in a separate type definition.
    2. Every property which has a default ("fallback") now needs to be made optional, otherwise the component user still has to provide it.
      type Props = {
    accept: string | string[];
    disabled: boolean;
    maxSize?: number;
    minSize?: number;
    multiple?: boolean;
  };

  let {
    accept,
    disabled = false,
    maxSize = Infinity,
    minSize = 0,
    multiple = true,
  }: Props = $props();

    What doesn't work:

      // Svelte 5: if we try to specify a type only for `accept`, we get errors like:
  //  > Property '.......' does not exist on type '$$ComponentProps'.
  let {
  .... props with default values....
  }: { accept: string | string[] } = $props();

    Is the conclusion that Svelte 5 is just unavoidably more verbose in this situation?

  • Each Block Lost Reactivity After Navigation

    Hi, I was working a project and encounter some issue with each block when iterating through SvelteSet/ SvelteMap.

    Code (simplified example):

    <script>
    import {SvelteSet} from 'svelte/reactivity';

    let index = $state(0);

    let initial = $state([0, 1])
    const items = $derived(new SvelteSet(initial));

    function handle() {
        index = (index + 1) % 2;

        items.clear();

        const limit = index === 0 ? 2 : 1

        for (let i = 0; i < limit; i++) {
            items.add(i);
        }
    }

</script>

{#snippet list(value)}
    <div hidden={index !== value}>
        <p>Page: {index}</p>
        {#each items.values() as v (v)}
            {v}
            <br />
        {/each}
    </div>
{/snippet}

<button onclick={handle}>switch page</button>
{@render list(0)}
{@render list(1)}

    What I expect the above to do is when the switch page button is clicked, the list should be updated (2 items -> 1 item -> 2 items ...). This works as expected if I visit this page directly. Yet, if I navigate to another page of this app and come back, the list remains with 2 items when I click the button.

    May I know why is that? Did I make some mistake? Demo: https://stackblitz.com/edit/sveltejs-kit-template-default-uhbwxzas (Visit /about directly vs first visit / then /about)

    I am using SvelteKit 2.48.0 and Svelte 5.43.8. SSR is disabled for svelte kit

  • Recommended animation libraries for complex animations in Svelte / SvelteKit?

    I’m curious about animation options in the Svelte ecosystem beyond the built-in transitions and motion utilities.

    The official animations are great for simple UI interactions, but for more complex scenarios (timeline-based animations, scroll-driven effects, or advanced micro-interactions), are there any community-recommended libraries that work particularly well with Svelte or SvelteKit?

    I’ve seen mentions of things like GSAP or Motion One being used with Svelte, but I’m wondering if there are any Svelte-first or Svelte-friendly approaches that the community prefers, especially for larger apps.

    Would love to hear what people are using in production and why.

Loading Svelte Themes