farwayer / mst-decorators Goto Github PK

We're evaluating using this library for a large project and I'm having some trouble getting started. My existing model is fairly simple:

export const FeatureStoreModel = types
  .model('Feature', {
    status: types.optional(
      types.enumeration<LoadStatus>(Object.values(LoadStatus)),
      LoadStatus.None,
    ),
    features: types.array(types.frozen<Feature>()),
  })
  .actions((self) => ({
    importFeatures: (features: Feature[]) => {
      self.status = LoadStatus.Complete;
      self.features.replace(features);
    },
  }));

LoadStatus is a TS enumeration, and Feature is a fairly complex TypeScript interface which comes from a automated api-type-generator (i.e. I don't want to have to copy it or modify it). When I do what I thought was the simple translation:

class FeatureStore {
  @enumeration(LoadStatus) status
  @array(@frozen(Feature)) features
}

I get an error that "Feature is used as a type when a value is expected." I assume that it's because Feature is supposed to be annotated with decorators just like FeatureStore is?

The prepack script fails on Windows, due to multiple issues:

1. Use of the rm command.

Solution: add shx as a dev-dependency, and have the script call shx rm instead: https://github.com/shelljs/shx

2. Use of ESM=1 to set an environment variable.

Solution: use cross-env: https://github.com/kentcdodds/cross-env

In this example:

@model class User extends BaseUser {
  @maybe(str) phone
  @maybe(str) firstName
  @maybe(str) lastName
  
  // view
  get fullName() {
    if (!this.firstName && !this.lastName) return
    if (!this.lastName) return this.firstName
    if (!this.firstName) return this.lastName
    return `${this.firstName} ${this.lastName}`
  }

  // view with parameter
  // we need @view to distinguish it from actions
  @view prefixName(prefix) {
    return `${prefix} ${this.fullName}`
  }

  // action
  setPhone(phone) {
    this.phone = phone
  }
}

Is it possible to have the setPhone setter be expressed more concisely as:

  @maybe(str) @setter phone

?

Sorry for spam, but i have some one question.

I was try to connect models defined with you decorators with root store, but get an error.

• model

import {
   model, ref, bool, maybe, id, map
} from 'mst-decorators'

@model class BaseUser {
 @id userId
 @str login
}

@model class UserModel extends BaseUser{
 @maybe(str) firstName
 @maybe(str) secondName
 @maybe(str) phone
 @maybe(str) email
}

const User = maybe(ref(UserModel))

@model class UsersModel {
 @map(User) users
}

const Users = maybe(ref(UsersModel))

export {
 User,
 UserModel,
 Users,
 UsersModel
}

• Root store

import { types, Instance } from "mobx-state-tree"
import { Settings, SettingsModel, Setting, SettingModel } from "./Settings"
import { User, UserModel, Users, UsersModel } from "./User"


export const RootStore = types.model("RootStore", {
    users: Users,
})

export type RootStoreModel = Instance<typeof RootStore>
export type RootStoreEnv = {
    users: UsersModel
}

• error:

Invalid type definition for property 'users', it looks like you passed a function. Did you forget to invoke it, or did you intend to declare a view / action?

Can you help? or extend documentation? Thanks

Hi, Thanks for you library. Many projects and companies use TypeScript instead native JavsScript. But TypeScript modules require additional @types/youmodule libraty with type definitions. If you have any plans about develops and maintain this library. The good idea include this @types into you library.
Thanks!