fix: use a spinner instead of dots while waiting for framework port (#…

…4730)

Co-authored-by: Jordan Whistler <[email protected]>

src/commands/dev/dev.js

@@ -26,6 +26,7 @@ const {
   getNetlifyGraphConfig,
   readGraphQLOperationsSourceFile,
 } = require('../../lib/one-graph/cli-netlify-graph')
+const { startSpinner, stopSpinner } = require('../../lib/spinner')
 const {
   BANG,
   NETLIFYDEV,
@@ -115,7 +116,7 @@ const cleanupBeforeExit = async ({ exitCode }) => {
  * @param {NodeJS.ProcessEnv} env
  * @returns {execa.ExecaChildProcess<string>}
  */
-const runCommand = (command, env = {}) => {
+const runCommand = (command, env = {}, spinner = null) => {
   const commandProcess = execa.command(command, {
     preferLocal: true,
     // we use reject=false to avoid rejecting synchronously when the command doesn't exist
@@ -125,8 +126,23 @@ const runCommand = (command, env = {}) => {
     windowsHide: false,
   })
 
-  commandProcess.stdout.pipe(stripAnsiCc.stream()).pipe(process.stdout)
-  commandProcess.stderr.pipe(stripAnsiCc.stream()).pipe(process.stderr)
+  // This ensures that an active spinner stays at the bottom of the commandline
+  // even though the actual framework command might be outputting stuff
+  const pipeDataWithSpinner = (writeStream, chunk) => {
+    if (spinner && spinner.isSpinning) {
+      spinner.clear()
+      spinner.isSilent = true
+    }
+    writeStream.write(chunk, () => {
+      if (spinner && spinner.isSpinning) {
+        spinner.isSilent = false
+        spinner.render()
+      }
+    })
+  }
+
+  commandProcess.stdout.pipe(stripAnsiCc.stream()).on('data', pipeDataWithSpinner.bind(null, process.stdout))
+  commandProcess.stderr.pipe(stripAnsiCc.stream()).on('data', pipeDataWithSpinner.bind(null, process.stderr))
   process.stdin.pipe(commandProcess.stdin)
 
   // we can't try->await->catch since we don't want to block on the framework server which
@@ -173,23 +189,27 @@ const startFrameworkServer = async function ({ settings }) {
 
   log(`${NETLIFYDEVLOG} Starting Netlify Dev with ${settings.framework || 'custom config'}`)
 
-  runCommand(settings.command, settings.env)
+  const spinner = startSpinner({
+    text: `Waiting for framework port ${settings.frameworkPort}. This can be configured using the 'targetPort' property in the netlify.toml`,
+  })
+
+  runCommand(settings.command, settings.env, spinner)
 
   try {
-    log(
-      `${NETLIFYDEVLOG} Waiting for framework port ${settings.frameworkPort}. This can be configured using the 'targetPort' property in the netlify.toml`,
-    )
     const open = await waitPort({
       port: settings.frameworkPort,
-      output: 'dots',
+      output: 'silent',
       timeout: FRAMEWORK_PORT_TIMEOUT,
       ...(settings.pollingStrategies.includes('HTTP') && { protocol: 'http' }),
     })
 
     if (!open) {
       throw new Error(`Timed out waiting for port '${settings.frameworkPort}' to be open`)
     }
+
+    stopSpinner({ error: false, spinner })
   } catch {
+    stopSpinner({ error: true, spinner })
     log(NETLIFYDEVERR, `Netlify Dev could not connect to localhost:${settings.frameworkPort}.`)
     log(NETLIFYDEVERR, `Please make sure your framework server is running on port ${settings.frameworkPort}`)
     exit(1)

tests/integration/snapshots/600.framework-detection.test.js.md

@@ -108,8 +108,7 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with custom config␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.hello␊
+    hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should force a specific framework when configured
@@ -118,8 +117,7 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Create React App␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.◈ Failed running command: react-scripts start. Please verify 'react-scripts' exists`
+    ◈ Failed running command: react-scripts start. Please verify 'react-scripts' exists`
 
 ## should throw when forcing a non supported framework
 
@@ -134,8 +132,7 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Create React App␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.␊
+    ␊
     > start␊
     > react-scripts start␊
     ␊
@@ -161,8 +158,7 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with #custom␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.hello␊
+    hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should print specific error when command doesn't exist
@@ -174,8 +170,7 @@ Generated by [AVA](https://avajs.dev).
     ◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.␊
     ◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection␊
     ◈ Starting Netlify Dev with #custom␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.◈ Failed running command: oops-i-did-it-again forgot-to-use-a-valid-command. Please verify 'oops-i-did-it-again' exists`
+    ◈ Failed running command: oops-i-did-it-again forgot-to-use-a-valid-command. Please verify 'oops-i-did-it-again' exists`
 
 ## should prompt when multiple frameworks are detected
 
@@ -189,8 +184,7 @@ Generated by [AVA](https://avajs.dev).
     > [Create React App] 'npm run start' ? Multiple possible start commands found Create React App-npm run start␊
     Add 'framework = "create-react-app"' to the [dev] section of your netlify.toml to avoid this selection prompt next time␊
     ◈ Starting Netlify Dev with Create React App␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.␊
+    ␊
     > start␊
     > react-scripts start␊
     ␊
@@ -205,8 +199,7 @@ Generated by [AVA](https://avajs.dev).
     ◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.␊
     ◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection␊
     ◈ Starting Netlify Dev with custom config␊
-    ◈ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:3000.hello␊
+    hello␊
     ◈ "echo hello" exited with code *. Shutting down Netlify Dev server`
 
 ## should filter frameworks with no dev command
@@ -236,8 +229,7 @@ Generated by [AVA](https://avajs.dev).
 
     `◈ Netlify Dev ◈␊
     ◈ Starting Netlify Dev with Gatsby␊
-    ◈ Waiting for framework port 8000. This can be configured using the 'targetPort' property in the netlify.toml␊
-    Waiting for localhost:8000.␊
+    ␊
     > develop␊
     > node -p process.env.GATSBY_LOGGER␊
     ␊