Upgrade to Serverless Framework v3 and the new design

Author: mnapoli

package.json

@@ -62,12 +62,13 @@
     "typescript": "^3.9.10"
   },
   "dependencies": {
+    "@serverless/utils": "^5.20.0",
     "fs-extra": "^7.0.1",
     "globby": "^10.0.2",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "serverless": "2",
+    "serverless": "pre-3",
     "typescript": ">=2.2.2"
   },
   "jest": {

src/Serverless.d.ts

@@ -46,7 +46,38 @@ declare namespace Serverless {
     individually?: boolean
   }
 
+  interface Progress {
+    update(message?: string): void
+    remove(): void
+  }
+
+  interface Utils {
+    log: ((message: string) => void) & {
+      verbose(message: string): void
+    }
+    progress: {
+      create(opts?: { message?: string }): Progress;
+    }
+  }
+
+  type CommandsDefinition = Record<
+    string,
+    {
+      lifecycleEvents?: string[]
+      commands?: CommandsDefinition
+      usage?: string
+      options?: {
+        [name: string]: {
+          type: string
+          usage: string
+          required?: boolean
+          shortcut?: string
+        }
+      }
+    }
+  >
+
   interface PluginManager {
     spawn(command: string): Promise<void>
   }
-}
+}

src/index.ts

