@hyperframes/lint 0.7.22 → 0.7.24

package/dist/browser.js

@@ -222,8 +222,12 @@ 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 templateMatch = source.match(/<template[^>]*>([\s\S]*)<\/template>/i);
-  if (templateMatch?.[1]) source = templateMatch[1];
+  if (templateMatch?.[1] && !findRootTag(sourceWithoutTemplates)) source = templateMatch[1];
   const tags = extractOpenTags(source);
   const styles = [
     ...extractBlocks(source, STYLE_BLOCK_PATTERN),
@@ -294,6 +298,8 @@ var STRAY_HEAD_CLOSE_PATTERN = /<\/(?:style|script)(?:\s[^>]*)?>/i;
 var MARKDOWN_CODE_FENCE_PATTERN = /```[^\r\n`]*(?:\r?\n|$)[\s\S]*?```/i;
 var ORPHAN_CSS_AT_RULE_PATTERN = /(?:^|\s)@(?:container|font-face|keyframes|layer|media|page|property|scope|supports)[^{<]*\{[\s\S]*?:[\s\S]*?\}/i;
 var ORPHAN_CSS_RULE_PATTERN = /(?:^|\s)(?:\/\*[\s\S]*?\*\/\s*)?(?:@[a-z-]+[^{}<]*|[.#][\w-]+[^{}<]*|[a-z][\w-]*(?:\s+[.#:[\w-][^{}<]*)?)\s*\{[^{}]*:[^{}]*\}/i;
+var VISIBLE_MARKUP_COMMENT_PATTERN = /\/\*[\s\S]*?\*\//g;
+var VISIBLE_MARKUP_COMMENT_PROTECTED_BLOCK_PATTERN = /<(style|script|template|title|noscript|pre|code|textarea|text)\b[^>]*>[\s\S]*?<\/\1(?:\s[^>]*)?>/gi;
 function findCodeFenceLeak(headWithoutValidBlocks) {
   return MARKDOWN_CODE_FENCE_PATTERN.exec(headWithoutValidBlocks)?.[0] ?? null;
 }
@@ -332,6 +338,46 @@ function findLeakedTextBeforeCompositionRoot(source, rootTag) {
   if (prefixEnd <= prefixStart) return null;
   return findLeakedTextInHeadContent(source.slice(prefixStart, prefixEnd));
 }
+function findProtectedVisibleMarkupRanges(source) {
+  const ranges = [];
+  for (const match of source.matchAll(VISIBLE_MARKUP_COMMENT_PROTECTED_BLOCK_PATTERN)) {
+    ranges.push({ start: match.index, end: match.index + match[0].length });
+  }
+  return ranges;
+}
+function isInsideSourceRange(index, ranges) {
+  return ranges.some((range) => range.start <= index && index < range.end);
+}
+function isInsideHtmlTag(source, index) {
+  let inTag = false;
+  let quote = null;
+  for (let i = 0; i < index; i++) {
+    const char = source[i];
+    if (!inTag) {
+      if (char === "<") inTag = true;
+      continue;
+    }
+    if (quote) {
+      if (char === quote) quote = null;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+    } else if (char === ">") {
+      inTag = false;
+    }
+  }
+  return inTag;
+}
+function findVisibleMarkupCommentLeak(source) {
+  const protectedRanges = findProtectedVisibleMarkupRanges(source);
+  for (const match of source.matchAll(VISIBLE_MARKUP_COMMENT_PATTERN)) {
+    if (isInsideHtmlTag(source, match.index)) continue;
+    if (isInsideSourceRange(match.index, protectedRanges)) continue;
+    return match[0];
+  }
+  return null;
+}
 var coreRules = [
   // root_missing_composition_id + root_missing_dimensions
   ({ rootTag }) => {
@@ -372,6 +418,20 @@ var coreRules = [
       }
     ];
   },
+  // visible_markup_comment
+  ({ source }) => {
+    const snippet = findVisibleMarkupCommentLeak(source);
+    if (!snippet) return [];
+    return [
+      {
+        code: "visible_markup_comment",
+        severity: "error",
+        message: "CSS/JS block comment syntax (`/* ... */`) appears in visible HTML markup. HTML only treats `<!-- ... -->` as comments, so this renders as on-screen text.",
+        fixHint: "Remove the text or convert it to a real HTML comment (`<!-- ... -->`). Keep CSS comments inside `<style>` and JS comments inside `<script>`.",
+        snippet: truncateSnippet(snippet)
+      }
+    ];
+  },
   // missing_timeline_registry + timeline_registry_missing_init
   ({ source, rawSource, options }) => {
     if (options.isSubComposition || rawSource.trimStart().toLowerCase().startsWith("<template")) {
@@ -2722,6 +2782,91 @@ var compositionRules = [
         snippet: truncateSnippet(rootTag.raw)
       }
     ];
+  },
+  // root_composition_missing_duration_source
+  //
+  // The render engine (packages/engine/src/services/frameCapture.ts) needs a
+  // positive window.__hf.duration to know how many frames to capture. GSAP
+  // timelines set this automatically. Non-GSAP runtimes (CSS, WAAPI, Lottie)
+  // are now auto-inferred by the runtime too (see
+  // packages/core/src/runtime/init.ts resolveAdapterDurationFloorSeconds and
+  // the adapters' getInferredDurationSeconds) — so data-duration is optional
+  // wherever the runtime can work it out on its own.
+  //
+  // This rule fires for cases where the total render length is not reliably
+  // determinable without an explicit data-duration:
+  //   - No GSAP timeline AND no data-duration AND no non-GSAP animation
+  //     signal at all (nothing for any adapter to discover — render fails).
+  //   - Three.js used with no data-duration (no discoverable AnimationClip
+  //     duration in this codebase's adapter — see adapters/three.ts).
+  //   - Any infinite CSS animation-iteration-count with no data-duration,
+  //     EVEN when a finite CSS animation is present alongside it. An unbounded
+  //     animation makes the intended total length ambiguous — the runtime will
+  //     infer a finite sibling's length if one exists, but that's a fallback,
+  //     not a declaration of intent, so we still require data-duration here.
+  //     (This is intentionally stricter than the runtime's own inference.)
+  // Purely finite CSS/WAAPI animations and Lottie are excluded — the runtime
+  // infers those unambiguously, so requiring data-duration there would be a
+  // false positive against the runtime's own auto-inference. Note lint is
+  // advisory by default (see shouldBlockRender) — it only blocks render under
+  // --strict/--strict-all — so a strict flag here nudges toward an explicit,
+  // guaranteed-correct value without failing renders that would succeed.
+  // fallow-ignore-next-line complexity
+  ({ rootTag, scripts, styles, tags, options }) => {
+    if (options.isSubComposition) return [];
+    if (!rootTag) return [];
+    if (readAttr(rootTag.raw, "data-composition-id") === null) return [];
+    if (readAttr(rootTag.raw, "data-duration") !== null) return [];
+    const allScriptTexts = scripts.map((s) => stripJsComments(s.content));
+    const hasGsapTimeline = allScriptTexts.some((t) => /gsap\.timeline\s*\(/.test(t));
+    const hasRegisteredTimeline = allScriptTexts.some(
+      (t) => WINDOW_TIMELINE_ASSIGN_PATTERN.test(t)
+    );
+    if (hasGsapTimeline && hasRegisteredTimeline) return [];
+    const allCss = styles.map((s) => s.content).join("\n");
+    const allInlineStyles = tags.map((t) => readAttr(t.raw, "style") || "").join("\n");
+    const combinedCss = `${allCss}
+${allInlineStyles}`.replace(/\/\*[\s\S]*?\*\//g, "");
+    const usesLottie = tags.some((t) => readAttr(t.raw, "data-lottie-src") !== null) || allScriptTexts.some((t) => /lottie\.(loadAnimation)\b|__hfLottie\b/.test(t));
+    const usesThree = allScriptTexts.some((t) => /\bTHREE\./.test(t));
+    const usesWaapi = allScriptTexts.some((t) => /\.animate\s*\(\s*[[{$A-Za-z_]/.test(t));
+    const hasCssAnimationName = /\banimation(?:-name)?\s*:/.test(combinedCss);
+    const hasInfiniteCssAnimation = /\banimation(?:-iteration-count)?\s*:[^;{}]*(?<![\w-])infinite(?![\w-])/.test(combinedCss);
+    const hasAnyNonGsapSignal = usesLottie || usesThree || usesWaapi || hasCssAnimationName;
+    if (!hasAnyNonGsapSignal) {
+      return [
+        {
+          code: "root_composition_missing_duration_source",
+          severity: "error",
+          message: 'Root composition has no data-duration, no GSAP timeline, and no CSS/WAAPI/Lottie/Three.js animation for the runtime to infer a duration from. The render engine cannot determine how long to capture and will fail with "Composition has zero duration".',
+          fixHint: 'Add data-duration="<seconds>" to the root element, or add a paused GSAP timeline registered on window.__timelines.',
+          snippet: truncateSnippet(rootTag.raw)
+        }
+      ];
+    }
+    if (usesThree) {
+      return [
+        {
+          code: "root_composition_missing_duration_source",
+          severity: "error",
+          message: `Root composition uses Three.js with no data-duration. The runtime cannot discover a Three.js scene's duration automatically (no AnimationClip/AnimationMixer inspection) \u2014 render will fail with "Composition has zero duration".`,
+          fixHint: 'Add data-duration="<seconds>" to the root element.',
+          snippet: truncateSnippet(rootTag.raw)
+        }
+      ];
+    }
+    if (hasInfiniteCssAnimation && !usesLottie && !usesWaapi) {
+      return [
+        {
+          code: "root_composition_missing_duration_source",
+          severity: "error",
+          message: 'Root composition uses a CSS animation with animation-iteration-count: infinite and no data-duration, so the intended total length is ambiguous. If a finite animation is also present the runtime infers that length; with no finite source the render fails with "Composition has zero duration". Declare the intended length explicitly.',
+          fixHint: 'Add data-duration="<seconds>" to the root element with the intended total length.',
+          snippet: truncateSnippet(rootTag.raw)
+        }
+      ];
+    }
+    return [];
   }
 ];