Skip to content
A light but scalable view-model library with react hooks
TypeScript CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Release/0.8.3 (#127) Nov 21, 2019
src fix: 🐛 ts type check fail when class has constructor with param (#132) Nov 26, 2019
test
.commitlintrc
.editorconfig
.eslintignore
.eslintrc
.gitconfig
.gitignore
.huskyrc.js chore: use union configurations, improve build flow and umd package (#46 Sep 1, 2019
.lintstagedrc.js
.prettierrc.js Release/0.8.3 (#127) Nov 21, 2019
.remarkrc
.renovaterc
.travis.yml
.versionrc
.yarnrc
CHANGELOG.md chore(release): 0.8.4 Nov 26, 2019
LICENSE feat(Docs): update README & add license Aug 13, 2019
README.md
codechecks.yml
deploy.sh
jest.config.js
package.json
tsconfig.json
yarn.lock Release/0.8.3 (#127) Nov 21, 2019

README.md

stated-bean

Travis Codecov type-coverage npm GitHub release

David Peer David David Dev

Conventional Commits code style: prettier codechecks.io

A light but scalable view-model library with react hooks.

TOC

# 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: npm bundle size npm bundle size
  • Written in TypeScript

Online Demo

GitHub Pages: Integration with injection-js

Usage

Define a StatedBean

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>
  );
}

function App() {
  return (
    <StatedBeanProvider>
      <CounterDisplay />
    </StatedBeanProvider>
  );
}

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 (
    // ...
  );
}

Singleton and Named StatedBean

The named bean singleton bean can be resolved via useInject with the special name.

Define a named bean

@StatedBean('SpecialName')
class NamedBean {}

@StatedBean({ singleton: true })
class SingletonBean {}

Declare as a named bean by useBean

const model = useBean(CounterModel, { name: 'SpecialName' });

Provider container and inject the singleton bean

The beans was stored in the StatedBeanContainer witch be created by the StatedBeanProvider and bind to the React context. useInject will find the named bean from the container or it's parent container.

@StatedBean({ singleton: true })
class UserModel {
  @Stated()
  user = { name: 'jack' };
}

function App() {
  return (
    <StatedBeanProvider providers={[UserModel]}>
      <UserDisplay />
    </StatedBeanProvider>
  );
}

function UserDisplay() {
  const model = useInject(UserModel);

  return model.user.name;
}

Auto inject and watch the props

@StatedBean()
class InputModel implements InitializingBean {
  @Props('initialValue')
  @Stated()
  value: number;

  @ObservableProps()
  value$: BehaviorSubject<number>;

  afterProvided() {
    this.value$.subscribe(v => {
      this.value = v;
    });
  }
}

function Input(props: InputProps) {
  const model = useBean(InputModel, { props });

  return (
    // input component
  );
}

Effect action state and observer

@StatedBean()
class SearchModel {

  @Effect()
  search() {
    return fetchUsers();
  }
}

const UserTable() {
  const model = useBean(SearchModel);
  const { loading, error } = useObserveEffect(model, "search");

  if (loading) {
    return <Loading />;
  }
  return (
    // ...user table
  );
}

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.

Props and ObservableProps

Signature: @Props(name?: string): PropertyDecorator @ObservableProps(name?: string): PropertyDecorator

The Props decorator is used on a property that can sync the value from props. The ObservableProps decorator is used on a BehaviorSubject property. You can subscribe the next new props value.

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.

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

You can’t perform that action at this time.