@reteps/tree-sitter-htmlmustache 0.5.0 → 0.5.2

package/README.md

@@ -244,9 +244,21 @@ Additionally, the following rules are configurable. Set their severities (`"erro
 | `duplicateAttributes` | `error` | Detects duplicate HTML attributes on the same element |
 | `unescapedEntities` | `warning` | Flags unescaped `&` and `>` characters in text content |
 | `preferMustacheComments` | `off` | Suggests replacing HTML comments with mustache comments |
+| `unrecognizedHtmlTags` | `error` | Flags HTML tags that are not standard HTML elements or valid custom elements |
 
 <!-- RULES_TABLE_END -->
 
+### Disabling Lint Rules
+
+Disable a configurable lint rule for an entire file with an inline comment:
+
+```html
+<!-- htmlmustache-disable preferMustacheComments -->
+{{! htmlmustache-disable selfClosingNonVoidTags }}
+```
+
+The comment can appear anywhere in the file. Only configurable rules (listed above) can be disabled. Use multiple comments to disable multiple rules.
+
 ### EditorConfig
 
 Both the CLI and VS Code extension respect your `.editorconfig` file for indentation settings (`indent_style`, `indent_size`). EditorConfig values override `.htmlmustache.jsonc` for indentation, and CLI flags override everything.

package/cli/out/main.js

@@ -581,6 +581,11 @@ var RULES = [
     name: "preferMustacheComments",
     defaultSeverity: "off",
     description: "Suggests replacing HTML comments with mustache comments"
+  },
+  {
+    name: "unrecognizedHtmlTags",
+    defaultSeverity: "error",
+    description: "Flags HTML tags that are not standard HTML elements or valid custom elements"
   }
 ];
 var KNOWN_RULE_NAMES = new Set(RULES.map((r) => r.name));
@@ -1361,6 +1366,165 @@ function checkHtmlComments(rootNode) {
   visit(rootNode);
   return errors;
 }
+var KNOWN_HTML_TAGS = /* @__PURE__ */ new Set([
+  // Void elements
+  "area",
+  "base",
+  "basefont",
+  "bgsound",
+  "br",
+  "col",
+  "command",
+  "embed",
+  "frame",
+  "hr",
+  "image",
+  "img",
+  "input",
+  "isindex",
+  "keygen",
+  "link",
+  "menuitem",
+  "meta",
+  "nextid",
+  "param",
+  "source",
+  "track",
+  "wbr",
+  // Non-void elements
+  "a",
+  "abbr",
+  "address",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "html",
+  "i",
+  "iframe",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "main",
+  "map",
+  "mark",
+  "math",
+  "menu",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "search",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "u",
+  "ul",
+  "var",
+  "video"
+]);
+function checkUnrecognizedHtmlTags(rootNode, customTagNames) {
+  const errors = [];
+  const customSet = customTagNames ? new Set(customTagNames.map((n) => n.toLowerCase())) : void 0;
+  function visit(node) {
+    if (node.type === "html_element" || node.type === "html_self_closing_tag") {
+      const tagNameNode = node.type === "html_self_closing_tag" ? node.children.find((c) => c.type === "html_tag_name") : node.children.find((c) => c.type === "html_start_tag")?.children.find((c) => c.type === "html_tag_name");
+      const tagName = tagNameNode?.text.toLowerCase();
+      if (tagName === "svg" || tagName === "math") return;
+    }
+    if (node.type === "html_start_tag" || node.type === "html_self_closing_tag") {
+      const tagNameNode = node.children.find((c) => c.type === "html_tag_name");
+      if (tagNameNode) {
+        const tagName = tagNameNode.text.toLowerCase();
+        if (!KNOWN_HTML_TAGS.has(tagName) && !customSet?.has(tagName)) {
+          errors.push({
+            node: tagNameNode,
+            message: `Unrecognized HTML tag: <${tagNameNode.text}>`
+          });
+        }
+      }
+      return;
+    }
+    for (const child of node.children) {
+      visit(child);
+    }
+  }
+  visit(rootNode);
+  return errors;
+}
 function checkDuplicateAttributes(rootNode) {
   const errors = [];
   function visit(node) {
@@ -1425,7 +1589,36 @@ function errorMessageForNode(nodeType, node) {
 function resolveRuleSeverity(rules, ruleName) {
   return rules?.[ruleName] ?? RULE_DEFAULTS[ruleName] ?? "off";
 }
-function collectErrors(tree, rules) {
+function parseDisableDirective(node) {
+  if (node.type !== "html_comment" && node.type !== "mustache_comment") return null;
+  let inner = null;
+  if (node.type === "html_comment") {
+    const match = node.text.match(/^<!--([\s\S]*)-->$/);
+    if (match) inner = match[1].trim();
+  } else {
+    const match = node.text.match(/^\{\{!([\s\S]*)\}\}$/);
+    if (match) inner = match[1].trim();
+  }
+  if (!inner) return null;
+  const prefix = "htmlmustache-disable ";
+  if (!inner.startsWith(prefix)) return null;
+  const ruleName = inner.slice(prefix.length).trim();
+  return KNOWN_RULE_NAMES.has(ruleName) ? ruleName : null;
+}
+function collectDisabledRules(rootNode) {
+  const disabled = /* @__PURE__ */ new Set();
+  function walk(node) {
+    const rule = parseDisableDirective(node);
+    if (rule) {
+      disabled.add(rule);
+      return;
+    }
+    for (const child of node.children) walk(child);
+  }
+  walk(rootNode);
+  return disabled;
+}
+function collectErrors(tree, rules, customTagNames) {
   const errors = [];
   const cursor = tree.walk();
   function visit() {
@@ -1454,6 +1647,11 @@ function collectErrors(tree, rules) {
   for (const error of unclosedErrors) {
     errors.push({ node: error.node, message: error.message });
   }
+  const disabledRules = collectDisabledRules(tree.rootNode);
+  const effectiveRules = { ...rules };
+  for (const rule of disabledRules) {
+    effectiveRules[rule] = "off";
+  }
   const sourceText = tree.rootNode.text;
   const ruleChecks = [
     { rule: "nestedDuplicateSections", errors: () => checkNestedSameNameSections(tree.rootNode) },
@@ -1462,10 +1660,11 @@ function collectErrors(tree, rules) {
     { rule: "selfClosingNonVoidTags", errors: () => checkSelfClosingNonVoidTags(tree.rootNode) },
     { rule: "duplicateAttributes", errors: () => checkDuplicateAttributes(tree.rootNode) },
     { rule: "unescapedEntities", errors: () => checkUnescapedEntities(tree.rootNode) },
-    { rule: "preferMustacheComments", errors: () => checkHtmlComments(tree.rootNode) }
+    { rule: "preferMustacheComments", errors: () => checkHtmlComments(tree.rootNode) },
+    { rule: "unrecognizedHtmlTags", errors: () => checkUnrecognizedHtmlTags(tree.rootNode, customTagNames) }
   ];
   for (const { rule, errors: getErrors } of ruleChecks) {
-    const severity = resolveRuleSeverity(rules, rule);
+    const severity = resolveRuleSeverity(effectiveRules, rule);
     if (severity === "off") continue;
     for (const error of getErrors()) {
       errors.push({
@@ -1477,12 +1676,14 @@ function collectErrors(tree, rules) {
       });
     }
   }
-  return errors;
+  return errors.filter(
+    (e) => !(e.message.includes("HTML comment found") && parseDisableDirective(e.node) !== null)
+  );
 }
 
 // cli/src/check.ts
-function collectErrors2(tree, file, rules) {
-  const errors = collectErrors(tree, rules);
+function collectErrors2(tree, file, rules, customTagNames) {
+  const errors = collectErrors(tree, rules, customTagNames);
   return errors.map((error) => ({
     file,
     line: error.node.startPosition.row + 1,
@@ -1666,12 +1867,13 @@ async function run(args) {
   const cwd = process.cwd();
   const errorOutput = [];
   const rules = config?.rules;
+  const customTagNames = config?.customTags?.map((t) => t.name);
   for (const file of files) {
     const displayPath = import_node_path.default.relative(cwd, file) || file;
     let source = import_node_fs.default.readFileSync(file, "utf-8");
     if (fixMode) {
       const tree2 = parseDocument(source);
-      const errors2 = collectErrors2(tree2, displayPath, rules);
+      const errors2 = collectErrors2(tree2, displayPath, rules, customTagNames);
       const fixed = applyFixes(source, errors2);
       if (fixed !== source) {
         import_node_fs.default.writeFileSync(file, fixed, "utf-8");
@@ -1679,7 +1881,7 @@ async function run(args) {
       }
     }
     const tree = parseDocument(source);
-    const errors = collectErrors2(tree, displayPath, rules);
+    const errors = collectErrors2(tree, displayPath, rules, customTagNames);
     const fileErrors = errors.filter((e) => e.severity !== "warning");
     const fileWarnings = errors.filter((e) => e.severity === "warning");
     if (errors.length > 0) {
@@ -2341,6 +2543,7 @@ function getCSSDisplay(node, customTags = EMPTY_MAP) {
       if (config) {
         if (config.display) return config.display;
         if (isCodeTag(config)) return "block";
+        return "inline-block";
       }
       return CSS_DISPLAY_MAP[lower] ?? "inline";
     }
@@ -2712,7 +2915,7 @@ function formatHtmlElement(node, context, forceInline = false) {
         parts.push(text(child.text));
       }
     }
-  } else if (!isBlock && (!hasHtmlElementChildren || forceInline && !contentNodes.some(
+  } else if (!isBlock && (!hasHtmlElementChildren || forceInline && display !== "inline-block" && !contentNodes.some(
     (child) => isRawContentElement(child) || isBlockLevel(child, tags)
   ))) {
     if (!forceInline && startTag && startTagHasAttributes(startTag)) {
@@ -3252,7 +3455,8 @@ function formatBlockChildren(nodes, context) {
       pendingBlankLine = false;
     } else if (node.type === "html_comment" || node.type === "mustache_comment") {
       const isMultiline = node.startPosition.row !== node.endPosition.row;
-      if (isMultiline) {
+      const isOnOwnLine = i > 0 && node.startPosition.row > nodes[i - 1].endPosition.row;
+      if (isMultiline || isOnOwnLine) {
         if (currentLine.length > 0) {
           const lineContent = trimDoc(flushCurrentLine());
           if (hasDocContent(lineContent)) {
@@ -3356,6 +3560,17 @@ function formatBlockChildren(nodes, context) {
         }
       }
     }
+    if (node.type === "html_element" && currentLine.length > 0) {
+      const tagName = getTagName(node);
+      if (tagName?.toLowerCase() === "br") {
+        const lineContent = trimDoc(flushCurrentLine());
+        if (hasDocContent(lineContent)) {
+          lines.push({ doc: lineContent, blankLineBefore: blankLineBeforeCurrentLine });
+          blankLineBeforeCurrentLine = false;
+        }
+        currentLine = [];
+      }
+    }
     lastNodeEnd = node.endIndex;
   }
   if (inIgnoreRegion && nodes.length > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reteps/tree-sitter-htmlmustache",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "HTML with Mustache/Handlebars template syntax grammar for tree-sitter",
   "repository": {
     "type": "git",