fix: Messenger type errors in ComposableController

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

eslint-warning-thresholds.json

@@ -107,9 +107,6 @@
   "packages/composable-controller/src/ComposableController.test.ts": {
     "import-x/namespace": 3
   },
-  "packages/composable-controller/src/ComposableController.ts": {
-    "@typescript-eslint/no-unused-vars": 1
-  },
   "packages/controller-utils/jest.environment.js": {
     "n/prefer-global/text-encoder": 1,
     "n/prefer-global/text-decoder": 1,

packages/composable-controller/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Resolve incompatibility of `ChildControllerStateChangeEvents` type with `BaseController` (when used in the `Events` type argument of `ComposableControllerMessenger`) by removing unnecessary nested logic from definition ([#6904](https://github.com/MetaMask/core/pull/6904))
+  - Also update generic parameter names `ControllerName` and `ControllerState` to `ChildControllerName`, `ChildControllerState` for reduced ambiguity.
+
 ## [11.1.0]
 
 ### Added

packages/composable-controller/src/ComposableController.ts

@@ -70,12 +70,10 @@ export type ChildControllerStateChangeEvents<
   ComposableControllerState extends ComposableControllerStateConstraint,
 > =
   ComposableControllerState extends Record<
-    infer ControllerName extends string,
-    infer ControllerState
+    infer ChildControllerName extends string,
+    infer ChildControllerState extends StateConstraint
   >
-    ? ControllerState extends StateConstraint
-      ? ControllerStateChangeEvent<ControllerName, ControllerState>
-      : never
+    ? ControllerStateChangeEvent<ChildControllerName, ChildControllerState>
     : never;
 
 /**
@@ -184,16 +182,18 @@ export class ComposableController<
       throw new Error(`${name} - ${INVALID_CONTROLLER_ERROR}`);
     }
     try {
-      this.messenger.subscribe(
-        `${name}:stateChange`,
-        (childState: StateConstraint) => {
-          this.update((state) => {
-            // Type assertion is necessary for property assignment to a generic type. This does not pollute or widen the type of the asserted variable.
-            // @ts-expect-error "Type instantiation is excessively deep"
-            (state as ComposableControllerStateConstraint)[name] = childState;
-          });
-        },
-      );
+      this.messenger.subscribe<
+        // The type intersection with "ComposableController:stateChange" is added by one of the `Messenger.subscribe` overloads, but that constraint is unnecessary here,
+        // since this method only subscribes the messenger to child controller `stateChange` events.
+        // @ts-expect-error "Type '`${string}:stateChange`' is not assignable to parameter of type '"ComposableController:stateChange" & ChildControllerStateChangeEvents<ComposableControllerState>["type"]'."
+        ChildControllerStateChangeEvents<ComposableControllerState>['type']
+      >(`${name}:stateChange`, (childState: StateConstraint) => {
+        this.update((state) => {
+          // Type assertion is necessary for property assignment to a generic type. This does not pollute or widen the type of the asserted variable.
+          // @ts-expect-error "Type instantiation is excessively deep"
+          (state as ComposableControllerStateConstraint)[name] = childState;
+        });
+      });
     } catch (error: unknown) {
       // False negative. `name` is a string type.
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions