repl: add completion preview

This improves the already existing preview functionality by also
checking for the input completion. In case there's only a single
completion, it will automatically be visible to the user in grey.
If colors are deactivated, it will be visible as comment.

This also changes some keys by automatically accepting the preview
by moving the cursor behind the current input end.

PR-URL: https://github.com/nodejs/node/pull/30907
Reviewed-By: Michaël Zasso <targos@protonmail.com>
Reviewed-By: Rich Trott <rtrott@gmail.com>

1 files changed, 150 insertions, 20 deletions

diff --git a/lib/internal/repl/utils.js b/lib/internal/repl/utils.js
index c4280c1d1fe..bdc402ee087 100644
--- a/lib/internal/repl/utils.js
+++ b/lib/internal/repl/utils.js
@@ -28,6 +28,10 @@ const {
   moveCursor,
 } = require('readline');
 
+const {
+  commonPrefix
+} = require('internal/readline/utils');
+
 const { inspect } = require('util');
 
 const debug = require('internal/util/debuglog').debuglog('repl');
@@ -119,24 +123,103 @@ function isRecoverableError(e, code) {
 function setupPreview(repl, contextSymbol, bufferSymbol, active) {
   // Simple terminals can't handle previews.
   if (process.env.TERM === 'dumb' || !active) {
-    return { showInputPreview() {}, clearPreview() {} };
+    return { showPreview() {}, clearPreview() {} };
   }
 
-  let preview = null;
-  let lastPreview = '';
+  let inputPreview = null;
+  let lastInputPreview = '';
+
+  let previewCompletionCounter = 0;
+  let completionPreview = null;
 
   const clearPreview = () => {
-    if (preview !== null) {
+    if (inputPreview !== null) {
       moveCursor(repl.output, 0, 1);
       clearLine(repl.output);
       moveCursor(repl.output, 0, -1);
-      lastPreview = preview;
-      preview = null;
+      lastInputPreview = inputPreview;
+      inputPreview = null;
+    }
+    if (completionPreview !== null) {
+      // Prevent cursor moves if not necessary!
+      const move = repl.line.length !== repl.cursor;
+      if (move) {
+        cursorTo(repl.output, repl._prompt.length + repl.line.length);
+      }
+      clearLine(repl.output, 1);
+      if (move) {
+        cursorTo(repl.output, repl._prompt.length + repl.cursor);
+      }
+      completionPreview = null;
     }
   };
 
+  function showCompletionPreview(line, insertPreview) {
+    previewCompletionCounter++;
+
+    const count = previewCompletionCounter;
+
+    repl.completer(line, (error, data) => {
+      // Tab completion might be async and the result might already be outdated.
+      if (count !== previewCompletionCounter) {
+        return;
+      }
+
+      if (error) {
+        debug('Error while generating completion preview', error);
+        return;
+      }
+
+      // Result and the text that was completed.
+      const [rawCompletions, completeOn] = data;
+
+      if (!rawCompletions || rawCompletions.length === 0) {
+        return;
+      }
+
+      // If there is a common prefix to all matches, then apply that portion.
+      const completions = rawCompletions.filter((e) => e);
+      const prefix = commonPrefix(completions);
+
+      // No common prefix found.
+      if (prefix.length <= completeOn.length) {
+        return;
+      }
+
+      const suffix = prefix.slice(completeOn.length);
+
+      const totalLength = repl.line.length +
+                          repl._prompt.length +
+                          suffix.length +
+                          (repl.useColors ? 0 : 4);
+
+      // TODO(BridgeAR): Fix me. This should not be necessary. See similar
+      // comment in `showPreview()`.
+      if (totalLength > repl.columns) {
+        return;
+      }
+
+      if (insertPreview) {
+        repl._insertString(suffix);
+        return;
+      }
+
+      completionPreview = suffix;
+
+      const result = repl.useColors ?
+        `\u001b[90m${suffix}\u001b[39m` :
+        ` // ${suffix}`;
+
+      if (repl.line.length !== repl.cursor) {
+        cursorTo(repl.output, repl._prompt.length + repl.line.length);
+      }
+      repl.output.write(result);
+      cursorTo(repl.output, repl._prompt.length + repl.cursor);
+    });
+  }
+
   // This returns a code preview for arbitrary input code.
-  function getPreviewInput(input, callback) {
+  function getInputPreview(input, callback) {
     // For similar reasons as `defaultEval`, wrap expressions starting with a
     // curly brace with parenthesis.
     if (input.startsWith('{') && !input.endsWith(';')) {
@@ -184,23 +267,41 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
     }, () => callback(new ERR_INSPECTOR_NOT_AVAILABLE()));
   }
 
-  const showInputPreview = () => {
+  const showPreview = () => {
     // Prevent duplicated previews after a refresh.
-    if (preview !== null) {
+    if (inputPreview !== null) {
       return;
     }
 
     const line = repl.line.trim();
 
-    // Do not preview if the command is buffered or if the line is empty.
-    if (repl[bufferSymbol] || line === '') {
+    // Do not preview in case the line only contains whitespace.
+    if (line === '') {
+      return;
+    }
+
+    // Add the autocompletion preview.
+    // TODO(BridgeAR): Trigger the input preview after the completion preview.
+    // That way it's possible to trigger the input prefix including the
+    // potential completion suffix. To do so, we also have to change the
+    // behavior of `enter` and `escape`:
+    // Enter should automatically add the suffix to the current line as long as
+    // escape was not pressed. We might even remove the preview in case any
+    // cursor movement is triggered.
+    if (typeof repl.completer === 'function') {
+      const insertPreview = false;
+      showCompletionPreview(repl.line, insertPreview);
+    }
+
+    // Do not preview if the command is buffered.
+    if (repl[bufferSymbol]) {
       return;
     }
 
-    getPreviewInput(line, (error, inspected) => {
+    getInputPreview(line, (error, inspected) => {
       // Ignore the output if the value is identical to the current line and the
       // former preview is not identical to this preview.
-      if ((line === inspected && lastPreview !== inspected) ||
+      if ((line === inspected && lastInputPreview !== inspected) ||
           inspected === null) {
         return;
       }
@@ -215,7 +316,7 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
         return;
       }
 
-      preview = inspected;
+      inputPreview = inspected;
 
       // Limit the output to maximum 250 characters. Otherwise it becomes a)
       // difficult to read and b) non terminal REPLs would visualize the whole
@@ -235,21 +336,50 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
 
       repl.output.write(`\n${result}`);
       moveCursor(repl.output, 0, -1);
-      cursorTo(repl.output, repl.cursor + repl._prompt.length);
+      cursorTo(repl.output, repl._prompt.length + repl.cursor);
     });
   };
 
+  // -------------------------------------------------------------------------//
+  // Replace multiple interface functions. This is required to fully support  //
+  // previews without changing readlines behavior.                            //
+  // -------------------------------------------------------------------------//
+
   // Refresh prints the whole screen again and the preview will be removed
   // during that procedure. Print the preview again. This also makes sure
   // the preview is always correct after resizing the terminal window.
-  const tmpRefresh = repl._refreshLine.bind(repl);
+  const originalRefresh = repl._refreshLine.bind(repl);
   repl._refreshLine = () => {
-    preview = null;
-    tmpRefresh();
-    showInputPreview();
+    inputPreview = null;
+    originalRefresh();
+    showPreview();
+  };
+
+  let insertCompletionPreview = true;
+  // Insert the longest common suffix of the current input in case the user
+  // moves to the right while already being at the current input end.
+  const originalMoveCursor = repl._moveCursor.bind(repl);
+  repl._moveCursor = (dx) => {
+    const currentCursor = repl.cursor;
+    originalMoveCursor(dx);
+    if (currentCursor + dx > repl.line.length &&
+        typeof repl.completer === 'function' &&
+        insertCompletionPreview) {
+      const insertPreview = true;
+      showCompletionPreview(repl.line, insertPreview);
+    }
+  };
+
+  // This is the only function that interferes with the completion insertion.
+  // Monkey patch it to prevent inserting the completion when it shouldn't be.
+  const originalClearLine = repl.clearLine.bind(repl);
+  repl.clearLine = () => {
+    insertCompletionPreview = false;
+    originalClearLine();
+    insertCompletionPreview = true;
   };
 
-  return { showInputPreview, clearPreview };
+  return { showPreview, clearPreview };
 }
 
 module.exports = {