feat(compiler): fix import * as React from "react" edge cases in compiler (#1072)

* fix: handle default and namespace imports in compiler

* chore: pnpm changeset

Author: The-Best-Codes

.changeset/young-bees-glow.md

@@ -0,0 +1,5 @@
+---
+"@lingo.dev/_compiler": patch
+---
+
+Fixed compiler handling of namespace imports (import \* as React from "react") and default imports.

packages/compiler/src/jsx-fragment.spec.ts

@@ -136,4 +136,101 @@ function Component() {
     const result = runMutation(input);
     expect(result).toBe(input);
   });
+
+  it("should handle default import React and use React.Fragment", () => {
+    const input = `
+import React from "react";
+
+function Component() {
+  return <></>;
+}
+`.trim();
+
+    const expected = `
+import React from "react";
+function Component() {
+  return <React.Fragment></React.Fragment>;
+}
+`.trim();
+    const result = runMutation(input);
+    expect(result).toBe(expected);
+  });
+
+  it("should handle import * as React and use React.Fragment", () => {
+    const input = `
+import * as React from "react";
+
+function Component() {
+  return <></>;
+}
+`.trim();
+
+    const expected = `
+import * as React from "react";
+function Component() {
+  return <React.Fragment></React.Fragment>;
+}
+`.trim();
+    const result = runMutation(input);
+    expect(result).toBe(expected);
+  });
+
+  it("should handle mixed default and named imports", () => {
+    const input = `
+import React, { useState } from "react";
+
+function Component() {
+  return <></>;
+}
+`.trim();
+
+    const expected = `
+import React, { useState } from "react";
+function Component() {
+  return <React.Fragment></React.Fragment>;
+}
+`.trim();
+    const result = runMutation(input);
+    expect(result).toBe(expected);
+  });
+
+  it("should handle separate namespace and named imports", () => {
+    const input = `
+import * as React from "react";
+import { Fragment } from "react";
+
+function Component() {
+  return <></>;
+}
+`.trim();
+
+    const expected = `
+import * as React from "react";
+import { Fragment } from "react";
+function Component() {
+  return <Fragment></Fragment>;
+}
+`.trim();
+    const result = runMutation(input);
+    expect(result).toBe(expected);
+  });
+
+  it("should handle import * as SomeOtherName from react", () => {
+    const input = `
+import * as SomeOtherName from "react";
+
+function Component() {
+  return <></>;
+}
+`.trim();
+
+    const expected = `
+import * as SomeOtherName from "react";
+function Component() {
+  return <SomeOtherName.Fragment></SomeOtherName.Fragment>;
+}
+`.trim();
+    const result = runMutation(input);
+    expect(result).toBe(expected);
+  });
 });

packages/compiler/src/utils/index.ts

@@ -90,6 +90,24 @@ function findExistingImport(
           path.stop();
           return;
         }
+
+        // Handle default imports (import React from "react")
+        if (t.isImportDefaultSpecifier(specifier)) {
+          // For default imports, we can access the exported name via the default import
+          // e.g., React.Fragment when we have "import React from 'react'"
+          result = `${specifier.local.name}.${exportedName}`;
+          path.stop();
+          return;
+        }
+
+        // Handle namespace imports (import * as React from "react")
+        if (t.isImportNamespaceSpecifier(specifier)) {
+          // For namespace imports, we can access the exported name via the namespace
+          // e.g., React.Fragment when we have "import * as React from 'react'"
+          result = `${specifier.local.name}.${exportedName}`;
+          path.stop();
+          return;
+        }
       }
     },
   });