fix(react-composition): improve composition scope resolution

Author: Pavel910

packages/react-composition/__tests__/composition.test.tsx

@@ -81,7 +81,7 @@ describe("Decoration of Hooks and Components", () => {
             return <span>{label}</span>;
         };
 
-        const DecorateHook = createDecorator(useLabel, baseHook => {
+        const DecorateHook = useLabel.createDecorator(baseHook => {
             return params => {
                 return { ...baseHook(params), label: "Decorated Label" };
             };

packages/react-composition/src/Compose.tsx

@@ -27,7 +27,11 @@ export const Compose = (props: ComposeProps) => {
         }
 
         const decorators = Array.isArray(props.with) ? props.with : [props.with];
-        return composeComponent(targetFn.original, decorators as Enumerable<ComposeWith>, scope);
+        return composeComponent(
+            targetFn.original,
+            decorators as Enumerable<ComposeWith>,
+            scope[scope.length - 1]
+        );
     }, [props.with]);
 
     return null;

packages/react-composition/src/CompositionScope.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export interface CompositionScopeContext {
-    name: string;
+    scope: string[];
 }
 
 const CompositionScopeContext = React.createContext<CompositionScopeContext | undefined>(undefined);
@@ -12,8 +12,10 @@ interface CompositionScopeProps {
 }
 
 export const CompositionScope = ({ name, children }: CompositionScopeProps) => {
+    const parentScope = useCompositionScope();
+
     return (
-        <CompositionScopeContext.Provider value={{ name }}>
+        <CompositionScopeContext.Provider value={{ scope: [...parentScope, name] }}>
             {children}
         </CompositionScopeContext.Provider>
     );
@@ -22,7 +24,7 @@ export const CompositionScope = ({ name, children }: CompositionScopeProps) => {
 export function useCompositionScope() {
     const context = React.useContext(CompositionScopeContext);
     if (!context) {
-        return undefined;
+        return [];
     }
-    return context.name;
+    return context.scope;
 }

packages/react-composition/src/Context.tsx

@@ -52,7 +52,7 @@ type ComponentScopes = Map<string, ComposedComponents>;
 export type DecoratableTypes = DecoratableComponent | DecoratableHook;
 
 interface CompositionContextGetComponentCallable {
-    (component: ComponentType<unknown>, scope?: string):
+    (component: ComponentType<unknown>, scope: string[]):
         | ComposedFunction
         | GenericComponent
         | undefined;
@@ -128,16 +128,17 @@ export const CompositionProvider = ({ children }: CompositionProviderProps) => {
     );
 
     const getComponent = useCallback<CompositionContextGetComponentCallable>(
-        (Component, scope = "*") => {
-            const scopeMap: ComposedComponents = components.get(scope) || new Map();
-            const composedComponent = scopeMap.get(Component);
-            if (!composedComponent && scope !== "*") {
-                // Check if a default scope component exists
-                const defaultScopeMap: ComposedComponents = components.get("*") || new Map();
-                const defaultComponent = defaultScopeMap.get(Component);
-                return defaultComponent ? defaultComponent.component : undefined;
+        (Component, scope = []) => {
+            const scopesToResolve = ["*", ...scope].reverse();
+            for (const scope of scopesToResolve) {
+                const scopeMap: ComposedComponents = components.get(scope) || new Map();
+                const composedComponent = scopeMap.get(Component);
+                if (composedComponent) {
+                    return composedComponent.component;
+                }
             }
-            return composedComponent ? composedComponent.component : undefined;
+
+            return undefined;
         },
         [components]
     );