A fork of ankurrsinghal/svelte-legos, hopefully with more consistent releases and maintenance.
Collection of essential Svelte Composition Utilities
- 🎪 Interactive docs & demos
- ⚡ Fully tree shakeable: Only take what you want, [bundle size]
- 🦾 Type Strong: Written in TypeScript, with TS Docs
- 🔋 SSR Friendly
- 🌎 No bundler required: Usable via CDN
- 🔩 Flexible: Configurable event filters and targets
<script lang="ts">
import { loadingAction } from "@sveltelegos-blue/svelte-legos";
let loading = $state(false);
handleClick = () => {
setTimeout(() => {loading = false}, 5000);
loading = true;
}
</script>
<button use:loadingAction={loading} onclick={handleClick}>Click me and I'll start loading!</button><script lang="ts">
import { clickOutsideAction } from "@sveltelegos-blue/svelte-legos";
let hidden = false;
function handleClickOutside() {
hidden = !hidden;
}
</script>
<div class="modal" use:clickOutsideAction onclickoutside={handleClickOutside} />Refer to functions list or documentations for more details.
Since Svelte 5 and its runes have made stores more and more obsolete, it's time to start removing them
from this library. For many things, there's no point in specifically using a store
when a $state() or $derived() would work better.
As such, starting soon, I will be phasing out various legos in stores, getting rid of
or rewriting as many as possible.
Yes, this is a breaking change.
npm i @sveltelegos-blue/svelte-legosSemantic Versioning is a bit silly.
I very likely will not be bumping this to a major version for quite a while. Given that, assume that minor versions (0.x.y) can include entirely breaking changes. They very likely won't, but, don't get comfortable.
Patch versions (0.x.y) will never break things. In fact, they'll usually fix things.
npm run dev- Actual dark mode design, not just haphazard application of colours where they look good.
- Styles consolidation (ie. actual themes)
Contributions to these lofty goals are welcome.
This project is heavily inspired by the following awesome projects.