Svelte Action

Write less, Do more

---

Svelte Action is a collection of utility functions, which help you build powerful app.

The key features are:

• Type Strong 💪: Written in TypeScript, with full TS docs.
• Fast to code 🚀: Increase the speed to develop features by about 200% to 300%.
• Fewer bugs 🐞: Reduce about 40% of human (developer) induced errors.
• SSR Friendly 🕺: Works perfectly with server-side.
• Easy 💫: Designed to be easy to use and learn. Less time reading docs.
• Interactive demos 🎉 : Documentation of functions also come with interactive demos!.
• Feature Rich 🌈: 100+ functions for you to choose from.
• Fully 🌳 shakeable: Only take what you want.
• ⚙️ Flexible: Fully customizable, configurable event filters and targets.

Installation

Core

pnpm add -D sveltecore

Shared

pnpm add -D svelteshareds

Integrations

pnpm add -D svelteintegrations

🧪 Example

Core

<script>
import {permission} from "sveltecore"

const { state, is_supported } = permission("geolocation", {controls: true})

</script>

<h1>Is supported is: {$is_supported}</h1>
<h1>state is: {$state}</h1>

Shared

<script>
import {toggleable} from "svelteshareds"

const [value, toggle] = toggleable()

</script>

<h1>value is: {$value}</h1>

<button on:click="{() => toggle()}">Toggle</button>

Integrations

<script>
import {jwt} from "svelteintegrations/jwt"

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"

const { header, payload } = jwt(token)

</script>

<h1>Header:</h1>
<h2>{JSON.stringify(header)}</h2>

<hr/>

<h1>Payload:</h1>
<h2>{JSON.stringify(payload)}</h2>

🙏 Thanks

This project is heavily inspired by the following awesome projects.

• vueuse/vueuse
• rayepps/radash

📜 License

MIT License © 2022-PRESENT Mohamed Nesredin