Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(studio-ui-codegen-react): include all imports used in generated components #40

Merged
merged 1 commit into from
Sep 7, 2021
Merged

fix(studio-ui-codegen-react): include all imports used in generated components #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions .../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
exports[`amplify render tests basic component tests should generate a simple box component 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { View } from \\"@aws-amplify/ui-react\\";
import { EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type TestProps = {} & CommonProps;
export type TestProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function Test(props: TestProps): JSX.Element {
return (<View fontFamily=\\"Times New Roman\\" fontSize=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"View\\")}></View>);
}"
Expand All @@ -14,9 +16,11 @@ export default function Test(props: TestProps): JSX.Element {
exports[`amplify render tests basic component tests should generate a simple button component 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { Button } from \\"@aws-amplify/ui-react\\";
import { Button, EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type CustomButtonProps = {} & CommonProps;
export type CustomButtonProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function CustomButton(props: CustomButtonProps): JSX.Element {
return (<Button color=\\"#ff0000\\" width=\\"20\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button>);
}"
Expand All @@ -25,9 +29,11 @@ export default function CustomButton(props: CustomButtonProps): JSX.Element {
exports[`amplify render tests basic component tests should generate a simple text component 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { Text } from \\"@aws-amplify/ui-react\\";
import { EscapeHatchProps, Text, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type CustomTextProps = {} & CommonProps;
export type CustomTextProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function CustomText(props: CustomTextProps): JSX.Element {
return (<Text color=\\"#ff0000\\" width=\\"20px\\" value=\\"Text Value\\" {...props} {...getOverrideProps(props.overrides, \\"Text\\")}>Text Value</Text>);
}"
Expand All @@ -36,9 +42,11 @@ export default function CustomText(props: CustomTextProps): JSX.Element {
exports[`amplify render tests complex component tests should generate a button within a box component 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { Button, View } from \\"@aws-amplify/ui-react\\";
import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type BoxWithButtonProps = {} & CommonProps;
export type BoxWithButtonProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
}"
Expand All @@ -47,9 +55,11 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
exports[`amplify render tests complex component tests should generate a component with custom child 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { CustomButton, View } from \\"@aws-amplify/ui-react\\";
import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type BoxWithCustomButtonProps = {} & CommonProps;
export type BoxWithCustomButtonProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function BoxWithCustomButton(props: BoxWithCustomButtonProps): JSX.Element {
return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
}"
Expand All @@ -58,9 +68,11 @@ export default function BoxWithCustomButton(props: BoxWithCustomButtonProps): JS
exports[`amplify render tests complex component tests should generate a component with exposeAs prop 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { Button, View } from \\"@aws-amplify/ui-react\\";
import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type BoxWithButtonProps = {} & CommonProps;
export type BoxWithButtonProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
}"
Expand All @@ -69,9 +81,11 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
"/* eslint-disable */
import React from \\"react\\";
import { CustomButton, View } from \\"@aws-amplify/ui-react\\";
import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";

export type BoxWithButtonProps = {} & CommonProps;
export type BoxWithButtonProps = {} & {
overrides?: EscapeHatchProps | undefined | null;
};
export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
return (<View padding-left {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" buttonText=\\"Click Me\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
}"
Expand Down
2 changes: 1 addition & 1 deletion packages/studio-ui-codegen-react/lib/import-collection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class ImportCollection {
factory.createImportClause(
undefined,
factory.createNamedImports(
[...value].map((item) => {
[...value].sort().map((item) => {
return factory.createImportSpecifier(undefined, factory.createIdentifier(item));
}),
),
Expand Down
1 change: 1 addition & 0 deletions packages/studio-ui-codegen-react/lib/react-component-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export abstract class ReactComponentRenderer<TPropIn> extends ComponentRendererB
factory.createStringLiteral(tagName),
]),
);
this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');
attributes.push(overrideAttr);
}
}
2 changes: 2 additions & 0 deletions packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends Compon
factory.createStringLiteral(tagName),
]),
);
this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');
attributes.push(overrideAttr);
}

Expand All @@ -89,6 +90,7 @@ export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends Compon
factory.createStringLiteral(tagName),
]),
);
this.importCollection.addImport('@aws-amplify/ui-react', 'findChildOverrides');
attributes.push(findChildOverrideAttr);
}

Expand Down
20 changes: 16 additions & 4 deletions packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
console.log('JSX rendered');

const wrappedFunction = this.renderFunctionWrapper(this.component.name ?? StudioRendererConstants.unknownName, jsx);
const propsDeclaration = this.renderBindingPropsType(this.component);

const imports = this.importCollection.buildImportStatements();

Expand All @@ -123,7 +124,6 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer

componentText += EOL;

const propsDeclaration = this.renderBindingPropsType(this.component);
const propsPrinted = printer.printNode(EmitHint.Unspecified, propsDeclaration, file);
componentText += propsPrinted;

Expand Down Expand Up @@ -210,14 +210,26 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer

renderBindingPropsType(component: StudioComponent): TypeAliasDeclaration {
const componentPropType = getComponentPropName(component.name);
this.importCollection.addImport('@aws-amplify/ui-react', 'EscapeHatchProps');
return factory.createTypeAliasDeclaration(
undefined,
factory.createModifiersFromModifierFlags(ModifierFlags.Export),
componentPropType,
[factory.createModifier(ts.SyntaxKind.ExportKeyword)],
factory.createIdentifier(componentPropType),
undefined,
factory.createIntersectionTypeNode([
this.buildBindingPropNodes(component),
factory.createTypeReferenceNode('CommonProps', undefined),
factory.createTypeLiteralNode([
factory.createPropertySignature(
undefined,
factory.createIdentifier('overrides'),
factory.createToken(ts.SyntaxKind.QuestionToken),
factory.createUnionTypeNode([
factory.createTypeReferenceNode(factory.createIdentifier('EscapeHatchProps'), undefined),
factory.createKeywordTypeNode(ts.SyntaxKind.UndefinedKeyword),
factory.createLiteralTypeNode(factory.createNull()),
]),
),
]),
]),
);
}
Expand Down