feat: partial support simple VMs for withLazyViewModel HOC

Author: js2me

.changeset/neat-symbols-grin.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": minor
+---
+
+support `ViewModelSimple` for `withLazyViewModel` HOC

src/hoc/with-lazy-view-model.tsx

@@ -4,39 +4,45 @@ import { PackedAsyncModule, unpackAsyncModule } from 'yummies/imports';
 
 import { viewModelsConfig } from '../config/global-config.js';
 import { Class, Maybe, MaybePromise } from '../utils/types.js';
-import { AnyViewModel } from '../view-model/index.js';
+import { AnyViewModel, AnyViewModelSimple } from '../view-model/index.js';
 
 import {
   VMComponent,
   ViewModelHocConfig,
+  ViewModelSimpleHocConfig,
   withViewModel,
 } from './with-view-model.js';
 
 export interface LazyViewAndModel<
-  TViewModel extends AnyViewModel,
+  TViewModel extends AnyViewModel | AnyViewModelSimple,
   TView extends ComponentType<any>,
 > {
   Model: Class<TViewModel> | PackedAsyncModule<Class<TViewModel>>;
   View?: TView | PackedAsyncModule<TView>;
 }
 
 export type VMLazyComponent<
-  TViewModel extends AnyViewModel,
+  TViewModel extends AnyViewModel | AnyViewModelSimple,
   TView extends ComponentType<any>,
 > = VMComponent<TViewModel, ComponentProps<TView>> & LoadableMixin;
 
 /**
  * @deprecated use `VMLazyComponent` instead. Will be removed in next major release
  */
 export type ComponentWithLazyViewModel<
-  TViewModel extends AnyViewModel,
+  TViewModel extends AnyViewModel | AnyViewModelSimple,
   TView extends ComponentType<any>,
 > = VMLazyComponent<TViewModel, ComponentProps<TView>> & LoadableMixin;
 
 export interface LazyViewModelHocConfig<TViewModel extends AnyViewModel>
   extends ViewModelHocConfig<TViewModel>,
     Pick<LoadableConfig, 'loading' | 'preload' | 'throwOnError'> {}
 
+export interface LazyViewModelSimpleHocConfig<
+  TViewModel extends AnyViewModelSimple,
+> extends ViewModelSimpleHocConfig<TViewModel>,
+    Pick<LoadableConfig, 'loading' | 'preload' | 'throwOnError'> {}
+
 /**
  * A Higher-Order Component that **LAZY** connects React components to their ViewModels, providing seamless MobX integration.
  *
@@ -50,17 +56,52 @@ export function withLazyViewModel<
   configOrFallbackComponent?:
     | LazyViewModelHocConfig<NoInfer<TViewModel>>
     | LoadableConfig['loading'],
+): VMLazyComponent<TViewModel, TView>;
+
+/**
+ * A Higher-Order Component that **LAZY** connects React components to their ViewModels, providing seamless MobX integration.
+ *
+ * [**Documentation**](https://js2me.github.io/mobx-view-model/react/api/with-lazy-view-model.html)
+ */
+export function withLazyViewModel<
+  TViewModel extends AnyViewModelSimple,
+  TView extends ComponentType<any>,
+>(
+  loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
+  configOrFallbackComponent?:
+    | LazyViewModelSimpleHocConfig<NoInfer<TViewModel>>
+    | LoadableConfig['loading'],
+): VMLazyComponent<TViewModel, TView>;
+
+/**
+ * A Higher-Order Component that **LAZY** connects React components to their ViewModels, providing seamless MobX integration.
+ *
+ * [**Documentation**](https://js2me.github.io/mobx-view-model/react/api/with-lazy-view-model.html)
+ */
+export function withLazyViewModel<
+  TViewModel extends AnyViewModel | AnyViewModelSimple,
+  TView extends ComponentType<any>,
+>(
+  loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
+  configOrFallbackComponent?:
+    | LazyViewModelSimpleHocConfig<any>
+    | LazyViewModelHocConfig<any>
+    | LoadableConfig['loading'],
 ): VMLazyComponent<TViewModel, TView> {
-  const config: Maybe<LazyViewModelHocConfig<NoInfer<TViewModel>>> =
+  const config: Maybe<
+    LazyViewModelHocConfig<any> | LazyViewModelSimpleHocConfig<any>
+  > =
     typeof configOrFallbackComponent === 'function'
       ? {
           fallback: configOrFallbackComponent,
         }
       : configOrFallbackComponent;
 
-  const patchedConfig: LazyViewModelHocConfig<NoInfer<TViewModel>> = {
+  const patchedConfig: LazyViewModelHocConfig<any> = {
     ...config,
     ctx: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       ...config?.ctx,
       externalComponent: null,
     },

src/hoc/with-view-model.test.tsx

@@ -22,6 +22,7 @@ import { createCounter } from 'yummies/complex';
 
 import {
   ViewModelParams,
+  ViewModelSimple,
   ViewModelStore,
   ViewModelsProvider,
   ViewModelsRawConfig,
@@ -1385,4 +1386,32 @@ describe('withViewModel', () => {
 
     circularVmPayloadDependencyTestCases.forEach(createTest);
   });
+
+  describe('ViewModelSimple', () => {
+    test('renders (1 overload)', async () => {
+      class VM implements ViewModelSimple {
+        id: string = '1234';
+      }
+      const View = ({ model }: ViewModelProps<VM>) => {
+        return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+      };
+      const Component = withViewModel(VM)(View);
+
+      await act(async () => render(<Component />));
+      expect(screen.getByText('hello 1234')).toBeDefined();
+    });
+
+    test('renders (1 overload)', async () => {
+      class VM implements ViewModelSimple {
+        id: string = '1234';
+      }
+      const View = ({ model }: ViewModelProps<VM>) => {
+        return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+      };
+      const Component = withViewModel(VM, View);
+
+      await act(async () => render(<Component />));
+      expect(screen.getByText('hello 1234')).toBeDefined();
+    });
+  });
 });