@hyperframes/producer 0.1.9 → 0.1.11

package/dist/index.js

@@ -99193,7 +99193,9 @@ var INVALID_SCRIPT_CLOSE_PATTERN = /<script[^>]*>[\s\S]*?<\s*\/\s*script(?!>)/i;
 var WINDOW_TIMELINE_ASSIGN_PATTERN = /window\.__timelines\[\s*["']([^"']+)["']\s*\]\s*=\s*([A-Za-z_$][\w$]*)/i;
 var META_GSAP_KEYS = /* @__PURE__ */ new Set(["duration", "ease", "repeat", "yoyo", "overwrite", "delay"]);
 function lintHyperframeHtml(html, options = {}) {
-  const source2 = html || "";
+  let source2 = html || "";
+  const templateMatch = source2.match(/<template[^>]*>([\s\S]*)<\/template>/i);
+  if (templateMatch?.[1]) source2 = templateMatch[1];
   const filePath = options.filePath;
   const findings = [];
   const seen = /* @__PURE__ */ new Set();
@@ -99550,18 +99552,20 @@ ${right2.raw}`)
   for (const tag of tags) {
     if (tag.name === "audio" || tag.name === "script" || tag.name === "style") continue;
     if (!readAttr(tag.raw, "data-start")) continue;
+    if (readAttr(tag.raw, "data-composition-id")) continue;
+    if (readAttr(tag.raw, "data-composition-src")) continue;
     const classAttr = readAttr(tag.raw, "class") || "";
     const styleAttr = readAttr(tag.raw, "style") || "";
     const hasClip = classAttr.split(/\s+/).includes("clip");
-    const hasHiddenStyle = /visibility\s*:\s*hidden/i.test(styleAttr);
+    const hasHiddenStyle = /visibility\s*:\s*hidden/i.test(styleAttr) || /opacity\s*:\s*0/i.test(styleAttr);
     if (!hasClip && !hasHiddenStyle) {
       const elementId = readAttr(tag.raw, "id") || void 0;
       pushFinding({
         code: "timed_element_missing_visibility_hidden",
-        severity: "warning",
-        message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> has data-start but no class="clip" or visibility:hidden. The framework needs elements to start hidden so it can manage their lifecycle.`,
+        severity: "info",
+        message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> has data-start but no class="clip", visibility:hidden, or opacity:0. Consider adding initial hidden state if the element should not be visible before its start time.`,
         elementId,
-        fixHint: 'Add class="clip" to the element (with CSS: .clip { visibility: hidden; }).',
+        fixHint: 'Add class="clip" (with CSS: .clip { visibility: hidden; }) or style="opacity:0" if the element should start hidden.',
         snippet: truncateSnippet(tag.raw)
       });
     }
@@ -99590,6 +99594,76 @@ ${right2.raw}`)
       });
     }
   }
