fix(live-previews): fix replacement of the scoped default imports (#5967

)
refinedev · May 20, 2024 · 327e747 · 327e747
1 parent 2e0c498
commit 327e747
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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};`);
       }