mobx-state-tree-ts-classes v1.0.0

mobx-state-tree-ts-classes

mobx-state-tree-ts-classes is a npm package to write typescript model classes for mobx-state-tree.

Installation

Use the npm install command to install mobx-state-tree-ts-classes.

npm install mobx-state-tree-ts-classes

Add a new script in your "package.json" file:

{
  "scripts": {
    ...
    "mobx-state-tree-ts-classes": "node node_modules/mobx-state-tree-ts-classes"
  }
}

Enable the "experimentalDecorators" option in your "tsconfig.json":

{
  "compilerOptions": {
    "target": "es2016",                                  
    "lib": ["es6"],
    "experimentalDecorators": true
    ...
   }
}

Usage

Open a new terminal from the root of your project and type:

npm run mobx-state-tree-ts-classes

A background process starts and watches the folder "mst", inside the folder "src". When a file "*.ts" is modified, a new file named "exported-mst.ts" is created (or updated if it already exists). In this file your typescript classes are transformed in valid mobx-state-tree models that you can use in your application. Your ready to use models will be exported in the bottom part of "exported-mst.ts" file:

...
export { ProductModel };

export interface OptionMst extends Instance<typeof OptionModel> {}
export interface ProductMst extends Instance<typeof ProductModel> {}

Do not edit the generated file "exported-mst.ts" because all the manual modifications will be lost.

The first thing to do to create your models is to define a class that acts as Root of the mobx-state-tree model, and put it in "mst" folder inside "src" folder.

Define a rootTree

To define a root model class, use the "rootTree" decorator:

import { rootTree } from "mobx-state-tree-ts-classes";

@rootTree
export class Product {
  name: string;
  description: string;

  constructor() {
    this.name = "";
    this.description = "";
  }  
}

All fields declared in the class will be converted as leaves in mobx-state-tree model. To use mobx-state-tree internal types place the "//@ts-ignore" decorator to avoid typescript compilation errors:

export class Option {
  //@ts-ignore
  id: types.identifier;
  name: string;
  value: string;

  constructor() {
    this.id = "";
    this.name = "";
    this.value = "";
  }
}

Define a Child Node

To declare a child node, declare a class, and use it as a field in the parent node. Put the class inside the "mst" folder.

export class Option {
  name: string;
  value: string;

  constructor() {
    this.name = "";
    this.value = "";
  }
}

And then refer it in the parent node class:

import { rootTree } from "mobx-state-tree-ts-classes";
import { Option } from "./option";

@rootTree
export class Product {
  name: string;
  description: string;
  options: Option[];

  constructor() {
    this.name = "";
    this.description = "";
    this.options = [];
  }
}

Define an Action

To define an Action, use the "action" decorator:

import { action } from "mobx-state-tree-ts-classes";

export class Product {
  name: string;

  constructor() {
    this.name = "";
  }

  @action()
  setName(name: string): void {
    this.name = name;
  }
}

If you need to call the mobx-state-tree internal state functions like "applySnapshot" you need to place the "//@ts-ignore" attribute to avoid typescript compilation error:

@action()
setName(name: string): void {
  this.name = name;
  const newOption = { ...this };
  newOption.name = "new name";
  //@ts-ignore
  applySnapshot(this, newOption);
}

Define a View

To define a View, use the "view" decorator:

import { view } from "mobx-state-tree-ts-classes";

export class Product {
  options: Option[];

  constructor() {
    this.options = [];
  }

  @view()
  optionList(): string {
    return this.options.map((o) => `"${o.name}" option with value "${o.value}"`;
  }
}

License

MIT