A very simple state management library.

Overview

DoxJS

DoxJS is a very easy state management library, it's written in Typescript.

document

Install

yarn

yarn add doxjs

npm

npm install doxjs

Term

listener is used to monitor changes in data, and listener is called when the data changes. action is used to generate data changes. In general, data changes should not be produced in listener, and also in action, data should not be monitored.

API

dox = new DoxJS(target: T extends object);

Generating a DoxJS instance, you should notice that target should be an object, not string,array, etc.

    let dox = new DoxJS({
        name: "Double Dimos",
        age: 20,
        information: {
            sex: "male",
            weight: "55kg",
            height: "1.7m"
        },
        interesting: ["game", "animate", "film", "music", "food"]
    });

dox.observe(): DoxProxy;

dox.observe() will return a DoxProxy instance. Say again, you just need to treat DoxProxy as target which you passed to new DoxJS(target).

When you change the variables on the DoxProxy, the subscriped function that uses these variables will be called.

For arrays, we provide a partial mutation method, which you can see in core.ts. You can manually call Array.prototype for mutable methods that are not provided.

    let store = dox.observe();

    console.log(store);
    /*
    will print in the console
    {
        name: "Double Dimos",
        age: 20,
        information: {
            sex: "male",
            weight: "55kg",
            height: "1.7m"
        },
        interesting: ["game", "animate", "film", "music", "food"]
    }
    */

dox.bindActions(actions: { [key: string]: Function })

dox.bindActions(actions) is using for binding some actions. This API needs to be used in conjunction with dispatch. Focus on below example.

    let dox = new DoxJS({
        value: 0
    });

    /* actions should be [key:stirng]: DoxCallback */
    const actions = {
        inc: (store, value = 1) => {
            store.value += value
        },
        dec: (store, value = 1) => {
            store.value -= value;
        }
    }

    dox.bindActions(actions);
    // the you can use `dox.dispatch`, see document of `dispatch` for more information

dox.dispatch(action: string, ...args: any[])

After you have called dox.bindActions, you can use dispatch to dispatch an action with some argumets. See example above. First parameter is the name of the action, followed by optional parameters. These parameters will be passed to the specified action event.

DoxProxy can only be obtained by dox.observe(). dox is the instance of DoxJS.

    /* after you called `bindActions` */

    dox.subscribe((store) => {
        console.log(`now, value is ${store.value}`);
    });

    dox.dispatch("inc", 2);//now, value is 2
    dox.dispatch("dec", 3);// now, value is -1

dox.bindListeners(listeners: { [key: string]: (store: T) => void });

Using for binding listeners. This API needs to be used in conjunction with subscribe. See below example:

const listeners = {
    display: function(store) {
        // `this` is `document` here, why? see below example of second useage of `subscribe`
        this.appendChild(`<h3>${store.value}</h3>`);
    }
}

dox.bindListeners(listeners);

Something you should know is that listener shouldn't be an arrow function. Why? Because dox uses Function.prototype.bind to apply this, but arrow function can't redefine this.

dox.subscribe(listener: {(store: T) => void}, excuteLater?: boolean = false);

subscribe a listener. listener should be an callback function. When the callback function is called, it will accept a DoxProxy as parameter. DoxProxy is same as target, but DoxProxy is redefined, you needn't know how it works. You just need treat DoxProxy as target which you passed to new DoxJS(target). When will the callback function be called? When the dependent variable in the callback function changes.

 // bind an `listener` no matter whether you called `bindListeners` or not.
 // you can use arrow function here
dox.subscribe((store) => {
    console.log(store.value);
});

excuteLater is a boolean, it was set up as false by default. If you pass excuteLater as true, subscribe will return a function. You can manually call the returned function. So why keep this parameter? It's easy to understand. Because when you subscribe a function, this function will be called immediately by default. Why? Because DoxJS needs to determine which variables are referenced in current subscribed function, so that it can be called again when these variables change.

    let dox = new DoxJS({
        value: 0
    });

    dox.subscribe((store) => {
        console.log(store.value);
    }); // it will run immediately


    // it's same with codes above

    let fn = dox.subscribe((store) => {
        console.log(store.value);
    }, true); // it will not run immediately unless you call fn

    fn();

dox.subscribe(listenerName: string, excuteLater: boolean = false, context: C);

This API needs to be used in conjunction with bindListeners.

There are two methods of calling subscribe. If first parameter is an callback function, it means that you subscribe a listener. If first parameter is a string, subscribe will try to search the callback function that corresponds to this listenerName. Where to search it? That's the useage of bindListeners.

