fix: return theme declaration file from render func (#1023)

Co-authored-by: Doesnt Matter <[email protected]>

Author: letsbelopez

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\\";

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();
     });
   });
 

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<void>;
   }
 > {
@@ -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) {