open-index/open-npm huggingface dataset:
npm package: @maxleven/hydration
Description: Connect script or just insert it inline. `type="module"` required!
Author: Max Leven
Latest version: 1.0.1

# Scripts hydration library

Connect script or just insert it inline. `type="module"` required!

```html
<script type="module">
    import 'filePath/index.js';
</script>
```

## Load directives

## load

- **Priority**: High
- **Useful for**: Immediately-visible UI elements that need to be interactive as soon as possible. Load after dom ready [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event).

```html
<div data-hydrate="load">
    <h1>Load Demo</h1>
    <template>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/2.5.4/tippy.all.js"
            integrity="sha512-jIIh0z4fzfV4cFju6uTH2QY9Q/UrRd09aa35FKbh759/sl4VyIlA9JMbjM3nSFLNESeiih6pzDlsB4GLd0JZlw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="module">
            console.log('I am load script');
        </script>
    </template>
</div>
```

## idle

- **Priority**: Medium
- **Useful for**: Lower-priority UI elements that don’t need to be immediately interactive.

Load and hydrate the component JavaScript once the page is done with its initial load and the `requestIdleCallback` event has fired. If you are in a browser that doesn’t support [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback), then the document [`load`](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event is used.

```html
<div data-hydrate="idle">
    <h1>IDLE Demo</h1>
    <template>
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
        <script type="module">
            console.log('I am idle script');
        </script>
    </template>
</div>
```

## visible

- **Priority**: Low
- **Useful for**: Low-priority UI elements that are either far down the page (“below the fold”) or so resource-intensive to load that you would prefer not to load them at all if the user never saw the element.

Load and hydrate the component JavaScript once the component has entered the user’s viewport. This uses an `IntersectionObserver` internally to keep track of visibility.

Optionally, a value for `rootMargin` can be passed to the underlying `IntersectionObserver`. When `rootMargin` is specified, the component JavaScript will hydrate when a specified margin (in pixels) around the component enters the viewport, rather than the component itself.

```html
<div data-hydrate="visible" data-hydrate-root-margin="200">
    <h1>Visible Demo</h1>
    <template>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="module">
            console.log('I am visible script');
        </script>
    </template>
</div>
```
npm package: @maxleven/toasts
Description: ```typescript interface Toast { 	text: string; 	closeButton?: string | null; 	duration?: number; 	removeAfter?: number; 	classList?: string[]; 	variant?: string; } ```
Author: Max Leven
Latest version: 1.0.0

# Toasts

## Options

```typescript
interface Toast {
	text: string;
	closeButton?: string | null;
	duration?: number;
	removeAfter?: number;
	classList?: string[];
	variant?: string;
}
```

## Example

```html
<button id="show-toast">Show toast</button>
<script type="module">
    import '/src/index.js';

    if ("toast" in window) {
        const btn = document.getElementById("show-toast");
        btn?.addEventListener('click', () => {
            window.toast({
                text: "Hello world",
                duration: 3000,
                variant: "success",
                closeButton: "close",
                classList: ["custom-class", "custom-class-2"],
            })
        })
    }
</script>
```