feat: add withLazyViewModel extra overload for better DX

Author: js2me

.changeset/cruel-poems-greet.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+new overload for withLazyViewModel HOC for better DX (+ add docs for this)

docs/react/api/use-create-view-model.md

@@ -5,7 +5,7 @@ Using in [`withViewModel()`](/react/api/with-view-model) HOC.
 ## API Signature
 ```tsx
 function useCreateViewModel<VM extends AnyViewModel>(
-  ViewModelClass: Constructor<VM>,
+  ViewModelClass: Class<VM>,
   payload?: ViewModelPayload<VM>,
   config?: UseCreateViewModelConfig<VM>
 ): VM;

docs/react/api/with-lazy-view-model.md

@@ -8,12 +8,12 @@ This HOC is using [react-simple-loadable](https://www.npmjs.com/package/react-si
 
 ## API Signature
 ```tsx
-function withLazyViewModel<VM extends AnyViewModel>(
+function withLazyViewModel<TViewModel extends AnyViewModel>(
   loadFn: () => Promise<{
-    Model: Constructor<VM>,
-    Component: ComponentType<ComponentProps & ViewModelProps<VM>>
+    Model: Class<TViewModel> | Promised<Class<TViewModel>>,
+    Component: TView | Promised<TView>
   }>,
-  config?: ViewModelHocConfig<VM>
+  config?: ViewModelHocConfig<TViewModel>
 ): ComponentWithLazyViewModel
 ```
 
@@ -41,7 +41,9 @@ import { ViewModelProps } from "mobx-view-model";
 import { observer } from "mobx-react-lite";
 import { FruitButtonHugeVM } from "./model";
 
-export const FruitButtonView = observer(({ model }: ViewModelProps<FruitButtonHugeVM>) => {
+export const FruitButtonView = observer(({
+  model
+}: ViewModelProps<FruitButtonHugeVM>) => {
   return (
     <div>
       <button onClick={model.handleButtonClick}>click me</button>
@@ -55,17 +57,27 @@ And connect them together with lazy loading this modules using this HOC
 ```tsx title="index.ts"
 import { withLazyViewModel } from "mobx-view-model";
 
-export const FruitButton = withLazyViewModel(
-  async () => {
-    const [{ FruitButtonHugeVM }, { FruitButtonView }] = await Promise.all([
-      import("./model"),
-      import("./view"),
-    ])
-    
-    return {
-      Model: FruitButtonHugeVM,
-      View: FruitButtonView,
-    }
-  },
-)
+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   
+
+```tsx
+... // 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"),
+  }
+})
+```
+

docs/react/api/with-view-model.md

@@ -5,7 +5,7 @@ A Higher-Order Component that connects React components to their [ViewModels](/a
 ## API Signature
 ```tsx
 function withViewModel<VM extends AnyViewModel>(
-  ViewModelClass: Constructor<VM>,
+  ViewModelClass: Class<VM>,
   config?: ViewModelHocConfig<VM>
 ):
   (Component: ComponentType<ComponentProps & ViewModelProps<VM>>) =>

package.json

@@ -48,8 +48,8 @@
     "url": "git://github.com/js2me/mobx-view-model"
   },
   "dependencies": {
-    "react-simple-loadable": "^2.3.7",
-    "yummies": "^4.0.0"
+    "react-simple-loadable": "^2.3.8",
+    "yummies": "^4.2.6"
   },
   "peerDependencies": {
     "mobx": "^6.12.4",

pnpm-lock.yaml

@@ -1,8 +1,9 @@
 import { ComponentProps, ComponentType } from 'react';
+import { PackedAsyncModule, unpackAsyncModule } from 'yummies/imports';
 
 import { viewModelsConfig } from '../config/global-config.js';
 import { loadable, LoadableMixin } from '../lib/react-simple-loadable.js';
-import { Class } from '../utils/types.js';
+import { Class, MaybePromise } from '../utils/types.js';
 import { AnyViewModel } from '../view-model/index.js';
 
 import {
@@ -15,8 +16,8 @@ export interface LazyViewAndModel<
   TViewModel extends AnyViewModel,
   TView extends ComponentType<any>,
 > {
-  Model: Class<TViewModel>;
-  View?: TView;
+  Model: Class<TViewModel> | PackedAsyncModule<Class<TViewModel>>;
+  View?: TView | PackedAsyncModule<TView>;
 }
 
 export type ComponentWithLazyViewModel<
@@ -33,7 +34,7 @@ export function withLazyViewModel<
   TViewModel extends AnyViewModel,
   TView extends ComponentType<any>,
 >(
-  loadFunction: () => Promise<LazyViewAndModel<TViewModel, TView>>,
+  loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
   config?: ViewModelHocConfig<any>,
 ): ComponentWithLazyViewModel<TViewModel, TView> {
   const patchedConfig: ViewModelHocConfig<any> = {
@@ -48,7 +49,12 @@ export function withLazyViewModel<
     patchedConfig?.fallback ?? viewModelsConfig.fallbackComponent;
 
   const lazyVM = loadable(async () => {
-    const { Model, View } = await loadFunction();
+    const { Model: ModelOrAsync, View: ViewOrAsync } = await loadFunction();
+    const [Model, View] = await Promise.all([
+      unpackAsyncModule(ModelOrAsync),
+      unpackAsyncModule(ViewOrAsync),
+    ]);
+
     return withViewModel(Model, patchedConfig)(View);
   }, fallbackComponent) as ComponentWithLazyViewModel<TViewModel, TView>;