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.

use:action is an element directive

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

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

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 its eco toolings. It is recommended to migrate to Svelte 4 and upgrade to latest editor extension/plugin.

automatically typed action event

<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.

src/app.d.ts - fallback typescript support

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

event, package, and EventDetail in code blocks above depend on the package you are importing from.

Svelte store reactive syntax

Note that the $ syntax for unpacking reactive store value is only available in .svelte files and not in JS/TS. Use .subscribe instead in such cases.