The third parameter is using for binding context for callback function. It is valid only when the first parameter is ListenerName. This parameter works when you want to use the this variable in the callback function. See example of bindListeners.

// this API should be called after you called `bindListeners`
// focus on the third parameter, now you can understand why `this` in callback function named `display` is document
dox.subscribe("display", false, document);

dox.subscribe(callback: Function, excuteLater?: boolean = false);

Callback function don't rely on any variable in DoxProxy, and doxjs will not pass store to the callback function. And the callback function will excute when any variable of DoxProxy changes. As if it relied on all variables of DoxProxy.

    // you can see, the callback function don't rely on any variable
    // and it will be called when any variable changes
    dox.subscribe(() => {
        console.log(`data changed at ${(new Date()).toLocaleString()}`);
    });

an example

a tiny example showing useage of DoxJS, click here

You might also like...
:rabbit2: A tiny, light and handy state management for vuejs 2, writing less verbose code.

revuejs 🐇 A tiny, light and handy state management for vuejs 2, writing less verbose code. Installation Install the pkg with npm: npm install revuejs

A light and easy shared state management plugin for Vue

vue-shared vue-shared is a tiny (~150 lines) vue plugin for shared state management, that can be used as an alternative to Vuex. It adds a new vue opt

State management system for Vue.js

Vue States Vue States is a state management system for Vue.js. Checkout the examples at https://github.com/JohannesLamberts/vue-states-examples. You m

Local state management within Vuex

vuex-local Local state management within Vuex Why? Global state management is one of the problems on huge application development. Developers address

Simplify vuex loading state management

vuex-loading Simplify vuex loading state management Installing Using npm: $ npm install vuex-loadings -s Know Simplify vuex loading state management n

A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

A find Coach is a vue state management project that allows users to find coach to mentor a student

A find Coach is a vue state management project that allows users to find coach to mentor a student. A simple vue app with routing functionality and vuex management for solid SPA

Type-safe reactive state management

rxsv Framework agnostic minimal state management library based on RxJS, heavily inspired by Redux and Redux-Observable with limited boilerplate and Ty

Helper functions to ease working with Vuex, Centralized State Management for Vue.js.

vuex-helpers Helper functions to ease working with Vuex, Centralized State Management for Vue.js. Development The following examples use docker and do

Owner
dimos
blablabla
dimos
Lightweight vuex inspired centralized state management library for all kinds of javascript applications. Great for React Native.

Verx Lightweight vuex inspired centralized state management library for all kinds of javascript applications. install npm install --save verx # yarn a

Jaynti Kanani 3 Nov 4, 2019
A state management library for React combined immutable, mutable and reactive mode

Welcome to bistate ?? Create the next immutable state tree by simply modifying the current tree bistate is a tiny package that allows you to work with

工业聚 119 Jan 8, 2023
A state management library for react inspired by vue 3.0 reactivity api and immer

Welcome to costate ?? A state management library for react inspired by vue 3.0 reactivity api and immer costate is a tiny package that allows you to w

工业聚 7 Mar 29, 2022
A library providing Vue applications with asynchronous-first state management

OverVue OverVue is a stream-based persistent state management library for Vue built on RxJS observables. While Vuex provides a robust option for handl

null 49 Apr 28, 2022
A tiny state management library for Vue Composition API.

vue-unstated A tiny state management library for Vue Composition API based on unstated-next which is for React. ?? Demo ?? Installation $ npm install

Xuesu Li 30 Jan 28, 2023
Simple, unopinionated, lightweight and extensible state management for Vue 3

Simple, unopinionated, lightweight and extensible state management for Vue 3

Andrew Courtice 466 Dec 30, 2022
Simple counter with Vue.js and Vuex as state management

vuex-counter Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

Kevin Hamdajani 0 Dec 30, 2021
State Management made eXtraordinarily simple and effective for Angular, React, and Vue

XSM - State Management made eXtraordinarily simple and effective for Angular, React, Vue, and Svelte. ?? Homepage Demos Angular React Svelte Vue Realw

Peter Lu 138 Sep 21, 2022
🗃️ Centralized State Management for Vue.js.

Vuex ?? HEADS UP! You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, please check out 4.0 branch. Vuex is a state management pat

vuejs 27.9k Dec 30, 2022
Elm-inspired Application State Management for Vue.js.

VuElm It's a Vue state management inspired by Elm architecture. Concepts There are basically four elements on Elm architecture: Model, Actions, Update

Keuller Magalhães 36 May 5, 2021