+  for (const script of scripts) {
+    const templateLiteralSelectorPattern = /(?:querySelector|querySelectorAll)\s*\(\s*`[^`]*\$\{[^}]+\}[^`]*`\s*\)/g;
+    let tlMatch;
+    while ((tlMatch = templateLiteralSelectorPattern.exec(script.content)) !== null) {
+      pushFinding({
+        code: "template_literal_selector",
+        severity: "error",
+        message: "querySelector uses a template literal variable (e.g. `${compId}`). The HTML bundler's CSS parser crashes on these. Use a hardcoded string instead.",
+        file: filePath,
+        fixHint: "Replace the template literal variable with a hardcoded string. The bundler's CSS parser cannot handle interpolated variables in script content.",
+        snippet: truncateSnippet(tlMatch[0])
+      });
+    }
+  }
+  {
+    const cssTranslateSelectors = /* @__PURE__ */ new Map();
+    const cssScaleSelectors = /* @__PURE__ */ new Map();
+    for (const style of styles) {
+      for (const [, selector, body] of style.content.matchAll(
+        /([#.][a-zA-Z0-9_-]+)\s*\{([^}]+)\}/g
+      )) {
+        const tMatch = body?.match(/transform\s*:\s*([^;]+)/);
+        if (!tMatch || !tMatch[1]) continue;
+        const transformVal = tMatch[1].trim();
+        if (/translate/i.test(transformVal)) {
+          cssTranslateSelectors.set((selector ?? "").trim(), transformVal);
+        }
+        if (/scale/i.test(transformVal)) {
+          cssScaleSelectors.set((selector ?? "").trim(), transformVal);
+        }
+      }
+    }
+    if (cssTranslateSelectors.size > 0 || cssScaleSelectors.size > 0) {
+      for (const script of scripts) {
+        if (!/gsap\.timeline/.test(script.content)) continue;
+        const windows = extractGsapWindows(script.content);
+        const conflicts = /* @__PURE__ */ new Map();
+        for (const win of windows) {
+          if (win.method === "fromTo") continue;
+          const sel = win.targetSelector;
+          const cssKey = sel.startsWith("#") || sel.startsWith(".") ? sel : `#${sel}`;
+          const translateProps = win.properties.filter(
+            (p) => ["x", "y", "xPercent", "yPercent"].includes(p)
+          );
+          const scaleProps = win.properties.filter((p) => p === "scale");
+          const cssFromTranslate = translateProps.length > 0 ? cssTranslateSelectors.get(cssKey) : void 0;
+          const cssFromScale = scaleProps.length > 0 ? cssScaleSelectors.get(cssKey) : void 0;
+          if (!cssFromTranslate && !cssFromScale) continue;
+          const existing = conflicts.get(sel) ?? {
+            cssTransform: [cssFromTranslate, cssFromScale].filter(Boolean).join(" "),
+            props: /* @__PURE__ */ new Set(),
+            raw: win.raw
+          };
+          for (const p of [...translateProps, ...scaleProps]) existing.props.add(p);
+          conflicts.set(sel, existing);
+        }
+        for (const [sel, { cssTransform, props, raw: raw2 }] of conflicts) {
+          const propList = [...props].join("/");
+          pushFinding({
+            code: "gsap_css_transform_conflict",
+            severity: "warning",
+            message: `"${sel}" has CSS \`transform: ${cssTransform}\` and a GSAP tween animates ${propList}. GSAP will overwrite the full CSS transform, discarding any translateX(-50%) centering or CSS scale value.`,
+            selector: sel,
+            fixHint: `Remove the transform from CSS and use tl.fromTo('${sel}', { xPercent: -50, x: -1000 }, { xPercent: -50, x: 0 }) so GSAP owns the full transform state. tl.fromTo is exempt from this rule.`,
+            snippet: truncateSnippet(raw2)
+          });
+        }
+      }
+    }
+  }
   const errorCount = findings.filter((finding) => finding.severity === "error").length;
   const warningCount = findings.length - errorCount;
   return {
@@ -99733,6 +99807,7 @@ function extractGsapWindows(script) {
       end: animation.position + meta.effectiveDuration,
       properties: meta.properties.length > 0 ? meta.properties : Object.keys(animation.properties),
       overwriteAuto: meta.overwriteAuto,
+      method: match2[1] ?? "to",
       raw: raw2
     });
   }
@@ -106959,7 +107034,8 @@ function parseRenderOptions(body) {
   const debug6 = body.debug === true;
   const outputPath = typeof body.outputPath === "string" && body.outputPath.trim().length > 0 ? body.outputPath : typeof body.output === "string" && body.output.trim().length > 0 ? body.output : null;
   const entryFile = typeof body.entryFile === "string" && body.entryFile.trim().length > 0 ? body.entryFile.trim() : void 0;
-  return { outputPath, fps, quality, workers, useGpu, debug: debug6, entryFile };
+  const format3 = ["mp4", "webm"].includes(body.format) ? body.format : void 0;
+  return { outputPath, fps, quality, workers, useGpu, debug: debug6, entryFile, format: format3 };
 }
 async function prepareRenderBody(body) {
   const options = parseRenderOptions(body);
@@ -107127,6 +107203,7 @@ function createRenderHandlers(options = {}) {
     const job = createRenderJob({
       fps: input2.fps,
       quality: input2.quality,
+      format: input2.format,
       workers: input2.workers,
       useGpu: input2.useGpu,
       debug: input2.debug,
@@ -107230,6 +107307,7 @@ function createRenderHandlers(options = {}) {
       const job = createRenderJob({
         fps: input2.fps,
         quality: input2.quality,
+        format: input2.format,
         workers: input2.workers,
         useGpu: input2.useGpu,
         debug: input2.debug,