open-index/open-npm huggingface dataset:
npm package: @svackages/lazy-action
Description: ![svackage logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png)
Latest version: 1.0.2

![svackage logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png)

![npm version](https://img.shields.io/npm/v/@svackages/lazy-action)
![license](https://img.shields.io/github/license/svackages/lazy-action)

# Svelte action lazy load

This action uses the `IntersectionObserver` to load images or iframes lazily.

It will replace `data-src` with `src`.

And of course it is fully typed 😉

## How to use
### Install
```bash
npm i @svackages/lazy-action
```

### Use in svelte component (svelte-kit only)
```html
<script>
    import lazy, {newObserver} from '@svackages/lazy-action';

    // You can overwrite the standard
    // obeserver with the values you want
    newObserver({
        rootMargin: '70px 0px',
    });
</script>

<img
    use:lazy
    data-src="https://picsum.photos/200/300"
    alt="something random" />

<iframe
    use:lazy
    data-src="https://reitzner.at"
    title="my website"></iframe>
```
### Use in svelte component (outside svelte-kit)
```html
<script>
    import lazy, {newObserver} from '@svackages/lazy-action/browser';

    // You can overwrite the standard
    // obeserver with the values you want
    newObserver({
        rootMargin: '70px 0px',
    });
</script>

<img
    use:lazy
    data-src="https://picsum.photos/200/300"
    alt="something random" />

<iframe
    use:lazy
    data-src="https://reitzner.at"
    title="my website"></iframe>
```

## REPL
https://svelte.dev/repl/f6514d9b90b344a1b1bcc14814470eee?version=3.44.2
npm package: @svackages/persistent-store
Description: ![svackages logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png) # persistent typed store This package allows you to persist your store through localstorage.
Latest version: 1.0.3

![svackages logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png)
# persistent typed store
This package allows you to persist your store through localstorage.

## basic usage
Typescript
```typescript
const myPersistentStore = persistentStore<SomeType>({
    key: 'fancyKey',
    initValue: null,
});
```

JavaScript
```javascript
const myPersistentStore = persistentStore({
    key: 'fancyKey',
    initValue: null,
});
```

## clear out localstorage
```javascript
// in .svelte
$myPersistentStore = null; // undefined will work as well

// in .ts/.js
myPersistentStore.set(null); // undefined will work as well
```

## optional params
you can hook into the read and write cycle to transform values.
```typescript
readHook?: (storage?: string) => T,
writeHook?: (storeValue: T) => string
```
npm package: @svackages/set-focus
Description: ![svackage logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png) # Svelte action set-focus
Latest version: 1.0.3

![svackage logo](https://raw.githubusercontent.com/svackages/persistent-store/main/logo.png)
# Svelte action set-focus

- will set focus on `a` or `button` as soon as element mounts.
- will return focus to previous element when closed

## How to
```html
<div
    use:setFocus>
    <h2>I am an overlay</h2>
    <button>Focus will be set here</button>
</div>
```

## REPL
https://svelte.dev/repl/fa3cd21b4dd24b60a578386f7a1b6dc0?version=3.44.2