repl: support syntax highlighting

lib/internal/repl/highlight.js

@@ -0,0 +1,140 @@
+// Some patterns inspired by https://github.com/speed-highlight/core/blob/249ad8fe9bf3eb951eb263b5b3c35887bbbbb2eb/src/languages/js.js
+
+
+'use strict';
+const {
+  RegExpPrototypeExec,
+  StringPrototypeSlice,
+} = primordials;
+
+const { inspect } = require('internal/util/inspect');
+
+const matchers = [
+  {
+    // Single line comment or multi line comment
+    color: inspect.colors.grey,
+    patterns: [
+      /\/\/[^\n]*|\/\*[\s\S]*?\*\//g,
+    ],
+  },
+  {
+    // String
+    color: inspect.colors[inspect.styles.string],
+    patterns: [
+      // 'string' or "string"
+      /(["'])(\\[^]|(?!\1)[^\r\n\\])*\1?/g,
+      // `string`
+      /`((?!`)[^]|\\[^])*`?/g,
+    ],
+  },
+  {
+    // Keywords
+    color: inspect.colors[inspect.styles.special],
+    patterns: [
+      /=>|\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|export|extends|finally|for|from|function|if|import|in|instanceof|let|new|of|return|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/g,
+    ],
+  },
+  {
+    // RegExp
+    color: inspect.colors[inspect.styles.regexp],
+    patterns: [
+      // eslint-disable-next-line node-core/no-unescaped-regexp-dot
+      /\/(?:[^/\\\r\n]|\\.)*\/[dgimsuy]*/g,
+    ],
+  },
+  {
+    // Number
+    color: inspect.colors[inspect.styles.number],
+    patterns: [
+      /(\.e?|\b)\d(e-|[\d.oxa-fA-F_])*(\.|\b)/g,
+      /\bNaN\b/g,
+    ],
+  },
+  {
+    // Undefined
+    color: inspect.colors[inspect.styles.undefined],
+    patterns: [
+      /\bundefined\b/g,
+    ],
+  },
+  {
+    // Null
+    color: inspect.colors[inspect.styles.null],
+    patterns: [
+      /\bnull\b/g,
+    ],
+  },
+  {
+    // Boolean
+    color: inspect.colors[inspect.styles.boolean],
+    patterns: [
+      /\b(true|false)\b/g,
+    ],
+  },
+  {
+    // Operator
+    color: inspect.colors[inspect.styles.special],
+    patterns: [
+      /[/*+:?&|%^~=!,<>.^-]+/g,
+    ],
+  },
+  {
+    // Identifier
+    color: inspect.colors.white,
+    patterns: [
+      /\b[A-Z][\w_]*\b/g,
+    ],
+  },
+  {
+    // Function Declaration
+    color: inspect.colors[inspect.styles.special],
+    patterns: [
+      // eslint-disable-next-line no-useless-escape
+      /[a-zA-Z$_][\w$_]*(?=\s*((\?\.)?\s*\(|=\s*(\(?[\w,{}\[\])]+\)? =>|function\b)))/g,
+    ],
+  },
+];
+
+function highlight(code) {
+  let tokens = '';
+
+  for (let index = 0; index < code.length;) {
+    let match = null;
+    let matchIndex = code.length;
+    let matchType = null;
+
+    for (const { color, patterns } of matchers) {
+      for (const pattern of patterns) {
+        pattern.lastIndex = index;
+        const result = RegExpPrototypeExec(pattern, code);
+
+        if (result && result.index < matchIndex) {
+          match = result[0];
+          matchIndex = result.index;
+          matchType = color;
+        }
+      }
+    }
+
+    if (matchIndex > index) {
+      tokens += StringPrototypeSlice(code, index, matchIndex);
+    }
+
+    if (match) {
+      tokens += colorize(match, matchType);
+      index = matchIndex + match.length;
+    } else {
+      break;
+    }
+  }
+
+  return tokens;
+}
+
+
+function colorize(text, color) {
+  if (color === inspect.colors.white) return text;
+  return `\u001b[${color[0]}m${text}\u001b[${color[1]}m`;
+}
+
+module.exports = highlight;

lib/repl.js

@@ -185,6 +185,7 @@ const {
 } = internalBinding('contextify');
 
 const history = require('internal/repl/history');
+const highlight = require('internal/repl/highlight');
 const {
   extensionFormatMap,
 } = require('internal/modules/esm/formats');
@@ -1058,6 +1059,23 @@ function REPLServer(prompt,
     }
   };
 
+  self._insertString = self.output.cursorTo ? (c) => {
+    const beg = StringPrototypeSlice(self.line, 0, self.cursor);
+    const end = StringPrototypeSlice(self.line, self.cursor, self.line.length);
+    self.line = beg + c + end;
+    self.cursor += c.length;
+    self._refreshLine();
+  } : self._insertString;
+
+  const refreshLine = FunctionPrototypeBind(self._refreshLine, self);
+  self._refreshLine = self.output.cursorTo ? () => {
+    const oldLine = self.line;
+    self.line = highlight(self.line);
+    refreshLine();
+    self.line = oldLine;
+    self.output.cursorTo(self.getPrompt().length + self.cursor);
+  } : refreshLine;
+
   self.displayPrompt();
 }
 ObjectSetPrototypeOf(REPLServer.prototype, Interface.prototype);
@@ -1187,7 +1205,7 @@ REPLServer.prototype.resetContext = function() {
   this.emit('reset', this.context);
 };
 
-REPLServer.prototype.displayPrompt = function(preserveCursor) {
+REPLServer.prototype.getPrompt = function() {
   let prompt = this._initialPrompt;
   if (this[kBufferedCommandSymbol].length) {
     prompt = '...';
@@ -1196,7 +1214,11 @@ REPLServer.prototype.displayPrompt = function(preserveCursor) {
     prompt += levelInd + ' ';
   }
 
-  // Do not overwrite `_initialPrompt` here
+  return prompt;
+};
+
+REPLServer.prototype.displayPrompt = function(preserveCursor) {
+  const prompt = this.getPrompt();
   ReflectApply(Interface.prototype.setPrompt, this, [prompt]);
   this.prompt(preserveCursor);
 };

test/parallel/test-repl-syntax-highlighting.js

@@ -0,0 +1,107 @@
+// Flags: --expose-internals
+'use strict';
+
+require('../common');
+const highlight = require('internal/repl/highlight');
+const assert = require('assert');
+const { inspect } = require('internal/util/inspect');
+
+function removeEscapeSequences(str) {
+  /* eslint-disable-next-line no-control-regex */
+  return str.replace(/\u001b\[\d+m/g, '');
+}
+
+function color(str, color) {
+  return `\u001b[${color[0]}m${str}\u001b[${color[1]}m`;
+}
+
+const tests = [
+  // Comments (// ... and /* ... */)
+  color('// this is a comment', inspect.colors.gray),
+  color('/* this is a\nmultiline comment */', inspect.colors.gray),
+
+  // Strings ('...', "...", and `...`)
+  color('\'this is a string\'', inspect.colors[inspect.styles.string]),
+  color('"this is a string"', inspect.colors[inspect.styles.string]),
+  /* eslint-disable-next-line no-template-curly-in-string */
+  color('`this is a ${template}\nstring`', inspect.colors[inspect.styles.string]),
+
+  // Keywords
+  color('async', inspect.colors[inspect.styles.special]),
+
+  // RegExp
+  color('/regexp/g', inspect.colors[inspect.styles.regexp]),
+
+  // Numbers
+  color('123', inspect.colors[inspect.styles.number]),
+  color('123.456', inspect.colors[inspect.styles.number]),
+  color('.456', inspect.colors[inspect.styles.number]),
+  color('0x123', inspect.colors[inspect.styles.number]),
+  color('0xFF', inspect.colors[inspect.styles.number]),
+  color('0b101', inspect.colors[inspect.styles.number]),
+  color('0o123', inspect.colors[inspect.styles.number]),
+  color('123e456', inspect.colors[inspect.styles.number]),
+  color('123e-456', inspect.colors[inspect.styles.number]),
+  color('123.', inspect.colors[inspect.styles.number]),
+  color('1_2_3', inspect.colors[inspect.styles.number]),
+  color('NaN', inspect.colors[inspect.styles.number]),
+
+  // Undefined
+  color('undefined', inspect.colors[inspect.styles.undefined]),
+
+  // Null
+  color('null', inspect.colors[inspect.styles.null]),
+
+  // Boolean (true/false)
+  color('true', inspect.colors[inspect.styles.boolean]),
+  color('false', inspect.colors[inspect.styles.boolean]),
+
+  // Operators
+  color('+', inspect.colors[inspect.styles.special]),
+  color('-', inspect.colors[inspect.styles.special]),
+  color('*', inspect.colors[inspect.styles.special]),
+  color('/', inspect.colors[inspect.styles.special]),
+  color('%', inspect.colors[inspect.styles.special]),
+  color('**', inspect.colors[inspect.styles.special]),
+  color('=', inspect.colors[inspect.styles.special]),
+  color('+=', inspect.colors[inspect.styles.special]),
+  color('-=', inspect.colors[inspect.styles.special]),
+  color('*=', inspect.colors[inspect.styles.special]),
+  color('/=', inspect.colors[inspect.styles.special]),
+  color('%=', inspect.colors[inspect.styles.special]),
+  color('**=', inspect.colors[inspect.styles.special]),
+  color('==', inspect.colors[inspect.styles.special]),
+  color('===', inspect.colors[inspect.styles.special]),
+  color('!=', inspect.colors[inspect.styles.special]),
+  color('!==', inspect.colors[inspect.styles.special]),
+  color('>', inspect.colors[inspect.styles.special]),
+  color('>=', inspect.colors[inspect.styles.special]),
+  color('<', inspect.colors[inspect.styles.special]),
+  color('<=', inspect.colors[inspect.styles.special]),
+  color('>>', inspect.colors[inspect.styles.special]),
+  color('<<', inspect.colors[inspect.styles.special]),
+  color('>>>', inspect.colors[inspect.styles.special]),
+  color('&', inspect.colors[inspect.styles.special]),
+  color('|', inspect.colors[inspect.styles.special]),
+  color('^', inspect.colors[inspect.styles.special]),
+  color('!', inspect.colors[inspect.styles.special]),
+  color('~', inspect.colors[inspect.styles.special]),
+  color('&&', inspect.colors[inspect.styles.special]),
+  color('||', inspect.colors[inspect.styles.special]),
+  color('?', inspect.colors[inspect.styles.special]),
+  color(':', inspect.colors[inspect.styles.special]),
+  color('??', inspect.colors[inspect.styles.special]),
+  color('??=', inspect.colors[inspect.styles.special]),
+  color('=>', inspect.colors[inspect.styles.special]),
+
+  // Identifiers
+  'Identifier',
+
+  // Function Declaration
+  `${color('function', inspect.colors[inspect.styles.special])} ${color('foo', inspect.colors[inspect.styles.special])}()`,
+];
+
+for (const test of tests) {
+  const result = highlight(removeEscapeSequences(test));
+  assert.strictEqual(result, test);
+}