This is a monorepo for Amplify UI Code Generation packages.
To build the project, run the following commands:
lerna bootstrap
lerna run build
The react code generator defined in studio-ui-codegen-react package accepts JSON conforming to the Studio Component Model schema as input and then outputs React code either as in-memory string or in a file with the path specified in outputConfig.
// Create a factory that can create a renderer for a specific platform (such as Amplify UI)
const rendererFactory = new StudioTemplateRendererFactory(
(component: StudioComponent) => new AmplifyRenderer(component)
);
// Create a renderer manager with factory and output config as input parameter
const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
// Use the renderer to generate UI code
rendererManager.renderSchemaToTemplate(schema as any);
The test-generator package contains sample code that uses above pattern. To run the sample app in test-generator package, after you have built the entire project successfully, use the following command.
node ./packages/test-generator/dist/index.js
@amzn/test-generator
This is a sample project that utilizes codegen to render components in a desired framework. This project is currently configured to codegen Amplify UI Wrapper components.
@amzn/amplify-ui-codegen-schema
This package contains all of the Json schema definitions as Typescript types.
@amzn/studio-ui-codegen
This packages contains all of the base classes for the codegen providers. This is currently geared to generating web components with JSX.
@amzn/studio-ui-codegen-react
This package contains the necessary codegen to render directly to Amplify Components from a Studio Schema.