fix: Rearrange observer type definitions to allow wrapping custom HOC (mobxjs#4576)

Author: mbest

packages/mobx-react-lite/__tests__/observer.test.tsx

@@ -594,6 +594,33 @@ test("useImperativeHandle and forwardRef should work with useObserver", () => {
     expect(consoleWarnMock).toMatchSnapshot()
 })
 
+test("observer should work with custom HOC and infer correct type", () => {
+    const validateChildrenWrapper = <T extends {}>(component: React.FC<T>): React.FC<T> => {
+        const wrapper: React.FC<T> = (...args) => {
+            const result = component(...args)
+            if (result && React.isValidElement(result) && result.type === "div") {
+                return result
+            }
+            throw new Error("Only <div> allowed as root element")
+        }
+        wrapper.displayName = component.displayName || component.name
+        return wrapper
+    }
+
+    interface IProps {
+        value: string
+    }
+
+    const TestComponent: React.FC<IProps> = observer(
+        validateChildrenWrapper(function TestComponent({ value }) {
+            return <div>{value}</div>
+        })
+    )
+
+    const rendered = render(<TestComponent value="1" />)
+    expect(rendered.container.querySelector("div")!.innerHTML).toBe("1")
+})
+
 it("should hoist known statics only", () => {
     function isNumber() {
         return null

packages/mobx-react-lite/src/observer.ts

@@ -44,19 +44,18 @@ export function observer<P extends object, TRef = {}>(
     React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>
 >
 
+export function observer<P extends object>(
+    baseComponent: React.FunctionComponent<P>,
+    options?: IObserverOptions
+): React.FunctionComponent<P>
+
 export function observer<P extends object, TRef = {}>(
     baseComponent: React.ForwardRefExoticComponent<
         React.PropsWithoutRef<P> & React.RefAttributes<TRef>
     >
 ): React.MemoExoticComponent<
     React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>
 >
-
-export function observer<P extends object>(
-    baseComponent: React.FunctionComponent<P>,
-    options?: IObserverOptions
-): React.FunctionComponent<P>
-
 export function observer<
     C extends React.FunctionComponent<any> | React.ForwardRefRenderFunction<any>,
     Options extends IObserverOptions