Update on "compiler: distinguish globals/imports/module-locals"

We currently use `LoadGlobal` and `StoreGlobal` to represent any read (or write) of a variable defined outside the component or hook that is being compiled. This is mostly fine, but for a lot of things we want to do going forward (resolving types across modules, for example) it helps to understand the actual source of a variable.

This PR is an incremental step in that direction. We continue to use LoadGlobal/StoreGlobal, but LoadGlobal now has a `binding:NonLocalBinding` instead of just the name of the global. The NonLocalBinding type tells us whether it was an import (and which kind, the source module name etc), a module-local binding, or a true global. By keeping the LoadGlobal/StoreGlobal instructions, most code that deals with "anything not declared locally" doesn't have to care about the difference. However, code that _does_ want to know the source of the value can figure it out.

[ghstack-poisoned]

Author: josephsavona

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

@@ -255,7 +255,7 @@ export default class HIRBuilder {
       return { kind: "Global", name: originalName };
     }
 
-    // Check if the binding is from module scope, if so return null
+    // Check if the binding is from module scope
     const outerBinding =
       this.parentFunction.scope.parent.getBinding(originalName);
     if (babelBinding === outerBinding) {
@@ -306,6 +306,13 @@ export default class HIRBuilder {
   isContextIdentifier(path: NodePath<t.Identifier | t.JSXIdentifier>): boolean {
     const binding = this.#resolveBabelBinding(path);
     if (binding) {
+      // Check if the binding is from module scope, if so return null
+      const outerBinding = this.parentFunction.scope.parent.getBinding(
+        path.node.name
+      );
+      if (binding === outerBinding) {
+        return false;
+      }
       return this.#env.isContextIdentifier(binding.identifier);
     } else {
       return false;