mobx-vm-entities

mobx-view-model

MobX ViewModel power for ReactJS

What package has

ViewModelImpl, ViewModel

It is a class that helps to manage state and lifecycle of a component in React.

ViewModelStoreImpl, ViewModelStore

It is store for managing view models.
P.S not required entity for targeted usage of this package, but can be helpful for accessing view models from everywhere by view model id or view model class name.

useCreateViewModel(VM, payload, config)

Creates ViewModel instance.
Using in withViewModel() HOC.

useViewModel()

Hook that helps to get access to your view model in React.
Possible usage:
- useViewModel<YourViewModel>() - using generic to define type of returning view model instance
- useViewModel<YourViewModel>(id) - using id to define specific identifier of returning view model instance and generic for the same as above usage

withViewModel()()

Required for usage HOC that connects your ViewModel class with View (React Component)

Usage

1. Simple

import { View } from "./view";
import { Model } from "./model";

export const Component = withViewModel(Model)(View?)  

...

<Component />

2. Custom factory

Advanced usage that needed to create your own implementations of withViewModel HOC, ViewModelStore and ViewModel

import { View } from "./view";
import { Model } from "./model";

export const Component = withViewModel(Model, {
  factory: (config) => {
    // also you can achieve this your view model store implementation
    return new config.VM(rootStore, config);
  }
})(View?)  

...

<Component />

withLazyViewModel()()

Optional for usage HOC that doing the same thing as withViewModel, but fetching ViewModel and View "lazy"

ViewModelsConfig

Additional configuration for all view models creating using library.
You can override default global config using import viewModelsConfig. You should do this before start whole app

import { viewModelsConfig } from "mobx-view-model"

viewModelsConfig.startViewTransitions = {
  mount: false,
  payloadChange: false,
  unmount: false,
};

Usage

Simple

import { ViewModelProps, ViewModelImpl, withViewModel } from 'mobx-view-model';

export class MyPageVM extends ViewModelImpl<{ payloadA: string }> {
  @observable
  accessor state = '';

  mount() {
    super.mount();
  }

  didMount() {
    console.info('did mount');
  }

  unmount() {
    super.unmount();
  }
}

const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
  return <div>{model.state}</div>;
});

export const MyPage = withViewModel(MyPageVM)(MyPageView);

<MyPage payload={{ payloadA: '1' }} />

Detailed Configuration

1. Make your own ViewModelStore implementation

// view-model.store.impl.ts
import {
  AbstractViewModelParams,
  AbstractViewModelStore,
  ViewModel,
  ViewModelCreateConfig,
} from 'mobx-view-model';

export class ViewModelStoreImpl extends AbstractViewModelStore {
  constructor(protected rootStore: RootStore) {
    super();
  }

  createViewModel<VM extends ViewModel<any, ViewModel<any, any>>>(
    config: ViewModelCreateConfig<VM>,
  ): VM {
    const VM = config.VM;
    // here is you sending rootStore as first argument into VM (your view model implementation)
    return new VM(this.rootStore, config);
  }
}

2. Make your own ViewModel implementation with sharing RootStore

// view-model.ts
import { ViewModel as ViewModelBase } from 'mobx-view-model';

export interface ViewModel<
  Payload extends AnyObject = EmptyObject,
  ParentViewModel extends ViewModel<any> = ViewModel<any, any>,
> extends ViewModelBase<Payload, ParentViewModel> {}

// view-model.impl.ts
import { AbstractViewModel, AbstractViewModelParams } from 'mobx-view-model';
import { ViewModel } from './view-model';

export class ViewModelImpl<
    Payload extends AnyObject = EmptyObject,
    ParentViewModel extends ViewModel<any> = ViewModel<any>,
  >
  extends AbstractViewModel<Payload, ParentViewModel>
  implements ViewModel<Payload, ParentViewModel>
{
  constructor(
    protected rootStore: RootStore,
    params: AbstractViewModelParams<Payload>,
  ) {
    super(params);
  }

  get queryParams() {
    return this.rootStore.router.queryParams.data;
  }

  protected getParentViewModel(
    parentViewModelId: Maybe<string>,
  ): ParentViewModel | null {
    return this.rootStore.viewModels.get<ParentViewModel>(parentViewModelId);
  }
}

3. Add ViewModelStore into your RootStore

import { ViewModelStore } from 'mobx-view-model';
import { ViewModelStoreImpl } from '@/shared/lib/mobx';


export class RootStoreImpl implements RootStore {
  viewModels: ViewModelStore;

  constructor() {
    this.viewModels = new ViewModelStoreImpl(this);
  }
}

4. Create View with ViewModel

import { ViewModelProps, withViewModel } from 'mobx-view-model';
import { ViewModelImpl } from '@/shared/lib/mobx';

export class MyPageVM extends ViewModelImpl {
  @observable
  accessor state = '';

  async mount() {
    // this.isMounted = false;
    await this.rootStore.beerApi.takeBeer();
    super.mount(); // this.isMounted = true
  }

  didMount() {
    console.info('did mount');
  }

  unmount() {
    super.unmount();
  }
}

const MyPageView = observer(({ model }: ViewModelProps<MyPageVM>) => {
  return <div>{model.state}</div>;
});

export const MyPage = withViewModel(MyPageVM)(MyPageView);

Project examples

• HTTP Status Codes
  Links:

  • Source: https://github.com/js2me/http-status-codes
  • GitHub Pages: https://js2me.github.io/http-status-codes/#/

• Time Tracker app
  Links:

  • Source: https://github.com/js2me/time-tracker-app
  • GitHub Pages: https://js2me.github.io/time-tracker-app/