From 327e747f0912b5136965ba0c29a35c27ad4521fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ali=20Emir=20=C5=9Een?= <senaliemir@gmail.com>
Date: Mon, 20 May 2024 11:31:24 +0300
Subject: [PATCH] fix(live-previews): fix replacement of the scoped default
 imports (#5967)

---
 packages/live-previews/src/scope/google.tsx   |  2 +-
 packages/live-previews/src/scope/map.tsx      | 10 ++---
 .../src/utils/replace-imports.ts              | 43 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/packages/live-previews/src/scope/google.tsx b/packages/live-previews/src/scope/google.tsx
index f0d3ee330d96..33702294716c 100644
--- a/packages/live-previews/src/scope/google.tsx
+++ b/packages/live-previews/src/scope/google.tsx
@@ -15,7 +15,7 @@ const MockGoogleButton = () => {
         background: "#3871E0",
         borderRadius: "4px",
         display: "flex",
-        justifyContent: "center",
+        justifyContent: "space-between",
         alignItems: "center",
         padding: "2px",
         paddingRight: "12px",
diff --git a/packages/live-previews/src/scope/map.tsx b/packages/live-previews/src/scope/map.tsx
index 41ed29e715d4..8f89203aaeb9 100644
--- a/packages/live-previews/src/scope/map.tsx
+++ b/packages/live-previews/src/scope/map.tsx
@@ -62,9 +62,9 @@ export const packageMap: Record<string, string> = {
 };
 
 export const packageScopeMap: Record<string, RegExp> = {
-  "@mui/lab": /@mui\/lab\/.*/,
-  "@mui/material/styles": /@mui\/material\/styles\/.*/,
-  "@mui/material": /@mui\/material\/.*/,
-  "@mui/icons-material": /@mui\/icons-material\/.*/,
-  "@mui/x-data-grid": /@mui\/x-data-grid\/.*/,
+  "@mui/lab": /@mui\/lab\/(.*)/,
+  "@mui/material/styles": /@mui\/material\/styles\/(.*)/,
+  "@mui/material": /@mui\/material\/(.*)/,
+  "@mui/icons-material": /@mui\/icons-material\/(.*)/,
+  "@mui/x-data-grid": /@mui\/x-data-grid\/(.*)/,
 };
diff --git a/packages/live-previews/src/utils/replace-imports.ts b/packages/live-previews/src/utils/replace-imports.ts
index e45ad12ca95a..fae598b483c4 100644
--- a/packages/live-previews/src/utils/replace-imports.ts
+++ b/packages/live-previews/src/utils/replace-imports.ts
@@ -15,7 +15,15 @@ export const replaceImports = (content: string): string => {
   const imports = new Set();
 
   for (const match of matches) {
-    const [, defaultImport, namedImports, namespaceImport, packageName] = match;
+    const [
+      ,
+      baseDefaultImport,
+      baseNamedImports,
+      namespaceImport,
+      packageName,
+    ] = match;
+    let defaultImport: string | undefined = baseDefaultImport;
+    let namedImports: string | undefined = baseNamedImports;
 
     const regexMatch = Object.entries(packageScopeMap).find(([key, value]) =>
       // value is regexp, key is package name
@@ -26,6 +34,39 @@ export const replaceImports = (content: string): string => {
     if (regexPackage && !(packageName in packageMap)) {
       const importName = packageMap[regexPackage];
 
+      if (regexMatch) {
+        // If `regexMatch` is present, it means we have a scoped import
+        // In this case if there's a default import, we should use the scope name instead
+        // Because the default import name may not match the root export name
+        // eg: import Button$1 from "@mui/material/Button";
+        // We'll convert it to a named export: import { /scopedImportName/ as /defaultImport/ } from "@mui/material";
+        if (defaultImport) {
+          const scopedImportName = packageName.match(regexMatch[1])?.[1];
+          if (scopedImportName) {
+            if (namedImports) {
+              namedImports = `{ ${scopedImportName} as ${defaultImport}, ${namedImports.slice(
+                1,
+                -1,
+              )} }`;
+            } else {
+              namedImports = ` { ${scopedImportName} as ${defaultImport} }`;
+            }
+            defaultImport = undefined;
+          }
+        }
+        if (namedImports) {
+          // If the import is made like this: import { default as Button$1 } from "@mui/material/Button";
+          // We should convert it to: import { Button as Button$1 } from "@mui/material";
+          if (namedImports.includes("default as")) {
+            const scopedImportName = packageName.match(regexMatch[1])?.[1];
+            namedImports = namedImports.replace(
+              "default as",
+              `${scopedImportName} as`,
+            );
+          }
+        }
+      }
+
       if (defaultImport) {
         imports.add(`const { ${defaultImport} } = ${importName};`);
       }