stated-bean

stated-bean

A light but scalable state management library with react hooks.

It is the ViewModel in the MVVM.

TOC

• Features
• Online Demo
• Usage
• API
  • Decorators
    • StatedBean
    • Stated
    • AfterProvided
    • Effect
  • use Hooks
    • useBean
    • useInject
      • Get the instance from the container in the React Context
      • Create the temporary instance for current Component
      • UseStatedBeanOption
    • useObserveEffect
  • Provider
    • <StatedBeanProvider {...props: StatedBeanProviderProps} />
• License

# yarn
yarn add stated-bean

# npm
npm i stated-bean

Features

• OOP: easy to integrate with DI(dependency inject) framework together
• Familiar API: just provider and hooks
• Small size:
• Written in TypeScript

Online Demo

GitHub Pages: Integration with injection-js

Usage

Plain object StatedBean

import { useBean } from 'stated-bean';

const CounterModel = {
  count: 0,
  decrement() {
    this.count--;
  },
  increment() {
    this.count++;
  },
};

function CounterDisplay() {
  const counter = useBean(() => CounterModel);

  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}

Class StatedBean

import { StatedBean, Stated useBean } from 'stated-bean';

@StatedBean()
class CounterModel {
  @Stated()
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

function CounterDisplay() {
  const counter = useBean(CounterModel);

  return (
    // ...
  );
}

API

Decorators

StatedBean

Signature: @StatedBean(name?: string | symbol): ClassDecorator

Indicates that an annotated class is a StatedBean. The name may indicate a suggestion for the bean name. Its default value is Class.name.

Stated

Signature: @Stated(): PropertyDecorator

Indicates that an annotated property is Stated. Its reassignment will be observed and notified to the container.

AfterProvided

Signature: @AfterProvided(): MethodDecorator

The AfterProvided decorator is used on a method that needs to be executed after the StatedBean be instanced to perform any initialization.

Effect

Signature: @Effect(name?: string | symbol): MethodDecorator

The Effect decorator is used on a method that can get the execution state by useObserveEffect.

use Hooks

useBean

Signature: useBean<T>(typeOrSupplier: ClassType<T> | () => T, name?: string | symbol): T

The useBean will create an instance of the stated bean with a new StatedBeanContainer and listen for its data changes to trigger the re-rendering of the current component.

useInject

Signature: useInject<T>(type: ClassType<T>, option: UseStatedBeanOption<T> = {}): T

The useInject will get the instance of the stated bean from the StatedBeanContainer in the context and listen for its data changes to trigger the re-rendering of the current component.

UseStatedBeanOption

option = {
  name: string | symbol;   // get/create the instance with special name
  dependentFields: Array<string | symbol>;   // do re-render when the special property changed
};

useObserveEffect

Signature: useObserveEffect(bean: StatedBeanType, name: string | symbol): EffectAction

observe the execution state of the method which with @Effect.

@StatedBean
class UserModel {
  @Effect()
  fetchUser() {
    // ...
  }
}

const UserInfo = () => {
  const model = useBean(() => new UserModel());
  const { loading, error } = useObserveEffect(model, 'fetchUser');
  // ...
};

Provider

<StatedBeanProvider {...props: StatedBeanProviderProps} />

The StatedBeanProvider is responsible for creating an instance of the stated bean and dispatching an event after data changes.

StatedBeanProviderProps

interface StatedBeanProviderProps {
  types?: ClassType[];
  beans?: Array<StatedBeanType<unknown>>;
  beanProvider?: BeanProvider;
  application?: StatedBeanApplication;
}

License

MIT

Changelog

0.8.2 (2019-10-16)

Bug Fixes

• 🐛 bean object is not correctly gc after component unmount (81847a1)