feat: improve useCreateViewModel hook (HMR improvenment)

Author: js2me

.changeset/polite-garlics-act.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": patch
+---
+
+try to improve `HMR` with using `useMemo` hook inside `useCreateViewModel`

.changeset/ready-bats-hide.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": patch
+---
+
+added unit tests for `ViewModelSimple` and its connection with `ViewModelStore`

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

@@ -811,7 +811,7 @@ describe('withViewModel', () => {
       );
 
       expect(viewModels).toBeDefined();
-      expect(vmStore.spies.get).toHaveBeenCalledTimes(3);
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(1);
       expect(vmStore._instanceAttachedCount.size).toBe(1);
       expect(vmStore._unmountingViews.size).toBe(0);
       expect(vmStore.mountedViewsCount).toBe(1);
@@ -885,7 +885,7 @@ describe('withViewModel', () => {
       await expect(container.firstChild).toMatchFileSnapshot(
         `../../tests/snapshots/hoc/with-view-model/view-model-store/${task.name}.html`,
       );
-      expect(vmStore.spies.get).toHaveBeenCalledTimes(15);
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(3);
       expect(vmStore._instanceAttachedCount.size).toBe(3);
       expect(vmStore._unmountingViews.size).toBe(0);
       expect(vmStore.mountedViewsCount).toBe(3);

src/hooks/use-create-view-model.ts

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useContext, useLayoutEffect, useRef, useState } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { Class, AllPropertiesOptional, Maybe } from 'yummies/utils/types';
 
 import { viewModelsConfig } from '../config/global-config.js';
@@ -10,6 +10,7 @@ import {
 import { ActiveViewModelContext } from '../contexts/active-view-context.js';
 import { ViewModelsContext } from '../contexts/view-models-context.js';
 import { useIsomorphicLayoutEffect } from '../lib/hooks/use-isomorphic-layout-effect.js';
+import { useValue } from '../lib/hooks/use-value.js';
 import { generateVMId } from '../utils/create-vm-id-generator.js';
 import { ViewModelSimple } from '../view-model/view-model-simple.js';
 import { ViewModelCreateConfig } from '../view-model/view-model.store.types.js';
@@ -41,19 +42,11 @@ const useCreateViewModelSimple = (
   payload?: any,
 ) => {
   const viewModels = useContext(ViewModelsContext);
-  const lastInstance = useRef<ViewModelSimple | null>(null);
-
-  const [instance] = useState(() => {
-    if (lastInstance.current) {
-      return lastInstance.current;
-    }
-
+  const instance = useValue(() => {
     const instance = new VM();
+
     viewModels?.markToBeAttached(instance);
 
-    if (viewModels && instance.linkStore) {
-      instance.linkStore(viewModels);
-    }
     return instance;
   });
 
@@ -68,16 +61,14 @@ const useCreateViewModelSimple = (
       viewModels.attach(instance);
       return () => {
         viewModels.detach(instance.id);
-        lastInstance.current = null;
       };
     } else {
       instance.mount?.();
       return () => {
         instance.unmount?.();
-        lastInstance.current = null;
       };
     }
-  }, []);
+  }, [instance]);
 
   return instance;
 };
@@ -134,14 +125,13 @@ export function useCreateViewModel(VM: Class<any>, ...args: any[]) {
     return useCreateViewModelSimple(VM, payload);
   }
 
-  const idRef = useRef<string>('');
   const viewModels = useContext(ViewModelsContext);
   const parentViewModel = useContext(ActiveViewModelContext) || null;
 
   const ctx = config?.ctx ?? {};
 
-  if (!idRef.current) {
-    idRef.current =
+  const instance = useValue(() => {
+    const id =
       viewModels?.generateViewModelId({
         ...config,
         ctx,
@@ -150,16 +140,11 @@ export function useCreateViewModel(VM: Class<any>, ...args: any[]) {
       }) ??
       config?.id ??
       generateVMId(ctx);
-  }
 
-  const id = idRef.current;
+    const instanceFromStore = viewModels ? viewModels.get(id) : null;
 
-  const instanceFromStore = viewModels ? viewModels.get(id) : null;
-  const instanceRef = useRef<AnyViewModel | null>(null);
-
-  if (!instanceRef.current) {
     if (instanceFromStore) {
-      instanceRef.current = instanceFromStore as AnyViewModel;
+      return instanceFromStore as AnyViewModel;
     } else {
       const configCreate: ViewModelCreateConfig<any> = {
         ...config,
@@ -180,32 +165,28 @@ export function useCreateViewModel(VM: Class<any>, ...args: any[]) {
         viewModels?.createViewModel<any>(configCreate) ??
         viewModelsConfig.factory(configCreate);
 
-      instanceRef.current = instance;
-
       instance.willMount();
 
       viewModels?.markToBeAttached(instance);
-    }
-  }
 
-  const instance = instanceRef.current;
+      return instance;
+    }
+  });
 
   useIsomorphicLayoutEffect(() => {
     if (viewModels) {
       viewModels.attach(instance);
       return () => {
         viewModels.detach(instance.id);
-        instanceRef.current = null;
       };
     } else {
       instance.mount();
       return () => {
         instance.willUnmount();
         instance.unmount();
-        instanceRef.current = null;
       };
     }
-  }, []);
+  }, [instance]);
 
   instance.setPayload(payload ?? {});
 

src/lib/hooks/use-value.ts

@@ -0,0 +1,44 @@
+import { useMemo, useRef } from 'react';
+import { AnyObject } from 'yummies/utils/types';
+
+type UseValueHook = <TValue extends AnyObject>(
+  getValue: () => TValue,
+) => TValue;
+
+let useValueImpl = null as unknown as UseValueHook;
+
+if (process.env.NODE_ENV === 'production') {
+  /**
+   * This implementation is not working with HMR
+   */
+  useValueImpl = (getValue) => {
+    // eslint-disable-next-line sonarjs/no-redundant-type-constituents
+    const valueRef = useRef<any | null>(null);
+
+    if (!valueRef.current) {
+      valueRef.current = getValue();
+    }
+
+    return valueRef.current;
+  };
+} else {
+  /**
+   * This is might be helpful for better HMR Vite
+   */
+  useValueImpl = (getValue) => {
+    return useMemo(getValue, []);
+  };
+}
+
+/**
+ * This hook accept `getValue` function and returns it result.
+ *
+ * `getValue` _should_ executes **ONLY ONCE**.
+ * But in HMR it can executes more than 1 time
+ *
+ * @example
+ * ```
+ * const num = useValue(() => 1); // 1
+ * ```
+ */
+export const useValue = useValueImpl;

src/view-model/view-model-simple.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { ViewModelSimple } from './view-model-simple.js';
+import { ViewModelStoreBaseMock } from './view-model.store.base.test.js';
+
+import { ViewModelStore } from './index.js';
+
+export class ViewModelSimpleImpl implements ViewModelSimple<{ test: number }> {
+  spies = {
+    mount: vi.fn(),
+    linkStore: vi.fn(),
+    setPayload: vi.fn(),
+    unmount: vi.fn(),
+  };
+
+  id: string;
+
+  constructor(id: string = '1') {
+    this.id = id;
+  }
+
+  mount(): void {
+    this.spies.mount();
+  }
+
+  linkStore(viewModels: ViewModelStore): void {
+    this.spies.linkStore(viewModels);
+  }
+
+  setPayload(payload: { test: number }): void {
+    this.spies.setPayload(payload);
+  }
+
+  unmount(): void {
+    this.spies.unmount();
+  }
+}
+
+describe('ViewModelSimple', () => {
+  it('create instance', () => {
+    const vm = new ViewModelSimpleImpl();
+    expect(vm).toBeDefined();
+  });
+
+  it('has id', () => {
+    const vm = new ViewModelSimpleImpl();
+    expect(vm.id).toBe('1');
+  });
+
+  describe('work with vm store', () => {
+    it('should call "linkStore"', () => {
+      const vmStore = new ViewModelStoreBaseMock();
+      const vm = new ViewModelSimpleImpl();
+      vmStore.markToBeAttached(vm);
+      expect(vm.spies.linkStore).toBeCalledTimes(1);
+      expect(vm.spies.linkStore).toBeCalledWith(vmStore);
+    });
+
+    it('should ok "attach" simple vm to store', async () => {
+      const vmStore = new ViewModelStoreBaseMock();
+      const vm1 = new ViewModelSimpleImpl('1');
+      const vm2 = new ViewModelSimpleImpl('2');
+
+      await vmStore.attach(vm1);
+      await vmStore.attach(vm2);
+
+      expect(vm1.spies.mount).toBeCalledTimes(1);
+      expect(vm2.spies.mount).toBeCalledTimes(1);
+
+      expect([...vmStore._viewModels.values()]).toHaveLength(2);
+      expect([...vmStore._mountingViews.values()]).toHaveLength(0);
+      expect([...vmStore._unmountingViews.values()]).toHaveLength(0);
+      expect([...vmStore._linkedComponentVMClasses.values()]).toHaveLength(0);
+      expect([...vmStore._instanceAttachedCount.values()]).toHaveLength(2);
+      expect([...vmStore._viewModelIdsByClasses.values()]).toHaveLength(1);
+    });
+
+    it('should ok "detach" simple vm to store', async () => {
+      const vmStore = new ViewModelStoreBaseMock();
+      const vm1 = new ViewModelSimpleImpl('1');
+      const vm2 = new ViewModelSimpleImpl('2');
+
+      await vmStore.attach(vm1);
+      await vmStore.attach(vm2);
+
+      await vmStore.detach('1');
+      await vmStore.detach('2');
+
+      expect([...vmStore._viewModels.values()]).toHaveLength(0);
+      expect([...vmStore._mountingViews.values()]).toHaveLength(0);
+      expect([...vmStore._unmountingViews.values()]).toHaveLength(0);
+      expect([...vmStore._linkedComponentVMClasses.values()]).toHaveLength(0);
+      expect([...vmStore._instanceAttachedCount.values()]).toHaveLength(0);
+      expect([...vmStore._viewModelIdsByClasses.values()]).toHaveLength(0);
+    });
+
+    it('should be found by .get() and id', async () => {
+      const vmStore = new ViewModelStoreBaseMock();
+      const vm = new ViewModelSimpleImpl('1000');
+
+      await vmStore.attach(vm);
+
+      expect(vmStore.get('1000')).toBe(vm);
+    });
+
+    it('should be found by .get() and class ref', async () => {
+      const vmStore = new ViewModelStoreBaseMock();
+      const vm = new ViewModelSimpleImpl('1000');
+
+      await vmStore.attach(vm);
+
+      expect(vmStore.get(ViewModelSimpleImpl)).toBe(vm);
+    });
+  });
+});

src/view-model/view-model.store.base.ts

@@ -257,11 +257,31 @@ export class ViewModelStoreBase<VMBase extends AnyViewModel = AnyViewModel>
     }
   }
 
