From 7d68d83a1756606298b606b37b05d72a351da17c Mon Sep 17 00:00:00 2001 From: Albert Winberg Date: Sat, 3 Feb 2024 00:40:54 +0000 Subject: [PATCH] fix: use non-aliased name when importing custom components --- .../__tests__/studio-ui-codegen-react.test.ts | 10 + .../amplify-ui-renderers/customComponent.ts | 6 +- .../components/footerWithCustomButton.json | 180 ++++++++++++++++++ 3 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 packages/codegen-ui/example-schemas/components/footerWithCustomButton.json 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 index 59bdfbaca..005a5a598 100644 --- 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 index 3a446d33e..279cbe7ca 100644 --- 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 extends ReactComponentRenderer { @@ -29,8 +29,8 @@ export default class CustomComponentRenderer 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 new file mode 100644 index 000000000..551c6680e --- /dev/null +++ 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" +} \ No newline at end of file