npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@arborjs/plugins

v0.0.1-alpha.93

Published

Community driven plugins for @arborjs/store.

Downloads

266

Readme

Arbor Plugins

"Buy Me A Coffee"

Set of official plugins for @arborjs/store.

[!WARNING] We will most likely split this package and move each plugin into their own package in the future.

Installation

Via npm

npm install @arborjs/plugins

Or via yarn

yarn add @arborjs/plugins

Usage

Logger

Provides some logging information regarding mutations happening in the store.

[!WARNING] This plugin is experimental and will likely change in the near future.

import { Arbor } from "@arborjs/store"
import { Logger } from "@arborjs/plugins"

const store = new Arbor({
  count: 0,
})

store.use(new Logger("counter"))

LocalStorage

Persists your store data to the browser's local storage, keeping it up-to-date as mutations happen.

import { Arbor } from "@arborjs/store"
import { LocalStorage } from "@arborjs/plugins"

const store = new Arbor({
  count: 0,
})

store.use(new LocalStorage({ key: "apps.counter" }))

You can override the serialization and deserialization logic used to persist data to local storage and read from it. This is quite handy when defining custom types to represent your data model, you can resort to @arborjs/json to handle type-preserving serialization/deserialization logic:

import { Arbor } from "@arborjs/store"
import { LocalStorage } from "@arborjs/plugins"
import { stringify, parse } from "@arborjs/json"

import { Todo } from "../models/Todo"
import { TodoList } from "../models/TodoList"

const store = new Arbor(
  new TodoList(new Todo("Do the dishes"), new Todo("Walk the dogs"))
)

store.use(
  new LocalStorage({
    key: "apps.todos",
    deserialize: parse,
    serialize: stringify,
  })
)

Using @arborjs/json to handle serialization/deserialization means that your application state will be serialized and save into local storage with type information preserved so when deserialized, what you get back are instances of the types composing the state, rather than raw literal objects and arrays.

Custom Plugins

[!WARNING] The plugin system is currently being experimented with and its API may suffer adjustments in the near future. However, we feel like its public API is close to a stable state.

Implementing a plugin for Arbor stores is quite simple, all you have to do is provide an object that conforms to the Plugin type:

type Plugin<T extends object> = {
  configure(store: Store<T>): Promise<Unsubscribe>
}

When passing an instance of a plugin to Arbor#use, the store will call the plugin's configure method, passing itself as an argument and wait on the returned Promise to resolve.

The configure method is where the plugin performs the logic to connect itself to the store, usually by subscribing to store events and returning a Promise that resolves when the configuration process is completed.

The returned promise resolves to a unsubscribe function that can be called whenever the plugin needs to disconnect from the store. When the configuration fails, the promise should then be rejected.

Support This Project

"Buy Me A Coffee"

License

Arbor is MIT licensed.