Attach This

A collection of ergonomic everyday helpers for Svelte 5. ✨

Installation

npm install attach-this

Philosophy

These lightweight, easy to use helpers combine spreadable event handlers and attachments with reactive stores. Each one follows the same pattern and can be:

• Spread onto elements: <div {...helper}>
• Subscribed to as Svelte stores: $helper

The store properties are added using Object.defineProperty, which means that spread will not enumerate over them so they don't get added to elements; only the event listeners and the attachments do.

Movable

Easily makes elements movable and tracks z-indexes to keep recent items on top. You can spread the event listeners and attachment onto the element with {...movable} and then access the current state with $movable.

Usage

<script>
   import { movable } from 'attach-this'
</script>

<div {...movable}>
   <!-- $movable is either null or { activeElement, x, y } -->
</div>

Hoverable

Tracks which element is currently being hovered and automatically applies a hovering CSS class. Also prevents parents of hovered children from also being in a hover state.

Usage

<script>
   import { hoverable } from 'attach-this'
</script>

<div {...hoverable}>
   <!-- $hoverable contains the currently hovered element or null -->
</div>

<style>
   .hovering {
      background-color: #f0f0f0;
      transform: scale(1.02);
   }
</style>

Filter

Filter must be created by passing the array you wish to filter to createFilter. The array should contain objects with string keys.

Filters a given array using inputs whose name match the array elements' keys. First, create the store with createFilter and then spread it onto inputs, and access the filtered array with $ syntax.

Usage

<script>
   import { createFilter } from 'attach-this'

   const records = [
      { name: "Alice", age: 32 },
      { name: "Bob", age: 40 },
      { name: "Charlie", age: 18 },
      { name: "Dana", age: 21 },
      { name: "Eddie", age: 27 }
   ];

   const filter = createFilter(records)
</script>

<input {...filter} name="name" type="text" placeholder="Filter by name" />
<input {...filter} name="age" type="number" placeholder="Filter by age" />

<ul>
   {#each $filter as record}
      <li>{record.name} is {record.age}</li>
   {/each}
</ul>

Replace

Dynamic text replacement system that can swap out content based on lookup tables and locales. Can replace by letter, word or text node.

Usage

<script>
   import { createReplaceStore } from 'attach-this'

   const lookupTable = {
      en: {
         welcome_text: "Welcome",
         greeting_message: "How are you today?",
      },
      fr: {
         welcome_text: "Bienvenue",
         greeting_message: "Comment allez-vous aujourd'hui?",
      }
   }

   const replace = createReplaceStore(lookupTable)

   $replace = 'en' // Set current locale
</script>

<replace.text>
   <h2>welcome_text</h2>
   <p>greeting_message</p>
</replace.text>

<!-- Force specific locale -->
<replace.text fr>
   <h2>welcome_text</h2>
   <p>greeting_message</p>
</replace.text>