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

thor-rx

v0.0.3

Published

ThorRx is a tiny Proxy based lib for deliverering events and change records to keep track of mutations on objects (models). When a property is modified on an thor-rx 'observed' instance thor-rx will deliver change notifications that helps you keep track

Downloads

10

Readme

thor-rx

ThorRx is a tiny Proxy based lib for deliverering events and change records to keep track of mutations on objects (models). When a property is modified on an thor-rx 'observed' instance thor-rx will deliver change notifications that helps you keep track of changes in a smooth way.

Installation

npm install thor-rx

Documentation

Below follows a brief documentation.

ThorRx<T extends ThorRxBase >(obj:any, (changes:ChangeModel) =>void):ThorRx<T>

Create a new thor-rx observer

let rx = new ThorRx<T>(instance,(changes:ChangeModel) => {}); 

getObserver():T

Get a thor-rx instance of type T. T is the proxied instances of yours.

observerOfT = rx.getObserver();

example

Where we have an object(Model) Person

  let person = new Person();

  let rx = new ThorRx<T>(person , (changes:ChangeModel) => {
        // do op with changes
  }); 

  let rxPerson= rx.getObserver();

  // rx person is now a observed (Proxied) instance of Person

ChangeModel

Change model contains information about the current change.

class ChangeModel {
    target: any;
    type: string;
    newValue: any;
    oldValue: any;
    timeStamp: Date;
    constructor(target: any, type: string, newValue: any, oldValue: any);
    }

Change type's

An change type can be as follows: add, removed and update.
add and remove relates to Array properties.

ThorRxBase

The objects you wich to observe must derive (extends) from ThorRxBase.

 class MyModel extends ThorRxBase{
     constructor(){
         super(); 
         ..
     }
 }

observe(target:any) : void

Make an property / target of the class that derives from ThorRxBase an observable. Will report changes when modified

unobserve(target:any): void

Makes a properry ( target) a non observable. Will not report changes when modified

Decorators

Decorators lets you by decorating properties of your objects(classes) gain control of what attributes that thor-rx captures mutations on. By default the property is observed.

@Observe(isObserve:boolean)

if an @Observe decorator exists on a property , you can control it by settig isObserve:boolean to true/false, if fn:Function is defined fn will be the Fn to be called on property mutations.

Note: will not affect newable properties. See observe and unobserve above.

example

class Person{

    @Observe(false) fullName:string;
    @Observe(true) age:number
    ...
}

Example ( Quick guide )

The example below creates an thor-rx observer for Person (class)

let personObserver = new ThorRx<Person>(new Person(), (change:ChangeModel) => {
     // do op's with the change
}); 

Where person look needs to extend ThorRxBase such as

class Person extends ThorRxBase {
    fullName:string
    constructor(){
        super();
    }
}    

To get an observer instance you need to call .getObserver():T such as below.

let personObserver = new ThorRx<Person>(new Person(),(change:ChangeModel) => {
    // do op's with the change
});

let person =  personObserver.getObserver()

person.fullName = "Sven Erik Magnusson";

Setting the property .fullName will deliver (fire) the changes handler you provded , in this example

(change:ChangeModel) => {

    // do op

}

Roadmap / Todo

-