refactor: move syntax grammars to TS definitions (#592)

* refactor: move syntax grammars to TS definitions

This commit refactors remaining existing grammars to use TS definitions
as started in #581.

* fixup! refactor: move syntax grammars to TS definitions

Author: ayazhafiz

scripts/build.sh

@@ -22,9 +22,6 @@ cp server/package.json server/yarn.lock server/README.md dist/server
 node syntaxes/out/build.js
 mkdir dist/syntaxes
 cp syntaxes/out/*.json dist/syntaxes
-# TODO: Remove the next two lines once all syntaxes have been refactored to TypeScript
-cp syntaxes/*.json dist/syntaxes
-rm dist/syntaxes/tsconfig.json
 
 pushd dist
 yarn install --production --ignore-scripts

syntaxes/inline-styles.json

@@ -10,6 +10,8 @@ import * as fs from 'fs';
 
 import {GrammarDefinition, JsonObject} from './types';
 import {template} from './template/grammar';
+import {InlineTemplate} from './inline-template';
+import {InlineStyles} from './inline-styles';
 
 // Recursively transforms a TypeScript grammar definition into an object which can be processed by
 // JSON.stringify to generate a valid TextMate JSON grammar definition
@@ -41,3 +43,5 @@ function build(grammar: GrammarDefinition, filename: string): void {
 }
 
 build(template, 'template');
+build(InlineTemplate, 'inline-template');
+build(InlineStyles, 'inline-styles');

syntaxes/inline-template.json

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {GrammarDefinition} from './types';
+
+export const InlineStyles: GrammarDefinition = {
+  scopeName: 'inline-styles.ng',
+  injectionSelector: 'L:source.ts#meta.decorator.ts -comment',
+  patterns: [{include: '#inlineStyles'}],
+  repository: {
+    inlineStyles: {
+      begin: /(styles)\s*(:)/,
+      beginCaptures: {
+        1: {name: 'meta.object-literal.key.ts'},
+        2: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
+      },
+      end: /(?=,|})/,
+      patterns: [{include: '#tsParenExpression'}, {include: '#tsBracketExpression'}]
+    },
+
+    tsParenExpression: {
+      begin: /\G\s*(\()/,
+      beginCaptures: {1: {name: 'meta.brace.round.ts'}},
+      end: /\)/,
+      endCaptures: {0: {name: 'meta.brace.round.ts'}},
+      patterns: [{include: '$self'}, {include: '#tsBracketExpression'}]
+    },
+
+    'tsBracketExpression': {
+      begin: /\G\s*(\[)/,
+      beginCaptures: {1: {name: 'meta.array.literal.ts meta.brace.square.ts'}},
+      end: /\]/,
+      endCaptures: {0: {name: 'meta.array.literal.ts meta.brace.square.ts'}},
+      patterns: [{include: '#style'}]
+    },
+
+    style: {
+      begin: /\s*([`|'|"])/,
+      beginCaptures: {1: {name: 'string'}},
+      end: /\1/,
+      endCaptures: {0: {name: 'string'}},
+      contentName: 'source.css',
+      patterns: [{include: 'source.css'}]
+    }
+  }
+}

syntaxes/src/build.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {GrammarDefinition} from './types';
+
+export const InlineTemplate: GrammarDefinition = {
+  scopeName: 'inline-template.ng',
+  injectionSelector: 'L:meta.decorator.ts -comment',
+  patterns: [{include: '#inlineTemplate'}],
+  repository: {
+    inlineTemplate: {
+      begin: /(template)\s*(:)/,
+      beginCaptures: {
+        1: {name: 'meta.object-literal.key.ts'},
+        2: {name: 'meta.object-literal.key.ts punctuation.separator.key-value.ts'}
+      },
+      end: /(?=,|})/,
+      patterns: [{include: '#tsParenExpression'}, {include: '#ngTemplate'}]
+    },
+
+    tsParenExpression: {
+      begin: /\G\s*(\()/,
+      beginCaptures: {1: {name: 'meta.brace.round.ts'}},
+      end: /\)/,
+      endCaptures: {0: {name: 'meta.brace.round.ts'}},
+      patterns: [{include: '#tsParenExpression'}, {include: '#ngTemplate'}]
+    },
+
+    ngTemplate: {
+      begin: /\G\s*([`|'|"])/,
+      beginCaptures: {1: {name: 'string'}},
+      end: /\1/,
+      endCaptures: {0: {name: 'string'}},
+      contentName: 'text.html',
+      patterns: [{include: 'text.html.derivative'}, {include: 'template.ng'}]
+    }
+  }
+}

syntaxes/src/inline-styles.ts

@@ -3,15 +3,15 @@
     "name": "inline template",
     "scopeName": "inline-template.ng",
     "grammarFiles": [
-      "syntaxes/inline-template.json",
+      "syntaxes/out/inline-template.json",
       "syntaxes/out/template.json"
     ],
     "testFile": "syntaxes/test/data/inline-template.ts"
   },
   {
     "name": "inline styles",
     "scopeName": "inline-styles.ng",
-    "grammarFiles": ["syntaxes/inline-styles.json"],
+    "grammarFiles": ["syntaxes/out/inline-styles.json"],
     "testFile": "syntaxes/test/data/inline-styles.ts"
   },
   {