@khanacademy/perseus-linter 2.0.0 → 3.0.0

package/dist/index.js

@@ -1,64 +1,238 @@
-import _extends from '@babel/runtime/helpers/extends';
-import { PerseusError, Errors } from '@khanacademy/perseus-core';
-import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-utils';
-import PropTypes from 'prop-types';
+'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var perseusCore = require('@khanacademy/perseus-core');
+var perseusUtils = require('@khanacademy/perseus-utils');
+var PropTypes = require('prop-types');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultCompat(PropTypes);
+
+/* eslint-disable no-useless-escape */
+/**
+ * The Selector class implements a CSS-like system for matching nodes in a
+ * parse tree based on the structure of the tree. Create a Selector object by
+ * calling the static Selector.parse() method on a string that describes the
+ * tree structure you want to match. For example, if you want to find text
+ * nodes that are direct children of paragraph nodes that immediately follow
+ * heading nodes, you could create an appropriate selector like this:
+ *
+ *   selector = Selector.parse("heading + paragraph > text");
+ *
+ * Recall from the TreeTransformer class, that we consider any object with a
+ * string-valued `type` property to be a tree node. The words "heading",
+ * "paragraph" and "text" in the selector string above specify node types and
+ * will match nodes in a parse tree that have `type` properties with those
+ * values.
+ *
+ * Selectors are designed for use during tree traversals done with the
+ * TreeTransformer traverse() method. To test whether the node currently being
+ * traversed matches a selector, simply pass the TraversalState object to the
+ * match() method of the Selector object. If the node does not match the
+ * selector, match() returns null. If it does match, then match() returns an
+ * array of nodes that match the selector. In the example above the first
+ * element of the array would be the node the heading node, the second would
+ * be the paragraph node that follows it, and the third would be the text node
+ * that is a child of the paragraph.  The last element of a returned array of
+ * nodes is always equal to the current node of the tree traversal.
+ *
+ * Code that uses a selector might look like this:
+ *
+ *   matchingNodes = selector.match(state);
+ *   if (matchingNodes) {
+ *       let heading = matchingNodes[0];
+ *       let text = matchingNodes[2];
+ *       // do something with those nodes
+ *   }
+ *
+ * The Selector.parse() method recognizes a grammar that is similar to CSS
+ * selectors:
+ *
+ * selector := treeSelector (, treeSelector)*
+ *
+ *    A selector is one or more comma-separated treeSelectors. A node matches
+ *    the selector if it matches any of the treeSelectors.
+ *
+ * treeSelector := (treeSelector combinator)? nodeSelector
+ *
+ *    A treeSelector is a nodeSelector optionally preceeded by a combinator
+ *    and another tree selector. The tree selector matches if the current node
+ *    matches the node selector and a sibling or ancestor (depending on the
+ *    combinator) of the current node matches the optional treeSelector.
+ *
+ * combinator := ' ' | '>' | '+' | '~'   // standard CSS3 combinators
+ *
+ *    A combinator is a space or punctuation character that specifies the
+ *    relationship between two nodeSelectors. A space between two
+ *    nodeSelectors means that the first selector much match an ancestor of
+ *    the node that matches the second selector. A '>' character means that
+ *    the first selector must match the parent of the node matched by the
+ *    second. The '~' combinator means that the first selector must match a
+ *    previous sibling of the node matched by the second. And the '+' selector
+ *    means that first selector must match the immediate previous sibling of
+ *    the node that matched the second.
+ *
+ * nodeSelector := <IDENTIFIER> | '*'
+ *
+ *    A nodeSelector is simply an identifier (a letter followed by any number
+ *    of letters, digits, hypens, and underscores) or the wildcard asterisk
+ *    character. A wildcard node selector matches any node. An identifier
+ *    selector matches any node that has a `type` property whose value matches
+ *    the identifier.
+ *
+ * If you call Selector.parse() on a string that does not match this grammar,
+ * it will throw an exception
+ *
+ * TODO(davidflanagan): it might be useful to allow more sophsticated node
+ * selector matching with attribute matches and pseudo-classes, like
+ * "heading[level=2]" or "paragraph:first-child"
+ *
+ * Implementation Note: this file exports a very simple Selector class but all
+ * the actual work is done in various internal classes. The Parser class
+ * parses the string representation of a selector into a parse tree that
+ * consists of instances of various subclasses of the Selector class. It is
+ * these subclasses that implement the selector matching logic, often
+ * depending on features of the TraversalState object from the TreeTransformer
+ * traversal.
+ */
+
+/**
+ * This is the base class for all Selector types. The key method that all
+ * selector subclasses must implement is match(). It takes a TraversalState
+ * object (from a TreeTransformer traversal) and tests whether the selector
+ * matches at the current node. See the comment at the start of this file for
+ * more details on the match() method.
+ */
 class Selector {
   static parse(selectorText) {
     return new Parser(selectorText).parse();
   }
+
+  /**
+   * Return an array of the nodes that matched or null if no match.
+   * This is the base class so we just throw an exception. All Selector
+   * subclasses must provide an implementation of this method.
+   */
   match(state) {
-    throw new PerseusError("Selector subclasses must implement match()", Errors.NotAllowed);
+    throw new perseusCore.PerseusError("Selector subclasses must implement match()", perseusCore.Errors.NotAllowed);
   }
+
+  /**
+   * Selector subclasses all define a toString() method primarily
+   * because it makes it easy to write parser tests.
+   */
   toString() {
     return "Unknown selector class";
   }
 }
