fix: typings of ComponentWithLazyPageViewModel type

Author: js2me

package.json

@@ -9,6 +9,7 @@
     "prebuild": "npm run clean && npm run check",
     "build": "tsc && node ./post-build.mjs",
     "pub": "PUBLISH=true pnpm run build",
+    "prepublish": "pnpm test",
     "pub:patch": "PUBLISH=true PUBLISH_VERSION=patch pnpm run build",
     "pub:minor": "PUBLISH=true PUBLISH_VERSION=minor pnpm run build",
     "pub:major": "PUBLISH=true PUBLISH_VERSION=major pnpm run build",
@@ -41,7 +42,7 @@
   "peerDependencies": {
     "mobx": "^6.12.4",
     "mobx-react-lite": "^4.0.7",
-    "mobx-vm-entities": "^5.0.10",
+    "mobx-vm-entities": "^5.0.19",
     "react": "^18.3.1",
     "wouter": "^3.3.5"
   },

pnpm-lock.yaml

@@ -0,0 +1,88 @@
+import { act, render, screen } from '@testing-library/react';
+import { createCounter } from 'mobx-vm-entities/utils/counter';
+import { describe, expect, test } from 'vitest';
+
+import { PageViewModelMock } from '../page-view-model/page-view-model.impl.test';
+
+import { withLazyPageViewModel } from './with-lazy-page-view-model';
+import { PageViewModelProps } from './with-page-view-model';
+
+const createIdGenerator = (prefix?: string) => {
+  const counter = createCounter();
+  return () => (prefix ?? '') + counter().toString();
+};
+
+describe('withLazyPageViewModel', () => {
+  test('renders (required path param)', async () => {
+    class VM extends PageViewModelMock<{ foo: string }> {
+      mount() {
+        super.mount();
+      }
+    }
+    const View = ({ model }: PageViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+    const Component = withLazyPageViewModel(
+      async () => {
+        return {
+          Model: VM,
+          View,
+        };
+      },
+      {
+        generateId: createIdGenerator(),
+      },
+    );
+
+    await act(async () => render(<Component params={{ foo: 'bar' }} />));
+    expect(screen.getByText('hello VM_0')).toBeDefined();
+  });
+  test('renders (optional path param)', async () => {
+    class VM extends PageViewModelMock<{ foo?: string }> {
+      mount() {
+        super.mount();
+      }
+    }
+    const View = ({ model }: PageViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+    const Component = withLazyPageViewModel(
+      async () => {
+        return {
+          Model: VM,
+          View,
+        };
+      },
+      {
+        generateId: createIdGenerator(),
+      },
+    );
+
+    await act(async () => render(<Component />));
+    expect(screen.getByText('hello VM_0')).toBeDefined();
+  });
+  test('renders (no path params)', async () => {
+    class VM extends PageViewModelMock {
+      mount() {
+        super.mount();
+      }
+    }
+    const View = ({ model }: PageViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+    const Component = withLazyPageViewModel(
+      async () => {
+        return {
+          Model: VM,
+          View,
+        };
+      },
+      {
+        generateId: createIdGenerator(),
+      },
+    );
+
+    await act(async () => render(<Component />));
+    expect(screen.getByText('hello VM_0')).toBeDefined();
+  });
+});

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

@@ -3,19 +3,32 @@ import {
   ViewModelHocConfig,
   withLazyViewModel,
 } from 'mobx-vm-entities';
+import { LoadableMixin } from 'mobx-vm-entities/lib/react-simple-loadable';
+import { AnyObject } from 'mobx-vm-entities/utils/types';
 import { ComponentType } from 'react';
 
-import { PageViewModel } from '../page-view-model';
+import { AnyPageViewModel, PageViewModel } from '../page-view-model';
 
-export const withLazyPageViewModel = <
+import {
+  ComponentWithPageViewModel,
+  PageViewModelProps,
+} from './with-page-view-model';
+
+export type ComponentWithLazyPageViewModel<
+  TViewModel extends AnyPageViewModel,
+  TComponentOriginProps extends AnyObject = PageViewModelProps<TViewModel>,
+> = ComponentWithPageViewModel<TViewModel, TComponentOriginProps> &
+  LoadableMixin;
+
+export function withLazyPageViewModel<
   TViewModel extends PageViewModel<any, any>,
   TView extends ComponentType<any>,
 >(
   loadFunction: () => Promise<LazyViewAndModel<TViewModel, TView>>,
   config?: ViewModelHocConfig<any>,
-) => {
+): ComponentWithLazyPageViewModel<TViewModel, TView> {
   return withLazyViewModel(loadFunction, {
     ...config,
     getPayload: config?.getPayload ?? ((props) => props.params),
-  });
-};
+  }) as unknown as ComponentWithLazyPageViewModel<TViewModel, TView>;
+}