@@ -16,10 +16,29 @@ export class TypeScriptPlugin {
   serverless: Serverless.Instance
   options: Serverless.Options
   hooks: { [key: string]: Function }
+  utils: Serverless.Utils
+  commands: Serverless.CommandsDefinition
+  watchProgress?: Serverless.Progress
 
-  constructor(serverless: Serverless.Instance, options: Serverless.Options) {
+  constructor(serverless: Serverless.Instance, options: Serverless.Options, utils) {
     this.serverless = serverless
     this.options = options
+    this.utils = utils
+
+    this.commands = {
+      invoke: {
+        commands: {
+          local: {
+            options: {
+              watch: {
+                type: 'boolean',
+                usage: 'Watch file changes and re-invoke automatically the function'
+              }
+            }
+          }
+        }
+      }
+    }
 
     this.hooks = {
       'before:run:run': async () => {
@@ -65,11 +84,17 @@ export class TypeScriptPlugin {
             delete require.cache[module]
           })
         }
+        this.watchProgress = this.watchProgress ?? this.utils.progress.create()
       },
-      'after:invoke:local:invoke': () => {
+      'after:invoke:local:invoke': async () => {
         if (this.options.watch) {
+          if (this.watchProgress) {
+            this.watchProgress.update('Watching for TypeScript changes')
+          }
           this.watchFunction()
-          this.serverless.cli.log('Waiting for changes...')
+          return new Promise(() => {
+            // return an unresolved promise to keep the command active (else the CLI shuts down)
+          })
         }
       }
     }
@@ -116,7 +141,7 @@ export class TypeScriptPlugin {
       return
     }
 
-    this.serverless.cli.log(`Watch function ${this.options.function}...`)
+    this.utils.log.verbose(`Watching function ${this.options.function}`)
 
     this.isWatching = true
     watchFiles(this.rootFileNames, this.originalServicePath, () => {
@@ -129,15 +154,17 @@ export class TypeScriptPlugin {
       return
     }
 
-    this.serverless.cli.log(`Watching typescript files...`)
+    this.utils.log.verbose(`Watching typescript files`)
 
     this.isWatching = true
     watchFiles(this.rootFileNames, this.originalServicePath, this.compileTs.bind(this))
   }
 
   async compileTs(): Promise<string[]> {
     this.prepare()
-    this.serverless.cli.log('Compiling with Typescript...')
+    const progress = this.utils.progress.create({
+      message: 'Compiling TypeScript code'
+    })
 
     if (!this.originalServicePath) {
       // Save original service path and functions
@@ -155,13 +182,13 @@ export class TypeScriptPlugin {
     const tsconfig = typescript.getTypescriptConfig(
       this.originalServicePath,
       tsConfigFileLocation,
-      this.isWatching ? null : this.serverless.cli
+      !this.isWatching
     )
 
     tsconfig.outDir = BUILD_FOLDER
 
     const emitedFiles = await typescript.run(this.rootFileNames, tsconfig)
-    this.serverless.cli.log('Typescript compiled.')
+    progress.remove()
     return emitedFiles
   }
 

src/serverless-logs.d.ts

@@ -0,0 +1,6 @@
+declare module '@serverless/utils/log' {
+    export const log: ((message: string) => void) & {
+        verbose(message: string): void
+        warning(message: string): void
+    }
+}

src/typescript.ts

@@ -2,6 +2,7 @@ import * as ts from 'typescript'
 import * as fs from 'fs-extra'
 import * as _ from 'lodash'
 import * as path from 'path'
+import {log} from '@serverless/utils/log'
 
 export function makeDefaultTypescriptConfig() {
   const defaultTypescriptConfig: ts.CompilerOptions = {
@@ -38,8 +39,7 @@ export function extractFileNames(cwd: string, provider: string, functions?: { [k
 
       // Check that the file indeed exists.
       if (!fs.existsSync(path.join(cwd, main))) {
-        console.log(`Cannot locate entrypoint, ${main} not found`)
-        throw new Error('Typescript compilation failed')
+        throw new Error(`Typescript compilation failed: Cannot locate entrypoint, ${main} not found`)
       }
 
       return [main]
@@ -65,8 +65,7 @@ export function extractFileNames(cwd: string, provider: string, functions?: { [k
       }
 
       // Can't find the files. Watch will have an exception anyway. So throw one with error.
-      console.log(`Cannot locate handler - ${fileName} not found`)
-      throw new Error('Typescript compilation failed. Please ensure handlers exists with ext .ts or .js')
+      throw new Error(`Typescript compilation failed. Please ensure handlers exists with ext .ts or .js.\nCannot locate handler: ${fileName} not found.`)
     })
 }
 
@@ -80,15 +79,15 @@ export async function run(fileNames: string[], options: ts.CompilerOptions): Pro
 
   allDiagnostics.forEach(diagnostic => {
     if (!diagnostic.file) {
-      console.log(diagnostic)
+      log.verbose(JSON.stringify(diagnostic))
     }
     const {line, character} = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start)
     const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n')
-    console.log(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`)
+    log.verbose(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`)
   })
 
   if (emitResult.emitSkipped) {
-    throw new Error('Typescript compilation failed')
+    throw new Error('TypeScript compilation failed')
   }
 
   return emitResult.emittedFiles.filter(filename => filename.endsWith('.js'))
@@ -113,7 +112,7 @@ export function getSourceFiles(
 export function getTypescriptConfig(
   cwd: string,
   tsConfigFileLocation: string = 'tsconfig.json',
-  logger?: { log: (str: string) => void }
+  shouldLog?: boolean
 ): ts.CompilerOptions {
   const configFilePath = path.join(cwd, tsConfigFileLocation)
 
@@ -133,13 +132,13 @@ export function getTypescriptConfig(
       throw new Error(JSON.stringify(configParseResult.errors))
     }
 
-    if (logger) {
-      logger.log(`Using local tsconfig.json - ${tsConfigFileLocation}`)
+    if (shouldLog) {
+      log.verbose(`Using local tsconfig.json - ${tsConfigFileLocation}`)
     }
 
     // disallow overrriding rootDir
-    if (configParseResult.options.rootDir && path.resolve(configParseResult.options.rootDir) !== path.resolve(cwd) && logger) {
-      logger.log('Warning: "rootDir" from local tsconfig.json is overriden')
+    if (configParseResult.options.rootDir && path.resolve(configParseResult.options.rootDir) !== path.resolve(cwd) && log) {
+      log.warning('Typescript: "rootDir" from local tsconfig.json is overridden')
     }
     configParseResult.options.rootDir = cwd