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

@fdmg/resubstitute

v0.1.38

Published

Pub/Sub drop-in replacement for Microsoft/ReSub

Downloads

396

Readme

Node.js CI Coverage Status CodeQL Node.js Package Bundle-size minified+gzip NPM

ReSubstitute

React State manager drop-in replacement for Microsoft/ReSub

Usage

  1. npm i -D @fdmg/resubstitute

Creating Stores

A store extends the ReSubstitute class. It is a class in which you can store whatever values you want. Typically you'll implement setters and getters to set or get some value from the store. In the setter-function you'll end by calling this.trigger(). This will notify all subscribers to the change.

ThemeStore.ts

import { ReSubstitute } from '@fdmg/resubstitute';

export enum Theme {
    SYSTEM = 'system',
    DARK = 'dark',
    LIGHT = 'light',
}

class ThemeStore extends ReSubstitute {
    private _theme: Theme = Theme.SYSTEM;

    setTheme(theme: Theme) {
        this._theme = theme;
        this.trigger();
    }

    getTheme() {
        return this._theme;
    }
}

export default new ThemeStore();

Subscribe

const subscriptionId = ThemeStore.subscribe(() => {
    // Called whenever `this.trigger()` is called within ThemeStore.
});

// Unsubscribe from the ThemeStore
ThemeStore.unsubscribe(subscriptionId);

Trigger blocks

Sometimes you may want to do lot of consecutive updates but you don't necessarily need to notify all subscribers for each of those updates. Then you can use the static function ReSubstitute.pushTriggerBlock() to push a block onto the stack. As long as there is a block on the stack, triggers will not cause subscribers to be notified.

const resub = new ReSubstitute();
resub.subscribe(() => {
    console.log('triggered');
});

// Add global trigger block to the stack
ReSubstitute.pushTriggerBlock();
// Add global trigger block to the stack
ReSubstitute.pushTriggerBlock();
resub.trigger(); // Nothing happens

ReSubstitute.popTriggerBlock();
resub.trigger(); // Nothing happens

ReSubstitute.popTriggerBlock();
resub.trigger(); // console.log('triggered');

Bypass trigger blocks

const resub = new ReSubstitute();
const resubBypass = new ReSubstitute(0, true);

resub.subscribe(() => {
    console.log('triggered');
});
resubBypass.subscribe(() => {
    console.log('bypass triggered');
});

// Add global trigger block to the stack
ReSubstitute.pushTriggerBlock();
resub.trigger(); // nothing happens
resubBypass.trigger(); // console.log('bypass triggered');

Subscribe to specific keys

const resub = new ReSubstitute();
// Subscribe to global events
resub.subscribe(() => {
    console.log('triggered');
});
// Subscribe only to key
resub.subscribe(() => {
    console.log('only triggered by testKey');
}, 'testKey');

resub.trigger(); // console.log('triggered');
resub.trigger('testKey'); // console.log('only triggered by testKey');

// console.log('triggered');
// console.log('only triggered by testKey');
resub.trigger(['testKey', ReSubstitute.Key_All]);

Throttled events

const resubThrottled = new ReSubstitute(500);
resubThrottled.subscribe(() => {
    console.log('triggered');
});
resubThrottled.trigger(); // console.log('triggered'); after 500ms
resubThrottled.trigger(); // trigger already scheduled so 2nd trigger is ignored