feat: poc for useEffect to manage state dependencies

packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts

@@ -406,6 +406,8 @@ describe('amplify render tests', () => {
           script: ScriptKind.JS,
         }).componentText,
       ).toMatchSnapshot();
+    it('supports all initial value binding types', () => {
+      expect(generateWithAmplifyRenderer('workflow/initialValueBindings')).toMatchSnapshot();
     });
   });
 

packages/codegen-ui-react/lib/imports/import-mapping.ts

@@ -14,6 +14,7 @@
   limitations under the License.
  */
 export enum ImportSource {
+  REACT = 'react',
   UI_REACT = '@aws-amplify/ui-react',
   UI_REACT_INTERNAL = '@aws-amplify/ui-react/internal',
   AMPLIFY_DATASTORE = '@aws-amplify/datastore',
@@ -38,6 +39,7 @@ export enum ImportValue {
   USE_DATA_STORE_DELETE_ACTION = 'useDataStoreDeleteAction',
   USE_AUTH_SIGN_OUT_ACTION = 'useAuthSignOutAction',
   USE_STATE_MUTATION_ACTION = 'useStateMutationAction',
+  USE_EFFECT = 'useEffect',
 }
 
 export const ImportMapping: Record<ImportValue, ImportSource> = {
@@ -58,4 +60,5 @@ export const ImportMapping: Record<ImportValue, ImportSource> = {
   [ImportValue.USE_DATA_STORE_DELETE_ACTION]: ImportSource.UI_REACT_INTERNAL,
   [ImportValue.USE_AUTH_SIGN_OUT_ACTION]: ImportSource.UI_REACT_INTERNAL,
   [ImportValue.USE_STATE_MUTATION_ACTION]: ImportSource.UI_REACT_INTERNAL,
+  [ImportValue.USE_EFFECT]: ImportSource.REACT,
 };

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

@@ -77,6 +77,7 @@ import {
   buildUseActionStatement,
   mapSyntheticStateReferences,
   buildStateStatements,
+  buildUseEffectStatements,
 } from './workflow';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
@@ -605,6 +606,12 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       statements.push(entry);
     });
 
+    const useEffectStatements = buildUseEffectStatements(component, this.componentMetadata);
+    useEffectStatements.forEach((entry) => {
+      this.importCollection.addMappedImport(ImportValue.USE_EFFECT);
+      statements.push(entry);
+    });
+
     return statements;
   }
 

packages/codegen-ui-react/lib/workflow/mutation.ts

@@ -24,6 +24,7 @@ import {
   StudioComponentProperty,
   ComponentMetadata,
   getComponentFromComponentTree,
+  computeStateReferenceMetadata,
 } from '@aws-amplify/codegen-ui';
 import {
   isStateProperty,
@@ -63,6 +64,43 @@ const PrimitiveDefaultValuePropMapping: PrimitiveLevelPropConfiguration<string>
   },
 );
 
+/**
+ * TODO: Determine if we should be initializing state values w/ these data deps to `undefined`,
+ * then only setting the value here in the useEffect once the dependencies are no longer null.
+ *
+ * This way we'll be able to still use the useEffect for an initialization once the data values have settled,
+ * and we won't overwrite whatever mutation applies to them if useAuth or useData changes.
+ */
+export function buildUseEffectStatements(
+  component: StudioComponent,
+  componentMetadata: ComponentMetadata,
+): Statement[] {
+  const stateReferenceMetadata = computeStateReferenceMetadata(component, componentMetadata.stateReferences);
+  return stateReferenceMetadata
+    .filter(({ dataDependencies }) => dataDependencies.length > 0)
+    .map(({ stateReference, dataDependencies }) => {
+      return factory.createExpressionStatement(
+        factory.createCallExpression(factory.createIdentifier('useEffect'), undefined, [
+          factory.createArrowFunction(
+            undefined,
+            undefined,
+            [],
+            undefined,
+            factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+            factory.createBlock([
+              factory.createExpressionStatement(
+                factory.createCallExpression(factory.createIdentifier(getSetStateName(stateReference)), undefined, [
+                  getStateInitialValue(component, componentMetadata, stateReference),
+                ]),
+              ),
+            ]),
+          ),
+          factory.createArrayLiteralExpression(dataDependencies.map(factory.createIdentifier), false),
+        ]),
+      );
+    });
+}
+
 export function mapSyntheticStateReferences(componentMetadata: ComponentMetadata) {
   return componentMetadata.stateReferences.map((stateReference) => {
     const { componentName, property } = stateReference;