Migrate HTML language to ES Module

.eslintrc.cjs

@@ -179,7 +179,6 @@ module.exports = {
         "src/common/**/*.js",
         "src/config/**/*.js",
         "src/document/**/*.js",
-        "src/language-html/**/*.js",
         "src/main/**/*.js",
         "src/utils/**/*.js",
         "scripts/tools/eslint-plugin-prettier-internal-rules/**/*.js",

package.json

@@ -52,9 +52,9 @@
     "flow-parser": "0.171.0",
     "get-stdin": "8.0.0",
     "graphql": "15.6.1",
-    "html-element-attributes": "2.3.0",
+    "html-element-attributes": "3.1.0",
     "html-styles": "1.0.0",
-    "html-tag-names": "1.1.5",
+    "html-tag-names": "2.0.1",
     "html-void-elements": "2.0.1",
     "ignore": "5.2.0",
     "jest-docblock": "27.5.1",

scripts/build/bundler.mjs

@@ -86,14 +86,11 @@ function* getEsbuildOptions(bundle, buildOptions) {
     };
 
     // Replace parser getters with `undefined`
-    for (const file of ["src/language-html/parsers.js"]) {
-      replaceModule[path.join(PROJECT_ROOT, file)] = EMPTY_MODULE_REPLACEMENT;
-    }
     for (const file of [
       "src/language-css/parsers.js",
       "src/language-graphql/parsers.js",
+      "src/language-html/parsers.js",
       "src/language-handlebars/parsers.js",
-      // "src/language-html/parsers.js",
       "src/language-js/parse/parsers.js",
       "src/language-markdown/parsers.js",
       "src/language-yaml/parsers.js",

scripts/build/config.mjs

@@ -151,6 +151,7 @@ const parsers = [
   },
   {
     input: "src/language-html/parser-html.js",
+    isEsm: true,
   },
   {
     input: "src/language-yaml/parser-yaml.js",

src/language-html/ast.js

@@ -1,7 +1,5 @@
-"use strict";
-
-const { isNonEmptyArray } = require("../common/util.js");
-const getLast = require("../utils/get-last.js");
+import { isNonEmptyArray } from "../common/util.js";
+import getLast from "../utils/get-last.js";
 
 const NODES_KEYS = {
   attrs: true,
@@ -181,6 +179,4 @@ function setNonEnumerableProperty(obj, key, value) {
   Object.defineProperty(obj, key, { value, enumerable: false });
 }
 
-module.exports = {
-  Node,
-};
+export { Node };

src/language-html/clean.js

@@ -1,6 +1,4 @@
-"use strict";
-
-const { isFrontMatterNode } = require("../common/util.js");
+import { isFrontMatterNode } from "../common/util.js";
 
 const ignoredProperties = new Set([
   "sourceSpan",
@@ -32,4 +30,4 @@ function clean(ast, newNode) {
 
 clean.ignoredProperties = ignoredProperties;
 
-module.exports = clean;
+export default clean;

src/language-html/conditional-comment.js

@@ -1,8 +1,4 @@
-"use strict";
-
-const {
-  ParseSourceSpan,
-} = require("angular-html-parser/lib/compiler/src/parse_util");
+import { ParseSourceSpan } from "angular-html-parser/lib/compiler/src/parse_util.js";
 
 // https://css-tricks.com/how-to-create-an-ie-only-stylesheet
 
@@ -83,6 +79,4 @@ function parseIeConditionalEndComment(node /*, parseHtml, match */) {
   };
 }
 
-module.exports = {
-  parseIeConditionalComment,
-};
+export { parseIeConditionalComment };

src/language-html/constants.evaluate.js

@@ -1,6 +1,4 @@
-"use strict";
-
-const htmlStyles = require("html-styles");
+import htmlStyles from "html-styles";
 
 const getCssStyleTags = (property) =>
   Object.fromEntries(
@@ -48,9 +46,11 @@ const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");
 const CSS_WHITE_SPACE_DEFAULT = "normal";
 
-module.exports = {
+const constants = {
   CSS_DISPLAY_TAGS,
   CSS_DISPLAY_DEFAULT,
   CSS_WHITE_SPACE_TAGS,
   CSS_WHITE_SPACE_DEFAULT,
 };
+
+export default constants;

src/language-html/embed.js

@@ -1,24 +1,19 @@
-"use strict";
-
-const {
-  builders: { breakParent, group, hardline, indent, line, fill, softline },
-  utils: { mapDoc, replaceTextEndOfLine },
-} = require("../document/index.js");
-const printFrontMatter = require("../utils/front-matter/print.js");
-const {
+import doc from "../document/index.js";
+import printFrontMatter from "../utils/front-matter/print.js";
+import {
   printClosingTag,
   printClosingTagSuffix,
   needsToBorrowPrevClosingTagEndMarker,
   printOpeningTagPrefix,
   printOpeningTag,
-} = require("./print/tag.js");
-const { printImgSrcset, printClassNames } = require("./syntax-attribute.js");
-const {
+} from "./print/tag.js";
+import { printImgSrcset, printClassNames } from "./syntax-attribute.js";
+import {
   printVueFor,
   printVueBindings,
   isVueEventBindingExpression,
-} = require("./syntax-vue.js");
-const {
+} from "./syntax-vue.js";
+import {
   isScriptLikeTag,
   isVueNonHtmlBlock,
   inferScriptParser,
@@ -28,8 +23,13 @@ const {
   isVueSlotAttribute,
   isVueSfcBindingsAttribute,
   getTextValueParts,
-} = require("./utils/index.js");
-const getNodeContent = require("./get-node-content.js");
+} from "./utils/index.js";
+import getNodeContent from "./get-node-content.js";
+
+const {
+  builders: { breakParent, group, hardline, indent, line, fill, softline },
+  utils: { mapDoc, replaceTextEndOfLine },
+} = doc;
 
 function printEmbeddedAttributeValue(node, htmlTextToDoc, options) {
   const isKeyMatched = (patterns) =>
@@ -399,4 +399,4 @@ function embed(path, print, textToDoc, options) {
   }
 }
 
-module.exports = embed;
+export default embed;

src/language-html/get-node-content.js

@@ -1,13 +1,11 @@
-"use strict";
-
-const {
+import {
   needsToBorrowParentClosingTagStartMarker,
   printClosingTagStartMarker,
   needsToBorrowLastChildClosingTagEndMarker,
   printClosingTagEndMarker,
   needsToBorrowParentOpeningTagEndMarker,
   printOpeningTagEndMarker,
-} = require("./print/tag.js");
+} from "./print/tag.js";
 
 function getNodeContent(node, options) {
   let start = node.startSourceSpan.end.offset;
@@ -31,4 +29,4 @@ function getNodeContent(node, options) {
   return options.originalText.slice(start, end);
 }
 
-module.exports = getNodeContent;
+export default getNodeContent;

src/language-html/index.js

@@ -1,9 +1,10 @@
-"use strict";
+import { createRequire } from "module";
+import createLanguage from "../utils/create-language.js";
+import printer from "./printer-html.js";
+import options from "./options.js";
+import parsers from "./parsers.js";
 
-const createLanguage = require("../utils/create-language.js");
-const printer = require("./printer-html.js");
-const options = require("./options.js");
-const parsers = require("./parsers.js");
+const require = createRequire(import.meta.url);
 
 const languages = [
   createLanguage(require("linguist-languages/data/HTML.json"), () => ({
@@ -42,9 +43,11 @@ const printers = {
   html: printer,
 };
 
-module.exports = {
+const language = {
   languages,
   printers,
   options,
   parsers,
 };
+
+export default language;

src/language-html/loc.js

@@ -1,5 +1,3 @@
-"use strict";
-
 function locStart(node) {
   return node.sourceSpan.start.offset;
 }
@@ -8,4 +6,4 @@ function locEnd(node) {
   return node.sourceSpan.end.offset;
 }
 
-module.exports = { locStart, locEnd };
+export { locStart, locEnd };

src/language-html/options.js

@@ -1,11 +1,9 @@
-"use strict";
-
-const commonOptions = require("../common/common-options.js");
+import commonOptions from "../common/common-options.js";
 
 const CATEGORY_HTML = "HTML";
 
 // format based on https://github.com/prettier/prettier/blob/main/src/main/core-options.js
-module.exports = {
+const options = {
   bracketSameLine: commonOptions.bracketSameLine,
   htmlWhitespaceSensitivity: {
     since: "1.15.0",
@@ -37,3 +35,5 @@ module.exports = {
     description: "Indent script and style tags in Vue files.",
   },
 };
+
+export default options;

src/language-html/parser-html.js

@@ -1,21 +1,27 @@
-"use strict";
-
-const {
+// TODO[@fisker]: try inline import this module
+import angularHtmlParser from "angular-html-parser";
+import {
+  RecursiveVisitor,
+  visitAll,
+} from "angular-html-parser/lib/compiler/src/ml_parser/ast.js";
+import { getHtmlTagDefinition } from "angular-html-parser/lib/compiler/src/ml_parser/html_tags.js";
+import {
   ParseSourceSpan,
   ParseLocation,
   ParseSourceFile,
-} = require("angular-html-parser/lib/compiler/src/parse_util");
-const parseFrontMatter = require("../utils/front-matter/parse.js");
-const getLast = require("../utils/get-last.js");
-const createError = require("../common/parser-create-error.js");
-const { inferParserByLanguage } = require("../common/util.js");
-const HTML_TAGS = require("./utils/html-tag-names.js");
-const HTML_ELEMENT_ATTRIBUTES = require("./utils/html-elements-attributes.js");
-const isUnknownNamespace = require("./utils/is-unknown-namespace.js");
-const { hasPragma } = require("./pragma.js");
-const { Node } = require("./ast.js");
-const { parseIeConditionalComment } = require("./conditional-comment.js");
-const { locStart, locEnd } = require("./loc.js");
+} from "angular-html-parser/lib/compiler/src/parse_util.js";
+
+import parseFrontMatter from "../utils/front-matter/parse.js";
+import getLast from "../utils/get-last.js";
+import createError from "../common/parser-create-error.js";
+import { inferParserByLanguage } from "../common/util.js";
+import HTML_TAGS from "./utils/html-tag-names.js";
+import HTML_ELEMENT_ATTRIBUTES from "./utils/html-elements-attributes.js";
+import isUnknownNamespace from "./utils/is-unknown-namespace.js";
+import { hasPragma } from "./pragma.js";
+import { Node } from "./ast.js";
+import { parseIeConditionalComment } from "./conditional-comment.js";
+import { locStart, locEnd } from "./loc.js";
 
 /**
  * @typedef {import('angular-html-parser/lib/compiler/src/ml_parser/ast').Node} AstNode
@@ -51,17 +57,7 @@ function ngHtmlParser(
   },
   options
 ) {
-  const parser = require("angular-html-parser");
-  const {
-    RecursiveVisitor,
-    visitAll,
-  } = require("angular-html-parser/lib/compiler/src/ml_parser/ast");
-  const {
-    ParseSourceSpan,
-  } = require("angular-html-parser/lib/compiler/src/parse_util");
-  const {
-    getHtmlTagDefinition,
-  } = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
+  const parser = angularHtmlParser;
 
   let { rootNodes, errors } = parser.parse(input, {
     canSelfClose: recognizeSelfClosing,
@@ -401,7 +397,7 @@ function createParser({
   };
 }
 
-module.exports = {
+const parser = {
   parsers: {
     html: createParser({
       name: "html",
@@ -424,10 +420,12 @@ module.exports = {
               ({ name, value }) => name === "lang" && value !== "html"
             ))
         ) {
-          return require("angular-html-parser").TagContentType.RAW_TEXT;
+          return angularHtmlParser.TagContentType.RAW_TEXT;
         }
       },
     }),
     lwc: createParser({ name: "lwc" }),
   },
 };
+
+export default parser;

src/language-html/parsers.js

@@ -1,20 +1,22 @@
-"use strict";
+import htmlParser from "./parser-html.js";
 
-module.exports = {
+const parsers = {
   // HTML
   get html() {
-    return require("./parser-html.js").parsers.html;
+    return htmlParser.parsers.html;
   },
   // Vue
   get vue() {
-    return require("./parser-html.js").parsers.vue;
+    return htmlParser.parsers.vue;
   },
   // Angular
   get angular() {
-    return require("./parser-html.js").parsers.angular;
+    return htmlParser.parsers.angular;
   },
   // Lightning Web Components
   get lwc() {
-    return require("./parser-html.js").parsers.lwc;
+    return htmlParser.parsers.lwc;
   },
 };
+
+export default parsers;

src/language-html/pragma.js

@@ -1,5 +1,3 @@
-"use strict";
-
 function hasPragma(text) {
   return /^\s*<!--\s*@(?:format|prettier)\s*-->/.test(text);
 }
@@ -8,7 +6,4 @@ function insertPragma(text) {
   return "<!-- @format -->\n\n" + text.replace(/^\s*\n/, "");
 }
 
-module.exports = {
-  hasPragma,
-  insertPragma,
-};
+export { hasPragma, insertPragma };