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

@arqex/ors

v0.9.0

Published

The eventful state holder

Downloads

7

Readme

ORS - Observable regenerating store

npm version Build Status Coverage Status

The Observable Regenerating Store is a tree data structure that emits events when it's updated, even if the change happens in one of the leaves, making easier to think in a reactive way.

An ORS can be read or updated like any JS object:

import ors from '@arqex/ors'

let store = ors({
  people: {
    alice: { age: 22 },
    bob: {age: 38}
  }
});

store.addChangeListener( () => console.log('Changed') );

store.people.alice.age = 23; // Will print 'Changed' in the console!

See this example working

ORS is intended to be the single store where centralize all the data of a JavaScript application, it's the simplest way of manage the state: Just use it and listen to changes to update your UI. See how it works.

Installation

npm install --save @arqex/ors

Usage

// Import the library
import ors from '@arqex/ors'

// Create a store
let store = ors({
  people: {
    alice: { age: 12, children: [] },
    bob: { age: 38, children: ['alice']  }
  }
});

// We can read from the store like if it was a standard JS object
let alice = store.people.alice;
console.log( alice.age ); // prints out 12

// Listen to changes
store.addChangeListener( () => console.log('Store updated') );

// We can listen to changes in any node
store.people.bob.addChangeListener( () => console.log('Bob updated') );

// Updates can be done like if it was a standard JS object
store.people.bob.children.push('chris'); // This will emit events

console.log( store.people.bob.children[1] ); // Prints out > 'chris'

// Multiple updates in the same cycle are batched and they
// will emit events just once
store.people.bob.age = 39;

//... on the following tick, events are emitted so the console print out
//    in ascending order:
// > 'Bob updated'
// > 'Store updated'

See this example working

How does ORS work?

ORS has 3 main features. They are probably all the features it has and that makes it simple and powerful.

Feature 1: It looks like a standard JS object

ORS is really simple to use because we don't need to learn any methods or strategy to make it work. It loks like just any other object:

let store = ors({
  people: [
    {name: 'Jude', age: 20}
  ];
});

// We can access the data like if it was a standard JS object:
store.people[0].name; // Jude

// We can update it as we update any other object
store.people[0].age = 21;
store.people[0].age; // 21

// We can use all array methods
let jude = store.people.pop();
jude; // {name: 'Jude', age: 21}
store.people.length; // 0

The stores look like JS standard objects, but they really aren't. Objects and arrays are used as baseIn the background, it uses JS Proxies to keep track of the changes and spread them up through the store.

but it regenerates when a node gets updated and emit change events.

It has some features that makes it the simplest way of managing the state: It looks like a standard JS object. It's completely observable. We can listen for updates at any node, and change events are triggered in the parent nodes when children are updated. When a child is updated, the whole branch that contains it gets regenerated after the change event, making simpler to use memoization to derive data.

Usage

To be documented...

Compatibility

These are the minimum browser versions to make ORS work:

Mobile browsers:

On Node.js it works since version 6.5.