[compiler]: use default import for useMemoCache

Author: stipsan

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Imports.ts

@@ -185,16 +185,44 @@ export function updateMemoCacheFunctionImport(
   }
 }
 
+function generateUniqueName(
+  program: NodePath<t.Program>,
+  baseName: string,
+): string {
+  let name = baseName;
+  let counter = 0;
+
+  while (program.scope.hasBinding(name)) {
+    name = `${baseName}${counter}`;
+    counter++;
+  }
+  return name;
+}
+
 function addMemoCacheFunctionImportDeclaration(
   program: NodePath<t.Program>,
   moduleName: string,
   localName: string,
 ): void {
-  program.unshiftContainer(
-    'body',
+  const importName = generateUniqueName(program, 'c');
+
+  program.unshiftContainer('body', [
     t.importDeclaration(
-      [t.importSpecifier(t.identifier(localName), t.identifier('c'))],
+      [t.importDefaultSpecifier(t.identifier(importName))],
       t.stringLiteral(moduleName),
     ),
-  );
+    t.variableDeclaration('const', [
+      t.variableDeclarator(
+        t.objectPattern([
+          t.objectProperty(
+            t.identifier('c'),
+            t.identifier(localName),
+            false,
+            false,
+          ),
+        ]),
+        t.identifier(importName),
+      ),
+    ]),
+  ]);
 }

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts

@@ -703,15 +703,18 @@ function getReactFunctionType(
 }
 
 /**
- * Returns true if the program contains an `import {c} from "<moduleName>"` declaration,
+ * Returns true if the program contains an `import pkg from "<moduleName>"; const {c} = pkg` declaration,
+ * or an `import {c} from "<moduleName>".
  * regardless of the local name of the 'c' specifier and the presence of other specifiers
  * in the same declaration.
  */
 function hasMemoCacheFunctionImport(
   program: NodePath<t.Program>,
   moduleName: string,
 ): boolean {
+  let defaultImportName: string | null = null;
   let hasUseMemoCache = false;
+
   program.traverse({
     ImportSpecifier(path) {
       const imported = path.get('imported');
@@ -729,7 +732,33 @@ function hasMemoCacheFunctionImport(
         hasUseMemoCache = true;
       }
     },
+    ImportDefaultSpecifier(path) {
+      if (
+        path.parentPath.isImportDeclaration() &&
+        path.parentPath.get('source').node.value === moduleName
+      ) {
+        defaultImportName = path.node.local.name;
+      }
+    },
+    VariableDeclarator(path) {
+      if (!defaultImportName) return;
+
+      if (
+        t.isIdentifier(path.node.init) &&
+        path.node.init.name === defaultImportName &&
+        t.isObjectPattern(path.node.id)
+      ) {
+        const properties = path.node.id.properties;
+        hasUseMemoCache = properties.some(
+          prop =>
+            t.isObjectProperty(prop) &&
+            t.isIdentifier(prop.key) &&
+            prop.key.name === 'c',
+        );
+      }
+    },
   });
+
   return hasUseMemoCache;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md

@@ -27,7 +27,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 import { makeObject_Primitives, mutate } from "shared-runtime";
 
 function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md

@@ -18,7 +18,8 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 function Component() {
   const $ = _c(2);
   let t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md

@@ -16,7 +16,8 @@ function component(a) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 function component(a) {
   const $ = _c(2);
   let x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md

@@ -17,7 +17,8 @@ function component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 function component() {
   const $ = _c(1);
   let x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md

@@ -22,7 +22,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 function component() {
   const $ = _c(1);
   let x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-while.expect.md

@@ -26,7 +26,8 @@ function mutate(x, y) {}
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 function foo(cond) {
   const $ = _c(2);
   let a;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scope-starts-within-cond.expect.md

@@ -29,7 +29,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 import { mutate } from "shared-runtime";
 
 /**

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-iife-return-modified-later-logical.expect.md

@@ -22,7 +22,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import c from "react/compiler-runtime";
+const { c: _c } = c;
 import { getNull } from "shared-runtime";
 
 function Component(props) {