feat(nextjs-component): introduce serverless-patched binary (#1658)

Author: dphang

package.json

@@ -95,7 +95,8 @@
       "/scripts/",
       "babel.config.js",
       "jest.config.js",
-      "<rootDir>/packages/serverless-components/aws-s3"
+      "<rootDir>/packages/serverless-components/aws-s3",
+      "<rootDir>/packages/serverless-components/nextjs-component/bin"
     ],
     "watchPathIgnorePatterns": [
       "/fixture/",

packages/e2e-tests/test-utils/scripts/run-e2e-ci.ts

@@ -290,13 +290,12 @@ async function runEndToEndTest(): Promise<boolean> {
       { stdio: "inherit" }
     );
 
-    // Sleep a few seconds to prevent exhausting API limits.
-    // (likely not needed anymore due to changing retry policy)
-    // await new Promise((resolve) => setTimeout(resolve, Math.random() * 15000));
-
     // Deploy
     console.info("Deploying serverless-next.js app.");
-    execSync("npx serverless", { stdio: "inherit" });
+    execSync(
+      "node ../../serverless-components/nextjs-component/dist/bin/serverless-patched.js --debug",
+      { stdio: "inherit" }
+    );
 
     // Get Next.js build ID and URL
     console.info("Getting Next.js build ID");

packages/serverless-components/nextjs-component/bin/serverless-patched.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import { execSync } from "child_process";
+
+console.info("Note: running patched serverless binary.");
+
+const args = process.argv.slice(2).join(" ");
+// This executes package-local serverless which uses a patched @serverless/cli
+execSync(`${__dirname}/../../node_modules/.bin/serverless ${args}`, {
+  stdio: "inherit"
+});

packages/serverless-components/nextjs-component/package.json

@@ -15,7 +15,8 @@
   "scripts": {
     "prepare": "yarn clean && yarn build",
     "build": "tsc -p tsconfig.build.json",
-    "clean": "yarn rimraf dist"
+    "clean": "yarn rimraf dist",
+    "postinstall": "patch-package"
   },
   "keywords": [
     "serverless",
@@ -44,11 +45,17 @@
     "@sls-next/s3-static-assets": "link:../../libs/s3-static-assets",
     "aws-sdk": "^2.985.0",
     "fs-extra": "^9.1.0",
+    "serverless": "^2.57.0",
     "webpack": "^5.52.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.1",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "rimraf": "^3.0.2",
     "typescript": "^4.4.2"
+  },
+  "bin": {
+    "serverless-patched": "./dist/bin/serverless-patched.js"
   }
 }

packages/serverless-components/nextjs-component/patches/@serverless+cli+1.5.2.patch

