Dapper

Hello Stackers, Dapper is a blazing fast and lightweight framework for managing state in a Javascript app.

Features

• 💨 Fast − Our APIs just run lightning fast, no more slowdowns.
• 🔋 Efficient – To reduce the consumption of energy, we have optimised it.
• ⛑ Type Safe – To prevent type errors and bugs, we have made the framework type-safe.
• 🛳 Portable – This framework works accorss web and Node environments. You can use this library together with React or any other Javascript UI libraries.
• 😵 Tiny (>2kb) – Too much lightweight, no more large bundle sizes
• 🤓 Extensible – Extend the State class to create your own custom state object.

Installation

You can install this package using NPM, Yarn or PNPM using the specific command.

NPM

npm i @thq/dapper

Yarn

yarn add @thq/dapper

PNPM

pnpm add @thq/dapper

Documentation

APIs

State

The State class is the main API that powers all of the other APIs. You can create your own custom state class by extending this one. This API introduces a whole another world of possibilities and provides more flexibility and customasibility.

Classic

const name = new State(10);

name.onChange = newValue => {
    console.log(newValue());
};

Extended State:

import { State, createState } from '@thq/dapper';

class CredentialsStore extends State<string> {
    verifyValue(value: string) {
        return value.length > 5;
    }

    // You can also override other methods like
    get() {}
    set() {}

    onChange = newValue => {};

    // You could also add a custom action
    // to organise your code.
    fetchData() {}
}

// you can call the actions inside your state
const name = createStateWith(
    CredentialsStore('some-name')
);

nameInstance.get();

createState()

Creates a new State object and returns an instance of it. This function is just a simplified form of the State class. If you wanna read about the usage, you might need to checkout the State API.

Usage:

const isPrivate = createState(false);

isPrivate.get();

isPrivate.set(true);

With Initial Effect:

const isPrivate = createState(false);

createStateWith()

Alternative to the createState() API but instead also adds support for extensibility of a custom state class. Althought the return value of this function is same as the createState() API, the function doesn’t expect a value directly and instead the instance of the extended class. But you can pass the initialEffect as the second argument.

class CustomClass<T> extends State<T> {
    ...
}

const state = createStateWith(
    new CustomClass(...)
);

Okay that’s All folks, for the full doc please refer here..