Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

repl: improve repl preview #33282

Closed
wants to merge 8 commits into from
Next Next commit
repl: improve repl preview
This aligns the REPL preview with the one used in the Chrome
DevTools console. It will now preview the output for the input
including the completion suffix as input. When pressing enter while
previewing such data, it will automatically insert the suffix
before evaluating the input. When pressing escape, that behavior
is deactivated until the input is changed.

Signed-off-by: Ruben Bridgewater <[email protected]>
  • Loading branch information
BridgeAR committed May 7, 2020
commit 210aee28502bbd8068d9f7dc77af0379ec7a0495
44 changes: 34 additions & 10 deletions lib/internal/repl/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,8 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {

let wrapped = false;

let escaped = null;

function getPreviewPos() {
const displayPos = repl._getDisplayPos(`${repl._prompt}${repl.line}`);
const cursorPos = repl.line.length !== repl.cursor ?
Expand All @@ -146,7 +148,13 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
return { displayPos, cursorPos };
}

const clearPreview = () => {
function isCursorAtInputEnd() {
const { cursorPos, displayPos } = getPreviewPos();
return cursorPos.rows === displayPos.rows &&
cursorPos.cols === displayPos.cols;
}

const clearPreview = (key) => {
if (inputPreview !== null) {
const { displayPos, cursorPos } = getPreviewPos();
const rows = displayPos.rows - cursorPos.rows + 1;
Expand Down Expand Up @@ -179,8 +187,23 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
cursorTo(repl.output, pos.cursorPos.cols);
moveCursor(repl.output, 0, -rows);
}
if (!key.ctrl && !key.shift) {
if (key.name === 'escape') {
if (escaped === null && key.meta) {
escaped = repl.line;
}
} else if ((key.name === 'return' || key.name === 'enter') &&
!key.meta &&
escaped !== repl.line &&
isCursorAtInputEnd()) {
repl._insertString(completionPreview);
}
}
completionPreview = null;
}
if (escaped !== repl.line) {
escaped = null;
}
};

function showCompletionPreview(line, insertPreview) {
Expand Down Expand Up @@ -317,13 +340,6 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
}

// 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.
const insertPreview = false;
showCompletionPreview(repl.line, insertPreview);

Expand Down Expand Up @@ -397,9 +413,17 @@ function setupPreview(repl, contextSymbol, bufferSymbol, active) {
moveCursor(repl.output, 0, -rows - 1);
};

getInputPreview(line, inputPreviewCallback);
let previewLine = line;

if (completionPreview !== null &&
isCursorAtInputEnd() &&
escaped !== repl.line) {
previewLine += completionPreview;
}

getInputPreview(previewLine, inputPreviewCallback);
if (wrapped) {
getInputPreview(line, inputPreviewCallback);
getInputPreview(previewLine, inputPreviewCallback);
}
wrapped = false;
};
Expand Down
2 changes: 1 addition & 1 deletion lib/repl.js
Original file line number Diff line number Diff line change
Expand Up @@ -849,7 +849,7 @@ function REPLServer(prompt,
self.cursor === 0 && self.line.length === 0) {
self.clearLine();
}
clearPreview();
clearPreview(key);
if (!reverseSearch(d, key)) {
ttyWrite(d, key);
showPreview();
Expand Down
40 changes: 37 additions & 3 deletions test/parallel/test-repl-history-navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const WORD_RIGHT = { name: 'right', ctrl: true };
const GO_TO_END = { name: 'end' };
const DELETE_WORD_LEFT = { name: 'backspace', ctrl: true };
const SIGINT = { name: 'c', ctrl: true };
const ESCAPE = { name: 'escape', meta: true };

const prompt = '> ';
const WAIT = '€';
Expand Down Expand Up @@ -180,8 +181,10 @@ const tests = [
'veryLongName'.repeat(30),
ENTER,
`${'\x1B[90m \x1B[39m'.repeat(235)} fun`,
ESCAPE,
ENTER,
`${' '.repeat(236)} fun`,
ESCAPE,
ENTER
],
expected: [],
Expand Down Expand Up @@ -316,6 +319,7 @@ const tests = [
env: { NODE_REPL_HISTORY: defaultHistoryPath },
showEscapeCodes: true,
skip: !process.features.inspector,
checkTotal: true,
test: [
'fu',
'n',
Expand All @@ -329,6 +333,12 @@ const tests = [
BACKSPACE,
WORD_LEFT,
WORD_RIGHT,
ESCAPE,
ENTER,
UP,
LEFT,
ENTER,
UP,
ENTER
],
// C = Cursor n forward
Expand Down Expand Up @@ -377,12 +387,36 @@ const tests = [
'\x1B[0K', '\x1B[7D', '\x1B[10G', ' // n', '\x1B[3G', '\x1B[10G',
// 10. Word right. Cleanup
'\x1B[0K', '\x1B[3G', '\x1B[7C', ' // n', '\x1B[10G',
'\x1B[0K',
// 11. ENTER
// 11. ESCAPE
'\x1B[0K', ' // n', '\x1B[10G', '\x1B[0K',
// 12. ENTER
'\r\n',
'Uncaught ReferenceError: functio is not defined\n',
'\x1B[1G', '\x1B[0J',
prompt, '\x1B[3G', '\r\n'
// 13. UP
prompt, '\x1B[3G', '\x1B[1G', '\x1B[0J',
`${prompt}functio`, '\x1B[10G',
' // n', '\x1B[10G',
' // n', '\x1B[10G',
// 14. LEFT
'\x1B[0K', '\x1B[1D',
'\x1B[10G', ' // n', '\x1B[9G', '\x1B[10G',
// 15. ENTER
'\x1B[0K', '\x1B[9G', '\x1B[1C',
'\r\n',
'Uncaught ReferenceError: functio is not defined\n',
'\x1B[1G', '\x1B[0J',
'> ', '\x1B[3G',
// 16. UP
'\x1B[1G', '\x1B[0J',
'> functio', '\x1B[10G',
' // n', '\x1B[10G',
' // n', '\x1B[10G', '\x1B[0K',
// 17. ENTER
'n', '\r\n',
'\x1B[1G', '\x1B[0J',
'... ', '\x1B[5G',
'\r\n'
],
clean: true
},
Expand Down
6 changes: 5 additions & 1 deletion test/parallel/test-repl-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,11 @@ async function tests(options) {
input: 'koo',
noPreview: '[Function: koo]',
preview: [
'k\x1B[90moo\x1B[39m\x1B[9G\x1B[0Ko\x1B[90mo\x1B[39m\x1B[10G\x1B[0Ko',
'k\x1B[90moo\x1B[39m\x1B[9G',
'\x1B[90m[Function: koo]\x1B[39m\x1B[9G\x1B[1A\x1B[1B\x1B[2K\x1B[1A' +
'\x1B[0Ko\x1B[90mo\x1B[39m\x1B[10G',
'\x1B[90m[Function: koo]\x1B[39m\x1B[10G\x1B[1A\x1B[1B\x1B[2K\x1B[1A' +
'\x1B[0Ko',
'\x1B[90m[Function: koo]\x1B[39m\x1B[11G\x1B[1A\x1B[1B\x1B[2K\x1B[1A\r',
'\x1B[36m[Function: koo]\x1B[39m'
]
Expand Down