BREAKING_CHANGE: View components will be rendered only if VM.isMounted truthy (default .mount() behaviour);BREAKING_CHANGE: remove 'instances' property from ViewModelCreateConfig, ViewModelGenerateIdConfig;

js2me · js2me · commit c0d9a4e14a81 · 2024-12-22T11:16:51.000+03:00
diff --git a/src/hoc/with-view-model.test.tsx b/src/hoc/with-view-model.test.tsx
@@ -17,19 +17,84 @@ const createIdGenerator = (prefix?: string) => {
 };
 
 describe('withViewModel', () => {
-  test('renders', () => {
-    class VM extends ViewModelMock {}
+  test('renders', async () => {
+    class VM extends ViewModelMock {
+      mount() {
+        super.mount();
+      }
+    }
     const View = ({ model }: ViewModelProps<VM>) => {
-      return <div>{`hello ${model.id}`}</div>;
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
     };
     const Component = withViewModel(VM, { generateId: createIdGenerator() })(
       View,
     );
 
-    render(<Component />);
+    await act(async () => render(<Component />));
     expect(screen.getByText('hello VM_0')).toBeDefined();
   });
 
+  test('renders fallback', async () => {
+    class VM extends ViewModelMock {
+      // eslint-disable-next-line sonarjs/no-empty-function
+      mount() {}
+    }
+    const View = ({ model }: ViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+    const Component = withViewModel(VM, {
+      generateId: createIdGenerator(),
+      fallback: () => {
+        return 'fallback';
+      },
+    })(View);
+
+    const { container } = await act(async () => render(<Component />));
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        fallback
+      </div>
+    `);
+  });
+
+  test('renders fallback (times)', async () => {
+    class VM extends ViewModelMock {
+      // eslint-disable-next-line sonarjs/no-empty-function
+      mount() {}
+    }
+    const View = ({ model }: ViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+
+    const spyFallbackRender = vi.fn(() => 'fallback');
+
+    const Component = withViewModel(VM, {
+      generateId: createIdGenerator(),
+      fallback: spyFallbackRender,
+    })(View);
+
+    await act(async () => render(<Component />));
+    expect(spyFallbackRender).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders fallback before render REAL COMPONENT (times)', async () => {
+    class VM extends ViewModelMock {}
+    const View = ({ model }: ViewModelProps<VM>) => {
+      return <div data-testid={'view'}>{`hello ${model.id}`}</div>;
+    };
+
+    const spyFallbackRender = vi.fn(() => 'fallback');
+
+    const Component = withViewModel(VM, {
+      generateId: createIdGenerator(),
+      fallback: spyFallbackRender,
+    })(View);
+
+    await act(async () => render(<Component />));
+
+    expect(spyFallbackRender).toHaveBeenCalledTimes(1);
+  });
+
   test('renders nesting', () => {
     const Component1 = withViewModel(ViewModelMock)(({
       children,
@@ -126,7 +191,7 @@ describe('withViewModel', () => {
     expect(View).toHaveBeenCalledTimes(1);
   });
 
-  test('withViewModel wrapper should by only mounted (renders only 1 time)', () => {
+  test('withViewModel wrapper should by only mounted (renders 2 times)', () => {
     class VM extends ViewModelMock {}
     const View = vi.fn(({ model }: ViewModelProps<VM>) => {
       return <div>{`hello ${model.id}`}</div>;
@@ -140,7 +205,7 @@ describe('withViewModel', () => {
     })(View);
 
     render(<Component />);
-    expect(useHookSpy).toHaveBeenCalledTimes(1);
+    expect(useHookSpy).toHaveBeenCalledTimes(2);
   });
 
   test('View should be updated when payload is changed', async () => {
@@ -344,7 +409,7 @@ describe('withViewModel', () => {
       );
 
       expect(viewModels).toBeDefined();
-      expect(vmStore.spies.get).toHaveBeenCalledTimes(0);
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(3);
       expect(vmStore._instanceAttachedCount.size).toBe(1);
       expect(vmStore._unmountingViews.size).toBe(0);
       expect(vmStore.mountedViewsCount).toBe(1);
@@ -418,7 +483,7 @@ describe('withViewModel', () => {
       expect(container.firstChild).toMatchFileSnapshot(
         `../../tests/snapshots/hoc/with-view-model/view-model-store/${task.name}.html`,
       );
-      expect(vmStore.spies.get).toHaveBeenCalledTimes(0);
+      expect(vmStore.spies.get).toHaveBeenCalledTimes(15);
       expect(vmStore._instanceAttachedCount.size).toBe(3);
       expect(vmStore._unmountingViews.size).toBe(0);
       expect(vmStore.mountedViewsCount).toBe(3);
diff --git a/src/hoc/with-view-model.tsx b/src/hoc/with-view-model.tsx
@@ -4,15 +4,15 @@ import {
   ComponentType,
   ReactNode,
   useContext,
-  useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
 } from 'react';
 
 import { ActiveViewModelContext, ViewModelsContext } from '../contexts';
 import { generateVMId } from '../utils';
 import { AnyObject, Class, EmptyObject, Maybe } from '../utils/types';
-import { AnyViewModel, ViewModel, ViewModelCreateConfig } from '../view-model';
+import { AnyViewModel, ViewModelCreateConfig } from '../view-model';
 
 declare const process: { env: { NODE_ENV?: string } };
 
@@ -25,38 +25,38 @@ export type ViewModelInputProps<VM extends AnyViewModel> =
 
 export type ViewModelHocConfig<VM extends AnyViewModel> = {
   /**
-   * Уникальный идентификатор вьюшки
+   * Unique identifier for the view
    */
   id?: Maybe<string>;
 
   /**
-   * Функция генератор идентификатор для вью модели
+   * Function to generate an identifier for the view model
    */
   generateId?: (ctx: AnyObject) => string;
 
   /**
-   * Компонент, который будет отрисован в случае если инциализация вью модели происходит слишком долго
+   * Component to render if the view model initialization takes too long
    */
   fallback?: ComponentType;
 
   /**
-   * Доп. данные, которые могут быть полезны при создании VM
+   * Additional data that may be useful when creating the VM
    */
   ctx?: AnyObject;
 
   /**
-   * Функция, в которой можно вызывать доп. реакт хуки в результирующем компоненте
+   * Function to invoke additional React hooks in the resulting component
    */
   reactHooks?: (allProps: any) => void;
 
   /**
-   * Функция, которая должна возвращать payload для VM
-   * по умолчанию это - (props) => props.payload
+   * Function that should return the payload for the VM
+   * by default, it is - (props) => props.payload
    */
   getPayload?: (allProps: any) => any;
 
   /**
-   * Функция создания экземпляра класса VM
+   * Function to create an instance of the VM class
    */
   factory?: (config: ViewModelCreateConfig<VM>) => VM;
 };
@@ -85,8 +85,6 @@ export function withViewModel(
   ctx.generateId = config?.generateId;
 
   return (Component: ComponentType<any>) => {
-    const instances = new Map<string, AnyViewModel>();
-
     const ConnectedViewModel = observer((allProps: any) => {
       const { payload: rawPayload, ...componentProps } = allProps;
 
@@ -106,15 +104,20 @@ export function withViewModel(
             VM: Model,
             parentViewModelId: parentViewModel?.id,
             fallback: config?.fallback,
-            instances,
           }) ??
           config?.id ??
           generateVMId(ctx);
       }
 
       const id = idRef.current;
 
-      if (!instances.has(id)) {
+      const instanceFromStore = viewModels ? viewModels.get(id) : null;
+
+      const instance = useMemo(() => {
+        if (instanceFromStore) {
+          return instanceFromStore;
+        }
+
         const configCreate: ViewModelCreateConfig<any> = {
           id,
           parentViewModelId: parentViewModel?.id,
@@ -123,7 +126,6 @@ export function withViewModel(
           viewModels,
           parentViewModel,
           fallback: config?.fallback,
-          instances,
           ctx,
           component: ConnectedViewModel,
           componentProps,
@@ -136,37 +138,36 @@ export function withViewModel(
           viewModels?.createViewModel<any>(configCreate) ??
           new Model(configCreate);
 
-        instances.set(id, instance);
-      }
+        return instance;
+      }, [instanceFromStore]);
 
-      const instance: ViewModel = instances.get(id)!;
+      const isRenderAllowedByStore =
+        !viewModels || viewModels.isAbleToRenderView(id);
+      const isRenderAllowedLocally = !!instance?.isMounted;
+      const isRenderAllowed = isRenderAllowedByStore && isRenderAllowedLocally;
 
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (viewModels) {
           viewModels.attach(instance);
+          return () => {
+            viewModels.detach(id);
+          };
         } else {
           instance.mount();
-        }
-
-        return () => {
-          if (viewModels) {
-            viewModels.detach(id);
-          } else {
+          return () => {
             instance.unmount();
-          }
-          instances.delete(id);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+          };
+        }
       }, []);
 
       useLayoutEffect(() => {
-        instance.setPayload(payload);
+        instance?.setPayload(payload);
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [payload]);
 
       config?.reactHooks?.(allProps);
 
-      if ((!viewModels || viewModels.isAbleToRenderView(id)) && instance) {
+      if (isRenderAllowed) {
         return (
           <ActiveViewModelContext.Provider value={instance}>
             <Component {...(componentProps as any)} model={instance} />
diff --git a/src/view-model/view-model.store.types.ts b/src/view-model/view-model.store.types.ts
@@ -3,7 +3,6 @@ import { ComponentType } from 'react';
 import { ComponentWithViewModel } from '../hoc';
 import { AnyObject, Class, Maybe } from '../utils/types';
 
-import { ViewModel } from './view-model';
 import { AnyViewModel, ViewModelParams } from './view-model.types';
 
 export interface ViewModelGenerateIdConfig<VM extends AnyViewModel> {
@@ -12,14 +11,12 @@ export interface ViewModelGenerateIdConfig<VM extends AnyViewModel> {
   ctx: AnyObject;
   parentViewModelId: string | null;
   fallback?: ComponentType;
-  instances: Map<string, ViewModel>;
 }
 
 export interface ViewModelCreateConfig<VM extends AnyViewModel>
   extends ViewModelParams<VM['payload'], VM['parentViewModel']> {
   VM: Class<VM>;
   fallback?: ComponentType;
-  instances: Map<string, ViewModel>;
   component: ComponentWithViewModel<AnyViewModel, any>;
   componentProps: AnyObject;
 }
