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

@folo/store

v0.1.3

Published

> A Plain JavaScript Store Holds & Helps Controlling Data In Forms

Downloads

12

Readme

📋 @folo/store

A Plain JavaScript Store Holds & Helps Controlling Data In Forms

NPM Version NPM Download npm bundle size (minified) npm bundle size (gzip) MIT License CI Codecov

Installation

npm install @folo/store

A store that holds data and triggers the connected components to update their values when necessary. Designed to deal optimally with forms.

How this is going to affect your UI performance?

Instead of re-mount, all elements exist in the form. This approach guarantees that only controlled elements in the UI will be triggered. This is important because usually global store and in most cases means to update all associated elements.

Getting started

Create a shared registry for your app. No matter how many forms you have, You need one registry instance.

import Registry from "@folo/store";

const registry = new Registry();

API

Subscribe

  • Subscribe your elements to the registry:
registry.subscribe(subscribeInfo: Object<SubscribeInfo>, triggerHandler:? Function);

Where SubscribeInfo: Object an object contains:

  • nameRef: string - key reference to the element value.
  • initValue: StoreValue - Initial value for the element.
  • groupName?: string - Only for button group.
  • storeID?: string - In case you are running multiple forms, this value creates umbrella branch for you form.

And triggerHandler: Function - Triggered when local value needs to be updated. This is strict to group buttons only.

Example for subscribe

const btn1Info = {
  nameRef: "btn1",
  initValue: false,
  groupName: "choices",
};

const btn1Handler = (newValue) => {
  console.log(`I am triggered when my siblings value change! ${newValue}`);
};

registry.subscribe(btn1Info, btn1Handler);

const btn2Info = {
  nameRef: "btn2",
  initValue: true,
  groupName: "choices",
};

const btn2Handler = (newValue) => {
  console.log(`I am triggered when my siblings value change! ${newValue}`);
};

registry.subscribe(btn2Info, btn2Handler);

// ...
registry.subscribe(text1Info, btn2Handler);
registry.subscribe(text2Info, btn2Handler);

updater

  • Update value in the registry and triggered handlers if necessary:
registry.updater(updaterInfo: Object<UpdaterInfo>);

Where updaterInfo: Object an object contains:

  • nameRef: string - key reference to the stored element.
  • newValue: StoreValue - The new value for the element.
  • groupName?: string - Only for button group.
  • storeID?: string - In case the element is registered under store id.

What's going to happen is updating store values and trigger handlers for all buttons boolean values under the same group name toggling their values.

Example for updater

  • Receive new value:
const btn2NewInfo = {
  nameRef: "btn2",
  newValue: true,
  groupName: "choices",
};

registry.updater(btn2NewInfo);

//

registry.updater(text1NewInfo);
registry.updater(text2NewInfo);

So, btn1Handler will be triggered with false. Why? Since we updated btn1 and btn2 values, UI should be informed to re-render.

This is the only case when functions are triggered. Otherwise. data flow will be from UI to the store until submit is asking for all elements values.

getDataByStoreID

  • Get store data
registry.getDataByStoreID(storeID?: string): Object<StoreInfo>

clear

  • Clear store data
registry.clear(storeID?: string)

destroy

  • Reset the whole registry
registry.destroy();

Test

yarn test folo-store

Implementation

Contribution 😇

If you have ideas or issues don't hesitate. You are always welcome.

License

This project is licensed under the MIT License