+
+/**
+ * This class implements a parser for the selector grammar. Pass the source
+ * text to the Parser() constructor, and then call the parse() method to
+ * obtain a corresponding Selector object. parse() throws an exception
+ * if there are syntax errors in the selector.
+ *
+ * This class is not exported, and you don't need to use it directly.
+ * Instead call the static Selector.parse() method.
+ */
 class Parser {
+  static TOKENS; // We do lexing with a simple regular expression
+  tokens; // The array of tokens
+  tokenIndex; // Which token in the array we're looking at now
+
   constructor(s) {
-    this.tokens = void 0;
-    this.tokenIndex = void 0;
+    // Normalize whitespace:
+    // - remove leading and trailing whitespace
+    // - replace runs of whitespace with single space characters
     s = s.trim().replace(/\s+/g, " ");
+    // Convert the string to an array of tokens. Note that the TOKENS
+    // pattern ignores spaces that do not appear before identifiers
+    // or the * wildcard.
     this.tokens = s.match(Parser.TOKENS) || [];
     this.tokenIndex = 0;
   }
+
+  // Return the next token or the empty string if there are no more
   nextToken() {
     return this.tokens[this.tokenIndex] || "";
   }
+
+  // Increment the token index to "consume" the token we were looking at
+  // and move on to the next one.
   consume() {
     this.tokenIndex++;
   }
+
+  // Return true if the current token is an identifier or false otherwise
   isIdentifier() {
+    // The Parser.TOKENS regexp ensures that we only have to check
+    // the first character of a token to know what kind of token it is.
     const c = this.tokens[this.tokenIndex][0];
     return c >= "a" && c <= "z" || c >= "A" && c <= "Z";
   }
+
+  // Consume space tokens until the next token is not a space.
   skipSpace() {
     while (this.nextToken() === " ") {
       this.consume();
     }
   }
+
+  // Parse a comma-separated sequence of tree selectors. This is the
+  // entry point for the Parser class and the only method that clients
+  // ever need to call.
   parse() {
+    // We expect at least one tree selector
     const ts = this.parseTreeSelector();
+
+    // Now see what's next
     let token = this.nextToken();
+
+    // If there is no next token then we're done parsing and can return
+    // the tree selector object we got above
     if (!token) {
       return ts;
     }
+
+    // Otherwise, there is more go come and we're going to need a
+    // list of tree selectors
     const treeSelectors = [ts];
     while (token) {
+      // The only character we allow after a tree selector is a comma
       if (token === ",") {
         this.consume();
       } else {
         throw new ParseError("Expected comma");
       }
+
+      // And if we saw a comma, then it must be followed by another
+      // tree selector
       treeSelectors.push(this.parseTreeSelector());
       token = this.nextToken();
     }
+
+    // If we parsed more than one tree selector, return them in a
+    // SelectorList object.
     return new SelectorList(treeSelectors);
   }
+
+  // Parse a sequence of node selectors linked together with
+  // hierarchy combinators: space, >, + and ~.
   parseTreeSelector() {
-    this.skipSpace();
+    this.skipSpace(); // Ignore space after a comma, for example
+
+    // A tree selector must begin with a node selector
     let ns = this.parseNodeSelector();
     for (;;) {
+      // Now check the next token. If there is none, or if it is a
+      // comma, then we're done with the treeSelector. Otherwise
+      // we expect a combinator followed by another node selector.
+      // If we don't see a combinator, we throw an error. If we
+      // do see a combinator and another node selector then we
+      // combine the current node selector with the new node selector
+      // using a Selector subclass that depends on the combinator.
       const token = this.nextToken();
       if (!token || token === ",") {
         break;
@@ -80,7 +254,15 @@ class Parser {
     }
     return ns;
   }
+
+  // Parse a single node selector.
+  // For now, this is just a node type or a wildcard.
+  //
+  // TODO(davidflanagan): we may need to extend this with attribute
+  // selectors like 'heading[level=3]', or with pseudo-classes like
+  // paragraph:first-child
   parseNodeSelector() {
+    // First, skip any whitespace
     this.skipSpace();
     const t = this.nextToken();
     if (t === "*") {
@@ -94,17 +276,32 @@ class Parser {
     throw new ParseError("Expected node type");
   }
 }
-Parser.TOKENS = void 0;
+
+// We break the input string into tokens with this regexp. Token types
+// are identifiers, integers, punctuation and spaces. Note that spaces
+// tokens are only returned when they appear before an identifier or
+// wildcard token and are otherwise omitted.
 Parser.TOKENS = /([a-zA-Z][\w-]*)|(\d+)|[^\s]|(\s(?=[a-zA-Z\*]))/g;
+
+/**
+ * This is a trivial Error subclass that the Parser uses to signal parse errors
+ */
 class ParseError extends Error {
   constructor(message) {
     super(message);
   }
 }
+
+/**
+ * This Selector subclass is a list of selectors. It matches a node if any of
+ * the selectors on the list matches the node. It considers the selectors in
+ * order, and returns the array of nodes returned by whichever one matches
+ * first.
+ */
 class SelectorList extends Selector {
+  selectors;
   constructor(selectors) {
     super();
-    this.selectors = void 0;
     this.selectors = selectors;
   }
   match(state) {
@@ -126,6 +323,11 @@ class SelectorList extends Selector {
     return result;
   }
 }
+
+/**
+ * This trivial Selector subclass implements the '*' wildcard and
+ * matches any node.
+ */
 class AnyNode extends Selector {
   match(state) {
     return [state.currentNode()];
@@ -134,10 +336,15 @@ class AnyNode extends Selector {
     return "*";
   }
 }
+
+/**
+ * This selector subclass implements the <IDENTIFIER> part of the grammar.
+ * it matches any node whose `type` property is a specified string
+ */
 class TypeSelector extends Selector {
+  type;
   constructor(type) {
     super();
-    this.type = void 0;
     this.type = type;
   }
   match(state) {
@@ -151,15 +358,28 @@ class TypeSelector extends Selector {
     return this.type;
   }
 }
+
+/**
+ * This selector subclass is the superclass of the classes that implement
+ * matching for the four combinators. It defines left and right properties for
+ * the two selectors that are to be combined, but does not define a match
+ * method.
+ */
 class SelectorCombinator extends Selector {
+  left;
+  right;
   constructor(left, right) {
     super();
-    this.left = void 0;
-    this.right = void 0;
     this.left = left;
     this.right = right;
   }
 }
+
+/**
+ * This Selector subclass implements the space combinator. It matches if the
+ * right selector matches the current node and the left selector matches some
+ * ancestor of the current node.
+ */
 class AncestorCombinator extends SelectorCombinator {
   constructor(left, right) {
     super(left, right);
@@ -182,6 +402,12 @@ class AncestorCombinator extends SelectorCombinator {
     return this.left.toString() + " " + this.right.toString();
   }
 }
+
+/**
+ * This Selector subclass implements the > combinator. It matches if the
+ * right selector matches the current node and the left selector matches
+ * the parent of the current node.
+ */
 class ParentCombinator extends SelectorCombinator {
   constructor(left, right) {
     super(left, right);
@@ -204,6 +430,12 @@ class ParentCombinator extends SelectorCombinator {
     return this.left.toString() + " > " + this.right.toString();
   }
 }
+
+/**
+ * This Selector subclass implements the + combinator. It matches if the
+ * right selector matches the current node and the left selector matches
+ * the immediate previous sibling of the current node.
+ */
 class PreviousCombinator extends SelectorCombinator {
   constructor(left, right) {
     super(left, right);
@@ -226,6 +458,12 @@ class PreviousCombinator extends SelectorCombinator {
     return this.left.toString() + " + " + this.right.toString();
   }
 }
+
+/**
+ * This Selector subclass implements the ~ combinator. It matches if the
+ * right selector matches the current node and the left selector matches
+ * any previous sibling of the current node.
+ */
 class SiblingCombinator extends SelectorCombinator {
   constructor(left, right) {
     super(left, right);
@@ -249,17 +487,174 @@ class SiblingCombinator extends SelectorCombinator {
   }
 }
 
+/**
+ * The Rule class represents a Perseus lint rule. A Rule instance has a check()
+ * method that takes the same (node, state, content) arguments that a
+ * TreeTransformer traversal callback function does. Call the check() method
+ * during a tree traversal to determine whether the current node of the tree
+ * violates the rule. If there is no violation, then check() returns
+ * null. Otherwise, it returns an object that includes the name of the rule,
+ * an error message, and the start and end positions within the node's content
+ * string of the lint.
+ *
+ * A Perseus lint rule consists of a name, a severity, a selector, a pattern
+ * (RegExp) and two functions. The check() method uses the selector, pattern,
+ * and functions as follows:
+ *
+ * - First, when determining which rules to apply to a particular piece of
+ *   content, each rule can specify an optional function provided in the fifth
+ *   parameter to evaluate whether or not we should be applying this rule.
+ *   If the function returns false, we don't use the rule on this content.
+ *
+ * - Next, check() tests whether the node currently being traversed matches
+ *   the selector. If it does not, then the rule does not apply at this node
+ *   and there is no lint and check() returns null.
+ *
+ * - If the selector matched, then check() tests the text content of the node
+ *   (and its children) against the pattern. If the pattern does not match,
+ *   then there is no lint, and check() returns null.
+ *
+ * - If both the selector and pattern match, then check() calls the function
+ *   passing the TraversalState object, the content string for the node, the
+ *   array of nodes returned by the selector match, and the array of strings
+ *   returned by the pattern match. This function can use these arguments to
+ *   implement any kind of lint detection logic it wants. If it determines
+ *   that there is no lint, then it should return null. Otherwise, it should
+ *   return an error message as a string, or an object with `message`, `start`
+ *   and `end` properties. The start and end properties are numbers that mark
+ *   the beginning and end of the problematic content. Note that these numbers
+ *   are relative to the content string passed to the traversal callback, not
+ *   to the entire string that was used to generate the parse tree in the
+ *   first place. TODO(davidflanagan): modify the simple-markdown library to
+ *   have an option to add the text offset of each node to the parse
+ *   tree. This will allows us to pinpoint lint errors within a long string
+ *   of markdown text.
+ *
+ * - If the function returns null, then check() returns null. Otherwise,
+ *   check() returns an object with `rule`, `message`, `start` and `end`
+ *   properties. The value of the `rule` property is the name of the rule,
+ *   which is useful for error reporting purposes.
+ *
+ * The name, severity, selector, pattern and function arguments to the Rule()
+ * constructor are optional, but you may not omit both the selector and the
+ * pattern. If you do not specify a selector, a default selector that matches
+ * any node of type "text" will be used. If you do not specify a pattern, then
+ * any node that matches the selector will be assumed to match the pattern as
+ * well. If you don't pass a function as the fourth argument to the Rule()
+ * constructor, then you must pass an error message string instead. If you do
+ * this, you'll get a default function that unconditionally returns an object
+ * that includes the error message and the start and end indexes of the
+ * portion of the content string that matched the pattern. If you don't pass a
+ * function in the fifth parameter, the rule will be applied in any context.
+ *
+ * One of the design goals of this Rule class is to allow simple lint rules to
+ * be described in JSON files without any JavaScript code. So in addition to
+ * the Rule() constructor, the class also defines a Rule.makeRule() factory
+ * method. This method takes a single object as its argument and expects the
+ * object to have four string properties. The `name` property is passed as the
+ * first argument to the Rule() construtctor.  The optional `selector`
+ * property, if specified, is passed to Selector.parse() and the resulting
+ * Selector object is used as the second argument to Rule().  The optional
+ * `pattern` property is converted to a RegExp before being passed as the
+ * third argument to Rule(). (See Rule.makePattern() for details on the string
+ * to RegExp conversion). Finally, the `message` property specifies an error
+ * message that is passed as the final argument to Rule(). You can also use a
+ * real RegExp as the value of the `pattern` property or define a custom lint
+ * function on the `lint` property instead of setting the `message`
+ * property. Doing either of these things means that your rule description can
+ * no longer be saved in a JSON file, however.
+ *
+ * For example, here are two lint rules defined with Rule.makeRule():
+ *
+ *    let nestedLists = Rule.makeRule({
+ *        name: "nested-lists",
+ *        selector: "list list",
+ *        message: `Nested lists:
+ *    nested lists are hard to read on mobile devices;
+ *    do not use additional indentation.`,
+ *    });
+ *
+ *    let longParagraph = Rule.makeRule({
+ *        name: "long-paragraph",
+ *        selector: "paragraph",
+ *        pattern: /^.{501,}/,
+ *        lint: function(state, content, nodes, match) {
+ *            return `Paragraph too long:
+ *    This paragraph is ${content.length} characters long.
+ *    Shorten it to 500 characters or fewer.`;
+ *        },
+ *    });
+ *
+ * Certain advanced lint rules need additional information about the content
+ * being linted in order to detect lint. For example, a rule to check for
+ * whitespace at the start and end of the URL for an image can't use the
+ * information in the node or content arguments because the markdown parser
+ * strips leading and trailing whitespace when parsing. (Nevertheless, these
+ * spaces have been a practical problem for our content translation process so
+ * in order to check for them, a lint rule needs access to the original
+ * unparsed source text. Similarly, there are various lint rules that check
+ * widget usage. For example, it is easy to write a lint rule to ensure that
+ * images have alt text for images encoded in markdown. But when images are
+ * added to our content via an image widget we also want to be able to check
+ * for alt text. In order to do this, the lint rule needs to be able to look
+ * widgets up by name in the widgets object associated with the parse tree.
+ *
+ * In order to support advanced linting rules like these, the check() method
+ * takes a context object as its optional fourth argument, and passes this
+ * object on to the lint function of each rule. Rules that require extra
+ * context should not assume that they will always get it, and should verify
+ * that the necessary context has been supplied before using it. Currently the
+ * "content" property of the context object is the unparsed source text if
+ * available, and the "widgets" property of the context object is the widget
+ * object associated with that content string in the JSON object that defines
+ * the Perseus article or exercise that is being linted.
+ */
+
+
+// This represents the type returned by String.match(). It is an
+// array of strings, but also has index:number and input:string properties.
+// TypeScript doesn't handle it well, so we punt and just use any.
+
+// This is the return type of the check() method of a Rule object
+
+// This is the return type of the lint detection function passed as the 4th
+// argument to the Rule() constructor. It can return null or a string or an
+// object containing a string and two numbers.
+// prettier-ignore
+// (prettier formats this in a way that ka-lint does not like)
+
+// This is the type of the lint detection function that the Rule() constructor
+// expects as its fourth argument. It is passed the TraversalState object and
+// content string that were passed to check(), and is also passed the array of
+// nodes returned by the selector match and the array of strings returned by
+// the pattern match. It should return null if no lint is detected or an
+// error message or an object contining an error message.
+
+// An optional check to verify whether or not a particular rule should
+// be checked by context. For example, some rules only apply in exercises,
+// and should never be applied to articles. Defaults to true, so if we
+// omit the applies function in a rule, it'll be tested everywhere.
+
+/**
+ * A Rule object describes a Perseus lint rule. See the comment at the top of
+ * this file for detailed description.
+ */
 class Rule {
+  name; // The name of the rule
+  severity; // The severity of the rule
+  selector; // The specified selector or the DEFAULT_SELECTOR
+  pattern; // A regular expression if one was specified
+  lint; // The lint-testing function or a default
+  applies; // Checks to see if we should apply a rule or not
+  message; // The error message for use with the default function
+  static DEFAULT_SELECTOR;
+
+  // The comment at the top of this file has detailed docs for
+  // this constructor and its arguments
   constructor(name, severity, selector, pattern, lint, applies) {
-    this.name = void 0;
-    this.severity = void 0;
-    this.selector = void 0;
-    this.pattern = void 0;
-    this.lint = void 0;
-    this.applies = void 0;
-    this.message = void 0;
+    var _this = this;
     if (!selector && !pattern) {
-      throw new PerseusError("Lint rules must have a selector or pattern", Errors.InvalidInput, {
+      throw new perseusCore.PerseusError("Lint rules must have a selector or pattern", perseusCore.Errors.InvalidInput, {
         metadata: {
           name
         }
@@ -269,40 +664,69 @@ class Rule {
     this.severity = severity || Rule.Severity.BULK_WARNING;
     this.selector = selector || Rule.DEFAULT_SELECTOR;
     this.pattern = pattern || null;
+
+    // If we're called with an error message instead of a function then
+    // use a default function that will return the message.
     if (typeof lint === "function") {
       this.lint = lint;
       this.message = null;
     } else {
-      this.lint = (...args) => this._defaultLintFunction(...args);
+      this.lint = function () {
+        return _this._defaultLintFunction(...arguments);
+      };
       this.message = lint;
     }
     this.applies = applies || function () {
       return true;
     };
   }
+
+  // A factory method for use with rules described in JSON files
+  // See the documentation at the start of this file for details.
   static makeRule(options) {
     return new Rule(options.name, options.severity, options.selector ? Selector.parse(options.selector) : null, Rule.makePattern(options.pattern), options.lint || options.message, options.applies);
   }
+
+  // Check the node n to see if it violates this lint rule.  A return value
+  // of false means there is no lint.  A returned object indicates a lint
+  // error. See the documentation at the top of this file for details.
   check(node, traversalState, content, context) {
+    // First, see if we match the selector.
+    // If no selector was passed to the constructor, we use a
+    // default selector that matches text nodes.
     const selectorMatch = this.selector.match(traversalState);
+
+    // If the selector did not match, then we're done
     if (!selectorMatch) {
       return null;
     }
+
+    // If the selector matched, then see if the pattern matches
     let patternMatch;
     if (this.pattern) {
       patternMatch = content.match(this.pattern);
     } else {
+      // If there is no pattern, then just match all of the content.
+      // Use a fake RegExp match object to represent this default match.
       patternMatch = Rule.FakePatternMatch(content, content, 0);
     }
+
+    // If there was a pattern and it didn't match, then we're done
     if (!patternMatch) {
       return null;
     }
     try {
+      // If we get here, then the selector and pattern have matched
+      // so now we call the lint function to see if there is lint.
       const error = this.lint(traversalState, content, selectorMatch, patternMatch, context);
+
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       if (!error) {
-        return null;
+        return null; // No lint; we're done
       }
       if (typeof error === "string") {
+        // If the lint function returned a string we assume it
+        // applies to the entire content of the node and return it.
         return {
           rule: this.name,
           severity: this.severity,
@@ -311,6 +735,8 @@ class Rule {
           end: content.length
         };
       }
+      // If the lint function returned an object, then we just
+      // add the rule name to the message, start and end.
       return {
         rule: this.name,
         severity: this.severity,
@@ -319,6 +745,11 @@ class Rule {
         end: error.end
       };
     } catch (e) {
+      // If the lint function threw an exception we handle that as
+      // a special type of lint. We want the user to see the lint
+      // warning in this case (even though it is out of their control)
+      // so that the bug gets reported. Otherwise we'd never know that
+      // a rule was failing.
       return {
         rule: "lint-rule-failure",
         message: `Exception in rule ${this.name}: ${e.message}
@@ -329,6 +760,14 @@ ${e.stack}`,
       };
     }
   }
+
+  // This internal method is the default lint function that we use when a
+  // rule is defined without a function. This is useful for rules where the
+  // selector and/or pattern match are enough to indicate lint. This
+  // function unconditionally returns the error message that was passed in
+  // place of a function, but also adds start and end properties that
+  // specify which particular portion of the node content matched the
+  // pattern.
   _defaultLintFunction(state, content, selectorMatch, patternMatch, context) {
     return {
       message: this.message || "",
@@ -336,7 +775,24 @@ ${e.stack}`,
       end: patternMatch.index + patternMatch[0].length
     };
   }
+
+  // The makeRule() factory function uses this static method to turn its
+  // argument into a RegExp. If the argument is already a RegExp, we just
+  // return it. Otherwise, we compile it into a RegExp and return that.
+  // The reason this is necessary is that Rule.makeRule() is designed for
+  // use with data from JSON files and JSON files can't include RegExp
+  // literals. Strings passed to this function do not need to be delimited
+  // with / characters unless you want to include flags for the RegExp.
+  //
+  // Examples:
+  //
+  //   input ""        ==> output null
+  //   input /foo/     ==> output /foo/
+  //   input "foo"     ==> output /foo/
+  //   input "/foo/i"  ==> output /foo/i
+  //
   static makePattern(pattern) {
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!pattern) {
       return null;
     }
@@ -347,27 +803,40 @@ ${e.stack}`,
       const lastSlash = pattern.lastIndexOf("/");
       const expression = pattern.substring(1, lastSlash);
       const flags = pattern.substring(lastSlash + 1);
+      // @ts-expect-error - TS2713 - Cannot access 'RegExp.flags' because 'RegExp' is a type, but not a namespace. Did you mean to retrieve the type of the property 'flags' in 'RegExp' with 'RegExp["flags"]'?
       return new RegExp(expression, flags);
     }
     return new RegExp(pattern);
   }
+
+  // This static method returns an string array with index and input
+  // properties added, in order to simulate the return value of the
+  // String.match() method. We use it when a Rule has no pattern and we
+  // want to simulate a match on the entire content string.
   static FakePatternMatch(input, match, index) {
     const result = [match];
     result.index = index;
     result.input = input;
     return result;
   }
+  static Severity = {
+    ERROR: 1,
+    WARNING: 2,
+    GUIDELINE: 3,
+    BULK_WARNING: 4
+  };
 }
-Rule.DEFAULT_SELECTOR = void 0;
-Rule.Severity = {
-  ERROR: 1,
-  WARNING: 2,
-  GUIDELINE: 3,
-  BULK_WARNING: 4
-};
 Rule.DEFAULT_SELECTOR = Selector.parse("text");
 
+/* eslint-disable no-useless-escape */
+// Return the portion of a URL between // and /. This is the authority
+// portion which is usually just the hostname, but may also include
+// a username, password or port. We don't strip those things out because
+// we typically want to reject any URL that includes them
 const HOSTNAME = /\/\/([^\/]+)/;
+
+// Return the hostname of the URL, with any "www." prefix removed.
+// If this is a relative URL with no hostname, return an empty string.
 function getHostname(url) {
   if (!url) {
     return "";
@@ -408,6 +877,7 @@ var BlockquotedWidget = Rule.makeRule({
 widgets should not be indented.`
 });
 
+/* eslint-disable no-useless-escape */
 var DoubleSpacingAfterTerminal = Rule.makeRule({
   name: "double-spacing-after-terminal",
   severity: Rule.Severity.BULK_WARNING,
@@ -428,12 +898,19 @@ const stringToButtonSet = {
   "\\log": "logarithms",
   "\\ln": "logarithms"
 };
+
+/**
+ * Rule to make sure that Expression questions that require
+ * a specific math symbol to answer have that math symbol
+ * available in the keypad (desktop learners can use a keyboard,
+ * but mobile learners must use the MathInput keypad)
+ */
 var ExpressionWidget = Rule.makeRule({
   name: "expression-widget",
   severity: Rule.Severity.WARNING,
   selector: "widget",
   lint: function (state, content, nodes, match, context) {
-    var _context$widgets;
+    // This rule only looks at image widgets
     if (state.currentNode().widgetType !== "expression") {
       return;
     }
@@ -441,7 +918,9 @@ var ExpressionWidget = Rule.makeRule({
     if (!nodeId) {
       return;
     }
-    const widget = context == null || (_context$widgets = context.widgets) == null ? void 0 : _context$widgets[nodeId];
+
+    // If it can't find a definition for the widget it does nothing
+    const widget = context?.widgets?.[nodeId];
     if (!widget) {
       return;
     }
@@ -462,7 +941,7 @@ var ExtraContentSpacing = Rule.makeRule({
   selector: "paragraph",
   pattern: /\s+$/,
   applies: function (context) {
-    return (context == null ? void 0 : context.contentType) === "article";
+    return context?.contentType === "article";
   },
   message: `No extra whitespace at the end of content blocks.`
 });
@@ -486,6 +965,9 @@ var HeadingLevelSkip = Rule.makeRule({
   lint: function (state, content, nodes, match) {
     const currentHeading = nodes[1];
     const previousHeading = nodes[0];
+    // A heading can have a level less than, the same as
+    // or one more than the previous heading. But going up
+    // by 2 or more levels is not right
     if (currentHeading.level > previousHeading.level + 1) {
       return `Skipped heading level:
 this heading is level ${currentHeading.level} but
@@ -499,10 +981,14 @@ var HeadingSentenceCase = Rule.makeRule({
   severity: Rule.Severity.GUIDELINE,
   selector: "heading",
   pattern: /^\W*[a-z]/,
+  // first letter is lowercase
   message: `First letter is lowercase:
 the first letter of a heading should be capitalized.`
 });
 
+// These are 3-letter and longer words that we would not expect to be
+// capitalized even in a title-case heading.  See
+// http://blog.apastyle.org/apastyle/2012/03/title-case-and-sentence-case-capitalization-in-apa-style.html
 const littleWords = {
   and: true,
   nor: true,
@@ -521,10 +1007,41 @@ var HeadingTitleCase = Rule.makeRule({
   pattern: /[^\s:]\s+[A-Z]+[a-z]/,
   locale: "en",
   lint: function (state, content, nodes, match) {
+    // We want to assert that heading text is in sentence case, not
+    // title case. The pattern above requires a capital letter at the
+    // start of the heading and allows them after a colon, or in
+    // acronyms that are all capitalized.
+    //
+    // But we can't warn just because the pattern matched because
+    // proper nouns are also allowed bo be capitalized. We're not
+    // going to do dictionary lookup to check for proper nouns, so
+    // we try a heuristic: if the title is more than 3 words long
+    // and if all the words are capitalized or are on the list of
+    // words that don't get capitalized, then we'll assume that
+    // the heading is incorrectly in title case and will warn.
+    // But if there is at least one non-capitalized long word then
+    // we're not in title case and we should not warn.
+    //
+    // TODO(davidflanagan): if this rule causes a lot of false
+    // positives, we should tweak it or remove it. Note that it will
+    // fail for headings like "World War II in Russia"
+    //
+    // TODO(davidflanagan): This rule is specific to English.
+    // It is marked with a locale property above, but that is NYI
+    //
+    // for APA style rules for title case
+
     const heading = content.trim();
     let words = heading.split(/\s+/);
+
+    // Remove the first word and the little words
     words.shift();
-    words = words.filter(w => w.length > 2 && !littleWords.hasOwnProperty(w));
+    words = words.filter(
+    // eslint-disable-next-line no-prototype-builtins
+    w => w.length > 2 && !littleWords.hasOwnProperty(w));
+
+    // If there are at least 3 remaining words and all
+    // are capitalized, then the heading is in title case.
     if (words.length >= 3 && words.every(w => isCapitalized(w))) {
       return `Title-case heading:
 This heading appears to be in title-case, but should be sentence-case.
@@ -567,9 +1084,17 @@ var ImageSpacesAroundUrls = Rule.makeRule({
   lint: function (state, content, nodes, match, context) {
     const image = nodes[0];
     const url = image.target;
+
+    // The markdown parser strips leading and trailing spaces for us,
+    // but they're still a problem for our translation process, so
+    // we need to go check for them in the unparsed source string
+    // if we have it.
     if (context && context.content) {
+      // Find the url in the original content and make sure that the
+      // character before is '(' and the character after is ')'
       const index = context.content.indexOf(url);
       if (index === -1) {
+        // It is not an error if we didn't find it.
         return;
       }
       if (context.content[index - 1] !== "(" || context.content[index + url.length] !== ")") {
@@ -588,17 +1113,33 @@ var ImageUrlEmpty = Rule.makeRule({
   lint: function (state, content, nodes) {
     const image = nodes[0];
     const url = image.target;
+
+    // If no URL is provided, an infinite spinner will be shown in articles
+    // overlaying the page where the image should be. This prevents the page
+    // from fully loading. As a result, we check for URLS with all images.
     if (!url || !url.trim()) {
       return "Images should have a URL";
     }
+
+    // NOTE(TB): Ideally there would be a check to confirm the URL works
+    // and leads to a valid resource, but fetching the URL would require
+    // linting to be able to handle async functions, which it currently
+    // cannot do.
   }
 });
 
+// Normally we have one rule per file. But since our selector class
+// can't match specific widget types directly, this rule implements
+// a number of image widget related rules in one place. This should
+// slightly increase efficiency, but it means that if there is more
+// than one problem with an image widget, the user will only see one
+// problem at a time.
 var ImageWidget = Rule.makeRule({
   name: "image-widget",
   severity: Rule.Severity.WARNING,
   selector: "widget",
   lint: function (state, content, nodes, match, context) {
+    // This rule only looks at image widgets
     if (state.currentNode().widgetType !== "image") {
       return;
     }
@@ -606,21 +1147,30 @@ var ImageWidget = Rule.makeRule({
     if (!nodeId) {
       return;
     }
+
+    // If it can't find a definition for the widget it does nothing
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     const widget = context && context.widgets && context.widgets[nodeId];
     if (!widget) {
       return;
     }
+
+    // Make sure there is alt text
     const alt = widget.options.alt;
     if (!alt) {
       return `Images should have alt text:
 for accessibility, all images should have a text description.
 Add a description in the "Alt Text" box of the image widget.`;
     }
+
+    // Make sure the alt text it is not trivial
     if (alt.trim().length < 8) {
       return `Images should have alt text:
 for accessibility, all images should have descriptive alt text.
 This image's alt text is only ${alt.trim().length} characters long.`;
     }
+
+    // Make sure there is no math in the caption
     if (widget.options.caption && widget.options.caption.match(/[^\\]\$/)) {
       return `No math in image captions:
 Don't include math expressions in image captions.`;
@@ -670,19 +1220,38 @@ var MathAlignLinebreaks = Rule.makeRule({
   name: "math-align-linebreaks",
   severity: Rule.Severity.WARNING,
   selector: "blockMath",
+  // Match any align block with double backslashes in it
+  // Use [\s\S]* instead of .* so we match newlines as well.
   pattern: /\\begin{align}[\s\S]*\\\\[\s\S]+\\end{align}/,
+  // Look for double backslashes and ensure that they are
+  // followed by optional space and another pair of backslashes.
+  // Note that this rule can't know where line breaks belong so
+  // it can't tell whether backslashes are completely missing. It just
+  // enforces that you don't have the wrong number of pairs of backslashes.
   lint: function (state, content, nodes, match) {
     let text = match[0];
     while (text.length) {
       const index = text.indexOf("\\\\");
       if (index === -1) {
+        // No more backslash pairs, so we found no lint
         return;
       }
       text = text.substring(index + 2);
+
+      // Now we expect to find optional spaces, another pair of
+      // backslashes, and more optional spaces not followed immediately
+      // by another pair of backslashes.
       const nextpair = text.match(/^\s*\\\\\s*(?!\\\\)/);
+
+      // If that does not match then we either have too few or too
+      // many pairs of backslashes.
       if (!nextpair) {
         return "Use four backslashes between lines of an align block";
       }
+
+      // If it did match, then, shorten the string and continue looping
+      // (because a single align block may have multiple lines that
+      // all must be separated by two sets of double backslashes).
       text = text.substring(nextpair[0].length);
     }
   }
@@ -731,6 +1300,10 @@ var MathTextEmpty = Rule.makeRule({
   message: "Empty \\text{} block in math expression"
 });
 
+// Because no selector is specified, this rule only applies to text nodes.
+// Math and code hold their content directly and do not have text nodes
+// beneath them (unlike the HTML DOM) so this rule automatically does not
+// apply inside $$ or ``.
 var MathWithoutDollars = Rule.makeRule({
   name: "math-without-dollars",
   severity: Rule.Severity.GUIDELINE,
@@ -753,8 +1326,7 @@ var StaticWidgetInQuestionStem = Rule.makeRule({
   severity: Rule.Severity.WARNING,
   selector: "widget",
   lint: (state, content, nodes, match, context) => {
-    var _context$widgets;
-    if ((context == null ? void 0 : context.contentType) !== "exercise") {
+    if (context?.contentType !== "exercise") {
       return;
     }
     if (context.stack.includes("hint")) {
@@ -764,7 +1336,7 @@ var StaticWidgetInQuestionStem = Rule.makeRule({
     if (!nodeId) {
       return;
     }
-    const widget = context == null || (_context$widgets = context.widgets) == null ? void 0 : _context$widgets[nodeId];
+    const widget = context?.widgets?.[nodeId];
     if (!widget) {
       return;
     }
@@ -792,6 +1364,10 @@ Row ${r + 1} has ${rowLengths[r]} cells.`;
   }
 });
 
+// Because no selector is specified, this rule only applies to text nodes.
+// Math and code hold their content directly and do not have text nodes
+// beneath them (unlike the HTML DOM) so this rule automatically does not
+// apply inside $$ or ``.
 var UnbalancedCodeDelimiters = Rule.makeRule({
   name: "unbalanced-code-delimiters",
   severity: Rule.Severity.ERROR,
@@ -816,36 +1392,163 @@ var WidgetInTable = Rule.makeRule({
 do not put widgets inside of tables.`
 });
 
+// TODO(davidflanagan):
+// This should probably be converted to use import and to export
+// and object that maps rule names to rules. Also, maybe this should
+// be an auto-generated file with a script that updates it any time
+// we add a new rule?
+
 var AllRules = [AbsoluteUrl, BlockquotedMath, BlockquotedWidget, DoubleSpacingAfterTerminal, ImageUrlEmpty, ExpressionWidget, ExtraContentSpacing, HeadingLevel1, HeadingLevelSkip, HeadingSentenceCase, HeadingTitleCase, ImageAltText, ImageInTable, LinkClickHere, LongParagraph, MathAdjacent, MathAlignExtraBreak, MathAlignLinebreaks, MathEmpty, MathFrac, MathNested, MathStartsWithSpace, MathTextEmpty, NestedLists, StaticWidgetInQuestionStem, TableMissingCells, UnescapedDollar, WidgetInTable, MathWithoutDollars, UnbalancedCodeDelimiters, ImageSpacesAroundUrls, ImageWidget];
 
+/**
+ * TreeTransformer is a class for traversing and transforming trees.  Create a
+ * TreeTransformer by passing the root node of the tree to the
+ * constructor. Then traverse that tree by calling the traverse() method. The
+ * argument to traverse() is a callback function that will be called once for
+ * each node in the tree. This is a post-order depth-first traversal: the
+ * callback is not called on the a way down, but on the way back up. That is,
+ * the children of a node are traversed before the node itself is.
+ *
+ * The traversal callback function is passed three arguments, the node being
+ * traversed, a TraversalState object, and the concatentated text content of
+ * the node and all of its descendants. The TraversalState object is the most
+ * most interesting argument: it has methods for querying the ancestors and
+ * siblings of the node, and for deleting or replacing the node. These
+ * transformation methods are why this class is a tree transformer and not
+ * just a tree traverser.
+ *
+ * A typical tree traversal looks like this:
+ *
+ *   new TreeTransformer(root).traverse((node, state, content) => {
+ *       let parent = state.parent();
+ *       let previous = state.previousSibling();
+ *       // etc.
+ *   });
+ *
+ * The traverse() method descends through nodes and arrays of nodes and calls
+ * the traverse callback on each node on the way back up to the root of the
+ * tree. (Note that it only calls the callback on the nodes themselves, not
+ * any arrays that contain nodes.) A node is loosely defined as any object
+ * with a string-valued `type` property. Objects that do not have a type
+ * property are assumed to not be part of the tree and are not traversed. When
+ * traversing an array, all elements of the array are examined, and any that
+ * are nodes or arrays are recursively traversed. When traversing a node, all
+ * properties of the object are examined and any node or array values are
+ * recursively traversed.  In typical parse trees, the children of a node are
+ * in a `children` or `content` array, but this class is designed to handle
+ * more general trees.  The Perseus markdown parser, for example, produces
+ * nodes of type "table" that have children in the `header` and `cells`
+ * properties.
+ *
+ * CAUTION: the traverse() method does not make any attempt to detect
+ * cycles. If you call it on a cyclic graph instead of a tree, it will cause
+ * infinite recursion (or, more likely, a stack overflow).
+ *
+ * TODO(davidflanagan): it probably wouldn't be hard to detect cycles: when
+ * pushing a new node onto the containers stack we could just check that it
+ * isn't already there.
+ *
+ * If a node has a text-valued `content` property, it is taken to be the
+ * plain-text content of the node. The traverse() method concatenates these
+ * content strings and passes them to the traversal callback for each
+ * node. This means that the callback has access the full text content of its
+ * node and all of the nodes descendants.
+ *
+ * See the TraversalState class for more information on what information and
+ * methods are available to the traversal callback.
+ **/
+
+
+// TreeNode is the type of a node in a parse tree. The only real requirement is
+// that every node has a string-valued `type` property
+
+// TraversalCallback is the type of the callback function passed to the
+// traverse() method. It is invoked with node, state, and content arguments
+// and is expected to return nothing.
+
+// This is the TreeTransformer class described in detail at the
+// top of this file.
 class TreeTransformer {
+  root;
+
+  // To create a tree transformer, just pass the root node of the tree
   constructor(root) {
-    this.root = void 0;
     this.root = root;
   }
+
+  // A utility function for determing whether an arbitrary value is a node
   static isNode(n) {
     return n && typeof n === "object" && typeof n.type === "string";
   }
+
+  // Determines whether a value is a node with type "text" and has
+  // a text-valued `content` property.
   static isTextNode(n) {
     return TreeTransformer.isNode(n) && n.type === "text" && typeof n.content === "string";
   }
+
+  // This is the main entry point for the traverse() method. See the comment
+  // at the top of this file for a detailed description. Note that this
+  // method just creates a new TraversalState object to use for this
+  // traversal and then invokes the internal _traverse() method to begin the
+  // recursion.
   traverse(f) {
     this._traverse(this.root, new TraversalState(this.root), f);
   }
+
+  // Do a post-order traversal of node and its descendants, invoking the
+  // callback function f() once for each node and returning the concatenated
+  // text content of the node and its descendants. f() is passed three
+  // arguments: the current node, a TraversalState object representing the
+  // current state of the traversal, and a string that holds the
+  // concatenated text of the node and its descendants.
+  //
+  // This private method holds all the traversal logic and implementation
+  // details. Note that this method uses the TraversalState object to store
+  // information about the structure of the tree.
   _traverse(n, state, f) {
     let content = "";
     if (TreeTransformer.isNode(n)) {
-      const node = n;
+      // If we were called on a node object, then we handle it
+      // this way.
+      const node = n; // safe cast; we just tested
+
+      // Put the node on the stack before recursing on its children
       state._containers.push(node);
       state._ancestors.push(node);
+
+      // Record the node's text content if it has any.
+      // Usually this is for nodes with a type property of "text",
+      // but other nodes types like "math" may also have content.
+      // @ts-expect-error - TS2339 - Property 'content' does not exist on type 'TreeNode'.
       if (typeof node.content === "string") {
+        // @ts-expect-error - TS2339 - Property 'content' does not exist on type 'TreeNode'.
         content = node.content;
       }
+
+      // Recurse on the node. If there was content above, then there
+      // probably won't be any children to recurse on, but we check
+      // anyway.
+      //
+      // If we wanted to make the traversal completely specific to the
+      // actual Perseus parse trees that we'll be dealing with we could
+      // put a switch statement here to dispatch on the node type
+      // property with specific recursion steps for each known type of
+      // node.
       const keys = Object.keys(node);
       keys.forEach(key => {
+        // Never recurse on the type property
         if (key === "type") {
           return;
         }
+        // Ignore properties that are null or primitive and only
+        // recurse on objects and arrays. Note that we don't do a
+        // isNode() check here. That is done in the recursive call to
+        // _traverse(). Note that the recursive call on each child
+        // returns the text content of the child and we add that
+        // content to the content for this node. Also note that we
+        // push the name of the property we're recursing over onto a
+        // TraversalState stack.
         const value = node[key];
         if (value && typeof value === "object") {
           state._indexes.push(key);
@@ -853,70 +1556,189 @@ class TreeTransformer {
           state._indexes.pop();
         }
       });
+
+      // Restore the stacks after recursing on the children
       state._currentNode = state._ancestors.pop();
       state._containers.pop();
+
+      // And finally call the traversal callback for this node.  Note
+      // that this is post-order traversal. We call the callback on the
+      // way back up the tree, not on the way down.  That way we already
+      // know all the content contained within the node.
       f(node, state, content);
     } else if (Array.isArray(n)) {
+      // If we were called on an array instead of a node, then
+      // this is the code we use to recurse.
       const nodes = n;
+
+      // Push the array onto the stack. This will allow the
+      // TraversalState object to locate siblings of this node.
       state._containers.push(nodes);
+
+      // Now loop through this array and recurse on each element in it.
+      // Before recursing on an element, we push its array index on a
+      // TraversalState stack so that the TraversalState sibling methods
+      // can work. Note that TraversalState methods can alter the length
+      // of the array, and change the index of the current node, so we
+      // are careful here to test the array length on each iteration and
+      // to reset the index when we pop the stack. Also note that we
+      // concatentate the text content of the children.
       let index = 0;
       while (index < nodes.length) {
         state._indexes.push(index);
         content += this._traverse(nodes[index], state, f);
+        // Casting to convince TypeScript that this is a number
         index = state._indexes.pop() + 1;
       }
+
+      // Pop the array off the stack. Note, however, that we do not call
+      // the traversal callback on the array. That function is only
+      // called for nodes, not arrays of nodes.
       state._containers.pop();
     }
+
+    // The _traverse() method always returns the text content of
+    // this node and its children. This is the one piece of state that
+    // is not tracked in the TraversalState object.
     return content;
   }
 }
+
+// An instance of this class is passed to the callback function for
+// each node traversed. The class itself is not exported, but its
+// methods define the API available to the traversal callback.
+
+/**
+ * This class represents the state of a tree traversal. An instance is created
+ * by the traverse() method of the TreeTransformer class to maintain the state
+ * for that traversal, and the instance is passed to the traversal callback
+ * function for each node that is traversed. This class is not intended to be
+ * instantiated directly, but is exported so that its type can be used for
+ * type annotaions.
+ **/
 class TraversalState {
+  // The root node of the tree being traversed
+  root;
+
+  // These are internal state properties. Use the accessor methods defined
+  // below instead of using these properties directly. Note that the
+  // _containers and _indexes stacks can have two different types of
+  // elements, depending on whether we just recursed on an array or on a
+  // node. This is hard for TypeScript to deal with, so you'll see a number of
+  // type casts through the any type when working with these two properties.
+  _currentNode;
+  _containers;
+  _indexes;
+  _ancestors;
+
+  // The constructor just stores the root node and creates empty stacks.
   constructor(root) {
-    this.root = void 0;
-    this._currentNode = void 0;
-    this._containers = void 0;
-    this._indexes = void 0;
-    this._ancestors = void 0;
     this.root = root;
+
+    // When the callback is called, this property will hold the
+    // node that is currently being traversed.
     this._currentNode = null;
+
+    // This is a stack of the objects and arrays that we've
+    // traversed through before reaching the currentNode.
+    // It is different than the ancestors array.
     this._containers = new Stack();
+
+    // This stack has the same number of elements as the _containers
+    // stack. The last element of this._indexes[] is the index of
+    // the current node in the object or array that is the last element
+    // of this._containers[]. If the last element of this._containers[] is
+    // an array, then the last element of this stack will be a number.
+    // Otherwise if the last container is an object, then the last index
+    // will be a string property name.
     this._indexes = new Stack();
+
+    // This is a stack of the ancestor nodes of the current one.
+    // It is different than the containers[] stack because it only
+    // includes nodes, not arrays.
     this._ancestors = new Stack();
   }
+
+  /**
+   * Return the current node in the traversal. Any time the traversal
+   * callback is called, this method will return the name value as the
+   * first argument to the callback.
+   */
   currentNode() {
     return this._currentNode || this.root;
   }
+
+  /**
+   * Return the parent of the current node, if there is one, or null.
+   */
   parent() {
     return this._ancestors.top();
   }
+
+  /**
+   * Return an array of ancestor nodes. The first element of this array is
+   * the same as this.parent() and the last element is the root node. If we
+   * are currently at the root node, the the returned array will be empty.
+   * This method makes a copy of the internal state, so modifications to the
+   * returned array have no effect on the traversal.
+   */
   ancestors() {
     return this._ancestors.values();
   }
+
+  /**
+   * Return the next sibling of this node, if it has one, or null otherwise.
+   */
   nextSibling() {
     const siblings = this._containers.top();
+
+    // If we're at the root of the tree or if the parent is an
+    // object instead of an array, then there are no siblings.
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!siblings || !Array.isArray(siblings)) {
       return null;
     }
+
+    // The top index is a number because the top container is an array
     const index = this._indexes.top();
     if (siblings.length > index + 1) {
       return siblings[index + 1];
     }
-    return null;
+    return null; // There is no next sibling
   }
+
+  /**
+   * Return the previous sibling of this node, if it has one, or null
+   * otherwise.
+   */
   previousSibling() {
     const siblings = this._containers.top();
+
+    // If we're at the root of the tree or if the parent is an
+    // object instead of an array, then there are no siblings.
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!siblings || !Array.isArray(siblings)) {
       return null;
     }
+
+    // The top index is a number because the top container is an array
     const index = this._indexes.top();
     if (index > 0) {
       return siblings[index - 1];
     }
-    return null;
+    return null; // There is no previous sibling
   }
+
+  /**
+   * Remove the next sibling node (if there is one) from the tree.  Returns
+   * the removed sibling or null. This method makes it easy to traverse a
+   * tree and concatenate adjacent text nodes into a single node.
+   */
   removeNextSibling() {
     const siblings = this._containers.top();
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (siblings && Array.isArray(siblings)) {
+      // top index is a number because top container is an array
       const index = this._indexes.top();
       if (siblings.length > index + 1) {
         return siblings.splice(index + 1, 1)[0];
@@ -924,51 +1746,126 @@ class TraversalState {
     }
     return null;
   }
-  replace(...replacements) {
+
+  /**
+   * Replace the current node in the tree with the specified nodes.  If no
+   * nodes are passed, this is a node deletion. If one node (or array) is
+   * passed, this is a 1-for-1 replacement. If more than one node is passed
+   * then this is a combination of deletion and insertion.  The new node or
+   * nodes will not be traversed, so this method can safely be used to
+   * reparent the current node node beneath a new parent.
+   *
+   * This method throws an error if you attempt to replace the root node of
+   * the tree.
+   */
+  replace() {
     const parent = this._containers.top();
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!parent) {
-      throw new PerseusError("Can't replace the root of the tree", Errors.Internal);
+      throw new perseusCore.PerseusError("Can't replace the root of the tree", perseusCore.Errors.Internal);
+    }
+
+    // The top of the container stack is either an array or an object
+    // and the top of the indexes stack is a corresponding array index
+    // or object property. This is hard for TypeScript, so we have to do some
+    // unsafe casting and be careful when we use which cast version
+    for (var _len = arguments.length, replacements = new Array(_len), _key = 0; _key < _len; _key++) {
+      replacements[_key] = arguments[_key];
     }
     if (Array.isArray(parent)) {
       const index = this._indexes.top();
+      // For an array parent we just splice the new nodes in
       parent.splice(index, 1, ...replacements);
+      // Adjust the index to account for the changed array length.
+      // We don't want to traverse any of the newly inserted nodes.
       this._indexes.pop();
       this._indexes.push(index + replacements.length - 1);
     } else {
       const property = this._indexes.top();
+      // For an object parent we care how many new nodes there are
       if (replacements.length === 0) {
+        // Deletion
         delete parent[property];
       } else if (replacements.length === 1) {
+        // Replacement
         parent[property] = replacements[0];
       } else {
+        // Replace one node with an array of nodes
         parent[property] = replacements;
       }
     }
   }
+
+  /**
+   * Returns true if the current node has a previous sibling and false
+   * otherwise. If this method returns false, then previousSibling() will
+   * return null, and goToPreviousSibling() will throw an error.
+   */
   hasPreviousSibling() {
     return Array.isArray(this._containers.top()) && this._indexes.top() > 0;
   }
+
+  /**
+   * Modify this traversal state object to have the state it would have had
+   * when visiting the previous sibling. Note that you may want to use
+   * clone() to make a copy before modifying the state object like this.
+   * This mutator method is not typically used during ordinary tree
+   * traversals, but is used by the Selector class for matching multi-node
+   * selectors.
+   */
   goToPreviousSibling() {
     if (!this.hasPreviousSibling()) {
-      throw new PerseusError("goToPreviousSibling(): node has no previous sibling", Errors.Internal);
+      throw new perseusCore.PerseusError("goToPreviousSibling(): node has no previous sibling", perseusCore.Errors.Internal);
     }
     this._currentNode = this.previousSibling();
+    // Since we know that we have a previous sibling, we know that
+    // the value on top of the stack is a number, but we have to do
+    // this unsafe cast because TypeScript doesn't know that.
     const index = this._indexes.pop();
     this._indexes.push(index - 1);
   }
+
+  /**
+   * Returns true if the current node has an ancestor and false otherwise.
+   * If this method returns false, then the parent() method will return
+   * null and goToParent() will throw an error
+   */
   hasParent() {
     return this._ancestors.size() !== 0;
   }
+
+  /**
+   * Modify this object to look like it will look when we (later) visit the
+   * parent node of this node. You should not modify the instance passed to
+   * the tree traversal callback. Instead, make a copy with the clone()
+   * method and modify that.  This mutator method is not typically used
+   * during ordinary tree traversals, but is used by the Selector class for
+   * matching multi-node selectors that involve parent and ancestor
+   * selectors.
+   */
   goToParent() {
     if (!this.hasParent()) {
-      throw new PerseusError("goToParent(): node has no ancestor", Errors.NotAllowed);
+      throw new perseusCore.PerseusError("goToParent(): node has no ancestor", perseusCore.Errors.NotAllowed);
     }
     this._currentNode = this._ancestors.pop();
-    while (this._containers.size() && this._containers.top()[this._indexes.top()] !== this._currentNode) {
+
+    // We need to pop the containers and indexes stacks at least once
+    // and more as needed until we restore the invariant that
+    // this._containers.top()[this.indexes.top()] === this._currentNode
+    //
+    while (
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    this._containers.size() && this._containers.top()[this._indexes.top()] !== this._currentNode) {
       this._containers.pop();
       this._indexes.pop();
     }
   }
+
+  /**
+   * Return a new TraversalState object that is a copy of this one.
+   * This method is useful in conjunction with the mutating methods
+   * goToParent() and goToPreviousSibling().
+   */
   clone() {
     const clone = new TraversalState(this.root);
     clone._currentNode = this._currentNode;
@@ -977,37 +1874,73 @@ class TraversalState {
     clone._ancestors = this._ancestors.clone();
     return clone;
   }
+
+  /**
+   * Returns true if this TraversalState object is equal to that
+   * TraversalState object, or false otherwise. This method exists
+   * primarily for use by our unit tests.
+   */
   equals(that) {
     return this.root === that.root && this._currentNode === that._currentNode && this._containers.equals(that._containers) && this._indexes.equals(that._indexes) && this._ancestors.equals(that._ancestors);
   }
 }
+
+/**
+ * This class is an internal utility that just treats an array as a stack
+ * and gives us a top() method so we don't have to write expressions like
+ * `ancestors[ancestors.length-1]`. The values() method automatically
+ * copies the internal array so we don't have to worry about client code
+ * modifying our internal stacks. The use of this Stack abstraction makes
+ * the TraversalState class simpler in a number of places.
+ */
 class Stack {
+  stack;
   constructor(array) {
-    this.stack = void 0;
     this.stack = array ? array.slice(0) : [];
   }
+
+  /** Push a value onto the stack. */
   push(v) {
     this.stack.push(v);
   }
+
+  /** Pop a value off of the stack. */
   pop() {
+    // @ts-expect-error - TS2322 - Type 'T | undefined' is not assignable to type 'T'.
     return this.stack.pop();
   }
+
+  /** Return the top value of the stack without popping it. */
   top() {
     return this.stack[this.stack.length - 1];
   }
+
+  /** Return a copy of the stack as an array */
   values() {
     return this.stack.slice(0);
   }
+
+  /** Return the number of elements in the stack */
   size() {
     return this.stack.length;
   }
+
+  /** Return a string representation of the stack */
   toString() {
     return this.stack.toString();
   }
+
+  /** Return a shallow copy of the stack */
   clone() {
     return new Stack(this.stack);
   }
+
+  /**
+   * Compare this stack to another and return true if the contents of
+   * the two arrays are the same.
+   */
   equals(that) {
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!that || !that.stack || that.stack.length !== this.stack.length) {
       return false;
     }
@@ -1020,15 +1953,21 @@ class Stack {
   }
 }
 
+// This file is processed by a Rollup plugin (replace) to inject the production
+// version number during the release build.
+// In dev, you'll never see the version number.
+
 const libName = "@khanacademy/perseus-linter";
-const libVersion = "2.0.0";
-addLibraryVersionToPerseusDebug(libName, libVersion);
-
-const linterContextProps = PropTypes.shape({
-  contentType: PropTypes.string,
-  highlightLint: PropTypes.bool,
-  paths: PropTypes.arrayOf(PropTypes.string),
-  stack: PropTypes.arrayOf(PropTypes.string)
+const libVersion = "3.0.0";
+perseusUtils.addLibraryVersionToPerseusDebug(libName, libVersion);
+
+// Define the shape of the linter context object that is passed through the
+// tree with additional information about what we are checking.
+const linterContextProps = PropTypes__default.default.shape({
+  contentType: PropTypes__default.default.string,
+  highlightLint: PropTypes__default.default.bool,
+  paths: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
+  stack: PropTypes__default.default.arrayOf(PropTypes__default.default.string)
 });
 const linterContextDefault = {
   contentType: "",
@@ -1038,63 +1977,175 @@ const linterContextDefault = {
 };
 
 const allLintRules = AllRules.filter(r => r.severity < Rule.Severity.BULK_WARNING);
-function runLinter(tree, context, highlight, rules = allLintRules) {
+
+/**
+ * Run the Perseus linter over the specified markdown parse tree,
+ * with the specified context object, and
+ * return a (possibly empty) array of lint warning objects.  If the
+ * highlight argument is true, this function also modifies the parse
+ * tree to add "lint" nodes that can be visually rendered,
+ * highlighting the problems for the user. The optional rules argument
+ * is an array of Rule objects specifying which lint rules should be
+ * applied to this parse tree. When omitted, a default set of rules is used.
+ *
+ * The context object may have additional properties that some lint
+ * rules require:
+ *
+ *   context.content is the source content string that was parsed to create
+ *   the parse tree.
+ *
+ *   context.widgets is the widgets object associated
+ *   with the content string
+ *
+ * TODO: to make this even more general, allow the first argument to be
+ * a string and run the parser over it in that case? (but ignore highlight
+ * in that case). This would allow the one function to be used for both
+ * online linting and batch linting.
+ */
+function runLinter(tree, context, highlight) {
+  let rules = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : allLintRules;
   const warnings = [];
   const tt = new TreeTransformer(tree);
+
+  // The markdown parser often outputs adjacent text nodes. We
+  // coalesce them before linting for efficiency and accuracy.
   tt.traverse((node, state, content) => {
     if (TreeTransformer.isTextNode(node)) {
       let next = state.nextSibling();
       while (TreeTransformer.isTextNode(next)) {
+        // @ts-expect-error - TS2339 - Property 'content' does not exist on type 'TreeNode'. | TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'content' does not exist on type 'TreeNode'.
         node.content += next.content;
         state.removeNextSibling();
         next = state.nextSibling();
       }
     }
   });
+
+  // HTML tables are complicated, and the CSS we use in
+  // ../components/lint.jsx to display lint does not work to
+  // correctly position the lint indicators in the margin when the
+  // lint is inside a table. So as a workaround we keep track of all
+  // the lint that appears within a table and move it up to the
+  // table element itself.
+  //
+  // It is not ideal to have to do this here,
+  // but it is cleaner here than fixing up the lint during rendering
+  // in perseus-markdown.jsx. If our lint display was simpler and
+  // did not require indicators in the margin, this wouldn't be a
+  // problem. Or, if we modified the lint display stuff so that
+  // indicator positioning and tooltip display were both handled
+  // with JavaScript (instead of pure CSS), then we could avoid this
+  // issue too. But using JavaScript has its own downsides: there is
+  // risk that the linter JavaScript would interfere with
+  // widget-related Javascript.
   let tableWarnings = [];
   let insideTable = false;
+
+  // Traverse through the nodes of the parse tree. At each node, loop
+  // through the array of lint rules and check whether there is a
+  // lint violation at that node.
   tt.traverse((node, state, content) => {
     const nodeWarnings = [];
+
+    // If our rule is only designed to be tested against a particular
+    // content type and we're not in that content type, we don't need to
+    // consider that rule.
     const applicableRules = rules.filter(r => r.applies(context));
+
+    // Generate a stack so we can identify our position in the tree in
+    // lint rules
     const stack = [...context.stack];
     stack.push(node.type);
-    const nodeContext = _extends({}, context, {
+    const nodeContext = {
+      ...context,
       stack: stack.join(".")
-    });
+    };
     applicableRules.forEach(rule => {
       const warning = rule.check(node, state, content, nodeContext);
       if (warning) {
+        // The start and end locations are relative to this
+        // particular node, and so are not generally very useful.
+        // TODO: When the markdown parser saves the node
+        // locations in the source string then we can add
+        // these numbers to that one and get and absolute
+        // character range that will be useful
         if (warning.start || warning.end) {
           warning.target = content.substring(warning.start, warning.end);
         }
+
+        // Add the warning to the list of all lint we've found
         warnings.push(warning);
+
+        // If we're going to be highlighting lint, then we also
+        // need to keep track of warnings specific to this node.
         if (highlight) {
           nodeWarnings.push(warning);
         }
       }
     });
+
+    // If we're not highlighting lint in the tree, then we're done
+    // traversing this node.
     if (!highlight) {
       return;
     }
+
+    // If the node we are currently at is a table, and there was lint
+    // inside the table, then we want to add that lint here
     if (node.type === "table") {
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       if (tableWarnings.length) {
         nodeWarnings.push(...tableWarnings);
       }
+
+      // We're not in a table anymore, and don't have to remember
+      // the warnings for the table
       insideTable = false;
       tableWarnings = [];
     } else if (!insideTable) {
+      // Otherwise, if we are not already inside a table, check
+      // to see if we've entered one. Because this is a post-order
+      // traversal we'll see the table contents before the table itself.
+      // Note that once we're inside the table, we don't have to
+      // do this check each time... We can just wait until we ascend
+      // up to the table, then we'll know we're out of it.
       insideTable = state.ancestors().some(n => n.type === "table");
     }
+
+    // If we are inside a table and there were any warnings on
+    // this node, then we need to save the warnings for display
+    // on the table itself
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (insideTable && nodeWarnings.length) {
+      // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
       tableWarnings.push(...nodeWarnings);
     }
+
+    // If there were any warnings on this node, and if we're highlighting
+    // lint, then reparent the node so we can highlight it. Note that
+    // a single node can have multiple warnings. If this happends we
+    // concatenate the warnings and newline separate them. (The lint.jsx
+    // component that displays the warnings may want to convert the
+    // newlines into <br> tags.) We also provide a lint rule name
+    // so that lint.jsx can link to a document that provides more details
+    // on that particular lint rule. If there is more than one warning
+    // we only link to the first rule, however.
+    //
+    // Note that even if we're inside a table, we still reparent the
+    // linty node so that it can be highlighted. We just make a note
+    // of whether this lint is inside a table or not.
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (nodeWarnings.length) {
       nodeWarnings.sort((a, b) => {
         return a.severity - b.severity;
       });
       if (node.type !== "text" || nodeWarnings.length > 1) {
+        // If the linty node is not a text node, or if there is more
+        // than one warning on a text node, then reparent the entire
+        // node under a new lint node and put the warnings there.
         state.replace({
           type: "lint",
+          // @ts-expect-error - TS2345 - Argument of type '{ type: string; content: TreeNode; message: string; ruleName: any; blockHighlight: any; insideTable: boolean; severity: any; }' is not assignable to parameter of type 'TreeNode'.
           content: node,
           message: nodeWarnings.map(w => w.message).join("\n\n"),
           ruleName: nodeWarnings[0].rule,
@@ -1103,20 +2154,52 @@ function runLinter(tree, context, highlight, rules = allLintRules) {
           severity: nodeWarnings[0].severity
         });
       } else {
-        const _content = node.content;
-        const warning = nodeWarnings[0];
+        //
+        // Otherwise, it is a single warning on a text node, and we
+        // only want to highlight the actual linty part of that string
+        // of text. So we want to replace the text node with (in the
+        // general case) three nodes:
+        //
+        // 1) A new text node that holds the non-linty prefix
+        //
+        // 2) A lint node that is the parent of a new text node
+        // that holds the linty part
+        //
+        // 3) A new text node that holds the non-linty suffix
+        //
+        // If the lint begins and/or ends at the boundaries of the
+        // original text node, then nodes 1 and/or 3 won't exist, of
+        // course.
+        //
+        // Note that we could generalize this to work with multple
+        // warnings on a text node as long as the warnings are
+        // non-overlapping. Hopefully, though, multiple warnings in a
+        // single text node will be rare in practice. Also, we don't
+        // have a good way to display multiple lint indicators on a
+        // single line, so keeping them combined in that case might
+        // be the best thing, anyway.
+        //
+        // @ts-expect-error - TS2339 - Property 'content' does not exist on type 'TreeNode'.
+        const content = node.content; // Text nodes have content
+        const warning = nodeWarnings[0]; // There is only one warning.
+        // These are the lint boundaries within the content
         const start = warning.start || 0;
-        const end = warning.end || _content.length;
-        const prefix = _content.substring(0, start);
-        const lint = _content.substring(start, end);
-        const suffix = _content.substring(end);
-        const replacements = [];
+        const end = warning.end || content.length;
+        const prefix = content.substring(0, start);
+        const lint = content.substring(start, end);
+        const suffix = content.substring(end);
+        // TODO(FEI-5003): Give this a real type.
+        const replacements = []; // What we'll replace the node with
+
+        // The prefix text node, if there is one
         if (prefix) {
           replacements.push({
             type: "text",
             content: prefix
           });
         }
+
+        // The lint node wrapped around the linty text
         replacements.push({
           type: "lint",
           content: {
@@ -1128,12 +2211,17 @@ function runLinter(tree, context, highlight, rules = allLintRules) {
           insideTable: insideTable,
           severity: warning.severity
         });
+
+        // The suffix node, if there is one
         if (suffix) {
           replacements.push({
             type: "text",
             content: suffix
           });
         }
+
+        // Now replace the lint text node with the one to three
+        // nodes in the replacement array
         state.replace(...replacements);
       }
     }
@@ -1142,10 +2230,17 @@ function runLinter(tree, context, highlight, rules = allLintRules) {
 }
 function pushContextStack(context, name) {
   const stack = context.stack || [];
-  return _extends({}, context, {
+  return {
+    ...context,
     stack: stack.concat(name)
-  });
+  };
 }
 
-export { Rule, libVersion, linterContextDefault, linterContextProps, pushContextStack, allLintRules as rules, runLinter };
+exports.Rule = Rule;
+exports.libVersion = libVersion;
+exports.linterContextDefault = linterContextDefault;
+exports.linterContextProps = linterContextProps;
+exports.pushContextStack = pushContextStack;
+exports.rules = allLintRules;
+exports.runLinter = runLinter;
 //# sourceMappingURL=index.js.map