feat: boolAttr utility

[Carbonateb]

Category: Utilities

Summary

This PR introduces a new utility function, boolAttr, designed to simplify the handling of boolean attributes in Svelte templates, especially custom data-* attributes.

What it does

Inspired by SolidJS's bool:* directive, boolAttr controls the presence of an HTML attribute based on the truthiness of a given value:

If the input value is truthy, boolAttr returns an empty string (""). This causes the attribute to be present on the element (e.g., <div data-active>).

If the input value is falsy, boolAttr returns undefined. This causes Svelte to omit the attribute entirely (e.g., <div>).

Example

<script>
    import { boolAttr } from "runed";
    let isLoading = $state(true);
    let isActive = $state(false);
</script>

<div data-loading={boolAttr(isLoading)} data-active={boolAttr(isActive)}>
  Item
</div>

Renders as:

<div data-loading>Item</div>

Why it's useful

While Svelte handles standard boolean attributes (like disabled, checked) correctly, managing the presence/absence of custom attributes often requires this specific ""/undefined pattern.

Directly assigning a boolean (e.g., data-active={true}) typically renders the attribute with the string value "true" (data-active="true"). boolAttr provides a concise way to achieve the desired presence/absence behavior, which is essential for:

1. Conditional Styling: Using attribute presence selectors in CSS ([data-loading] { ... }).
2. JavaScript Hooks: Querying for the presence of an attribute (element.hasAttribute('data-active')).
3. CSS Frameworks (like Tailwind): Enabling more terse attribute-based variants (data-[active]:opacity-100, group-data-[loading]:pointer-events-none) without needing to target specific string values ([data-active='true']). This is the use case that led me to write this utility for myself.

This utility provides a small but helpful enhancement for developers working with conditional attributes in Svelte 5.

Inspiration

The pattern is directly inspired by the utility and ergonomics of the bool:* directive in SolidJS: SolidJS Docs - bool:*

---

I've only added the library code so far. If you think this is a good feature to add, I'll add the documentation page too :)

[changeset-bot]

🦋 Changeset detected

Latest commit: 273ab07

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
runed	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[TGlide]

I love this, use a similar pattern in melt all the time. Go for it!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
runed	❌ Failed (View Log)		273ab07