JavaScript: Private fields (#1950)

This adds support for private fields in both JS and JS Extras.

[Proposal](https://github.com/tc39/proposal-class-fields#private-fields).

components/prism-javascript.js

@@ -18,7 +18,7 @@ Prism.languages.javascript = Prism.languages.extend('clike', {
 	],
 	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
 	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
-	'function': /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+	'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
 	'operator': /-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/
 });
 
@@ -32,7 +32,7 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 	},
 	// This must be declared before keyword because we use "function" inside the look-forward
 	'function-variable': {
-		pattern: /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
+		pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
 		alias: 'function'
 	},
 	'parameter': [

components/prism-js-extras.js

@@ -60,7 +60,7 @@
 
 	Prism.languages.insertBefore('javascript', 'punctuation', {
 		'property-access': {
-			pattern: /(\.\s*)[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/,
+			pattern: /(\.\s*)#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/,
 			lookbehind: true
 		},
 		'maybe-class-name': {

prism.js

@@ -785,7 +785,7 @@ Prism.languages.javascript = Prism.languages.extend('clike', {
 	],
 	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
 	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
-	'function': /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+	'function': /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
 	'operator': /-[-=]?|\+[+=]?|!=?=?|<<?=?|>>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/
 });
 
@@ -799,7 +799,7 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 	},
 	// This must be declared before keyword because we use "function" inside the look-forward
 	'function-variable': {
-		pattern: /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
+		pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
 		alias: 'function'
 	},
 	'parameter': [

tests/languages/javascript!+js-extras/method-variable_feature.test

@@ -1,5 +1,6 @@
 foo.bar = function() {};
 foo.bar = async () => {};
+this.bar = () => {};
 
 ----------------------------------------------------
 
@@ -29,6 +30,19 @@ foo.bar = async () => {};
 	["arrow", "=>"],
 	["punctuation", "{"],
 	["punctuation", "}"],
+	["punctuation", ";"],
+
+	["keyword", "this"],
+	["punctuation", "."],
+	["method-variable", [
+		"bar"
+	]],
+	["operator", "="],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["arrow", "=>"],
+	["punctuation", "{"],
+	["punctuation", "}"],
 	["punctuation", ";"]
 ]
 

tests/languages/javascript!+js-extras/method_feature.test

@@ -1,5 +1,6 @@
 foo.bar();
 foo.bar.call();
+this.#bar();
 
 ----------------------------------------------------
 
@@ -24,6 +25,15 @@ foo.bar.call();
 	]],
 	["punctuation", "("],
 	["punctuation", ")"],
+	["punctuation", ";"],
+
+	["keyword", "this"],
+	["punctuation", "."],
+	["method", [
+		"#bar"
+	]],
+	["punctuation", "("],
+	["punctuation", ")"],
 	["punctuation", ";"]
 ]
 

tests/languages/javascript!+js-extras/property-access_feature.test

@@ -1,5 +1,7 @@
 foo.bar.baz = 0;
 
+this.#foo;
+
 ----------------------------------------------------
 
 [
@@ -14,6 +16,13 @@ foo.bar.baz = 0;
 	]],
 	["operator", "="],
 	["number", "0"],
+	["punctuation", ";"],
+
+	["keyword", "this"],
+	["punctuation", "."],
+	["property-access", [
+		"#foo"
+	]],
 	["punctuation", ";"]
 ]
 

tests/languages/javascript/private_fields_feature.test

@@ -0,0 +1,58 @@
+class Foo {
+	#foo = function () {
+		return this.#bar;
+	}
+	#bar = 9;
+
+	get value() {
+		return this.#foo();
+	}
+}
+
+----------------------------------------------------
+
+[
+	["keyword", "class"],
+	["class-name", [
+		"Foo"
+	]],
+	["punctuation", "{"],
+
+	["function-variable", "#foo"],
+	["operator", "="],
+	["keyword", "function"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", "{"],
+	["keyword", "return"],
+	["keyword", "this"],
+	["punctuation", "."],
+	"#bar",
+	["punctuation", ";"],
+	["punctuation", "}"],
+
+	"\r\n\t#bar ",
+	["operator", "="],
+	["number", "9"],
+	["punctuation", ";"],
+
+	["keyword", "get"],
+	["function", "value"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", "{"],
+	["keyword", "return"],
+	["keyword", "this"],
+	["punctuation", "."],
+	["function", "#foo"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", ";"],
+	["punctuation", "}"],
+
+	["punctuation", "}"]
+]
+
+----------------------------------------------------
+
+Checks for the private field syntax.