TypeScript: Added support for decorators (#2820)

Author: RunDevelopment

components/prism-typescript.js

@@ -22,6 +22,16 @@
 	Prism.languages.typescript['class-name'].inside = typeInside;
 
 	Prism.languages.insertBefore('typescript', 'function', {
+		'decorator': {
+			pattern: /@[$\w\xA0-\uFFFF]+/,
+			inside: {
+				'at': {
+					pattern: /^@/,
+					alias: 'operator'
+				},
+				'function': /^[\s\S]+/
+			}
+		},
 		'generic-function': {
 			// e.g. foo<T extends "bar" | "baz">( ...
 			pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,

components/prism-typescript.min.js

@@ -0,0 +1,121 @@
+@f @g x
+
+@f
+@g
+x
+
+@sealed
+class ExampleClass {
+
+  @first()
+  @second()
+  method() {}
+
+  @enumerable(false)
+  greet() {
+    return "Hello, " + this.greeting;
+  }
+
+  @configurable(false)
+  get y() {
+    return this._y;
+  }
+
+}
+
+----------------------------------------------------
+
+[
+	["decorator", [
+		["at", "@"],
+		["function", "f"]
+	]],
+	["decorator", [
+		["at", "@"],
+		["function", "g"]
+	]],
+	" x\r\n\r\n",
+
+	["decorator", [
+		["at", "@"],
+		["function", "f"]
+	]],
+	["decorator", [
+		["at", "@"],
+		["function", "g"]
+	]],
+	"\r\nx\r\n\r\n",
+
+	["decorator", [
+		["at", "@"],
+		["function", "sealed"]
+	]],
+	["keyword", "class"], ["class-name", ["ExampleClass"]], ["punctuation", "{"],
+
+	["decorator", [
+		["at", "@"],
+		["function", "first"]
+	]],
+	["punctuation", "("],
+	["punctuation", ")"],
+
+	["decorator", [
+		["at", "@"],
+		["function", "second"]
+	]],
+	["punctuation", "("],
+	["punctuation", ")"],
+
+	["function", "method"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", "{"],
+	["punctuation", "}"],
+
+	["decorator", [
+		["at", "@"],
+		["function", "enumerable"]
+	]],
+	["punctuation", "("],
+	["boolean", "false"],
+	["punctuation", ")"],
+
+	["function", "greet"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", "{"],
+
+	["keyword", "return"],
+	["string", "\"Hello, \""],
+	["operator", "+"],
+	["keyword", "this"],
+	["punctuation", "."],
+	"greeting",
+	["punctuation", ";"],
+
+	["punctuation", "}"],
+
+	["decorator", [
+		["at", "@"],
+		["function", "configurable"]
+	]],
+	["punctuation", "("],
+	["boolean", "false"],
+	["punctuation", ")"],
+
+	["keyword", "get"],
+	["function", "y"],
+	["punctuation", "("],
+	["punctuation", ")"],
+	["punctuation", "{"],
+
+	["keyword", "return"],
+	["keyword", "this"],
+	["punctuation", "."],
+	"_y",
+	["punctuation", ";"],
+
+	["punctuation", "}"],
+
+	["punctuation", "}"]
+]

tests/languages/typescript/decorator_feature.test

@@ -0,0 +1,38 @@
+@Component({
+  selector: 'my-app',
+  template: `<div>Hello World!</div>`
+})
+export class AppComponent {}
+
+----------------------------------------------------
+
+[
+	["decorator", [
+		["at", "@"],
+		["function", "Component"]
+	]],
+	["punctuation", "("],
+	["punctuation", "{"],
+
+	"\r\n  selector",
+	["operator", ":"],
+	["string", "'my-app'"],
+	["punctuation", ","],
+
+	"\r\n  template",
+	["operator", ":"],
+	["template-string", [
+		["template-punctuation", "`"],
+		["string", "<div>Hello World!</div>"],
+		["template-punctuation", "`"]
+	]],
+
+	["punctuation", "}"],
+	["punctuation", ")"],
+
+	["keyword", "export"],
+	["keyword", "class"],
+	["class-name", ["AppComponent"]],
+	["punctuation", "{"],
+	["punctuation", "}"]
+]