DOCSEARCHbyAlgolia
Submit Docs

Svelte-U Documentation

website·Indexed 29 days ago

https://svelte-u.vercel.app/

A collection of utilities, browser wrappers, and actions for Svelte. Includes shared helpers like debounce, throttle, and asyncState, browser-specific reactive APIs for mouse, window scroll, and storage, and extensions for QR codes, FCM, and SortableJS.

Tokens
25.5K
Snippets
165
Records
221
Agent score
74%

What's inside Svelte-U

  1. Overview of Svelte Utility (@sveu) packages

    Svelte Utility is a collection of utility functions for Svelte projects, divided into four specialized packages:

    • @sveu/actions: Svelte actions (browser-only).
    • @sveu/browser: Functions specifically for browser environments.
    • @sveu/extend: Integrations with third-party libraries.
    • @sveu/shared: A shared module used by other packages.

  2. Overview of Svelte Utility library

    Svelte Utility is a collection of over 100 TypeScript-based utility functions designed to accelerate Svelte development and reduce developer errors. The library is fully tree-shakeable, SSR-friendly, and provides interactive demos within its documentation to help developers implement features quickly.

  3. Get device and browser information using useragent

    The useragent function from @sveu/browser provides a reactive wrapper around the User-Agent Client Hints API. It returns a set of readable stores containing details about the user's device, platform, and browser brands.
    <script>
    import { useragent } from "@sveu/browser"

    const {
        supported,
        mobile,
        arch,
        model,
        platform,
        platformVersion,
        bitness,
        brands
    } = useragent()
</script>

<div>
    <p>Supported: {$supported}</p>
    <p>Is mobile: {$mobile}</p>
    <p>Platform: {$platform}</p>
    <p>Brands: {JSON.stringify($brands)}</p>
</div>

  4. Throttle function execution with @sveu/shared

    The throttle utility limits how often a function can be executed. This is particularly useful for rate-limiting event handlers that fire rapidly, such as resize or scroll events.

  5. Manage timed function execution with timeoutFn

    timeoutFn is a utility from @sveu/shared that creates a reactive async state to invoke a function after a specified interval. It provides controls to start, pause, and resume the timer, and a reactive store to track whether the timer is currently active.

  6. Monitor network status and connection details with network()

    The network() function from @sveu/browser provides reactive stores to track the device's online status and detailed network information. It returns a set of Readable stores that update automatically as the network state changes.
    <script>
    import { network } from "@sveu/browser"
    import { strftime } from "@sveu/shared"

    const {
        online,
        offlineAt,
        onlineAt,
        downlink,
        downlinkMax,
        effectiveType,
        rtt,
        saveData,
        type,
    } = network()
</script>

<h4>online: {$online}</h4>
<h4>online at: {$onlineAt ? strftime($onlineAt, "%c") : ""}</h4>
<h4>offline at: {$offlineAt ? strftime($offlineAt, "%c") : ""}</h4>
<h4>downlink: {$downlink}</h4>
<h4>downlink max: {$downlinkMax}</h4>
<h4>effective type: {$effectiveType}</h4>
<h4>rtt: {$rtt}</h4>
<h4>save data: {$saveData}</h4>
<h4>type: {$type}</h4>

  7. Use the debounce utility from @sveu/shared

    The debounce function executes a provided callback after a specified delay in seconds. This is useful for limiting the rate at which a function is called, such as during window resizing or text input.
    <script>
    import { debounce } from "@sveu/shared"

    let value = "Hi"

    // Update 'value' after 1 second of inactivity
    const keydown_debounce = debounce((e) => (value = e.target.value), 1)
</script>

<input on:input={keydown_debounce} />

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

  9. Persist data reactively using the storage utility

    The storage function from @sveu/browser creates a reactive store that synchronizes its value with the browser's storage. It accepts a unique key and an optional fallback value. To clear the stored value, set the store's value to null.
    <script>
    import { storage } from "@sveu/browser"

    // storage(key, fallbackValue)
    const state = storage("svelte-u", "awesome")
</script>

<input type="text" bind:value={$state} />

<button on:click={() => ($state = null)}>
    remove
</button>

  10. Track browser memory usage with the memory store

    Use the memory() function from @sveu/browser to obtain reactive stores that track whether the browser's memory API is supported and the current heap memory statistics. The result store provides a MemoryInfo object containing the heap size limit, total JS heap size, and used JS heap size.
    <script>
    import { memory } from "@sveu/browser"

    const { supported, result } = memory()
</script>

<div class="text-center">
    <h1>Supported: {$supported}</h1>
    <h2>Js Heap Size Limit: {$result?.jsHeapSizeLimit}</h2>
    <h2>Total Js Heap: {$result?.totalJSHeapSize}</h2>
    <h2>Used Js Heap: {$result?.usedJSHeapSize}</h2>
</div>

  11. Observe element size changes with resizeObserver

    The resizeObserver function from @sveu/browser is a wrapper around the native Web ResizeObserver API. It allows you to track the dimensions of an HTMLElement or SVGElement and execute a callback whenever those dimensions change.
    <script>
    import { resizeObserver } from "@sveu/browser"

    let target = null

    // Use a reactive statement to initialize the observer when target is available
    $: target, resizeObserver(
        target,
        (entries) => {
            // Handle resize entries here
        }
    )
</script>