Package Exports

mota
mota/dist/mota-cjs.js
mota/dist/mota-es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mota) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Overview

Mota is a "lightweight and responsive" state management library, which is less than 5KB. Developers can use it to write "almost framework independent pure js/ts business models", and then use Mota to simply let react components respond to model changes.

Install

Install through NPM as follows

$ npm install mota --save

Usage

Example 1: Hello Mota

import { observable, observer } from "mota";

const model = observable({ count: 0 });
const add = ()=>model.count++;

const View1 = observer(() => {
  return <div>{model.count}</div>;
});

const View2 = observer(() => {
  return <div>
    <span>{model.count}</span>
    <button onClick={add}>click<button>
  </div>;
});

Example 2: Using useObservable

import { observer, useObservable } from "mota";

const View = observer(() => {
  const model = useObservable({ count: 0 });
  return <div>
    <span>{model.count}</span>
    <button onClick={()=>model.count++}>click<button>
  </div>;
});

Example 3: Using useComputed

import { observer, observable, useComputed } from "mota";

const user = observable({ 
  firstName: 'Feng',
  lastName: 'Hou'
});

const View = observer(() => {
  // The fullName will be cached and responsive
  const fullName = useComputed(()=>{
    return `${user.firstName} ${user.lastName}`;
  });
  return <div>{fullName}</div>;
});

Example 4: Using useAutoRun

import { observer, observable, useAutoRun } from "mota";

const model = observable({ count: 0 });

const View = observer(() => {
  // When the count changes, 
  // it will be automatically re executed and printed 'count: n'
  useAutoRun(()=>{
    console.log('count:', model.count);
  });
  return <div>{model.count}</div>;
});

Example 5: Using useWatch

import { observer, observable, useWatch } from "mota";

const model = observable({ count: 0 });

const View = observer(() => {
  // When the result of the evaluation function changes,
  // the processing function is re executed.
  useWatch(()=>model.count%10, (oldValue, newValue)=>{
    console.log(`old: ${oldValue}, new: ${newValue}`);
  });
  return <div>{model.count}</div>;
});

Example 6: Using in class components

import { observer, observable, autorun, watch } from "mota";

const model = observable({ count: 0 });

@observer
class View extends React.Component {
  add = ()=> model.count++;

  componentDidMount(){
    this.destroyAutoRun = autorun(()=>{
      console.log('autorun count: ', model.count);
    });
    this.destroyWatch = watch(()=> model.count%10, ()=>{
      console.log('autorun count: ', model.count);
    });
  }

  componentWillUnmount(){
    this.destroyAutoRun();
    this.destroyWatch();
  }

  @computed get message(){
    return `count: ${model.count}`;
  }

  render() {
    return <div>
      <span>{this.message}</span>
      <button onClick={this.add}>click<button>
    </div>;
  }
}

Example 7: Using multiple instances in class components

import { observer, observable, autorun, watch } from "mota";

@observable
class Model {
  count = 0;
  add () {
    this.count++;
  }
  @computed get message(){
    return `count: ${model.count}`;
  }
}

@observer
class View extends React.Component {
  model = new Model();
  render() {
    return <div>
      <span>{this.model.message}</span>
      <button onClick={()=>this.model.add()}>click<button>
    </div>;
  }
}