DEV Community 👩‍💻👨‍💻

Vy Quốc Vũ
Vy Quốc Vũ

Posted on

I wrote a state management npm - Any State

Features:

Lightweight object state management
Open Source Project
Small App Size (~2Kb)
Easy to use with nay framework, just a callback on change

About:

AnyState is an open source programs built using Typescript (for a more secure environment).

Usage

Initialize anyState object with createStore()

  const anyState =  createStore({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
Enter fullscreen mode Exit fullscreen mode

Set state

  anyState.setState({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });
Enter fullscreen mode Exit fullscreen mode

Get state

  const state = anyState.getState();
Enter fullscreen mode Exit fullscreen mode

Set item

  // const path = 'name';
  const path = 'children[0].name'; // the path to the item
  anyState.setItem(path, 'Jane');
Enter fullscreen mode Exit fullscreen mode

Get item

  const path = 'children[0]';
  const child = anyState.getItem(path);
Enter fullscreen mode Exit fullscreen mode

Watch onChange

  const path = 'name'; // path to item
  anyState.watch(path, (nextState, prevState) => {
     // do anything
  });
Enter fullscreen mode Exit fullscreen mode

Examples

React Todo

Solid Todo

Links:

GitHub: https://github.com/vyquocvu/anystate
Npm: https://www.npmjs.com/package/anystate
MySite: https://vyquocvu.co/

Happy coding! 🎉
Accepted any advices.

Top comments (6)

Collapse
lukeshiru profile image
Luke Shiru

It looks maybe you forgot to add the "types" field in package.json. Ideally you should add that so when folks use your package they get autocompletion either they use TS or not, and also it shows the [TS] badge next to your package name in npm's site.

Other than that, I recommend you don't push your package-lock.json and you also omit the compiled code from your repo (only push the source).

About the actual code: You might want to update your code so instead of doing the JSON.parse(JSON.stringify()) hack, simply use structuredClone, and avoid any as much as possible and use unknown instead.

Cheers!

Collapse
vyquocvu profile image
Vy Quốc Vũ Author

that's great, thanks @lukeshiru

Collapse
joelbonetr profile image
JoelBonetR • Edited on

Love the initiative! :)

My feedback on it looking at the API:

This set and get methods for items are using array indexes directly which is bad yada yada.

I'd recommend to use nested objects so you can identify pieces of data easily:

const anyState = anystate.set('user', {
  name: 'John',
  age: 30,
  children: [{
      name: 'Bob',
      age: 5,
  }]
});
Enter fullscreen mode Exit fullscreen mode

So then you can

const entireState = anyState.get();
const user = anyState.get('user');
const userChildren = anyState.get('user.children');
Enter fullscreen mode Exit fullscreen mode

For example. This way you can also get rid of createState() because setState will create it if not exists and getItem is no longer necessary.

*Also remember that you need some way to ensure that you can't override a state by redefining it anywhere else

Check this as well to see if it suits this project.

Do you plan a roadmap for AnyState? That would be nice! 👌😁

Looking forward to see how it evolves

Collapse
vyquocvu profile image
Vy Quốc Vũ Author

Thanks @joelbonetr so much!
I very appreciate your advice, i will improve this project day by day.

Collapse
joelbonetr profile image
JoelBonetR

awesome! :)

Collapse
teqlinhdong profile image
teq-linhdong

my brother is fucking good

🌚 Life is too short to browse without dark mode