fix: react render config (#45)

aws-amplify · Sep 8, 2021 · de74357 · de74357
1 parent 11e5c47
commit de74357
Show file tree

Hide file tree

Showing 14 changed files with 388 additions and 145 deletions.
diff --git a/packages/studio-ui-codegen-react/index.ts b/packages/studio-ui-codegen-react/index.ts
@@ -1,2 +1 @@
-export * from './lib/amplify-ui-renderers/amplify-renderer';
 export * from './lib/index';
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -3,109 +3,313 @@
 exports[`amplify render tests basic component tests should generate a simple box component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  EscapeHatchProps,
+  View,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type TestProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function Test(props: TestProps): JSX.Element {
-    return (<View fontFamily=\\"Times New Roman\\" fontSize=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"View\\")}></View>);
-}"
+  return (
+    <View
+      fontFamily=\\"Times New Roman\\"
+      fontSize=\\"20px\\"
+      {...props}
+      {...getOverrideProps(props.overrides, \\"View\\")}
+    ></View>
+  );
+}
+"
 `;
 
 exports[`amplify render tests basic component tests should generate a simple button component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button, EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function CustomButton(props: CustomButtonProps): JSX.Element {
-    return (<Button color=\\"#ff0000\\" width=\\"20\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button>);
-}"
+  return (
+    <Button
+      color=\\"#ff0000\\"
+      width=\\"20\\"
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Button\\")}
+    ></Button>
+  );
+}
+"
 `;
 
 exports[`amplify render tests basic component tests should generate a simple text component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { EscapeHatchProps, Text, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  EscapeHatchProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type CustomTextProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function CustomText(props: CustomTextProps): JSX.Element {
-    return (<Text color=\\"#ff0000\\" width=\\"20px\\" value=\\"Text Value\\" {...props} {...getOverrideProps(props.overrides, \\"Text\\")}>Text Value</Text>);
-}"
+  return (
+    <Text
+      color=\\"#ff0000\\"
+      width=\\"20px\\"
+      value=\\"Text Value\\"
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Text\\")}
+    >
+      Text Value
+    </Text>
+  );
+}
+"
 `;
 
 exports[`amplify render tests complex component tests should generate a button within a box component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  View,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
-    return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
-}"
+  return (
+    <View {...props} {...getOverrideProps(props.overrides, \\"View\\")}>
+      <Button
+        color=\\"#ff0000\\"
+        width=\\"20px\\"
+        {...props}
+        {...getOverrideProps(props.overrides, \\"Button\\")}
+      ></Button>
+    </View>
+  );
+}
+"
 `;
 
 exports[`amplify render tests complex component tests should generate a component with custom child 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  CustomButton,
+  EscapeHatchProps,
+  View,
+  findChildOverrides,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithCustomButtonProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
-export default function BoxWithCustomButton(props: BoxWithCustomButtonProps): JSX.Element {
-    return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
-}"
+export default function BoxWithCustomButton(
+  props: BoxWithCustomButtonProps
+): JSX.Element {
+  return (
+    <View {...props} {...getOverrideProps(props.overrides, \\"View\\")}>
+      <CustomButton
+        color=\\"#ff0000\\"
+        width=\\"20px\\"
+        {...findChildOverrides(props.overrides, \\"CustomButton\\")}
+      ></CustomButton>
+    </View>
+  );
+}
+"
 `;
 
 exports[`amplify render tests complex component tests should generate a component with exposeAs prop 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  View,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
-    return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
-}"
+  return (
+    <View {...props} {...getOverrideProps(props.overrides, \\"View\\")}>
+      <Button
+        color=\\"#ff0000\\"
+        width=\\"20px\\"
+        {...props}
+        {...getOverrideProps(props.overrides, \\"Button\\")}
+      ></Button>
+    </View>
+  );
+}
+"
 `;
 
 exports[`amplify render tests component with data binding should add model imports 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
 import { User } from \\"../models\\";
-import { Button, EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type ComponentWithDataBindingProps = {
-    width: Number;
-    isDisabled: Boolean;
-    buttonUser?: User;
-    buttonColor: String;
+  width: Number,
+  isDisabled: Boolean,
+  buttonUser?: User,
+  buttonColor: String,
 } & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
-export default function ComponentWithDataBinding(props: ComponentWithDataBindingProps): JSX.Element {
-    return (<Button label={buttonUser.username || \\"hspain@gmail.com\\"} labelWidth={width} disabled={isDisabled} {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button>);
-}"
+export default function ComponentWithDataBinding(
+  props: ComponentWithDataBindingProps
+): JSX.Element {
+  return (
+    <Button
+      label={buttonUser.username || \\"hspain@gmail.com\\"}
+      labelWidth={width}
+      disabled={isDisabled}
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Button\\")}
+    ></Button>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom render config should render ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import { Button, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+export default function BoxWithButton(props) {
+  return React.createElement(
+    View,
+    __assign({}, props, getOverrideProps(props.overrides, \\"View\\")),
+    React.createElement(
+      Button,
+      __assign(
+        { color: \\"#ff0000\\", width: \\"20px\\" },
+        props,
+        getOverrideProps(props.overrides, \\"Button\\")
+      )
+    )
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom render config should render JSX 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { Button, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+export default function BoxWithButton(props) {
+  return (
+    <View {...props} {...getOverrideProps(props.overrides, \\"View\\")}>
+      <Button
+        color=\\"#ff0000\\"
+        width=\\"20px\\"
+        {...props}
+        {...getOverrideProps(props.overrides, \\"Button\\")}
+      ></Button>
+    </View>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom render config should render common JS 1`] = `
+"\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+/* eslint-disable */
+const react_1 = require(\\"react\\");
+const ui_react_1 = require(\\"@aws-amplify/ui-react\\");
+function BoxWithButton(props) {
+  return react_1.default.createElement(
+    ui_react_1.View,
+    Object.assign(
+      {},
+      props,
+      ui_react_1.getOverrideProps(props.overrides, \\"View\\")
+    ),
+    react_1.default.createElement(
+      ui_react_1.Button,
+      Object.assign(
+        { color: \\"#ff0000\\", width: \\"20px\\" },
+        props,
+        ui_react_1.getOverrideProps(props.overrides, \\"Button\\")
+      )
+    )
+  );
+}
+exports.default = BoxWithButton;
+"
 `;
 
 exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import {
+  CustomButton,
+  EscapeHatchProps,
+  View,
+  findChildOverrides,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {} & {
-    overrides?: EscapeHatchProps | undefined | null;
+  overrides?: EscapeHatchProps | undefined | null,
 };
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
-    return (<View padding-left {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" buttonText=\\"Click Me\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
-}"
+  return (
+    <View
+      padding-left
+      {...props}
+      {...getOverrideProps(props.overrides, \\"View\\")}
+    >
+      <CustomButton
+        color=\\"#ff0000\\"
+        width=\\"20px\\"
+        buttonText=\\"Click Me\\"
+        {...findChildOverrides(props.overrides, \\"CustomButton\\")}
+      ></CustomButton>
+    </View>
+  );
+}
+"
 `;