Update on "[compiler] Override type provider for hook-like names"

If an imported name is hook-like but a type provider provides a non-hook type, we now override the returned value and treat it as a generic custom hook. This is meant as an extra check to prevent miscompilation.

[ghstack-poisoned]

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-import-object-typed-module-as-hook-name.expect.md

@@ -18,6 +18,20 @@ export function Component({a, b}) {
   );
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};
+
 ```
 
 ## Code
@@ -104,7 +118,28 @@ export function Component(t0) {
   return t9;
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 1, b: 0 },
+    { a: 1, b: 1 },
+    { a: 1, b: 2 },
+    { a: 2, b: 2 },
+    { a: 3, b: 2 },
+    { a: 0, b: 0 },
+  ],
+};
+
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
+(kind: ok) [[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+[[ (exception in render) ReferenceError: ValidateMemoization is not defined ]]
+logs: [{ a: 0 },{ b: 0 },{ a: 0 },{ b: 0 },{ a: 1 },{ b: 1 },{ a: 1 },{ b: 2 },{ a: 2 },{ b: 2 },{ a: 3 },{ b: 2 },{ a: 0 },{ b: 0 }]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-import-object-typed-module-as-hook-name.js

@@ -13,3 +13,17 @@ export function Component({a, b}) {
     </>
   );
 }
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 1, b: 0},
+    {a: 1, b: 1},
+    {a: 1, b: 2},
+    {a: 2, b: 2},
+    {a: 3, b: 2},
+    {a: 0, b: 0},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-unknown-import-from-typed-module.expect.md

@@ -3,7 +3,7 @@
 
 ```javascript
 import {useMemo} from 'react';
-import {useHoook, ValidateMemoization} from 'shared-runtime';
+import {useHook, ValidateMemoization} from 'shared-runtime';
 
 export function Component({a, b}) {
   const item1 = useMemo(() => ({a}), [a]);
@@ -39,7 +39,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
-import { useHoook, ValidateMemoization } from "shared-runtime";
+import { useHook, ValidateMemoization } from "shared-runtime";
 
 export function Component(t0) {
   const $ = _c(17);
@@ -135,10 +135,10 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) [[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
-[[ (exception in render) ReferenceError: useHook is not defined ]]
+(kind: ok) <div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[0],"output":{"b":0}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[1],"output":{"b":1}}</div>
+<div>{"inputs":[1],"output":{"a":1}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[2],"output":{"a":2}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[3],"output":{"a":3}}</div><div>{"inputs":[2],"output":{"b":2}}</div>
+<div>{"inputs":[0],"output":{"a":0}}</div><div>{"inputs":[0],"output":{"b":0}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-provider-unknown-import-from-typed-module.js

@@ -1,5 +1,5 @@
 import {useMemo} from 'react';
-import {useHoook, ValidateMemoization} from 'shared-runtime';
+import {useHook, ValidateMemoization} from 'shared-runtime';
 
 export function Component({a, b}) {
   const item1 = useMemo(() => ({a}), [a]);