htmljs-parser 4.0.0 → 5.0.2

package/README.md

@@ -155,20 +155,29 @@ const parser = createParser({
     range.value; // Another range that includes only the value itself without the leading $ or surrounding braces (if applicable).
   },
 
+  /**
+   * Called when we're about to begin an HTML open tag (before the tag name).
+   * Note: This is only called for HTML mode tags and can be used to track if you are in concise mode.
+   *
+   * @example
+   * 1╭─ <div>Hi</div>
+   *  ╰─ ╰─ openTagStart
+   */
+  onOpenTagStart(range) {}
+
   /**
    * Called when a tag name, which can include placeholders, has been parsed.
    *
    * @example
    * 1╭─ <div/>
-   *  ╰─  ╰─ tagName "div"
+   *  ╰─  ╰─ openTagName "div"
    * 2╭─ <hello-${test}-again/>
-   *  │   │     │      ╰─ tagName.quasis[1] "-again"
-   *  │   │     ╰─ tagName.expressions[0] "${test}"
-   *  │   ├─ tagName.quasis[0] "hello-"
-   *  ╰─  ╰─ tagName "hello-${test}-again"
+   *  │   │     │      ╰─ openTagName.quasis[1] "-again"
+   *  │   │     ╰─ openTagName.expressions[0] "${test}"
+   *  │   ├─ openTagName.quasis[0] "hello-"
+   *  ╰─  ╰─ openTagName "hello-${test}-again"
    */
-  onTagName(range) {
-    range.concise; // true if this tag is a concise mode tag.
+  onOpenTagName(range) {
     range.quasis; // An array of ranges that indicate the string literal parts of the tag name.
     range.expressions; // A list of placeholder ranges (similar to whats emitted via onPlaceholder).
 
@@ -353,21 +362,38 @@ const parser = createParser({
    *  ╰─     ╰─ openTagEnd ">"
    */
   onOpenTagEnd(range) {
-    range.selfClosed; // true if this tag was self closed (onCloseTag would not be called if so).
+    range.selfClosed; // true if this tag was self closed (the onCloseTag* handlers will not be called if so).
   },
 
   /**
-   * Called once the closing tag (or in concise mode an outdent or eof) is parsed.
+   * Called when we start parsing and html closing tag.
+   * Note this is not emitted for concise, selfClosed, void or statement tags.
+   *
+   * @example
+   * 1╭─ <div><span/></div>
+   *  ╰─             ╰─ closeTagStart "</"
+   */
+  onCloseTagStart(range) {},
+
+  /**
+   * Called after the content within the brackets of an html closing tag has been parsed.
+   * Note this is not emitted for concise, selfClosed, void or statement tags.
+   *
+   * @example
+   * 1╭─ <div><span/></div>
+   *  ╰─               ╰─ closeTagName "div"
+   */
+  onCloseTagName(range) {},
+
+  /**
+   * Called once the closing tag has finished parsing, or in concise mode we hit an outdent or eof.
    * Note this is not called for selfClosed, void or statement tags.
    *
    * @example
    * 1╭─ <div><span/></div>
-   *  │              │ ╰─ closeTag(div).value "div"
-   *  ╰─             ╰─ closeTag(div) "</div>"
+   *  ╰─                  ╰─ closeTagEnd ">"
    */
-  onCloseTag(range) {
-    range.value; // The raw content of the closing tag (undefined in concise mode).
-  },
+  onCloseTagEnd(range) {},
 });
 ```
 

package/dist/core/Parser.d.ts

@@ -57,7 +57,7 @@ export declare class Parser {
      */
     beginHtmlBlock(delimiter: string | undefined, singleLine: boolean): void;
     emitError(range: number | Range, code: ErrorCode, message: string): void;
-    closeTag(start: number, end: number, value: Range | undefined): void;
+    closeTagEnd(start: number, end: number, name: Range | undefined): void;
     consumeWhitespaceIfBefore(str: string, start?: number): boolean;
     getPreviousNonWhitespaceCharCode(start?: number): number;
     onlyWhitespaceRemainsOnLine(start?: number): boolean;

package/dist/index.js

@@ -101,7 +101,7 @@ function htmlEOF() {
   this.endText();
   while (this.activeTag) {
     if (this.activeTag.concise) {
-      this.closeTag(this.pos, this.pos, void 0);
+      this.closeTagEnd(this.pos, this.pos, void 0);
     } else {
       return this.emitError(this.activeTag, 22 /* MISSING_END_TAG */, 'Missing ending "' + this.read(this.activeTag.tagName) + '" tag');
     }
@@ -231,17 +231,15 @@ var Parser = class {
     });
     this.pos = this.maxPos + 1;
   }
-  closeTag(start, end, value) {
-    var _a, _b;
+  closeTagEnd(start, end, name) {
+    var _a, _b, _c, _d;
     const { beginMixedMode, parentTag } = this.activeTag;
     if (beginMixedMode)
       this.endingMixedModeAtEOL = true;
     this.activeTag = parentTag;
-    (_b = (_a = this.options).onCloseTag) == null ? void 0 : _b.call(_a, {
-      start,
-      end,
-      value
-    });
+    if (name)
+      (_b = (_a = this.options).onCloseTagName) == null ? void 0 : _b.call(_a, name);
+    (_d = (_c = this.options).onCloseTagEnd) == null ? void 0 : _d.call(_c, { start, end });
   }
   consumeWhitespaceIfBefore(str, start = 0) {
     const { pos, data } = this;
@@ -729,6 +727,7 @@ var CLOSE_TAG = {
   }
 };
 function checkForClosingTag(parser) {
+  var _a, _b;
   const curPos = parser.pos + 1;
   let match = !!parser.lookAheadFor("/>");
   let skip = 3;
@@ -745,6 +744,10 @@ function checkForClosingTag(parser) {
   }
   if (match) {
     parser.endText();
+    (_b = (_a = parser.options).onCloseTagStart) == null ? void 0 : _b.call(_a, {
+      start: curPos - 1,
+      end: curPos + 1
+    });
     if (ensureExpectedCloseTag(parser, {
       start: parser.pos,
       end: parser.pos += skip
@@ -778,7 +781,7 @@ function ensureExpectedCloseTag(parser, closeTag) {
       }
     }
   }
-  parser.closeTag(closeTag.start, closeTag.end, closeTagNamePos);
+  parser.closeTagEnd(closeTagNameEnd, closeTag.end, closeTagNamePos);
   return true;
 }
 
@@ -805,7 +808,7 @@ var CONCISE_HTML_CONTENT = {
       const indentStart = this.pos - curIndent - 1;
       let parentTag = this.activeTag;
       while (parentTag && parentTag.indent.length >= curIndent) {
-        this.closeTag(indentStart, indentStart, void 0);
+        this.closeTagEnd(indentStart, indentStart, void 0);
         parentTag = this.activeTag;
       }
       if (!parentTag && curIndent) {
@@ -1210,6 +1213,7 @@ var HTML_CONTENT = {
   exit() {
   },
   char(code) {
+    var _a, _b, _c, _d;
     if (code === 60 /* OPEN_ANGLE_BRACKET */) {
       if (states_exports.checkForCDATA(this))
         return;
@@ -1226,17 +1230,41 @@ var HTML_CONTENT = {
         this.enterState(states_exports.DECLARATION);
         this.pos++;
       } else if (nextCode === 47 /* FORWARD_SLASH */) {
+        (_b = (_a = this.options).onCloseTagStart) == null ? void 0 : _b.call(_a, {
+          start: this.pos,
+          end: this.pos + 2
+        });
         this.enterState(states_exports.CLOSE_TAG);
         this.pos++;
       } else if (nextCode === 62 /* CLOSE_ANGLE_BRACKET */ || nextCode === 60 /* OPEN_ANGLE_BRACKET */ || isWhitespaceCode(nextCode)) {
         this.startText();
       } else {
+        (_d = (_c = this.options).onOpenTagStart) == null ? void 0 : _d.call(_c, {
+          start: this.pos,
+          end: this.pos + 1
+        });
         this.enterState(states_exports.OPEN_TAG);
       }
     } else if (code === 36 /* DOLLAR */ && isWhitespaceCode(this.lookAtCharCodeAhead(1)) && isBeginningOfLine(this)) {
       this.endText();
       this.enterState(states_exports.INLINE_SCRIPT);
       this.pos++;
+    } else if (code === 47 /* FORWARD_SLASH */) {
+      switch (this.lookAtCharCodeAhead(1)) {
+        case 47 /* FORWARD_SLASH */:
+          this.endText();
+          this.enterState(states_exports.JS_COMMENT_LINE);
+          this.pos++;
+          break;
+        case 42 /* ASTERISK */:
+          this.endText();
+          this.enterState(states_exports.JS_COMMENT_BLOCK);
+          this.pos++;
+          break;
+        default:
+          this.startText();
+          break;
+      }
     } else if (!states_exports.checkForPlaceholder(this, code)) {
       this.startText();
     }
@@ -1255,7 +1283,31 @@ var HTML_CONTENT = {
     }
   },
   eof: htmlEOF,
-  return() {
+  return(child) {
+    var _a, _b, _c, _d;
+    switch (child.state) {
+      case states_exports.JS_COMMENT_LINE:
+        (_b = (_a = this.options).onComment) == null ? void 0 : _b.call(_a, {
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2,
+            end: child.end
+          }
+        });
+        break;
+      case states_exports.JS_COMMENT_BLOCK: {
+        (_d = (_c = this.options).onComment) == null ? void 0 : _d.call(_c, {
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2,
+            end: child.end - 2
+          }
+        });
+        break;
+      }
+    }
   }
 };
 function isBeginningOfLine(parser) {
@@ -1632,12 +1684,11 @@ var TAG_NAME = {
         break;
       default: {
         const tag = this.activeTag;
-        const tagType = (_f = (_e = this.options).onTagName) == null ? void 0 : _f.call(_e, {
+        const tagType = (_f = (_e = this.options).onOpenTagName) == null ? void 0 : _f.call(_e, {
           start,
           end,
           quasis,
-          expressions,
-          concise: this.isConcise
+          expressions
         });
         tag.tagName = tagName;
         if (tagType) {
@@ -1922,10 +1973,17 @@ var OPEN_TAG = {
     if (code === 60 /* OPEN_ANGLE_BRACKET */) {
       return this.emitError(this.pos, 2 /* INVALID_ATTRIBUTE_NAME */, 'Invalid attribute name. Attribute name cannot begin with the "<" character.');
     }
-    if (code === 47 /* FORWARD_SLASH */ && this.lookAtCharCodeAhead(1) === 42 /* ASTERISK */) {
-      this.enterState(states_exports.JS_COMMENT_BLOCK);
-      this.pos++;
-      return;
+    if (code === 47 /* FORWARD_SLASH */) {
+      switch (this.lookAtCharCodeAhead(1)) {
+        case 47 /* FORWARD_SLASH */:
+          this.enterState(states_exports.JS_COMMENT_LINE);
+          this.pos++;
+          return;
+        case 42 /* ASTERISK */:
+          this.enterState(states_exports.JS_COMMENT_BLOCK);
+          this.pos++;
+          return;
+      }
     }
     if (isWhitespaceCode(code)) {
     } else if (code === 44 /* COMMA */) {

package/dist/index.mjs

@@ -80,7 +80,7 @@ function htmlEOF() {
   this.endText();
   while (this.activeTag) {
     if (this.activeTag.concise) {
-      this.closeTag(this.pos, this.pos, void 0);
+      this.closeTagEnd(this.pos, this.pos, void 0);
     } else {
       return this.emitError(this.activeTag, 22 /* MISSING_END_TAG */, 'Missing ending "' + this.read(this.activeTag.tagName) + '" tag');
     }
@@ -210,17 +210,15 @@ var Parser = class {
     });
     this.pos = this.maxPos + 1;
   }
-  closeTag(start, end, value) {
-    var _a, _b;
+  closeTagEnd(start, end, name) {
+    var _a, _b, _c, _d;
     const { beginMixedMode, parentTag } = this.activeTag;
     if (beginMixedMode)
       this.endingMixedModeAtEOL = true;
     this.activeTag = parentTag;
-    (_b = (_a = this.options).onCloseTag) == null ? void 0 : _b.call(_a, {
-      start,
-      end,
-      value
-    });
+    if (name)
+      (_b = (_a = this.options).onCloseTagName) == null ? void 0 : _b.call(_a, name);
+    (_d = (_c = this.options).onCloseTagEnd) == null ? void 0 : _d.call(_c, { start, end });
   }
   consumeWhitespaceIfBefore(str, start = 0) {
     const { pos, data } = this;
@@ -708,6 +706,7 @@ var CLOSE_TAG = {
   }
 };
 function checkForClosingTag(parser) {
+  var _a, _b;
   const curPos = parser.pos + 1;
   let match = !!parser.lookAheadFor("/>");
   let skip = 3;
@@ -724,6 +723,10 @@ function checkForClosingTag(parser) {
   }
   if (match) {
     parser.endText();
+    (_b = (_a = parser.options).onCloseTagStart) == null ? void 0 : _b.call(_a, {
+      start: curPos - 1,
+      end: curPos + 1
+    });
     if (ensureExpectedCloseTag(parser, {
       start: parser.pos,
       end: parser.pos += skip
@@ -757,7 +760,7 @@ function ensureExpectedCloseTag(parser, closeTag) {
       }
     }
   }
-  parser.closeTag(closeTag.start, closeTag.end, closeTagNamePos);
+  parser.closeTagEnd(closeTagNameEnd, closeTag.end, closeTagNamePos);
   return true;
 }
 
@@ -784,7 +787,7 @@ var CONCISE_HTML_CONTENT = {
       const indentStart = this.pos - curIndent - 1;
       let parentTag = this.activeTag;
       while (parentTag && parentTag.indent.length >= curIndent) {
-        this.closeTag(indentStart, indentStart, void 0);
+        this.closeTagEnd(indentStart, indentStart, void 0);
         parentTag = this.activeTag;
       }
       if (!parentTag && curIndent) {
@@ -1189,6 +1192,7 @@ var HTML_CONTENT = {
   exit() {
   },
   char(code) {
+    var _a, _b, _c, _d;
     if (code === 60 /* OPEN_ANGLE_BRACKET */) {
       if (states_exports.checkForCDATA(this))
         return;
@@ -1205,17 +1209,41 @@ var HTML_CONTENT = {
         this.enterState(states_exports.DECLARATION);
         this.pos++;
       } else if (nextCode === 47 /* FORWARD_SLASH */) {
+        (_b = (_a = this.options).onCloseTagStart) == null ? void 0 : _b.call(_a, {
+          start: this.pos,
+          end: this.pos + 2
+        });
         this.enterState(states_exports.CLOSE_TAG);
         this.pos++;
       } else if (nextCode === 62 /* CLOSE_ANGLE_BRACKET */ || nextCode === 60 /* OPEN_ANGLE_BRACKET */ || isWhitespaceCode(nextCode)) {
         this.startText();
       } else {
+        (_d = (_c = this.options).onOpenTagStart) == null ? void 0 : _d.call(_c, {
+          start: this.pos,
+          end: this.pos + 1
+        });
         this.enterState(states_exports.OPEN_TAG);
       }
     } else if (code === 36 /* DOLLAR */ && isWhitespaceCode(this.lookAtCharCodeAhead(1)) && isBeginningOfLine(this)) {
       this.endText();
       this.enterState(states_exports.INLINE_SCRIPT);
       this.pos++;
+    } else if (code === 47 /* FORWARD_SLASH */) {
+      switch (this.lookAtCharCodeAhead(1)) {
+        case 47 /* FORWARD_SLASH */:
+          this.endText();
+          this.enterState(states_exports.JS_COMMENT_LINE);
+          this.pos++;
+          break;
+        case 42 /* ASTERISK */:
+          this.endText();
+          this.enterState(states_exports.JS_COMMENT_BLOCK);
+          this.pos++;
+          break;
+        default:
+          this.startText();
+          break;
+      }
     } else if (!states_exports.checkForPlaceholder(this, code)) {
       this.startText();
     }
@@ -1234,7 +1262,31 @@ var HTML_CONTENT = {
     }
   },
   eof: htmlEOF,
-  return() {
+  return(child) {
+    var _a, _b, _c, _d;
+    switch (child.state) {
+      case states_exports.JS_COMMENT_LINE:
+        (_b = (_a = this.options).onComment) == null ? void 0 : _b.call(_a, {
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2,
+            end: child.end
+          }
+        });
+        break;
+      case states_exports.JS_COMMENT_BLOCK: {
+        (_d = (_c = this.options).onComment) == null ? void 0 : _d.call(_c, {
+          start: child.start,
+          end: child.end,
+          value: {
+            start: child.start + 2,
+            end: child.end - 2
+          }
+        });
+        break;
+      }
+    }
   }
 };
 function isBeginningOfLine(parser) {
@@ -1611,12 +1663,11 @@ var TAG_NAME = {
         break;
       default: {
         const tag = this.activeTag;
-        const tagType = (_f = (_e = this.options).onTagName) == null ? void 0 : _f.call(_e, {
+        const tagType = (_f = (_e = this.options).onOpenTagName) == null ? void 0 : _f.call(_e, {
           start,
           end,
           quasis,
-          expressions,
-          concise: this.isConcise
+          expressions
         });
         tag.tagName = tagName;
         if (tagType) {
@@ -1901,10 +1952,17 @@ var OPEN_TAG = {
     if (code === 60 /* OPEN_ANGLE_BRACKET */) {
       return this.emitError(this.pos, 2 /* INVALID_ATTRIBUTE_NAME */, 'Invalid attribute name. Attribute name cannot begin with the "<" character.');
     }
-    if (code === 47 /* FORWARD_SLASH */ && this.lookAtCharCodeAhead(1) === 42 /* ASTERISK */) {
-      this.enterState(states_exports.JS_COMMENT_BLOCK);
-      this.pos++;
-      return;
+    if (code === 47 /* FORWARD_SLASH */) {
+      switch (this.lookAtCharCodeAhead(1)) {
+        case 47 /* FORWARD_SLASH */:
+          this.enterState(states_exports.JS_COMMENT_LINE);
+          this.pos++;
+          return;
+        case 42 /* ASTERISK */:
+          this.enterState(states_exports.JS_COMMENT_BLOCK);
+          this.pos++;
+          return;
+      }
     }
     if (isWhitespaceCode(code)) {
     } else if (code === 44 /* COMMA */) {

package/dist/util/constants.d.ts

@@ -79,9 +79,6 @@ export declare namespace Ranges {
     interface Placeholder extends Value {
         escape: boolean;
     }
-    interface TagName extends Template {
-        concise: boolean;
-    }
     interface AttrValue extends Value {
         bound: boolean;
     }
@@ -92,9 +89,6 @@ export declare namespace Ranges {
     interface OpenTagEnd extends Range {
         selfClosed: boolean;
     }
-    interface CloseTag extends Range {
-        value: Range | undefined;
-    }
 }
 export declare enum ErrorCode {
     EXTRA_CLOSING_TAG = 0,
@@ -139,7 +133,8 @@ export interface ParserOptions {
     onDeclaration?(data: Ranges.Value): void;
     onDoctype?(data: Ranges.Value): void;
     onScriptlet?(data: Ranges.Scriptlet): void;
-    onTagName?(data: Ranges.TagName): TagType | void;
+    onOpenTagStart?(data: Range): void;
+    onOpenTagName?(data: Ranges.Template): TagType | void;
     onTagShorthandId?(data: Ranges.Template): void;
     onTagShorthandClass?(data: Ranges.Template): void;
     onTagVar?(data: Ranges.Value): void;
@@ -151,5 +146,7 @@ export interface ParserOptions {
     onAttrMethod?(data: Ranges.AttrMethod): void;
     onAttrSpread?(data: Ranges.Value): void;
     onOpenTagEnd?(data: Ranges.OpenTagEnd): void;
-    onCloseTag?(data: Ranges.CloseTag): void;
+    onCloseTagStart?(data: Range): void;
+    onCloseTagName?(data: Range): void;
+    onCloseTagEnd?(data: Range): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "htmljs-parser",
   "description": "An HTML parser recognizes content and string placeholders and allows JavaScript expressions as attribute values",
-  "version": "4.0.0",
+  "version": "5.0.2",
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.4",
     "@changesets/cli": "^2.22.0",