feat: allow js, ts, json, yml and yaml cloudformation template extens…

…ions

packages/cli/src/deploy/cloudFormation.ts

@@ -1,10 +1,13 @@
 import AWS from 'aws-sdk';
+import fs from 'fs';
 import log from 'npmlog';
+import path from 'path';
 
 import {
   CloudFormationTemplate,
   getEnvironment,
-  readCloudFormationTemplate,
+  readCloudFormationYamlTemplate,
+  readObjectFile,
 } from '../utils';
 
 import { addDefaults } from './addDefaults.cloudFormation';
@@ -277,6 +280,47 @@ export const deploy = async ({
   return describeStack({ stackName });
 };
 
+const findAndReadCloudFormationTemplate = ({
+  templatePath: defaultTemplatePath,
+}: {
+  templatePath?: string;
+}): CloudFormationTemplate => {
+  const templatePath =
+    defaultTemplatePath ||
+    ['ts', 'js', 'yaml', 'yml', 'json']
+      .map((extension) => `src/cloudformation.${extension}`)
+      /**
+       * Iterate over extensions. If the template of the current extension is
+       * found, we save it on the accumulator and return it every time until
+       * the loop ends.
+       */
+      .reduce((acc, cur) => {
+        if (acc) {
+          return acc;
+        }
+        return fs.existsSync(path.resolve(process.cwd(), cur)) ? cur : acc;
+      }, '');
+
+  if (!templatePath) {
+    throw new Error('Cannot find a CloudFormation template.');
+  }
+
+  const extension = templatePath?.split('.').pop() as string;
+
+  const fullPath = path.resolve(process.cwd(), templatePath);
+
+  /**
+   * We need to read Yaml first because CloudFormation specific tags aren't
+   * recognized when parsing a simple Yaml file. I.e., a possible error:
+   * "Error message: "unknown tag !<!Ref> at line 21, column 34:\n"
+   */
+  if (['yaml', 'yml'].includes(extension)) {
+    return readCloudFormationYamlTemplate({ templatePath });
+  }
+
+  return readObjectFile({ path: fullPath });
+};
+
 export const deployCloudFormation = async ({
   lambdaInput,
   lambdaExternals,
@@ -302,13 +346,13 @@ export const deployCloudFormation = async ({
         return template;
       }
 
-      if (templatePath) {
-        return readCloudFormationTemplate({ templatePath });
-      }
-
-      throw new Error('"template" or "templatePath" must be defined');
+      return findAndReadCloudFormationTemplate({ templatePath });
     })();
 
+    console.log(cloudFormationTemplate);
+
+    process.exit(1);
+
     await cloudFormation()
       .validateTemplate({
         TemplateBody: JSON.stringify(cloudFormationTemplate),

packages/cli/src/deploy/command.ts

@@ -97,7 +97,6 @@ export const deployCommand: CommandModule<
         },
         'template-path': {
           alias: 't',
-          default: 'src/cloudformation.yml',
           type: 'string',
         },
       })

packages/cli/src/utils/cloudFormationTemplate.ts

@@ -161,11 +161,15 @@ const getYamlTypes = (tagAndTypeArr: TagAndType[]) =>
 const getSchema = (tagAndTypeArr: TagAndType[] = []) =>
   yaml.Schema.create(getYamlTypes([...tagAndTypeArr, ...cloudFormationTypes]));
 
-export const dumpCloudFormationTemplate = (
+export const dumpToYamlCloudFormationTemplate = (
   cloudFormationTemplate: CloudFormationTemplate,
 ) => yaml.safeDump(cloudFormationTemplate, { schema: getSchema() });
 
-export const readCloudFormationTemplate = ({
+/**
+ * CloudFormation
+ * @param param0
+ */
+export const readCloudFormationYamlTemplate = ({
   templatePath,
 }: {
   templatePath: string;

packages/cli/src/utils/readObjectFile.ts

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import fs from 'fs';
 import yaml from 'js-yaml';
+import typescript from 'typescript';
 
 export const readYaml = ({ path }: { path: string }) => {
   const template = fs.readFileSync(path, 'utf8') || JSON.stringify({});
@@ -16,12 +17,16 @@ export const readObjectFile = ({ path }: { path: string }) => {
 
   const extension = path.split('.').pop();
 
+  if (extension === 'ts') {
+    const file = fs.readFileSync(path).toString();
+    // eslint-disable-next-line no-eval
+    const obj = eval(typescript.transpile(file));
+    return typeof obj === 'function' ? obj() : obj;
+  }
+
   if (extension === 'js') {
     const obj = require(path);
-    if (typeof obj === 'function') {
-      return obj();
-    }
-    return obj;
+    return typeof obj === 'function' ? obj() : obj;
   }
 
   if (extension === 'json') {

packages/website/components/Header.tsx

@@ -11,7 +11,14 @@ const Header = () => {
         backgroundColor: 'black',
       }}
     >
-      <MaxWidth>
+      <MaxWidth
+        sx={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
         <span sx={{ color: 'white', fontSize: 5 }}>Carlin</span>
       </MaxWidth>
     </header>

packages/website/components/Layout.tsx

@@ -30,6 +30,10 @@ const navs: Array<{
   {
     group: 'Usage',
     links: [
+      {
+        name: 'deploy',
+        href: '/docs/usage/deploy',
+      },
       {
         name: 'deploy static-app',
         href: '/docs/usage/deploy-static-app',

packages/website/components/MaxWidth.tsx

@@ -1,7 +1,14 @@
 import { Container, SxProps } from 'theme-ui';
 
-const MaxWidth: React.FC<SxProps> = ({ children }) => {
-  return <Container sx={{ maxWidth: '60em' }}>{children}</Container>;
+const MaxWidth: React.FC<SxProps & { className?: string }> = ({
+  children,
+  className,
+}) => {
+  return (
+    <Container className={className} sx={{ maxWidth: '60em' }}>
+      {children}
+    </Container>
+  );
 };
 
 export default MaxWidth;

packages/website/pages/docs/usage/deploy.md

@@ -0,0 +1,3 @@
+## CloudFormation Template
+
+We may create CloudFormation templates with these extensions: `.ts`, `.js`, `.json`, `.yml`, `.yaml`.