Update on "[compiler] Validate type configs for hooks/non-hooks"

Alternative to #30868. The goal is to ensure that the types coming out of moduleTypeProvider are valid wrt to hook typing. If something is named like a hook, then it must be typed as a hook (or don't type it).

[ghstack-poisoned]

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -738,6 +738,8 @@ export class Environment {
           this.#globals,
           this.#shapes,
           moduleConfig,
+          moduleName,
+          loc,
         );
       } else {
         moduleType = null;

compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts

@@ -28,6 +28,8 @@ import {
 import {BuiltInType, PolyType} from './Types';
 import {TypeConfig} from './TypeSchema';
 import {assertExhaustive} from '../Utils/utils';
+import {isHookName} from './Environment';
+import {CompilerError, SourceLocation} from '..';
 
 /*
  * This file exports types and defaults for JavaScript global objects.
@@ -535,6 +537,8 @@ export function installTypeConfig(
   globals: GlobalRegistry,
   shapes: ShapeRegistry,
   typeConfig: TypeConfig,
+  moduleName: string,
+  loc: SourceLocation,
 ): Global {
   switch (typeConfig.kind) {
     case 'type': {
@@ -567,7 +571,13 @@ export function installTypeConfig(
         positionalParams: typeConfig.positionalParams,
         restParam: typeConfig.restParam,
         calleeEffect: typeConfig.calleeEffect,
-        returnType: installTypeConfig(globals, shapes, typeConfig.returnType),
+        returnType: installTypeConfig(
+          globals,
+          shapes,
+          typeConfig.returnType,
+          moduleName,
+          loc,
+        ),
         returnValueKind: typeConfig.returnValueKind,
         noAlias: typeConfig.noAlias === true,
         mutableOnlyIfOperandsAreMutable:
@@ -580,7 +590,13 @@ export function installTypeConfig(
         positionalParams: typeConfig.positionalParams ?? [],
         restParam: typeConfig.restParam ?? Effect.Freeze,
         calleeEffect: Effect.Read,
-        returnType: installTypeConfig(globals, shapes, typeConfig.returnType),
+        returnType: installTypeConfig(
+          globals,
+          shapes,
+          typeConfig.returnType,
+          moduleName,
+          loc,
+        ),
         returnValueKind: typeConfig.returnValueKind ?? ValueKind.Frozen,
         noAlias: typeConfig.noAlias === true,
       });
@@ -589,10 +605,31 @@ export function installTypeConfig(
       return addObject(
         shapes,
         null,
-        Object.entries(typeConfig.properties ?? {}).map(([key, value]) => [
-          key,
-          installTypeConfig(globals, shapes, value),
-        ]),
+        Object.entries(typeConfig.properties ?? {}).map(([key, value]) => {
+          const type = installTypeConfig(
+            globals,
+            shapes,
+            value,
+            moduleName,
+            loc,
+          );
+          const expectHook = isHookName(key);
+          let isHook = false;
+          if (type.kind === 'Function' && type.shapeId !== null) {
+            const functionType = shapes.get(type.shapeId);
+            if (functionType?.functionType?.hookKind !== null) {
+              isHook = true;
+            }
+          }
+          if (expectHook !== isHook) {
+            CompilerError.throwInvalidConfig({
+              reason: `Invalid type configuration for module`,
+              description: `Expected type for object property '${key}' from module '${moduleName}' ${expectHook ? 'to be a hook' : 'not to be a hook'} based on the property name`,
+              loc,
+            });
+          }
+          return [key, type];
+        }),
       );
     }
     default: {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.expect.md

@@ -0,0 +1,25 @@
+
+## Input
+
+```javascript
+import ReactCompilerTest from 'ReactCompilerTest';
+
+function Component() {
+  return ReactCompilerTest.useHookNotTypedAsHook();
+}
+
+```
+
+
+## Error
+
+```
+  2 |
+  3 | function Component() {
+> 4 |   return ReactCompilerTest.useHookNotTypedAsHook();
+    |          ^^^^^^^^^^^^^^^^^ InvalidConfig: Invalid type configuration for module. Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name (4:4)
+  5 | }
+  6 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook-namespace.js

@@ -0,0 +1,5 @@
+import ReactCompilerTest from 'ReactCompilerTest';
+
+function Component() {
+  return ReactCompilerTest.useHookNotTypedAsHook();
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-hook-name-not-typed-as-hook.expect.md

@@ -17,7 +17,7 @@ function Component() {
   2 |
   3 | function Component() {
 > 4 |   return useHookNotTypedAsHook();
-    |          ^^^^^^^^^^^^^^^^^^^^^ InvalidConfig: Invalid type configuration for module. Expected type for `import {useHookNotTypedAsHook} from 'ReactCompilerTest'` to be a hook based on the exported name (4:4)
+    |          ^^^^^^^^^^^^^^^^^^^^^ InvalidConfig: Invalid type configuration for module. Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name (4:4)
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-type-provider-nonhook-name-typed-as-hook.expect.md

@@ -17,7 +17,7 @@ function Component() {
   2 |
   3 | function Component() {
 > 4 |   return <div>{notAhookTypedAsHook()}</div>;
-    |                ^^^^^^^^^^^^^^^^^^^ InvalidConfig: Invalid type configuration for module. Expected type for `import {notAhookTypedAsHook} from 'ReactCompilerTest'` not to be a hook based on the exported name (4:4)
+    |                ^^^^^^^^^^^^^^^^^^^ InvalidConfig: Invalid type configuration for module. Expected type for object property 'useHookNotTypedAsHook' from module 'ReactCompilerTest' to be a hook based on the property name (4:4)
   5 | }
   6 |
 ```