test: add tests for useViewModel hook; internal: rename context ActiveViewContext -> ActiveViewModelContext (id value string -> AnyViewModel value)

Author: js2me

.eslintrc.cjs

@@ -22,7 +22,8 @@ module.exports = {
         'unicorn/consistent-function-scoping': 'off',
         'unicorn/no-this-assignment': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
-        '@typescript-eslint/no-this-alias': 'off'
+        '@typescript-eslint/no-this-alias': 'off',
+        'react-hooks/rules-of-hooks': 'off',
       },
       parserOptions: {
         project: 'tsconfig.test.json',

package.json

@@ -3,7 +3,7 @@
   "version": "4.2.0",
   "scripts": {
     "clean": "rimraf dist",
-    "check": "eslint . --fix && pnpm test",
+    "check": "eslint . --fix && pnpm test:coverage",
     "prebuild": "npm run clean && npm run check",
     "build": "tsc && node ./post-build.mjs",
     "pub": "PUBLISH=true pnpm run build",
@@ -12,7 +12,8 @@
     "pub:major": "PUBLISH=true PUBLISH_VERSION=major pnpm run build",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "dev": "pnpm test:watch"
   },
   "keywords": [
     "mobx",

src/contexts/active-view-context.ts

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
 
-// will contains the view model id
-export const ActiveViewContext = createContext<string>('');
+import { AnyViewModel } from '../view-model';
+
+// will contains the view model
+export const ActiveViewModelContext = createContext<AnyViewModel>(null as any);

src/hoc/with-view-model.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
 } from 'react';
 
-import { ActiveViewContext, ViewModelsContext } from '../contexts';
+import { ActiveViewModelContext, ViewModelsContext } from '../contexts';
 import { generateVMId } from '../utils';
 import { AnyObject, Class, EmptyObject, Maybe } from '../utils/types';
 import { AnyViewModel, ViewModel, ViewModelCreateConfig } from '../view-model';
@@ -96,15 +96,15 @@ export function withViewModel(
 
       const idRef = useRef<string>('');
       const viewModels = useContext(ViewModelsContext);
-      const parentViewModelId = useContext(ActiveViewContext) || null;
+      const parentViewModel = useContext(ActiveViewModelContext) || null;
 
       if (!idRef.current) {
         idRef.current =
           viewModels?.generateViewModelId({
             ctx,
             id: config?.id,
             VM: Model,
-            parentViewModelId,
+            parentViewModelId: parentViewModel?.id,
             fallback: config?.fallback,
             instances,
           }) ??
@@ -117,12 +117,12 @@ export function withViewModel(
       if (!instances.has(id)) {
         const configCreate: ViewModelCreateConfig<any> = {
           id,
-          parentViewModelId,
+          parentViewModelId: parentViewModel?.id,
           payload,
           VM: Model,
           viewModels,
           parentViewModel:
-            (parentViewModelId && instances.get(parentViewModelId)) || null,
+            (parentViewModel && instances.get(parentViewModel?.id)) || null,
           fallback: config?.fallback,
           instances,
           ctx,
@@ -157,9 +157,9 @@ export function withViewModel(
 
       if ((!viewModels || viewModels.isAbleToRenderView(id)) && instance) {
         return (
-          <ActiveViewContext.Provider value={id}>
+          <ActiveViewModelContext.Provider value={instance}>
             <Component {...(componentProps as any)} model={instance} />
-          </ActiveViewContext.Provider>
+          </ActiveViewModelContext.Provider>
         );
       }