diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap index 9ee9d578..cff61c2a 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap @@ -91,6 +91,12 @@ export default createTheme({ " `; +exports[`react theme renderer tests theme should render the theme with ES5 2`] = ` +"declare const _default: any; +export default _default; +" +`; + exports[`react theme renderer tests theme should render the theme with TSX 1`] = ` "/* eslint-disable */ import { createTheme } from \\"@aws-amplify/ui-react\\"; diff --git a/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts b/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts index db76c8d2..3c179cab 100644 --- a/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts +++ b/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts @@ -25,11 +25,14 @@ function generateWithThemeRenderer( jsonFile: string, renderConfig: ReactRenderConfig = {}, options?: ReactThemeStudioTemplateRendererOptions, -): string { +) { const rendererFactory = new StudioTemplateRendererFactory( (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig, options), ); - return rendererFactory.buildRenderer(loadSchemaFromJSONFile(jsonFile)).renderComponent().componentText; + const { componentText, declaration } = rendererFactory + .buildRenderer(loadSchemaFromJSONFile(jsonFile)) + .renderComponent(); + return { componentText, declaration }; } function generateThemeObject(jsonFile: string): any { @@ -46,19 +49,28 @@ function generateThemeObject(jsonFile: string): any { describe('react theme renderer tests', () => { describe('theme', () => { it('should render the theme', () => { - expect(generateWithThemeRenderer('theme')).toMatchSnapshot(); + expect(generateWithThemeRenderer('theme').componentText).toMatchSnapshot(); }); it('should render the theme with TSX', () => { - expect(generateWithThemeRenderer('theme', { script: ScriptKind.TSX })).toMatchSnapshot(); + const { componentText, declaration } = generateWithThemeRenderer('theme', { script: ScriptKind.TSX }); + expect(componentText).toMatchSnapshot(); + expect(declaration).toBeUndefined(); }); it('should render the theme with ES5', () => { - expect(generateWithThemeRenderer('theme', { target: ScriptTarget.ES5, script: ScriptKind.JS })).toMatchSnapshot(); + const { componentText, declaration } = generateWithThemeRenderer('theme', { + target: ScriptTarget.ES5, + script: ScriptKind.JS, + renderTypeDeclarations: true, + }); + expect(componentText).toMatchSnapshot(); + expect(declaration).toBeDefined(); + expect(declaration).toMatchSnapshot(); }); it('should render the default theme', () => { - expect(generateWithThemeRenderer('theme', {}, { renderDefaultTheme: true })).toMatchSnapshot(); + expect(generateWithThemeRenderer('theme', {}, { renderDefaultTheme: true }).componentText).toMatchSnapshot(); }); }); diff --git a/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts index 26f19a98..4201631a 100644 --- a/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts +++ b/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts @@ -54,6 +54,7 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< ReactOutputManager, { componentText: string; + declaration: string | undefined; renderComponentToFilesystem: (outputPath: string) => Promise; } > { @@ -87,6 +88,7 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< return { componentText: transpiledComponentText, + declaration, renderComponentToFilesystem: async (outputPath: string) => { await this.renderComponentToFilesystem(transpiledComponentText)(this.fileName)(outputPath); if (declaration) {