withLazyViewModel HOC

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

TIP

This HOC is using react-simple-loadable package

API Signature

function withLazyViewModel<TViewModel extends AnyViewModel>(
  loadFn: () => Promise<{
    Model: Class<TViewModel> | Promised<Class<TViewModel>>,
    Component: TView | Promised<TView>
  }>,
  config?: ViewModelHocConfig<TViewModel>
): ComponentWithLazyViewModel

Usage

Let's create a ViewModel with a lot blocks of code

import { ViewModelBase } from "mobx-view-model";

export class FruitButtonHugeVM extends ViewMOdelBase {
  ... // large of code lines

  handleButtonClick = () => {
    //...
  }
}

Create a View component

import { ViewModelProps } from "mobx-view-model";
import { observer } from "mobx-react-lite";
import { FruitButtonHugeVM } from "./model";

export const FruitButtonView = observer(({
  model
}: ViewModelProps<FruitButtonHugeVM>) => {
  return (
    <div>
      <button onClick={model.handleButtonClick}>click me</button>
    </div>
  )
})

And connect them together with lazy loading this modules using this HOC

import { withLazyViewModel } from "mobx-view-model";

export const FruitButton = withLazyViewModel(() => {
  return {
    Model: import("./model").then(m => m.FruitButtonHugeVM),
    View: import("./view").then(m => m.FruitButtonView),
  }
})

Also you can use "default" exports if you need

... // model.ts
export default class MyVM extends ViewModelBase {}
... // view.tsx
export default function MyView() { return <div>1</div> }
... // index.ts
export const MyComponent = withLazyeViewModel(() =>{
  return {
    Model: import("./model"),
    View: import("./view"),
  }
})