+  protected dettachVMConstructor(model: VMBase | AnyViewModelSimple) {
+    const constructor = (model as any).constructor as Class<any, any>;
+
+    if (this.viewModelIdsByClasses.has(constructor)) {
+      const vmIds = this.viewModelIdsByClasses
+        .get(constructor)!
+        .filter((it) => it !== model.id);
+
+      if (vmIds.length > 0) {
+        this.viewModelIdsByClasses.set(constructor, vmIds);
+      } else {
+        this.viewModelIdsByClasses.delete(constructor);
+      }
+    }
+  }
+
   markToBeAttached(model: VMBase | AnyViewModelSimple) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     this.viewModelsTempHeap.set(model.id, model);
 
+    if ('linkStore' in model) {
+      model.linkStore!(this as any);
+    }
+
     this.attachVMConstructor(model);
   }
 
@@ -304,18 +324,9 @@ export class ViewModelStoreBase<VMBase extends AnyViewModel = AnyViewModel>
       }
 
       this.instanceAttachedCount.delete(model.id);
-
-      const constructor = model.constructor as Class<VMBase, any>;
-
       this.viewModels.delete(id);
-      if (this.viewModelIdsByClasses.has(constructor)) {
-        this.viewModelIdsByClasses.set(
-          constructor,
-          this.viewModelIdsByClasses
-            .get(constructor)!
-            .filter((id) => id !== model.id),
-        );
-      }
+      this.dettachVMConstructor(model);
+
       await this.unmount(model);
     }
   }