fix: address reserved keywords in bindings (#431)

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

@@ -537,6 +537,39 @@ export default function ComponentWithAuthEventBinding(
 "
 `;
 
+exports[`amplify render tests bindings data supports bindings with reserved keywords 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { Class } from \\"../models\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Text, TextProps } from \\"@aws-amplify/ui-react\\";
+
+export type DataBindingNamedClassProps = React.PropsWithChildren<
+  Partial<TextProps> & {
+    class?: Class;
+  } & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function DataBindingNamedClass(
+  props: DataBindingNamedClassProps
+): React.ReactElement {
+  const { class: classProp, overrides, ...rest } = props;
+  return (
+    /* @ts-ignore: TS2322 */
+    <Text
+      children={classProp?.name}
+      {...rest}
+      {...getOverrideProps(overrides, \\"DataBindingNamedClass\\")}
+    ></Text>
+  );
+}
+"
+`;
+
 exports[`amplify render tests collection should render collection with data binding 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -567,5 +567,11 @@ describe('amplify render tests', () => {
         ).toMatchSnapshot();
       });
     });
+
+    describe('data', () => {
+      it('supports bindings with reserved keywords', () => {
+        expect(generateWithAmplifyRenderer('bindings/data/dataBindingNamedClass').componentText).toMatchSnapshot();
+      });
+    });
   });
 });

packages/codegen-ui-react/lib/keywords.ts

@@ -0,0 +1,60 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+export default new Set([
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'export',
+  'extends',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'import',
+  'in',
+  'instanceof',
+  'new',
+  'return',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+  'implements',
+  'interface',
+  'let',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'static',
+  'yield',
+  'await',
+]);

packages/codegen-ui-react/lib/react-component-render-helper.ts

@@ -55,6 +55,7 @@ import { ImportCollection, ImportSource } from './imports';
 import { json, jsonToLiteral } from './react-studio-template-renderer-helper';
 import { getChildPropMappingForComponentName } from './workflow/utils';
 import nameReplacements from './name-replacements';
+import keywords from './keywords';
 
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
@@ -116,10 +117,14 @@ export function isActionEvent(event: StudioComponentEvent): event is ActionStudi
  * case: no field =>  <prop.bindingProperties.property>
  */
 export function buildBindingExpression(prop: BoundStudioComponentProperty): Expression {
+  const {
+    bindingProperties: { property },
+  } = prop;
+  const identifier = factory.createIdentifier(keywords.has(property) ? `${property}Prop` : property);
   return prop.bindingProperties.field === undefined
-    ? factory.createIdentifier(prop.bindingProperties.property)
+    ? identifier
     : factory.createPropertyAccessChain(
-        factory.createIdentifier(prop.bindingProperties.property),
+        identifier,
         factory.createToken(SyntaxKind.QuestionDotToken),
         prop.bindingProperties.field,
       );

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

@@ -79,6 +79,7 @@ import {
   buildStateStatements,
   buildUseEffectStatements,
 } from './workflow';
+import keywords from './keywords';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
@@ -511,10 +512,12 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
         const [propName, binding] = entry;
         if (isSimplePropertyBinding(binding) || isDataPropertyBinding(binding) || isEventPropertyBinding(binding)) {
           const usesHook = bindingPropertyUsesHook(binding);
+          const shouldAssignToDifferentName = usesHook || keywords.has(propName);
+          const propVariableName = shouldAssignToDifferentName ? `${propName}Prop` : propName;
           const bindingElement = factory.createBindingElement(
             undefined,
-            usesHook ? factory.createIdentifier(propName) : undefined,
-            factory.createIdentifier(usesHook ? `${propName}Prop` : propName),
+            shouldAssignToDifferentName ? factory.createIdentifier(propName) : undefined,
+            factory.createIdentifier(propVariableName),
             isSimplePropertyBinding(binding) ? this.getDefaultValue(binding) : undefined,
           );
           elements.push(bindingElement);

packages/codegen-ui/example-schemas/bindings/data/dataBindingNamedClass.json

@@ -0,0 +1,22 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "DataBindingNamedClass",
+  "bindingProperties": {
+    "class": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "Class"
+      }
+    }
+  },
+  "properties": {
+    "label": {
+      "bindingProperties": {
+        "property": "class",
+        "field": "name"
+      }
+    }
+  },
+  "schemaVersion": "1.0"
+}

packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts

@@ -148,6 +148,7 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'DataStoreActionBindings',
   'CreateModelWithComplexTypes',
   'InitialValueBindings',
+  'DataBindingNamedClass',
 ]);
 const EXPECTED_INVALID_INPUT_CASES = new Set([
   'ComponentMissingProperties',

packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.ts

@@ -360,4 +360,10 @@ describe('Generated Components', () => {
       cy.get('p.amplify-text').should('have.css', 'color', 'rgb(0, 128, 128)');
     });
   });
+
+  describe('Reserved Keywords', () => {
+    it('renders with reseverd keywords props', () => {
+      cy.get('#reserved-keywords').find('.amplify-text').should('have.text', 'biology');
+    });
+  });
 });

packages/test-generator/integration-test-templates/src/ComponentTests.tsx

@@ -17,7 +17,7 @@ import { useEffect, useState } from 'react';
 import { AmplifyProvider } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 import { DataStore } from 'aws-amplify';
-import { User, Listing } from './models';
+import { User, Listing, Class } from './models';
 import {
   ViewTest,
   ViewWithButton,
@@ -58,6 +58,7 @@ import {
   PaginatedCollection,
   SearchableCollection,
   ComponentWithAuthBinding,
+  DataBindingNamedClass,
 } from './ui-components'; // eslint-disable-line import/extensions
 import { initializeAuthMockData } from './mock-utils';
 
@@ -361,6 +362,9 @@ export default function ComponentTests() {
           }}
         />
       </div>
+      <div id="reserved-keywords">
+        <DataBindingNamedClass class={new Class({ name: 'biology' })} />
+      </div>
     </AmplifyProvider>
   );
 }

packages/test-generator/integration-test-templates/src/models/index.js

@@ -17,6 +17,6 @@
 import { initSchema } from '@aws-amplify/datastore';
 import { schema } from './schema';
 
-const { UserPreference, User, Listing, ComplexModel } = initSchema(schema);
+const { UserPreference, User, Listing, ComplexModel, Class } = initSchema(schema);
 
-export { UserPreference, User, Listing, ComplexModel };
+export { UserPreference, User, Listing, ComplexModel, Class };

packages/test-generator/integration-test-templates/src/models/schema.js

@@ -290,6 +290,44 @@ export const schema = {
         },
       ],
     },
+    Class: {
+      name: 'Class',
+      fields: {
+        id: {
+          name: 'id',
+          isArray: false,
+          type: 'ID',
+          isRequired: true,
+          attributes: [],
+        },
+        name: {
+          name: 'name',
+          isArray: false,
+          type: 'String',
+          isRequired: false,
+          attributes: [],
+        },
+      },
+      syncable: true,
+      pluralName: 'Classes',
+      attributes: [
+        {
+          type: 'model',
+          properties: {},
+        },
+        {
+          type: 'auth',
+          properties: {
+            rules: [
+              {
+                allow: 'public',
+                operations: ['create', 'update', 'delete', 'read'],
+              },
+            ],
+          },
+        },
+      ],
+    },
   },
   enums: {},
   nonModels: {

packages/test-generator/lib/components/bindings/data/dataBindingNamedClass.json

@@ -0,0 +1,22 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "DataBindingNamedClass",
+  "bindingProperties": {
+    "class": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "Class"
+      }
+    }
+  },
+  "properties": {
+    "label": {
+      "bindingProperties": {
+        "property": "class",
+        "field": "name"
+      }
+    }
+  },
+  "schemaVersion": "1.0"
+}

packages/test-generator/lib/components/bindings/data/index.ts

@@ -0,0 +1,16 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+export { default as DataBindingNamedClass } from './dataBindingNamedClass.json';

packages/test-generator/lib/components/bindings/index.ts

@@ -0,0 +1,16 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+export * from './data';

packages/test-generator/lib/components/index.ts

@@ -30,3 +30,4 @@ export * from './errors';
 export * from './variants';
 export * from './golden-files';
 export * from './workflow';
+export * from './bindings';