Aucune description

Ryan Chandler 010666cbdd chore(docs)		il y a 5 ans
.github	f2a69b9e4e chore(remove workflows)	il y a 5 ans
dist	3e5523830f chore(docs)	il y a 5 ans
docs	361bca332d chore(docs)	il y a 5 ans
examples	35bb19f272 chore(docs)	il y a 5 ans
src	3e5523830f chore(docs)	il y a 5 ans
.gitignore	9900bd4260 build	il y a 5 ans
README.md	010666cbdd chore(docs)	il y a 5 ans
babel.config.js	cb5e7ccd65 chore(tests)	il y a 5 ans
package.json	cb5e7ccd65 chore(tests)	il y a 5 ans
yarn.lock	cb5e7ccd65 chore(tests)	il y a 5 ans

🌲 Spruce

A lightweight state management layer for Alpine.js

About

Many large frameworks have their own state management solutions. One thing these libraries have in common is a higher level of complexity and a wide range of API interactions. Since Alpine.js is designed to be a simpler and lighter alternative to larger frameworks such as Vue and React, shouldn't the state management solution be as simple, if not simpler, too?

Installation

CDN

Include the following <script> tag in the <head> of your document:

<script src="/path/to/spruce.js">

Important: This must be added before loading Alpine.js when using CDN links.

Manual

If you wish to include Spruce with your own bundle:

yarn add @ryangjchandler/spruce

Then add the following to your script:

import Spruce from '@ryangjchandler/spruce'

if (! window.Spruce) {
    window.Spruce = Spruce
}

Spruce.start()

Since Alpine will try to use Spruce from the window context, you must assign it to a window.Spruce variable still.

Usage

Spruce exposes less than a handful of possible interaction points. There is an extremely simple "subscriptions" interaction which connects the roots from your Alpine component to the global store, then there is the "stores" interaction which allows you to define scopes of global state for use throughout your components.

Entry point

If you are using the CDN build, you can interact with Spruce using the window.Spruce variable:

<script>
    Spruce.store('modals', {
        open: 'login',
    })
</script>

If you are importing Spruce into your own bundle, you can interact with it like any other variable:

import Spruce from '@ryangjchandler/spruce'

Spruce.store('modals', {
    open: 'login'
})

window.Spruce = Spruce

Subscribing your components

To access the global state from your Alpine components, you can simply add the x-subscribe directive to your root component.

<div x-data="{}" x-subscribe>
    <span x-text="$store.application.name"></span>
</div>

This directive adds a new $store magic variable to your component. This can be used to "get" and "set" data in your global store.

Defining global state

To define a piece of global state, you can use the Spruce.store() method:

Spruce.store('application', {
    name: 'Amazing Alpine Application'
})

The first argument defines the top level property of the scope. The second argument defines the state for the scope, it could be a string, integer or object with nested properties.

To access the name property, you can do the following inside of your component:

<div x-data="{}" x-subscribe>
    <span x-text="$store.application.name"></span>
</div>

The <span> will now have "Amazing Alpine Application" set as its innerText.

README.md