feat: support HTML/Vue/Angular

package.json

@@ -14,18 +14,20 @@
     "node": ">=6"
   },
   "dependencies": {
+    "@angular/compiler": "6.1.10",
     "@babel/code-frame": "7.0.0-beta.46",
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
+    "angular-estree-parser": "1.1.3",
+    "angular-html-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",
     "cosmiconfig": "5.0.6",
     "dashify": "0.2.2",
     "dedent": "0.7.0",
     "diff": "3.2.0",
-    "domhandler": "2.4.2",
     "editorconfig": "0.15.2",
     "editorconfig-to-prettier": "0.0.6",
     "emoji-regex": "6.5.1",
@@ -40,7 +42,6 @@
     "html-element-attributes": "2.0.0",
     "html-styles": "1.0.0",
     "html-tag-names": "1.1.2",
-    "htmlparser2": "3.9.2",
     "ignore": "3.3.7",
     "jest-docblock": "23.2.0",
     "json-stable-stringify": "1.0.1",
@@ -53,7 +54,7 @@
     "minimist": "1.2.0",
     "n-readlines": "1.0.0",
     "normalize-path": "3.0.0",
-    "parse5-htmlparser2-tree-adapter": "5.0.0",
+    "parse-srcset": "ikatyang/parse-srcset#feat/report-error",
     "postcss-less": "1.1.5",
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "1.0.6",

scripts/build/config.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const path = require("path");
+const PROJECT_ROOT = path.resolve(__dirname, "../..");
 
 /**
  * @typedef {Object} Bundle
@@ -38,6 +39,18 @@ const parsers = [
     input: "src/language-js/parser-typescript.js",
     target: "universal"
   },
+  {
+    input: "src/language-js/parser-angular.js",
+    target: "universal",
+    alias: {
+      // Force using the CJS file, instead of ESM; i.e. get the file
+      // from `"main"` instead of `"module"` (rollup default) of package.json
+      "lines-and-columns": require.resolve("lines-and-columns"),
+      "@angular/compiler/src": path.resolve(
+        `${PROJECT_ROOT}/node_modules/@angular/compiler/esm2015/src`
+      )
+    }
+  },
   {
     input: "src/language-css/parser-postcss.js",
     target: "universal",
@@ -52,10 +65,6 @@ const parsers = [
     input: "src/language-markdown/parser-markdown.js",
     target: "universal"
   },
-  {
-    input: "src/language-vue/parser-vue.js",
-    target: "universal"
-  },
   {
     input: "src/language-handlebars/parser-glimmer.js",
     target: "universal",

src/common/internal-plugins.js

@@ -29,6 +29,10 @@ module.exports = [
         return eval("require")("../language-js/parser-babylon").parsers
           .__js_expression;
       },
+      get __vue_expression() {
+        return eval("require")("../language-js/parser-babylon").parsers
+          .__vue_expression;
+      },
       // JS - Flow
       get flow() {
         return eval("require")("../language-js/parser-flow").parsers.flow;
@@ -44,6 +48,26 @@ module.exports = [
       get "typescript-eslint"() {
         return eval("require")("../language-js/parser-typescript").parsers
           .typescript;
+      },
+      // JS - Angular Action
+      get __ng_action() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_action;
+      },
+      // JS - Angular Binding
+      get __ng_binding() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_binding;
+      },
+      // JS - Angular Interpolation
+      get __ng_interpolation() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_interpolation;
+      },
+      // JS - Angular Directive
+      get __ng_directive() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_directive;
       }
     }
   },
@@ -107,22 +131,20 @@ module.exports = [
     }
   },
 
-  // HTML
   require("../language-html"),
   {
     parsers: {
+      // HTML
       get html() {
         return eval("require")("../language-html/parser-html").parsers.html;
-      }
-    }
-  },
-
-  // Vue
-  require("../language-vue"),
-  {
-    parsers: {
+      },
+      // Vue
       get vue() {
-        return eval("require")("../language-vue/parser-vue").parsers.vue;
+        return eval("require")("../language-html/parser-html").parsers.vue;
+      },
+      // Angular
+      get angular() {
+        return eval("require")("../language-html/parser-html").parsers.angular;
       }
     }
   },

src/common/util.js

@@ -464,9 +464,11 @@ function printString(raw, options, isDirectiveLiteral) {
   const enclosingQuote =
     options.parser === "json"
       ? double.quote
-      : shouldUseAlternateQuote
-        ? alternate.quote
-        : preferred.quote;
+      : options.__isInHtmlAttribute
+        ? single.quote
+        : shouldUseAlternateQuote
+          ? alternate.quote
+          : preferred.quote;
 
   // Directives are exact code unit sequences, which means that you can't
   // change the escape sequences they use.
@@ -489,7 +491,10 @@ function printString(raw, options, isDirectiveLiteral) {
     !(
       options.parser === "css" ||
       options.parser === "less" ||
-      options.parser === "scss"
+      options.parser === "scss" ||
+      options.parentParser === "html" ||
+      options.parentParser === "vue" ||
+      options.parentParser === "angular"
     )
   );
 }

src/language-html/ast.js

@@ -0,0 +1,136 @@
+"use strict";
+
+const NODES_KEYS = {
+  attrs: true,
+  children: true
+};
+
+class Node {
+  constructor(props = {}) {
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (key in NODES_KEYS) {
+        this._setNodes(key, value);
+      } else {
+        this[key] = value;
+      }
+    }
+  }
+
+  _setNodes(key, nodes) {
+    if (nodes !== this[key]) {
+      this[key] = cloneAndUpdateNodes(nodes, this);
+      if (key === "attrs") {
+        setNonEnumerableProperties(this, {
+          attrMap: this[key].reduce((reduced, attr) => {
+            reduced[attr.fullName] = attr.value;
+            return reduced;
+          }, Object.create(null))
+        });
+      }
+    }
+  }
+
+  map(fn) {
+    let newNode = null;
+
+    for (const NODES_KEY in NODES_KEYS) {
+      const nodes = this[NODES_KEY];
+      if (nodes) {
+        const mappedNodes = mapNodesIfChanged(nodes, node => node.map(fn));
+        if (newNode !== nodes) {
+          if (!newNode) {
+            newNode = new Node();
+          }
+          newNode._setNodes(NODES_KEY, mappedNodes);
+        }
+      }
+    }
+
+    if (newNode) {
+      for (const key in this) {
+        if (!(key in NODES_KEYS)) {
+          newNode[key] = this[key];
+        }
+      }
+      const { index, siblings, prev, next, parent } = this;
+      setNonEnumerableProperties(newNode, {
+        index,
+        siblings,
+        prev,
+        next,
+        parent
+      });
+    }
+
+    return fn(newNode || this);
+  }
+
+  clone(overrides) {
+    return new Node(overrides ? Object.assign({}, this, overrides) : this);
+  }
+
+  get firstChild() {
+    return this.children && this.children.length !== 0
+      ? this.children[0]
+      : null;
+  }
+
+  get lastChild() {
+    return this.children && this.children.length !== 0
+      ? this.children[this.children.length - 1]
+      : null;
+  }
+
+  // for element and attribute
+  get rawName() {
+    return this.hasExplicitNamespace ? this.fullName : this.name;
+  }
+  get fullName() {
+    return this.namespace ? this.namespace + ":" + this.name : this.name;
+  }
+}
+
+function mapNodesIfChanged(nodes, fn) {
+  const newNodes = nodes.map(fn);
+  return newNodes.some((newNode, index) => newNode !== nodes[index])
+    ? newNodes
+    : nodes;
+}
+
+function cloneAndUpdateNodes(nodes, parent) {
+  const siblings = nodes.map(
+    node => (node instanceof Node ? node.clone() : new Node(node))
+  );
+
+  let prev = null;
+  let current = siblings[0];
+  let next = siblings[1] || null;
+
+  for (let index = 0; index < siblings.length; index++) {
+    setNonEnumerableProperties(current, {
+      index,
+      siblings,
+      prev,
+      next,
+      parent
+    });
+    prev = current;
+    current = next;
+    next = siblings[index + 2] || null;
+  }
+
+  return siblings;
+}
+
+function setNonEnumerableProperties(obj, props) {
+  const descriptors = Object.keys(props).reduce((reduced, key) => {
+    reduced[key] = { value: props[key], enumerable: false };
+    return reduced;
+  }, {});
+  Object.defineProperties(obj, descriptors);
+}
+
+module.exports = {
+  Node
+};

src/language-html/clean.js

@@ -1,9 +1,11 @@
 "use strict";
 
 module.exports = function(ast, newNode) {
-  delete newNode.startIndex;
-  delete newNode.endIndex;
-  delete newNode.attribs;
+  delete newNode.sourceSpan;
+  delete newNode.startSourceSpan;
+  delete newNode.endSourceSpan;
+  delete newNode.nameSpan;
+  delete newNode.valueSpan;
 
   if (ast.type === "text" || ast.type === "comment") {
     return null;
@@ -18,7 +20,7 @@ module.exports = function(ast, newNode) {
     delete newNode.value;
   }
 
-  if (ast.type === "directive" && ast.name === "!doctype") {
-    delete newNode.data;
+  if (ast.type === "docType") {
+    delete newNode.value;
   }
 };

src/language-html/constants.evaluate.js

@@ -17,7 +17,19 @@ const getCssStyleTags = property =>
     )
     .reduce((reduced, value) => Object.assign(reduced, value), {});
 
-const CSS_DISPLAY_TAGS = getCssStyleTags("display");
+const CSS_DISPLAY_TAGS = Object.assign({}, getCssStyleTags("display"), {
+  // TODO: send PR to upstream
+  button: "inline-block",
+
+  // special cases for some css display=none elements
+  template: "inline",
+  source: "block",
+  track: "block",
+
+  // there's no css display for these elements but they behave these ways
+  video: "inline-block",
+  audio: "inline-block"
+});
 const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");
 const CSS_WHITE_SPACE_DEFAULT = "normal";

src/language-html/index.js

@@ -1,21 +1,39 @@
 "use strict";
 
-const printer = require("./printer-htmlparser2");
+const printer = require("./printer-html");
 const createLanguage = require("../utils/create-language");
 const options = require("./options");
 
 const languages = [
+  createLanguage(require("linguist-languages/data/html"), {
+    override: {
+      name: "Angular",
+      since: "1.15.0",
+      parsers: ["angular"],
+      vscodeLanguageIds: ["html"],
+
+      extensions: [".component.html"],
+      filenames: []
+    }
+  }),
   createLanguage(require("linguist-languages/data/html"), {
     override: {
       since: "1.15.0",
       parsers: ["html"],
       vscodeLanguageIds: ["html"]
     }
+  }),
+  createLanguage(require("linguist-languages/data/vue"), {
+    override: {
+      since: "1.10.0",
+      parsers: ["vue"],
+      vscodeLanguageIds: ["vue"]
+    }
   })
 ];
 
 const printers = {
-  htmlparser2: printer
+  html: printer
 };
 
 module.exports = {