Guidelines

This page includes common guidelines shared among packages in the svelte-put collections.

#Action as Element Directive

Any svelte action exported by a package should be used with element and not component.

<Component use:action /> <-- incorrect usage-->
<div use:action /> <-- correct usage-->

#Action Event Typescript Support

If an action supports some CustomEvents but they are not picked up by your editor or some type error is displayed, you are probably still on an older version of Svelte or one of its ecosystem toolings. It is recommended to migrate to Svelte 4 and upgrade to latest relevant editor extensions/plugins.

<script lang="ts">
  import { action } from '@svelte-put/package';
</script>

<!-- on:event should be automatically typed -->
<div use:action on:event />

If the above option is not possible for your use case. Try declaring types for the events manually as follows.

declare namespace svelteHTML {
  interface HTMLAttributes<T> {
    'on:event'?: (event: CustomEvent<import('@svelte-put/package').EventDetail>) => void;
  }
}

#Svelte Store Reactive Syntax

Note that the $ syntax for unpacking reactive store value is only available in j.svelte files and not in JS/TS. Instead, use the .subscribe method on the store instance itself in such cases.

#Should I use Typescript or not?

If you are developing Svelte application (typically with SvelteKit & Vite), there is no reason not to use Typescript for its convenience in development workflow. One completely valid alternative to Typescript, is just plain Javascript with JSDoc, which, if setup correctly, will go to the same Typescript type checker and provide similar type checking benefits without the hassle of tooling setup. The packages in this collection are in fact written in Javascript with JSDoc.

Throughout the documentation, however, you will see example code in Typescript. This is frankly just me being lazy and not wanting to maintain two versions of every code block. Sorry!

Edit this page on Github