feat(react-composition): restore decoratable hooks

packages/react-composition/src/decorators.tsx

@@ -6,7 +6,8 @@ import {
     GenericComponent,
     Decorator,
     CanReturnNull,
-    GenericHook
+    GenericHook,
+    DecoratableHook
 } from "~/types";
 
 export interface ShouldDecorate<TDecorator = any, TComponent = any> {
@@ -63,6 +64,21 @@ export function createDecoratorFactory<TDecorator>() {
     };
 }
 
+export function createHookDecoratorFactory<TDecorator>() {
+    return function from<TDecoratable extends DecoratableComponent>(decoratable: TDecoratable) {
+        return function createDecorator(decorator: Decorator<GetDecoratee<TDecoratable>>) {
+            return function DecoratorPlugin(props: TDecorator) {
+                return (
+                    <Compose
+                        function={decoratable}
+                        with={decorator as unknown as Decorator<GenericHook>}
+                    />
+                );
+            };
+        };
+    };
+}
+
 export function withDecoratorFactory<TDecorator>() {
     return function WithDecorator<TDecoratable extends DecoratableComponent>(
         Component: TDecoratable,
@@ -75,3 +91,13 @@ export function withDecoratorFactory<TDecorator>() {
         > & { createDecorator: typeof createDecorator };
     };
 }
+
+export function withHookDecoratorFactory<TDecorator>() {
+    return function WithHookDecorator<TDecoratable extends DecoratableHook>(hook: TDecoratable) {
+        const createDecorator = createHookDecoratorFactory<TDecorator>()(hook);
+
+        return Object.assign(hook, { createDecorator }) as unknown as DecoratableHook<
+            GenericHook<GetDecorateeParams<GetDecoratee<TDecoratable>>>
+        > & { createDecorator: typeof createDecorator };
+    };
+}

packages/react-composition/src/makeDecoratable.tsx

@@ -1,7 +1,13 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { useComponent } from "./Context";
-import { DecoratableComponent, DecoratableHook, GenericComponent, GenericHook } from "~/types";
-import { withDecoratorFactory } from "~/decorators";
+import {
+    CanReturnNull,
+    DecoratableComponent,
+    DecoratableHook,
+    GenericComponent,
+    GenericHook
+} from "~/types";
+import { withDecoratorFactory, withHookDecoratorFactory } from "~/decorators";
 
 const ComposableContext = createContext<string[]>([]);
 ComposableContext.displayName = "ComposableContext";
@@ -59,7 +65,7 @@ export function makeDecoratableHook<T extends GenericHook>(hook: T) {
 
     decoratableHook.original = hook;
 
-    return decoratableHook as DecoratableHook<T>;
+    return withHookDecoratorFactory()(decoratableHook as DecoratableHook<T>);
 }
 
 export function createVoidComponent<T>() {
@@ -69,6 +75,15 @@ export function createVoidComponent<T>() {
     };
 }
 
-export function makeDecoratable<T extends GenericComponent>(name: string, Component: T) {
-    return makeDecoratableComponent(name, Component);
+export function makeDecoratable<T extends GenericHook>(hook: T): DecoratableHook<T>;
+export function makeDecoratable<T extends GenericComponent>(
+    name: string,
+    Component: T
+): DecoratableComponent<CanReturnNull<T>>;
+export function makeDecoratable(hookOrName: any, Component?: any) {
+    if (Component) {
+        return makeDecoratableComponent(hookOrName, Component);
+    }
+
+    return makeDecoratableHook(hookOrName);
 }

packages/react-composition/src/types.ts

@@ -1,6 +1,6 @@
 import React from "react";
 
-export type GenericHook = (...args: any) => any;
+export type GenericHook<TParams = any, TReturn = any> = (...args: TParams[]) => TReturn;
 
 export type GenericComponent<T = any> = React.FunctionComponent<T>;