fix: use non-aliased name when importing custom components

aws-amplify · Feb 3, 2024 · 7d68d83 · 7d68d83
1 parent e855cc8
commit 7d68d83
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 3 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -371,6 +371,16 @@ describe('amplify render tests', () => {
     });
   });
 
+  describe('component referencing an aliased component', () => {
+    it('should have an import statement referencing non-aliased source path and name for custom component', () => {
+      const { componentText } = generateWithAmplifyRenderer('components/footerWithCustomButton');
+      expect(componentText).toContain('import { Button as ButtonCustom, ButtonProps } from "./Button";');
+      expect(componentText).not.toContain('import { Button16 as ButtonCustom } from "./Button16";');
+      expect(componentText).not.toContain('import { Button18 as ButtonCustom } from "./Button18";');
+      expect(componentText).not.toContain('import { Button110 as ButtonCustom } from "./Button110";');
+    });
+  });
+
   describe('custom render config', () => {
     it('should render ES5', () => {
       expect(

diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/customComponent.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/customComponent.ts
@@ -15,7 +15,7 @@
  */
 import { StudioComponentChild } from '@aws-amplify/codegen-ui';
 import { JsxChild, JsxElement, factory } from 'typescript';
-import { isAliased } from '../helpers';
+import { isAliased, removeAlias } from '../helpers';
 import { ReactComponentRenderer } from '../react-component-renderer';
 
 export default class CustomComponentRenderer<TPropIn> extends ReactComponentRenderer<TPropIn> {
@@ -29,8 +29,8 @@ export default class CustomComponentRenderer<TPropIn> extends ReactComponentRend
 
     if (isAliased(this.component.componentType)) {
       this.importCollection.addImport(
-        `./${this.component.name}`,
-        `${this.component.name} as ${this.component.componentType}`,
+        `./${removeAlias(this.component.componentType)}`,
+        `${removeAlias(this.component.componentType)} as ${this.component.componentType}`,
       );
     } else {
       this.importCollection.addImport(`./${this.component.componentType}`, 'default');

diff --git a/packages/codegen-ui/example-schemas/components/footerWithCustomButton.json b/packages/codegen-ui/example-schemas/components/footerWithCustomButton.json
@@ -0,0 +1,180 @@
+{
+  "bindingProperties" : { },
+  "children" : [ {
+    "children" : [ ],
+    "componentType" : "ButtonCustom",
+    "events" : { },
+    "name" : "Button16",
+    "properties" : {
+      "width" : {
+        "value" : "101px"
+      },
+      "height" : {
+        "value" : "31px"
+      },
+      "display" : {
+        "value" : "block"
+      },
+      "gap" : {
+        "value" : "unset"
+      },
+      "alignItems" : {
+        "value" : "unset"
+      },
+      "justifyContent" : {
+        "value" : "unset"
+      },
+      "overflow" : {
+        "value" : "hidden"
+      },
+      "shrink" : {
+        "value" : "0"
+      },
+      "position" : {
+        "value" : "relative"
+      },
+      "borderRadius" : {
+        "value" : "5px"
+      },
+      "padding" : {
+        "value" : "0px 0px 0px 0px"
+      },
+      "backgroundColor" : {
+        "value" : "rgba(218,228,253,1)"
+      }
+    },
+    "sourceId" : "1:6"
+  }, {
+    "children" : [ ],
+    "componentType" : "ButtonCustom",
+    "events" : { },
+    "name" : "Button18",
+    "properties" : {
+      "width" : {
+        "value" : "101px"
+      },
+      "height" : {
+        "value" : "31px"
+      },
+      "display" : {
+        "value" : "block"
+      },
+      "gap" : {
+        "value" : "unset"
+      },
+      "alignItems" : {
+        "value" : "unset"
+      },
+      "justifyContent" : {
+        "value" : "unset"
+      },
+      "overflow" : {
+        "value" : "hidden"
+      },
+      "shrink" : {
+        "value" : "0"
+      },
+      "position" : {
+        "value" : "relative"
+      },
+      "borderRadius" : {
+        "value" : "5px"
+      },
+      "padding" : {
+        "value" : "0px 0px 0px 0px"
+      },
+      "backgroundColor" : {
+        "value" : "rgba(218,228,253,1)"
+      }
+    },
+    "sourceId" : "1:8"
+  }, {
+    "children" : [ ],
+    "componentType" : "ButtonCustom",
+    "events" : { },
+    "name" : "Button110",
+    "properties" : {
+      "width" : {
+        "value" : "101px"
+      },
+      "height" : {
+        "value" : "31px"
+      },
+      "display" : {
+        "value" : "block"
+      },
+      "gap" : {
+        "value" : "unset"
+      },
+      "alignItems" : {
+        "value" : "unset"
+      },
+      "justifyContent" : {
+        "value" : "unset"
+      },
+      "overflow" : {
+        "value" : "hidden"
+      },
+      "shrink" : {
+        "value" : "0"
+      },
+      "position" : {
+        "value" : "relative"
+      },
+      "borderRadius" : {
+        "value" : "5px"
+      },
+      "padding" : {
+        "value" : "0px 0px 0px 0px"
+      },
+      "backgroundColor" : {
+        "value" : "rgba(218,228,253,1)"
+      }
+    },
+    "sourceId" : "1:10"
+  } ],
+  "componentType" : "Flex",
+  "events" : { },
+  "name" : "Footer",
+  "overrides" : { },
+  "properties" : {
+    "gap" : {
+      "value" : "10px"
+    },
+    "direction" : {
+      "value" : "row"
+    },
+    "width" : {
+      "value" : "unset"
+    },
+    "height" : {
+      "value" : "unset"
+    },
+    "justifyContent" : {
+      "value" : "flex-start"
+    },
+    "alignItems" : {
+      "value" : "flex-start"
+    },
+    "overflow" : {
+      "value" : "hidden"
+    },
+    "position" : {
+      "value" : "relative"
+    },
+    "padding" : {
+      "value" : "0px 2px 0px 2px"
+    },
+    "backgroundColor" : {
+      "value" : "rgba(255,255,255,1)"
+    }
+  },
+  "schemaVersion" : "1.0",
+  "sourceId" : "1:12",
+  "variants" : [ ],
+  "id" : "c-ap7piTnlNFRQAVJgxR",
+  "appId" : "d2aj06xxzdz14r",
+  "environmentName" : "staging",
+  "createdAt" : "2024-02-02T23:27:00.983Z",
+  "modifiedAt" : "2024-02-02T23:27:00.983Z"
+}