open-index/open-npm huggingface dataset:
npm package: @ryangjchandler/fern
Description: Persisted global stores for Alpine 3.x.
Author: Ryan Chandler
Latest version: 0.1.0

> ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/ryangjchandler).

# Fern

Persisted global stores for Alpine 3.x.

## Installation

Since Fern directly extends the global `Alpine` object, the recommended installation methods are NPM or a `module` `<script>` tag.

### NPM

Install Fern by running the following command:

```bash
npm install @ryangjchandler/fern
```

Inside of your main script, add the following code:

```js
import Alpine from 'alpinejs'
import Fern from '@ryangjchandler/fern'

Alpine.plugin(Fern)

Alpine.start()
```

### `<script type="module">`

Add the following `<script>` to the `<head>` of your document **before** including Alpine:

```html
<script type="module">
    import Fern from 'https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-tooltip@0.x.x/dist/module.esm.js'

    document.addEventListener('alpine:initializing', () => {
        window.Alpine.plugin(Fern)
    })
</script>
```

## Usage

Fern adds a new `persistedStore` method to the global `Alpine` object. The method's definition and usage is identical to `Alpine.store()`:

```js
Alpine.plugin(Fern)

Alpine.persistedStore('counter', 0)

Alpine.start()
```

Creating a `persistedStore` will register a normal store with Alpine and keep track of all changes, pushing them back to `localStorage` when updated.

```html
<div x-data>
    <p x-text="$store.counter"></p>
    <button x-on:click="$store.counter++">Increment</button>
</div>
```

If you're using the `<script type="module">` installation method, be sure to make your `persistedStore` calls after registering Fern.

```js
    document.addEventListener('alpine:initializing', () => {
        window.Alpine.plugin(Fern)

        window.Alpine.persistedStore('counter', 0)
    })
```

## Versioning

This projects follow the [Semantic Versioning](https://semver.org/) guidelines.

## License

Copyright (c) 2021 Ryan Chandler and contributors

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.
npm package: @ryangjchandler/x-else
Description: An `x-else` directive for use in Alpine components.
Author: Ryan Chandler
Latest version: 0.0.2

> ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/ryangjchandler).

# `x-else`

Quickly create `else` conditions for your `x-if` directives.

![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/ryangjchandler/x-else?label=version&style=flat-square)
![Build size Brotli](https://img.badgesize.io/ryangjchandler/x-else/master/dist/x-else.js.svg?compression=gzip&style=flat-square&color=green)
[![Monthly downloads via CDN](https://data.jsdelivr.com/v1/package/npm/@ryangjchandler/x-else/badge)](https://www.jsdelivr.com/package/npm/@ryangjchandler/x-else)

## About

This plugin adds a new `x-else` directive to Alpine.js which can automatically create negated counterparts for your `x-if` directives.

## Installation

### CDN

Include the following `<script>` tag at the end of your `<body>`:

```html
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/x-else@0.x.x/dist/x-else.js"></script>
```

### NPM

```bash
npm install @ryangjchandler/x-else
```

Add the `x-else` directive to your project by importing the package **before** Alpine.js.

```js
import "@ryangjchandler/x-else"
// import "alpinejs"
```

## Usage

To use the `x-else` directive, add it to a `<template>` tag directly after an `x-if` directive.

```html
<div x-data="{ show: false }">
    <template x-if="show">
        <p>I'm showing!</p>
    </template>
    <template x-else>
        <p>I'm showing because the other one is not!</p>
    </template>
</div>
```

> The `x-else` element must be the next sibling of an `x-if` element.

## License

Copyright (c) 2021 Ryan Chandler and contributors

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.