feat(new): updates new to download multiple file templates (#39)

Uses the new layout of the functions-templates project to download multiple file templates into a
twilio-run project. Templates will be downloaded into the functions/{bundleName} and
assets/{bundleName} directories within the project.

This also allows for passing an empty bundleName (or filename in the twilio-run CLI parlance right
 now). When empty, this adds the functions/assets directly into the functions/assets directories.
This will be used for `create-twilio-function` template options. The twilio-run CLI still enforces
a name.

BREAKING CHANGE: This needs the functions-templates repo to be up to date. Currently it points to
the next branch, which is up to date.

re #20

Author: philnash

src/commands/new.ts

@@ -5,10 +5,9 @@ import prompts from 'prompts';
 import { Merge } from 'type-fest';
 import { Arguments, Argv } from 'yargs';
 import checkProjectStructure from '../checks/project-structure';
-import { fetchListOfTemplates, getTemplateFiles } from '../templating/data';
-import { writeFiles } from '../templating/filesystem';
 import { CliInfo } from './types';
 import { getFullCommand } from './utils';
+import { downloadTemplate, fetchListOfTemplates } from '../templating/actions';
 
 export type NewCliFlags = Arguments<{
   filename?: string;
@@ -129,14 +128,9 @@ export async function handler(flagsInput: NewCliFlags): Promise<void> {
     return;
   }
 
-  const functionName = flags.filename.replace(/\.js$/, '');
-  const files = await getTemplateFiles(flags.template, functionName);
-  try {
-    await writeFiles(files, targetDirectory, functionName);
-    console.log(chalk`{green SUCCESS} Created new function ${functionName}`);
-  } catch (err) {
-    console.error(chalk`{red ERROR} ${err.message}`);
-  }
+  const bundleName = flags.filename.replace(/\.js$/, '');
+
+  downloadTemplate(flags.template, bundleName, targetDirectory);
 }
 
 export const cliInfo: CliInfo = {

src/templating/actions.ts

@@ -0,0 +1,19 @@
+import { getTemplateFiles } from './data';
+import { writeFiles } from './filesystem';
+import chalk from 'chalk';
+
+export async function downloadTemplate(
+  templateName: string,
+  bundleName: string,
+  targetDirectory: string
+): Promise<void> {
+  const files = await getTemplateFiles(templateName);
+  try {
+    await writeFiles(files, targetDirectory, bundleName);
+    console.log(chalk`{green SUCCESS} Created new bundle ${bundleName}`);
+  } catch (err) {
+    console.error(chalk`{red ERROR} ${err.message}`);
+  }
+}
+
+export { fetchListOfTemplates } from './data';

src/templating/data.ts

@@ -25,8 +25,8 @@ export async function fetchListOfTemplates(): Promise<Template[]> {
 }
 
 export type TemplateFileInfo = {
+  name: string;
   type: string;
-  functionName: string;
   content: string;
 };
 
@@ -47,30 +47,57 @@ type RawContentsPayload = {
   };
 }[];
 
-export async function getTemplateFiles(
+async function getFiles(
   templateId: string,
-  functionName: string
+  directory: string
+): Promise<TemplateFileInfo[]> {
+  const response = await got(
+    CONTENT_BASE_URL + `/${templateId}/${directory}?ref=next`,
+    {
+      json: true,
+    }
+  );
+  const repoContents = response.body as RawContentsPayload;
+  return repoContents.map(file => {
+    return {
+      name: file.name,
+      type: directory,
+      content: file.download_url,
+    };
+  });
+}
+
+export async function getTemplateFiles(
+  templateId: string
 ): Promise<TemplateFileInfo[]> {
   try {
-    const response = await got(CONTENT_BASE_URL + `/${templateId}`, {
+    const response = await got(CONTENT_BASE_URL + `/${templateId}?ref=next`, {
       json: true,
     });
-    const output = (response.body as RawContentsPayload)
+    const repoContents = response.body as RawContentsPayload;
+
+    const assets = repoContents.find(file => file.name === 'assets')
+      ? getFiles(templateId, 'assets')
+      : [];
+    const functions = repoContents.find(file => file.name === 'functions')
+      ? getFiles(templateId, 'functions')
+      : [];
+
+    const otherFiles = repoContents
       .filter(file => {
-        return (
-          file.name === 'package.json' ||
-          file.name === '.env' ||
-          (file.name.endsWith('.js') && !file.name.endsWith('.test.js'))
-        );
+        return file.name === 'package.json' || file.name === '.env';
       })
       .map(file => {
         return {
-          type: file.name.endsWith('.js') ? 'function' : file.name,
-          functionName,
+          name: file.name,
+          type: file.name,
           content: file.download_url,
         };
       });
-    return output;
+    const files = otherFiles.concat(
+      ...(await Promise.all([assets, functions]))
+    );
+    return files;
   } catch (err) {
     log(err.message);
     console.error(err);

src/templating/filesystem.ts

@@ -7,6 +7,9 @@ import path from 'path';
 import { install, InstallResult } from 'pkg-install';
 import { downloadFile, fileExists, readFile, writeFile } from '../utils/fs';
 import { TemplateFileInfo } from './data';
+import { mkdir as oldMkdir } from 'fs';
+import { promisify } from 'util';
+const mkdir = promisify(oldMkdir);
 
 async function writeEnvFile(
   contentUrl: string,
@@ -67,36 +70,62 @@ async function installDependencies(
 export async function writeFiles(
   files: TemplateFileInfo[],
   targetDir: string,
-  functionName: string
+  bundleName: string
 ): Promise<void> {
   const functionsDir = fsHelpers.getFirstMatchingDirectory(targetDir, [
     'functions',
     'src',
   ]);
-  const functionTargetPath = path.join(functionsDir, `/${functionName}.js`);
-  if (await fileExists(functionTargetPath)) {
-    throw new Error(
-      `Function with name "${functionName} already exists in "${functionsDir}"`
-    );
+  const assetsDir = fsHelpers.getFirstMatchingDirectory(targetDir, [
+    'assets',
+    'static',
+  ]);
+  const functionsTargetDir = path.join(functionsDir, bundleName);
+  const assetsTargetDir = path.join(assetsDir, bundleName);
+  if (functionsTargetDir !== functionsDir) {
+    try {
+      await mkdir(functionsTargetDir);
+    } catch (err) {
+      console.error(err);
+      throw new Error(
+        `Bundle with name "${bundleName}" already exists in "${functionsDir}"`
+      );
+    }
+    try {
+      await mkdir(assetsTargetDir);
+    } catch (err) {
+      console.error(err);
+      throw new Error(
+        `Bundle with name "${bundleName}" already exists in "${assetsDir}"`
+      );
+    }
   }
 
   const tasks = files
     .map(file => {
-      if (file.type === 'function') {
+      if (file.type === 'functions') {
         return {
-          title: 'Create Function',
-          task: () => {
-            return downloadFile(file.content, functionTargetPath);
-          },
+          title: `Creating function: ${file.name}`,
+          task: () =>
+            downloadFile(
+              file.content,
+              path.join(functionsTargetDir, file.name)
+            ),
+        };
+      } else if (file.type === 'assets') {
+        return {
+          title: `Creating asset: ${file.name}`,
+          task: () =>
+            downloadFile(file.content, path.join(assetsTargetDir, file.name)),
         };
       } else if (file.type === '.env') {
         return {
-          title: 'Configure Environment Variables in .env',
+          title: 'Configuring Environment Variables in .env',
           task: async (ctx: any) => {
             const output = await writeEnvFile(
               file.content,
               targetDir,
-              file.functionName
+              file.name
             );
             ctx.env = output;
           },

src/utils/fs.ts

@@ -3,12 +3,12 @@ import fs from 'fs';
 import got from 'got';
 import path from 'path';
 import { promisify } from 'util';
-
 const access = promisify(fs.access);
 export const readFile = promisify(fs.readFile);
 export const writeFile = promisify(fs.writeFile);
 export const readdir = promisify(fs.readdir);
 const stat = promisify(fs.stat);
+const open = promisify(fs.open);
 
 export async function fileExists(filePath: string): Promise<boolean> {
   try {
@@ -24,12 +24,16 @@ export function downloadFile(
   targetPath: string
 ): Promise<void> {
   return new Promise((resolve, reject) => {
-    const writeStream = fs.createWriteStream(targetPath);
-    got
-      .stream(contentUrl)
-      .on('response', resolve)
-      .on('error', reject)
-      .pipe(writeStream);
+    return open(targetPath, 'wx')
+      .then(fd => {
+        const writeStream = fs.createWriteStream('', { fd });
+        got
+          .stream(contentUrl)
+          .on('response', resolve)
+          .on('error', reject)
+          .pipe(writeStream);
+      })
+      .catch(err => reject(err));
   });
 }