@hyperframes/lint 0.7.52 → 0.7.54

package/dist/browser.js

@@ -1,7 +1,5 @@
 // src/utils.ts
-var TAG_PATTERN = /<([a-z][\w:-]*)(\s[^<>]*?)?>/gi;
-var STYLE_BLOCK_PATTERN = /<style\b([^>]*)>([\s\S]*?)<\/style>/gi;
-var SCRIPT_BLOCK_PATTERN = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+import { Parser } from "htmlparser2";
 var COMPOSITION_ID_IN_CSS_PATTERN = /\[data-composition-id=["']([^"']+)["']\]/g;
 var TIMELINE_REGISTRY_INIT_PATTERN = /window\.__timelines\s*=\s*window\.__timelines\s*\|\|\s*\{\}|window\.__timelines\s*=\s*\{\}|window\.__timelines\s*\?\?=\s*\{\}/i;
 var TIMELINE_REGISTRY_OBJECT_LITERAL_PATTERN = /window\.__timelines\s*=\s*\{\s*(?:["'][^"']+["']|[A-Za-z_$][\w$]*)\s*:/i;
@@ -11,71 +9,69 @@ var INVALID_SCRIPT_CLOSE_PATTERN = /<script[^>]*>[\s\S]*?<\s*\/\s*script(?!>)/i;
 var TIMELINE_REGISTRY_KEY_PATTERN = /window\.__timelines(?:\[\s*["']([^"']+)["']\s*\]|\.\s*([A-Za-z_$][\w$]*))\s*=/g;
 var TIMELINE_REGISTRY_OBJECT_BODY_PATTERN = /window\.__timelines\s*=\s*\{([\s\S]*?)\}/i;
 var TIMELINE_REGISTRY_OBJECT_ENTRY_PATTERN = /(?:["']([^"']+)["']|([A-Za-z_$][\w$]*))\s*:\s*[A-Za-z_$][\w$]*/g;
-function extractOpenTags(source) {
+function parseHtmlStructure(source) {
   const tags = [];
-  let match;
-  const pattern = new RegExp(TAG_PATTERN.source, TAG_PATTERN.flags);
-  while ((match = pattern.exec(source)) !== null) {
-    const raw = match[0];
-    if (raw.startsWith("</") || raw.startsWith("<!")) continue;
-    tags.push({
-      raw,
-      name: (match[1] || "").toLowerCase(),
-      attrs: match[2] || "",
-      index: match.index
-    });
-  }
-  return tags;
-}
-function extractBlocks(source, pattern) {
-  const blocks = [];
-  let match;
-  const p = new RegExp(pattern.source, pattern.flags);
-  while ((match = p.exec(source)) !== null) {
-    blocks.push({
-      attrs: match[1] || "",
-      content: match[2] || "",
-      raw: match[0],
-      index: match.index
-    });
-  }
-  return blocks;
+  const blocks = { script: [], style: [] };
+  const openTagsByName = /* @__PURE__ */ new Map();
+  const openBlocks = [];
+  const parser = new Parser(
+    {
+      onopentag(name) {
+        const index = parser.startIndex;
+        const raw = source.slice(index, parser.endIndex + 1);
+        const attrs = raw.slice(name.length + 1, -1).replace(/\s*\/$/, "");
+        const tag = { raw, name, attrs, index };
+        tags.push(tag);
+        const sameNameStack = openTagsByName.get(name) ?? [];
+        sameNameStack.push(tag);
+        openTagsByName.set(name, sameNameStack);
+        if (name === "script" || name === "style") {
+          openBlocks.push({ name, attrs, contentStart: parser.endIndex + 1, index });
+        }
+      },
+      onclosetag(name) {
+        const tag = openTagsByName.get(name)?.pop();
+        if (tag) {
+          tag.closeIndex = parser.startIndex;
+          tag.endIndex = parser.endIndex + 1;
+        }
+        if (name !== "script" && name !== "style") return;
+        const block = openBlocks.pop();
+        if (!block || block.name !== name) return;
+        blocks[name].push({
+          attrs: block.attrs,
+          content: source.slice(block.contentStart, parser.startIndex),
+          raw: source.slice(block.index, parser.endIndex + 1),
+          index: block.index
+        });
+      }
+    },
+    { decodeEntities: false, lowerCaseAttributeNames: false, lowerCaseTags: true }
+  );
+  parser.end(source);
+  return { tags, scripts: blocks.script, styles: blocks.style };
 }
-function findHtmlTag(source) {
-  const match = /<html\b([^<>]*)>/i.exec(source);
-  if (!match) return null;
-  return {
-    raw: match[0],
-    name: "html",
-    attrs: match[1] ?? "",
-    index: match.index
-  };
+function findHtmlTag(tags) {
+  return tags.find((tag) => tag.name === "html") ?? null;
 }
-function findRootTag(source) {
-  const bodyOpenMatch = /<body\b([^>]*)>/i.exec(source);
-  const bodyCloseMatch = /<\/body>/i.exec(source);
-  if (bodyOpenMatch && (readAttr(bodyOpenMatch[0], "data-composition-id") || readAttr(bodyOpenMatch[0], "data-width") || readAttr(bodyOpenMatch[0], "data-height"))) {
-    return {
-      raw: bodyOpenMatch[0],
-      name: "body",
-      attrs: bodyOpenMatch[1] ?? "",
-      index: bodyOpenMatch.index
-    };
+function findRootTag(source, parsedTags) {
+  const tags = parsedTags ?? parseHtmlStructure(source).tags;
+  const bodyTag = tags.find((tag) => tag.name === "body");
+  if (bodyTag && (readAttr(bodyTag.raw, "data-composition-id") || readAttr(bodyTag.raw, "data-width") || readAttr(bodyTag.raw, "data-height"))) {
+    return bodyTag;
   }
-  const bodyStart = bodyOpenMatch ? bodyOpenMatch.index + bodyOpenMatch[0].length : 0;
-  const bodyEnd = bodyOpenMatch && bodyCloseMatch && bodyCloseMatch.index > bodyStart ? bodyCloseMatch.index : source.length;
-  const bodyContent = bodyOpenMatch ? source.slice(bodyStart, bodyEnd) : source;
-  const bodyTags = extractOpenTags(bodyContent);
+  const bodyStart = bodyTag ? bodyTag.index + bodyTag.raw.length : 0;
+  const bodyEnd = bodyTag?.closeIndex ?? source.length;
+  const bodyTags = tags.filter((tag) => tag.index >= bodyStart && tag.index < bodyEnd);
   let skipBefore = -1;
   for (const tag of bodyTags) {
     if (tag.index < skipBefore) continue;
     if (["script", "style", "meta", "link", "title"].includes(tag.name)) continue;
     if (tag.name === "svg" && !readAttr(tag.raw, "data-composition-id") && !readAttr(tag.raw, "data-width") && !readAttr(tag.raw, "data-height")) {
-      const closeMatch = /<\/svg\s*>/i.exec(bodyContent.slice(tag.index));
-      skipBefore = closeMatch ? tag.index + closeMatch.index + closeMatch[0].length : Infinity;
+      skipBefore = tag.endIndex ?? Infinity;
       continue;
     }
-    return { ...tag, index: tag.index + bodyStart };
+    return tag;
   }
   return null;
 }
@@ -246,15 +242,24 @@ function truncateSnippet(value, maxLength = 220) {
 function buildLintContext(html, options = {}) {
   const rawSource = html || "";
   let source = stripHtmlComments(rawSource);
-  const sourceWithoutTemplates = source.replace(
-    /<template\b[^>]*>[\s\S]*?<\/template(?:\s[^>]*)?>/gi,
-    " "
+  const initialStructure = parseHtmlStructure(source);
+  const templateTags = initialStructure.tags.filter(
+    (tag) => tag.name === "template" && tag.closeIndex != null
   );
-  const templateMatch = source.match(/<template[^>]*>([\s\S]*)<\/template>/i);
-  if (templateMatch?.[1] && !findRootTag(sourceWithoutTemplates)) source = templateMatch[1];
-  const tags = extractOpenTags(source);
+  let sourceWithoutTemplates = source;
+  for (const template2 of [...templateTags].reverse()) {
+    const end = template2.endIndex ?? template2.index;
+    sourceWithoutTemplates = sourceWithoutTemplates.slice(0, template2.index) + " ".repeat(end - template2.index) + sourceWithoutTemplates.slice(end);
+  }
+  const template = templateTags[0];
+  let structure = initialStructure;
+  if (template && !findRootTag(sourceWithoutTemplates)) {
+    source = source.slice(template.index + template.raw.length, template.closeIndex);
+    structure = parseHtmlStructure(source);
+  }
+  const tags = structure.tags;
   const styles = [
-    ...extractBlocks(source, STYLE_BLOCK_PATTERN),
+    ...structure.styles,
     ...(options.externalStyles ?? []).map((style) => ({
       attrs: `href="${style.href}"`,
       content: style.content,
@@ -262,9 +267,9 @@ function buildLintContext(html, options = {}) {
       index: -1
     }))
   ];
-  const scripts = extractBlocks(source, SCRIPT_BLOCK_PATTERN);
+  const scripts = structure.scripts;
   const compositionIds = collectCompositionIds(tags);
-  const rootTag = findRootTag(source);
+  const rootTag = findRootTag(source, tags);
   const rootCompositionId = readAttr(rootTag?.raw || "", "data-composition-id");
   return {
     source,
@@ -403,6 +408,23 @@ function findVisibleMarkupCommentLeak(source) {
   return null;
 }
 var coreRules = [
+  // id_requires_css_escape
+  ({ tags }) => {
+    const findings = [];
+    for (const tag of tags) {
+      const id = readAttr(tag.raw, "id");
+      if (!id || !/^\d/.test(id)) continue;
+      findings.push({
+        code: "id_requires_css_escape",
+        severity: "warning",
+        message: `id="${id}" starts with a digit, so the common selector \`#${id}\` throws a SyntaxError in querySelector().`,
+        elementId: id,
+        fixHint: "Rename the id to start with a letter (recommended), or build selectors with `#${CSS.escape(id)}` at runtime.",
+        snippet: truncateSnippet(tag.raw)
+      });
+    }
+    return findings;
+  },
   // root_missing_composition_id + root_missing_dimensions
   ({ rootTag }) => {
     const findings = [];
@@ -457,10 +479,11 @@ var coreRules = [
     ];
   },
   // missing_timeline_registry + timeline_registry_missing_init
-  ({ source, rawSource, options }) => {
+  ({ source, rawSource, rootTag, options }) => {
     if (options.isSubComposition || rawSource.trimStart().toLowerCase().startsWith("<template")) {
       return [];
     }
+    if (/(?:^|\s)data-no-timeline(?=[\s=/]|$)/i.test(rootTag?.attrs || "")) return [];
     const findings = [];
     if (!TIMELINE_REGISTRY_INIT_PATTERN.test(source) && !TIMELINE_REGISTRY_ASSIGN_PATTERN.test(source) && !TIMELINE_REGISTRY_OBJECT_LITERAL_PATTERN.test(source)) {
       findings.push({
@@ -1981,18 +2004,19 @@ ${right.raw}`)
   async ({ styles, scripts, tags }) => {
     const findings = [];
     const cssOpacityZeroSelectors = /* @__PURE__ */ new Set();
+    const opacityExactlyZero = /opacity\s*:\s*0(?:\.0+)?\s*(?:;|$)/;
     for (const style of styles) {
       for (const [, selector, body] of style.content.matchAll(
         /([#.][a-zA-Z0-9_-]+)\s*\{([^}]+)\}/g
       )) {
-        if (body && /opacity\s*:\s*0\s*[;}]/.test(body)) {
+        if (body && opacityExactlyZero.test(body)) {
           cssOpacityZeroSelectors.add((selector ?? "").trim());
         }
       }
     }
     for (const tag of tags) {
       const inlineStyle = readAttr(tag.raw, "style");
-      if (!inlineStyle || !/opacity\s*:\s*0/.test(inlineStyle)) continue;
+      if (!inlineStyle || !opacityExactlyZero.test(inlineStyle)) continue;
       const id = readAttr(tag.raw, "id");
       const classes = readAttr(tag.raw, "class")?.split(/\s+/).filter(Boolean) ?? [];
       if (id) cssOpacityZeroSelectors.add(`#${id}`);
@@ -2460,21 +2484,20 @@ function collectDeclaredVariableIds(htmlTagRaw) {
   }
   return declared;
 }
-function collectAllDeclaredVariableIds(source) {
+function collectAllDeclaredVariableIds(tags) {
   const all = /* @__PURE__ */ new Set();
-  const tagRe = /<[a-zA-Z][^>]*\bdata-composition-variables\b[^>]*>/gi;
-  let match;
-  while ((match = tagRe.exec(source)) !== null) {
-    const ids = collectDeclaredVariableIds(match[0]);
+  for (const tag of tags) {
+    if (!readAttr(tag.raw, "data-composition-variables")) continue;
+    const ids = collectDeclaredVariableIds(tag.raw);
     if (ids === null) return null;
     for (const id of ids) all.add(id);
   }
   return all;
 }
-function declaredIdsForBindingCheck(source) {
-  const declared = collectAllDeclaredVariableIds(source);
+function declaredIdsForBindingCheck(tags) {
+  const declared = collectAllDeclaredVariableIds(tags);
   if (declared === null) return null;
-  if (declared.size === 0 && !findHtmlTag(source)) return null;
+  if (declared.size === 0 && !findHtmlTag(tags)) return null;
   return declared;
 }
 var compositionRules = [
@@ -2878,8 +2901,8 @@ var compositionRules = [
   // nothing, so a typo'd binding is invisible until a customer's override
   // does nothing. Skipped for fragment files (no <html>): their values come
   // from a host's data-variable-values, which this file can't see.
-  ({ source, tags }) => {
-    const declared = declaredIdsForBindingCheck(source);
+  ({ tags }) => {
+    const declared = declaredIdsForBindingCheck(tags);
     if (!declared) return [];
     const findings = [];
     for (const tag of tags) {
@@ -2904,8 +2927,8 @@ var compositionRules = [
   // catch them at lint time rather than wondering why their `getVariables()`
   // defaults aren't applied.
   // fallow-ignore-next-line complexity
-  ({ source }) => {
-    const htmlTag = findHtmlTag(source);
+  ({ tags }) => {
+    const htmlTag = findHtmlTag(tags);
     if (!htmlTag) return [];
     const raw = readJsonAttr(htmlTag.raw, "data-composition-variables");
     if (!raw) return [];
@@ -2978,8 +3001,8 @@ var compositionRules = [
   // fixed top-left-origin screenshot region, which RTL layout can shift the
   // actual content away from), only surfaces the already-confirmed footgun
   // before someone hits it blind.
-  ({ source }) => {
-    const htmlTag = findHtmlTag(source);
+  ({ tags }) => {
+    const htmlTag = findHtmlTag(tags);
     if (!htmlTag) return [];
     const dir = readAttr(htmlTag.raw, "dir");
     if (!dir) return [];
@@ -3671,11 +3694,8 @@ async function lintHyperframeHtml(html, options = {}) {
 }
 function extractMediaUrls(html) {
   const results = [];
-  const tagRe = /<(video|audio|img|source)\b[^>]*>/gi;
-  let match;
-  while ((match = tagRe.exec(html)) !== null) {
-    const tagName = (match[1] ?? "").toLowerCase();
-    const raw = match[0];
+  for (const { name: tagName, raw } of parseHtmlStructure(html).tags) {
+    if (!/^(?:video|audio|img|source)$/.test(tagName)) continue;
     const src = readAttr(raw, "src");
     if (!src) continue;
     if (/^https?:\/\//i.test(src)) {