fix: use React namespace for react typings

Author: js2me

.changeset/shiny-peaches-hope.md

@@ -0,0 +1,5 @@
+---
+"mobx-view-model": patch
+---
+
+use `React.*` global namespace to fix most typing bugs with React (18->19)

src/components/view-models-provider.tsx

@@ -1,9 +1,9 @@
-import type { ComponentType, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { ViewModelsContext } from '../contexts/index.js';
 import type { ViewModelStore } from '../view-model/index.js';
 
 export const ViewModelsProvider =
-  ViewModelsContext.Provider as unknown as ComponentType<{
+  ViewModelsContext.Provider as unknown as React.ComponentType<{
     value: ViewModelStore;
     children?: ReactNode;
   }>;

src/config/types.ts

@@ -1,4 +1,3 @@
-import type { ComponentType } from 'react';
 import type { AnyObject, Class, DeepPartial, Maybe } from 'yummies/utils/types';
 
 import type { ViewModelHocConfig } from '../hoc/with-view-model.js';
@@ -56,17 +55,17 @@ export interface ViewModelsConfig {
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#factory) */
   factory: CreateViewModelFactoryFn<AnyViewModel>;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#fallbackcomponent) */
-  fallbackComponent?: ComponentType;
+  fallbackComponent?: React.ComponentType;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#onmount) */
   onMount?: (viewModel: AnyViewModel) => void;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#onunmount) */
   onUnmount?: (viewModel: AnyViewModel) => void;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#processviewcomponent) */
   processViewComponent?: (
-    component: ComponentType<any> | undefined,
+    component: React.ComponentType<any> | undefined,
     VM: Class<AnyViewModel>,
     config: ViewModelHocConfig<any>,
-  ) => Maybe<ComponentType<any>>;
+  ) => Maybe<React.ComponentType<any>>;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#wrapviewsinobserver) */
   wrapViewsInObserver?: boolean;
   /** [**Documentation**](https://js2me.github.io/mobx-view-model/api/view-models/view-models-config#observable) */

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

@@ -1,4 +1,3 @@
-import type { ComponentProps, ComponentType } from 'react';
 import {
   type LoadableConfig,
   type LoadableMixin,
@@ -18,16 +17,16 @@ import {
 
 export interface LazyViewAndModel<
   TViewModel extends AnyViewModel | AnyViewModelSimple,
-  TView extends ComponentType<any>,
+  TView extends React.ComponentType<any>,
 > {
   Model: Class<TViewModel> | PackedAsyncModule<Class<TViewModel>>;
   View?: TView | PackedAsyncModule<TView>;
 }
 
 export type VMLazyComponent<
   TViewModel extends AnyViewModel | AnyViewModelSimple,
-  TView extends ComponentType<any>,
-> = VMComponent<TViewModel, ComponentProps<TView>> & LoadableMixin;
+  TView extends React.ComponentType<any>,
+> = VMComponent<TViewModel, React.ComponentProps<TView>> & LoadableMixin;
 
 export interface LazyViewModelHocConfig<TViewModel extends AnyViewModel>
   extends ViewModelHocConfig<TViewModel>,
@@ -45,7 +44,7 @@ export interface LazyViewModelSimpleHocConfig<
  */
 export function withLazyViewModel<
   TViewModel extends AnyViewModel,
-  TView extends ComponentType<any>,
+  TView extends React.ComponentType<any>,
 >(
   loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
   configOrFallbackComponent?:
@@ -60,7 +59,7 @@ export function withLazyViewModel<
  */
 export function withLazyViewModel<
   TViewModel extends AnyViewModelSimple,
-  TView extends ComponentType<any>,
+  TView extends React.ComponentType<any>,
 >(
   loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
   configOrFallbackComponent?:
@@ -75,7 +74,7 @@ export function withLazyViewModel<
  */
 export function withLazyViewModel<
   TViewModel extends AnyViewModel | AnyViewModelSimple,
-  TView extends ComponentType<any>,
+  TView extends React.ComponentType<any>,
 >(
   loadFunction: () => MaybePromise<LazyViewAndModel<TViewModel, TView>>,
   configOrFallbackComponent?:

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

@@ -8,7 +8,6 @@ import {
 import { comparer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import {
-  type ComponentType,
   type PropsWithChildren,
   type ReactNode,
   useEffect,
@@ -338,7 +337,7 @@ describe('withViewModel', () => {
 
       const vmConnectedComponentViewRenderSpy = vi.fn();
 
-      let VMConnectedComponentView: ComponentType<ViewModelProps<VM>> = ({
+      let VMConnectedComponentView: React.ComponentType<ViewModelProps<VM>> = ({
         model,
       }: ViewModelProps<VM>) => {
         vmConnectedComponentViewRenderSpy();

src/hoc/with-view-model.tsx

@@ -1,10 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import {
-  type ComponentClass,
-  type ComponentType,
-  type ReactNode,
-  useContext,
-} from 'react';
+import { useContext } from 'react';
 import type {
   AnyObject,
   Class,
@@ -33,7 +28,7 @@ type FixedComponentType<P extends AnyObject = {}> =
   /**
    * Fixes typings loss with use `withViewModel` with inline function component
    */
-  ((props: P) => ReactNode) | ComponentClass<P>;
+  ((props: P) => React.ReactNode) | React.ComponentClass<P>;
 
 declare const process: { env: { NODE_ENV?: string } };
 
@@ -68,7 +63,7 @@ export interface ViewModelHocConfig<VM extends AnyViewModel>
   /**
    * Component to render if the view model initialization takes too long
    */
-  fallback?: ComponentType;
+  fallback?: React.ComponentType;
 
   /**
    * Function to invoke additional React hooks in the resulting component
@@ -90,7 +85,7 @@ export interface ViewModelSimpleHocConfig<_VM> {
   /**
    * Component to render if the view model initialization takes too long
    */
-  fallback?: ComponentType;
+  fallback?: React.ComponentType;
 
   /**
    * Function to invoke additional React hooks in the resulting component
@@ -116,7 +111,9 @@ export type VMComponentProps<
 export type VMComponent<
   TViewModel,
   TComponentOriginProps extends AnyObject = ViewModelProps<TViewModel>,
-> = (props: VMComponentProps<TViewModel, TComponentOriginProps>) => ReactNode;
+> = (
+  props: VMComponentProps<TViewModel, TComponentOriginProps>,
+) => React.ReactNode;
 
 /**
  * A Higher-Order Component that connects React components to their ViewModels, providing seamless MobX integration.
@@ -128,7 +125,9 @@ export function withViewModel<
   TComponentOriginProps extends AnyObject = ViewModelProps<TViewModel>,
 >(
   model: Class<TViewModel>,
-  component: ComponentType<TComponentOriginProps & ViewModelProps<TViewModel>>,
+  component: React.ComponentType<
+    TComponentOriginProps & ViewModelProps<TViewModel>
+  >,
   config?: ViewModelHocConfig<TViewModel>,
 ): VMComponent<TViewModel, TComponentOriginProps>;
 
@@ -141,7 +140,9 @@ export function withViewModel<TViewModel extends AnyViewModel>(
   model: Class<TViewModel>,
   config?: ViewModelHocConfig<TViewModel>,
 ): <TComponentOriginProps extends AnyObject = ViewModelProps<TViewModel>>(
-  Component?: ComponentType<TComponentOriginProps & ViewModelProps<TViewModel>>,
+  Component?: React.ComponentType<
+    TComponentOriginProps & ViewModelProps<TViewModel>
+  >,
 ) => VMComponent<TViewModel, TComponentOriginProps>;
 
 /**
@@ -228,7 +229,7 @@ export function withViewModel(
       },
     };
 
-    return (Component: ComponentType<any>) =>
+    return (Component: React.ComponentType<any>) =>
       withViewModelWrapper(VM, finalConfig, Component);
   }
 }
@@ -238,7 +239,7 @@ const REACT_MEMO_SYMBOL = Symbol.for('react.memo');
 const withViewModelWrapper = (
   VM: Class<any>,
   config: ViewModelHocConfig<any>,
-  OriginalComponent?: ComponentType<any>,
+  OriginalComponent?: React.ComponentType<any>,
 ) => {
   const processViewComponent =
     config.vmConfig?.processViewComponent ??

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

@@ -1,4 +1,3 @@
-import type { ComponentType } from 'react';
 import type { AnyObject, Class, Maybe } from 'yummies/utils/types';
 import type { ViewModelsRawConfig } from '../config/index.js';
 import type { VMComponent, VMLazyComponent } from '../hoc/index.js';
@@ -21,13 +20,13 @@ export interface ViewModelGenerateIdConfig<VM extends AnyViewModel> {
   id?: Maybe<string>;
   ctx: AnyObject;
   parentViewModelId: string | null;
-  fallback?: ComponentType;
+  fallback?: React.ComponentType;
 }
 
 export interface ViewModelCreateConfig<VM extends AnyViewModel>
   extends ViewModelParams<VM['payload'], VM['parentViewModel']> {
   VM: Class<VM>;
-  fallback?: ComponentType;
+  fallback?: React.ComponentType;
   component?: VMComponent<AnyViewModel, any>;
   props?: AnyObject;
 }