formgen: add type declaration generation

.changeset/famous-rockets-prove.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/form-generator': patch
+---
+
+Generate type declaration files for rendered components

packages/create-amplify/src/get_project_root.ts

@@ -9,7 +9,7 @@ import { logger } from './logger.js';
 export const getProjectRoot = async () => {
   const useDefault = process.env.npm_config_yes === 'true';
   const defaultProjectRoot = '.';
-  let projectRoot = useDefault
+  let projectRoot: string = useDefault
     ? defaultProjectRoot
     : await AmplifyPrompter.input({
         message: 'Where should we create your project?',

packages/form-generator/src/local_codegen_graphql_form_generator.test.ts

@@ -104,6 +104,35 @@ void describe('LocalCodegenGraphqlFormGenerator', () => {
       );
       await assert.rejects(() => l.generateForms({ models: ['Author'] }));
     });
+    void it('type declaration files are created for each model', async () => {
+      const models = ['Post', 'Author', 'Foo'];
+      const schema = createMockSchema(models);
+      const l = new LocalGraphqlFormGenerator(
+        async () => schema as unknown as GenericDataSchema,
+        {
+          graphqlDir: '../graphql',
+        },
+        (map) => {
+          return new CodegenGraphqlFormGeneratorResult(map);
+        }
+      );
+      const output = await l.generateForms();
+      const fsMock = mock.method(fs, 'open');
+      fsMock.mock.mockImplementation(async () => ({
+        writeFile: async () => undefined,
+        stat: async () => ({}),
+        close: async () => undefined,
+      }));
+      await output.writeToDirectory('./');
+      const writeArgs = fsMock.mock.calls.flatMap((c) => c.arguments[0]);
+      assert(
+        models.every((m) => {
+          return writeArgs.some((arg) =>
+            new RegExp(`${m}(Update|Create)Form.d.ts`).test(arg.toString())
+          );
+        })
+      );
+    });
     void it('when an undefined filter is passed, all models are generated', async () => {
       const models = ['Post', 'Author', 'Foo'];
       const schema = createMockSchema(models);

packages/form-generator/src/local_codegen_graphql_form_generator.ts

@@ -14,6 +14,7 @@ import {
   ScriptKind,
   ScriptTarget,
   UtilTemplateType,
+  getDeclarationFilename,
 } from '@aws-amplify/codegen-ui-react';
 import {
   FormGenerationOptions,
@@ -125,11 +126,20 @@ export class LocalGraphqlFormGenerator implements GraphqlFormGenerator {
       formFeatureFlags
     );
     const { componentText, declaration } = renderer.renderComponentInternal();
-    return {
-      componentText,
-      fileName: renderer.fileName,
-      declaration,
-    };
+    const files = [
+      {
+        componentText,
+        fileName: renderer.fileName,
+      },
+    ];
+    if (declaration) {
+      files.push({
+        componentText: declaration,
+        fileName: getDeclarationFilename(renderer.fileName),
+      });
+    }
+
+    return files;
   };
   private filterModelsByName = (
     filteredModelNames: string[],
@@ -262,8 +272,10 @@ export class LocalGraphqlFormGenerator implements GraphqlFormGenerator {
     );
     const forms = baseForms.reduce<Record<string, string>>(
       (prev, formSchema) => {
-        const result = this.codegenForm(dataSchema, formSchema);
-        prev[result.fileName] = result.componentText;
+        const results = this.codegenForm(dataSchema, formSchema);
+        results.forEach((result) => {
+          prev[result.fileName] = result.componentText;
+        });
         return prev;
       },
       {}