open-index/open-npm huggingface dataset:
npm package: @svelte-bin/clickoutside
Description: With the `clickoutside` action, a callback function will be fired whenever the user clicks outside of the DOM node the action is applied to.
Latest version: 0.0.2

# @svelte-bin/clickoutside

With the `clickoutside` action, a callback function will be fired whenever the user clicks outside of the DOM node the action is applied to.

## Installation

```bash
npm  i @svelte-bin/clickoutside
```

## Usage

```svelte
<script>
	import { clickoutside } from '@svelte-bin/clickoutside';
	let enabled = false;
</script>

<div
	use:clickoutside={{
		enabled,
		callback: () => {
			alert('outside clicked');
		}
	}}
>
	<button type="button" on:click={() => (enabled = !enabled)}>
		Click Outside: {enabled ? 'on' : 'off'}
	</button>
	<div>Click outside</div>
</div>
```

## Params

| Param    | Description                                                                    |
| -------- | ------------------------------------------------------------------------------ |
| enabled  | Sets the action to an enabled state if true, if false, action will not trigger |
| callback | The callback to be fired once the user clicks outside of the DOM node          |

## Definition

```ts
import type { Action } from 'svelte/action';

export interface ClickOutSideConfig {
	enabled: boolean;
	callback: (any) => unknown;
}

export interface ClickOutSideAttribute {}
export type clickoutsideAction = Action<HTMLElement, ClickOutSideConfig, ClickOutSideAttribute>;
```
npm package: @svelte-bin/image
Description: action for image
Latest version: 0.0.1

# @svelte-bin/image

action for image

## Svelte Lazy Image

Lazy Image with IntersectionObserver and cache action for Svelte/SvelteKit.

### Installation

```bash
// Using Yarn to install
yarn add --dev @svelte-bin/image

// or if you prefer NPM
npm install --save-dev @svelte-bin/image
```

### Usage Sample

```svelte
<script>
	// 	for first time you will get all image from this load from internet
	// 	its normal because no image cached before
	// 	so if you wanna see its working, try it will with change looping or something reactivity will work
	import { lazyimage } from '@svelte-bin/image';
	const placeholder = 'https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif';
	// 	try change size and see image load from internet or cache
	const src = 'https://random.imagecdn.app/200/250';
	const alt = 'Random Image';

	let onlyForLooping = [];
	for (let i = 0; i < 100; i++) {
		onlyForLooping[onlyForLooping.length] = '';
	}
</script>

<!-- No Cache -->
<img
	use:lazyimage={{ cache: false }}
	src={placeholder}
	data-src={src}
	{alt}
	on:cacheload={() => console.log('load from cache')}
	on:imgload={() => console.log('Load from internet')}
/>

<!--
Check console when scrolling. if your brwoser support intersection observer
and you enable cache,another image with same url (cached) will use instead of load from internet
-->
{#each onlyForLooping as _}
	<!-- With Cache  -->
	<img
		use:lazyimage
		src={placeholder}
		data-src={src}
		{alt}
		on:cacheload={() => console.log('load from cache')}
		on:imgload={() => console.log('Load from internet')}
	/>
{/each}
```
npm package: @svelte-bin/stores
Description: A collection of useful Svelte stores, such as localStorage, sessionStorage, query parameters, previous store, and more.
Latest version: 0.3.2

# @svelte-bin/stores

A collection of useful Svelte stores, such as localStorage, sessionStorage, query parameters, previous store, and more.

## Installation

```bash
npm i @svelte-bin/stores
```

## Usage

### Persisted

A Svelte store that persists to local storage and session storage.

defined the store (default using localStorage)

```svelte
<script>
	import { persisted } from '@svelte-bin/stores';

	const preferences = persisted('preferences', {
		theme: 'dark',
		language: 'en'
	});
</script>
```

as sessionStorage

```svelte
<script>
	import { persisted } from '@svelte-bin/stores';

	const preferences = persisted(
		'preferences',
		{
			theme: 'dark',
			language: 'en'
		},
		{
			storage: 'session'
		}
	);
</script>
```

### Query String

The fastest way to read AND WRITE from query search params in svelte/sveltekit

```svelte
<script>
	import { queryParam, transform } from '@svelte-bin/stores';

	const theme = queryParam('query', {
		defaultValue: 'dark'
	});

	// using encode/decode
	const counter = queryParam('counter', {
		defaultValue: 0,
		encode: (value) => value.toString(),
		decode: (value) => parseInt(value || '')
	});

	// using transform

	const counter2 = queryParam('counter2', transform.number(0));
</script>
```

### With Previous

Svelte stores have the ability to retain past values, enabling us to execute actions that rely on historical data, such as facilitating transitions between earlier and current values.

```svelte
<script>
	import { withPrevious } from '@svelte-bin/stores';

	export let name = 'hello world';
	// current is writable, while previous is read-only.
	const [currentName, previousName] = withPrevious('before ');
	// To update the values, assign to the writable store.
	$: $currentName = name;
</script>

transition from {$previousName} to {$currentName}.
```

#### `numToTrack: number`

By default, `withPrevious` tracks one previous value.

```svelte
<script>
	const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2 });
</script>

from {$prev2} to {$prev1} to {$current}.
```

#### `initPrevious: T[]`

To initialize previous values with something besides `null`, pass an array of values from newest to oldest.

Missing values will be filled with `null` and extra values will be ignored.

```svelte
<script>
	const [current, prev1, prev2] = withPrevious(0, { numToTrack: 2, initPrevious: [1, 2, 3] });
</script>

from {$prev2} to {$prev1} to {$current}. <!-- from 2 to 1 to 0. -->
```