@@ -0,0 +1,113 @@
+diff --git a/node_modules/@serverless/cli/src/Context.js b/node_modules/@serverless/cli/src/Context.js
+index 4fb9da9..f8919a4 100644
+--- a/node_modules/@serverless/cli/src/Context.js
++++ b/node_modules/@serverless/cli/src/Context.js
+@@ -153,7 +153,11 @@ class CLI {
+     process.stdout.write(ansiEscapes.cursorShow)
+     if (!this.isStatusEngineActive()) {
+       console.log() // eslint-disable-line
+-      process.exit(0)
++      if (reason === 'error') {
++        process.exit(1)
++      } else {
++        process.exit(0)
++      }
+       return
+     }
+     return this.statusEngineStop(reason, message)
+@@ -244,44 +248,46 @@ class CLI {
+       this._.entity = entity
+     }
+ 
+-    // Loading dots
+-    if (this._.status.loadingDotCount === 0) {
+-      this._.status.loadingDots = `.`
+-    } else if (this._.status.loadingDotCount === 2) {
+-      this._.status.loadingDots = `..`
+-    } else if (this._.status.loadingDotCount === 4) {
+-      this._.status.loadingDots = `...`
+-    } else if (this._.status.loadingDotCount === 6) {
+-      this._.status.loadingDots = ''
+-    }
+-    this._.status.loadingDotCount++
+-    if (this._.status.loadingDotCount > 8) {
+-      this._.status.loadingDotCount = 0
+-    }
++    if (process.stdout.isTTY) {
++      // Loading dots
++      if (this._.status.loadingDotCount === 0) {
++        this._.status.loadingDots = `.`
++      } else if (this._.status.loadingDotCount === 2) {
++        this._.status.loadingDots = `..`
++      } else if (this._.status.loadingDotCount === 4) {
++        this._.status.loadingDots = `...`
++      } else if (this._.status.loadingDotCount === 6) {
++        this._.status.loadingDots = ''
++      }
++      this._.status.loadingDotCount++
++      if (this._.status.loadingDotCount > 8) {
++        this._.status.loadingDotCount = 0
++      }
+ 
+-    // Clear any existing content
+-    process.stdout.write(ansiEscapes.eraseDown)
++      // Clear any existing content
++      process.stdout.write(ansiEscapes.eraseDown)
+ 
+-    // Write content
+-    console.log() // eslint-disable-line
+-    let content = ' '
+-    if (this._.useTimer) {
+-      content += ` ${grey(this._.seconds + 's')}`
+-      content += ` ${grey(figures.pointerSmall)}`
+-    }
++      // Write content
++      console.log() // eslint-disable-line
++      let content = ' '
++      if (this._.useTimer) {
++        content += ` ${grey(this._.seconds + 's')}`
++        content += ` ${grey(figures.pointerSmall)}`
++      }
+ 
+-    content += ` ${this._.entity}`
+-    content += ` ${grey(figures.pointerSmall)} ${grey(this._.status.message)}`
+-    content += ` ${grey(this._.status.loadingDots)}`
+-    process.stdout.write(content)
+-    console.log() // eslint-disable-line
++      content += ` ${this._.entity}`
++      content += ` ${grey(figures.pointerSmall)} ${grey(this._.status.message)}`
++      content += ` ${grey(this._.status.loadingDots)}`
++      process.stdout.write(content)
++      console.log() // eslint-disable-line
+ 
+-    // Get cursor starting position according to terminal & content width
+-    const startingPosition = this.getRelativeVerticalCursorPosition(content)
++      // Get cursor starting position according to terminal & content width
++      const startingPosition = this.getRelativeVerticalCursorPosition(content)
+ 
+-    // Put cursor to starting position for next view
+-    process.stdout.write(ansiEscapes.cursorUp(startingPosition))
+-    process.stdout.write(ansiEscapes.cursorLeft)
++      // Put cursor to starting position for next view
++      process.stdout.write(ansiEscapes.cursorUp(startingPosition))
++      process.stdout.write(ansiEscapes.cursorLeft)
++    }
+   }
+ 
+   renderLog(msg) {
+diff --git a/node_modules/@serverless/cli/src/index.js b/node_modules/@serverless/cli/src/index.js
+index ee52b08..9652a4e 100644
+--- a/node_modules/@serverless/cli/src/index.js
++++ b/node_modules/@serverless/cli/src/index.js
+@@ -233,11 +233,9 @@ const runComponents = async (serverlessFileArg) => {
+       }
+     }
+     context.close('done')
+-    process.exit(0)
+   } catch (e) {
+     context.renderError(e)
+     context.close('error', e)
+-    process.exit(1)
+   }
+ }
+ 

packages/serverless-components/nextjs-component/serverless.js

@@ -1,3 +1,3 @@
-const component = require("./dist/component.js");
+const component = require("./dist/src/component.js");
 
 module.exports = component.default;

packages/serverless-components/nextjs-component/tsconfig.build.json

@@ -4,5 +4,5 @@
     "sourceMap": false,
     "removeComments": true
   },
-  "include": ["./src/", ".d.ts"]
+  "include": ["./src/", ".d.ts", "./bin/"]
 }