Anystate is an object, that it's!

Overview

anyState

What is anyState?

  • Just an object
  • Can must be update via setter
  • Watch state changed
  • Independent any frontend frameworks

Back to basic, callback function is a point. I put handle onChange in callback functions, this is hava identify string to make sure target state has been updated. So, that we can get any changes from any where.

Roadmap

  1. Initialize anyState
  2. Simple state
  3. getItem/setItem
  4. Watch onChange

...

Usage

Initialize anyState object with createStore()

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

Set state

  anyState.setState({
    name: 'John',
    age: 32,
    children: [{
      name: 'Bob',
      age: 4,
    }]
  });

Get state

  const state = anyState.getState();

Set item

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

Get item

  const path = 'children[0]';
  const child = anyState.getItem(path);

Watch onChange

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

Development

install dependencies:

  npm install

run tests:

  npm test

dev:

  npm run dev

Examples

React Todo

Solid Todo

License

MIT

You might also like...

Music bot that uses Lavalink for its audio player

Music bot that uses Lavalink for its audio player

Msv Music 🎵 A Advanced Discord Music Bot Made With Lavalink And Have Many Premium Features with filters and more willl be add soon About Msv Music 🚧

Jan 4, 2022

A simple Multi Guild Modmail Bot coded in v13 using the enmap Database Working on any host, like repl.it or vps! Its fast and working bug free + Security options!

Multiguild-Modmail A simple Multi Guild Modmail Bot coded in v13 using the enmap Database Working on any host, like repl.it or vps! Its fast and worki

Oct 20, 2022

A URL Shortener That Allow Users To Interact With Its API Through A Discord Bot

Shortem A URL Shortener That Allow Users To Interact With Its API Through A Discord Bot About Supports Multiple Databases Performant Uses discord.js v

Sep 1, 2022

Simple realtime chat application made by NodeJS, Express, Socket.io and Vanilla Javascript. This project is made to discover socket.io and understand its basic features.

LearnByChat App Simple realtime chat application made with NodeJS, Express, Socket.io and Vanilla Javascript. This project is made to discover socket.

Dec 19, 2021

Its Amazon-like E-commerce store is called shopping-spree!

Its Amazon-like E-commerce store is called shopping-spree! The technologies used for this Project are React.js Frame work Next.js, MongoDB For Database, Mongoose, Material UI and JWT for Authentication Functions and Context API for managing the state Across the Application! where I've Implemented many Functionalities like ADD to Cart, Login, Register, with Next-Authentication, Shipping Screen, Order Details Screen, and Check-out Screen and UPdate the Profile Section Page!

Dec 18, 2021

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Apr 22, 2022

A cross-platform AutoHotKey-like thing with TypeScript as its scripting language

suchibot A cross-platform AutoHotKey-like thing with JavaScript/TypeScript as its scripting language. Built on top of uiohook-napi and nut.js. Install

Sep 21, 2022

As my pepper bot's users have been requesting me for its source code

As my pepper bot's users have been requesting me for its source code

Discord Bot As my pepper bot's users have been requesting me for its source code. Here it is. Enjoy! ! Invite Pepper ( See how it works ) To invite th

Nov 6, 2022

Featureful selfbot wrapper for its Discord selfbot

Featureful selfbot wrapper for its Discord selfbot

Featureful Selfbot wrapper for its Discord Selfbot. This library provides non-standard stuff such farming, intervals, and respect the ratelimit.

Nov 30, 2022

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString Convert html/DOM element to string Works with rendered and virtual DOM Installation npm install htmltostring Or using CDN script src="ht

Jul 22, 2022

Web application that tracks the covid-19 statistics in Chile and its regions.

Web application that tracks the covid-19 statistics in Chile and its regions.

Covid 19 Monitor Web page that shows the covid statistics of the country of Chile, all the confirmed cases, the deaths and also the daily statistics.

Mar 17, 2022

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍🔥.

Aug 18, 2022

📜 Sharable eslint configuration rimac technology uses in all of its projects.

Eslint Config Usage Install the library as a dev dependency alongside required dependencies using yarn add -D @rimac-technology/eslint-config

Nov 23, 2022

Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast.

equivalent-exchange Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast. Features Can parse code usin

Jul 9, 2022

This is Covid-19 data that shows for each country.You can search your country and know its statistics .

COVID-19 Data TRACKER This is Covid-19 data that shows for each country.You can search your country and know its statistics . Built With HTML, CSS, SC

Apr 21, 2022

↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content.

↕️ Alpine Autosize ↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content. 🚀 Installation CDN Include the following scri

Nov 5, 2022

Extract a JS/TS module and its dependencies into a new package

module-extractor Extract a module and its dependencies into a new package Usage import { extractModules } from 'module-extractor' const extraction =

Aug 9, 2022

This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Aug 3, 2022
Owner
Vũ. Vy Quốc
Fullstack web developer
Vũ. Vy Quốc
Web application that tracks the covid-19 statistics in Chile and its regions.

Covid 19 Monitor Web page that shows the covid statistics of the country of Chile, all the confirmed cases, the deaths and also the daily statistics.

David Vergaray 6 Mar 17, 2022
This is Covid-19 data that shows for each country.You can search your country and know its statistics .

COVID-19 Data TRACKER This is Covid-19 data that shows for each country.You can search your country and know its statistics . Built With HTML, CSS, SC

Samiullah Bhadur 2 Apr 21, 2022
Node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that returns sorted object strings that can be used for object comparison without hashes.

node-object-hash Tiny and fast node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that r

Alexander 73 Oct 7, 2022
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
Serialize and deserialize any object and all of its references 🥣

Super Cereal ?? Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Seb Ringrose 9 Dec 24, 2022
Serialize and deserialize any object and all of its references 🥣

Super Cereal ?? Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Seb Ringrose 5 Nov 1, 2022
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
Web typography at its finest: font-size and line-height based on element width.

FlowType.JS Responsive web typography at its finest: font-size and line-height based on element width. Check out the demo site. What does FlowType.JS

Simple Focus 4.6k Dec 30, 2022
P.S Its easy is a website to cater to all your PS allotment needs

P.S. It's Easy All-in-one Web App for all your Practice School Allotment needs! Note: Developers trying to fork and test. Please wait, we'll set up a

Tanya Prasad 33 Sep 26, 2022