feat: add output configuration for studio codegen (#32)

packages/studio-ui-codegen-react/index.ts

@@ -1 +1,2 @@
-export * from "./lib/amplify-ui-renderers/amplify-renderer";
+export * from "./lib/amplify-ui-renderers/amplify-renderer";
+export * from "./lib/index"

packages/studio-ui-codegen-react/lib/index.ts

@@ -7,8 +7,9 @@ export * from "./react-component-with-children-renderer";
 export * from "./react-component-renderer";
 export { ImportCollection } from "./import-collection";
 export * from "./react-studio-template-renderer";
+export * from "./react-output-config";
 
-export default class ReactOutputManager extends FrameworkOutputManager<string> {
+export class ReactOutputManager extends FrameworkOutputManager<string> {
   async writeComponent(
     input: string,
     outputPath: string,

packages/studio-ui-codegen-react/lib/react-output-config.ts

@@ -0,0 +1,31 @@
+import { FrameworkOutputConfig } from "@amzn/studio-ui-codegen";
+
+export type ReactOutputConfig = FrameworkOutputConfig & {
+  /**
+   * @name outputFormat
+   * @type string
+   * @description required, the format of react ui codegen. 
+   * @values 'ts' | 'tsx' | 'js' | 'jsx'
+   * @default jsx
+   */
+  outputFormat: JSOutputFormatEnum;
+  // ES5,ES6
+  compileTarget: CompileTargetEnum;
+  // CommonJS, ESModule
+  module: JSModuleEnum
+}
+
+export enum JSOutputFormatEnum {
+   ts = 'ts',
+   tsx = 'tsx',
+   js = 'js',
+   jsx = 'jsx'
+}
+export enum CompileTargetEnum {
+   ES5 = 'ES5',
+   ES6 = 'ES6'
+}
+export enum JSModuleEnum {
+   CommonJS = 'CommonJS',
+   ESModule = 'ESModule'
+}

packages/studio-ui-codegen/index.ts

@@ -9,3 +9,4 @@ export * from "./lib/template-renderer-factory";
 
 export * from "./lib/mapper/mapper-base";
 export * from "./lib/renderer-helper";
+export * from "./lib/framework-output-config";

packages/studio-ui-codegen/lib/framework-output-config.ts

@@ -0,0 +1,9 @@
+//The basic type for studio ui codegen output configuration
+export type FrameworkOutputConfig = {
+  /**
+   * @name outputPathDir
+   * @type string
+   * @description required, the directory of output path
+   */
+   outputPathDir: string;
+}

packages/studio-ui-codegen/lib/studio-template-renderer.ts

@@ -1,11 +1,12 @@
 import { FrameworkOutputManager } from "./framework-output-manager";
 import { StudioComponent } from "@amzn/amplify-ui-codegen-schema";
 import { StudioRendererConstants } from "./renderer-helper";
+import { RenderTextComponentResponse } from "./render-component-response";
 
 export abstract class StudioTemplateRenderer<
   TSource,
   TOutputManager extends FrameworkOutputManager<TSource>,
-  TRenderOutput
+  TRenderOutput extends RenderTextComponentResponse
 > {
   /**
    *
@@ -22,7 +23,7 @@ export abstract class StudioTemplateRenderer<
    */
   abstract renderComponent(): TRenderOutput;
 
-  protected renderComponentToFilesystem(componentContent: TSource) {
+  renderComponentToFilesystem(componentContent: TSource) {
     return (outputPath: string) =>
       this.outputManager.writeComponent(
         componentContent,

packages/studio-ui-codegen/lib/template-renderer-factory.ts

@@ -1,6 +1,8 @@
 import { FrameworkOutputManager } from "./framework-output-manager";
 import { StudioTemplateRenderer } from "./studio-template-renderer";
+
 import { StudioComponent } from "@amzn/amplify-ui-codegen-schema";
+import { RenderTextComponentResponse } from "./render-component-response";
 
 /**
  * This class is used to wrap the created of renderers due to each renderer
@@ -9,7 +11,7 @@ import { StudioComponent } from "@amzn/amplify-ui-codegen-schema";
 export class StudioTemplateRendererFactory<
   TSource,
   TOutputManager extends FrameworkOutputManager<TSource>,
-  TRenderOutput,
+  TRenderOutput extends RenderTextComponentResponse,
   TRenderer extends StudioTemplateRenderer<
     TSource,
     TOutputManager,

packages/studio-ui-codegen/lib/template-renderer.ts

@@ -1,8 +1,11 @@
 import { FrameworkOutputManager } from "./framework-output-manager";
 import { StudioTemplateRenderer } from "./studio-template-renderer";
 import { StudioTemplateRendererFactory } from "./template-renderer-factory";
+
 import { StudioComponent } from "@amzn/amplify-ui-codegen-schema";
 import { StudioRendererConstants } from "./renderer-helper";
+import { FrameworkOutputConfig } from "./framework-output-config";
+import { RenderTextComponentResponse } from "./render-component-response";
 
 var fs = require("fs");
 var path = require("path");
@@ -14,11 +17,11 @@ var path = require("path");
 export class StudioTemplateRendererManager<
   TSource,
   TOutputManager extends FrameworkOutputManager<TSource>,
-  TRenderOutput,
+  TRenderOutput extends RenderTextComponentResponse,
   TRenderer extends StudioTemplateRenderer<
     TSource,
     TOutputManager,
-    TRenderOutput
+    TRenderOutput 
   >
 > {
   constructor(
@@ -28,19 +31,23 @@ export class StudioTemplateRendererManager<
       TRenderOutput,
       TRenderer
     >,
-    private renderPath: string = "components"
+    private outputConfig: FrameworkOutputConfig
   ) {
+    const renderPath = this.outputConfig.outputPathDir;
     if (!fs.existsSync(renderPath)) {
       fs.mkdirSync(renderPath);
     }
   }
 
-  renderSchemaToTemplate(component: StudioComponent | undefined) {
+  renderSchemaToTemplate(component: StudioComponent | undefined): TRenderOutput {
     if (!component) {
       throw new Error("Please ensure you have passed in a valid component schema");
     }
     console.log("Rendering a component ", component.componentType);
-    this.renderer.buildRenderer(component).renderComponent();
+    const componentRenderer = this.renderer.buildRenderer(component);
+    let result = componentRenderer.renderComponent();
+    componentRenderer.renderComponentToFilesystem(result.componentText as any)(this.outputConfig.outputPathDir);
+    return result;
   }
 
   renderSchemaToTemplates(jsonSchema: StudioComponent[] | undefined) {
@@ -51,8 +58,7 @@ export class StudioTemplateRendererManager<
     console.log("Rendering multiple components ", jsonSchema.length);
 
     for (let component of jsonSchema) {
-      const componentPath = path.join(this.renderPath, component.name ?? StudioRendererConstants.unknownName);
-
+      const componentPath = path.join(this.outputConfig.outputPathDir, component.name ?? StudioRendererConstants.unknownName);
       this.renderer.buildRenderer(component).renderComponent();
     }
   }

packages/test-generator/index.ts

@@ -5,7 +5,14 @@ import {
   StudioTemplateRendererManager,
   StudioTemplateRendererFactory,
 } from "@amzn/studio-ui-codegen";
-import { AmplifyRenderer } from "@amzn/studio-ui-codegen-react";
+import { 
+  AmplifyRenderer, 
+  ReactOutputConfig,
+  JSModuleEnum,
+  CompileTargetEnum,
+  JSOutputFormatEnum
+} from "@amzn/studio-ui-codegen-react";
+import path from 'path';
 
 import * as schema from "./lib/dataBindingWithDataStore.json";
 
@@ -15,7 +22,14 @@ const rendererFactory = new StudioTemplateRendererFactory(
   (component: StudioComponent) => new AmplifyRenderer(component)
 );
 
-const rendererManager = new StudioTemplateRendererManager(rendererFactory, '.');
+const outputPathDir = path.resolve(path.join(__dirname, '..', 'ui-components'));
+const outputConfig: ReactOutputConfig = {
+  outputPathDir,
+  module: JSModuleEnum.CommonJS,
+  compileTarget: CompileTargetEnum.ES6,
+  outputFormat: JSOutputFormatEnum.tsx
+};
+const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
 
 console.log(rendererManager);
 
@@ -28,11 +42,9 @@ console.log(compOnly.compText);
 console.log("componentImports ");
 console.log(compOnly.importsText);
 
-/*
 const compOnlyAppSample = rendererFactory.buildRenderer(schema as any).renderSampleCodeSnippet();
 console.log("Code Snippet Output");
 console.log("componentText ");
 console.log(compOnlyAppSample.compText);
 console.log("componentImports ");
 console.log(compOnlyAppSample.importsText);
-*/